:root{--black:#0A0A0B;--white:#F3F2EE;--grey:#C9C8C3;--mute:#8E8D88;--red:#E0322B;--line:#232326}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--black)}
body{color:var(--white);font-family:Inter,system-ui,sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.ar{font-family:"IBM Plex Sans Arabic",sans-serif;direction:rtl}

/* background */
#bg{position:fixed;inset:0;z-index:0}
.spot{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,40%),rgba(255,255,255,.06),transparent 60%)}
.grain{position:fixed;inset:-50%;z-index:2;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}}
.frame{position:fixed;inset:18px;z-index:3;pointer-events:none}
.frame i{position:absolute;width:26px;height:26px;border-color:rgba(243,242,238,.35);border-style:solid;border-width:0}
.frame i:nth-child(1){left:0;top:0;border-left-width:1px;border-top-width:1px}
.frame i:nth-child(2){right:0;top:0;border-right-width:1px;border-top-width:1px}
.frame i:nth-child(3){left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.frame i:nth-child(4){right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}

/* layout */
.page{position:relative;z-index:4;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
header{display:flex;justify-content:space-between;align-items:center;padding:38px 48px 0;font-size:12px;letter-spacing:.32em;font-weight:600;color:var(--mute)}
.tally{display:inline-flex;align-items:center;gap:12px;color:var(--white)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(224,50,43,.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,50,43,.65)}70%{box-shadow:0 0 0 12px rgba(224,50,43,0)}100%{box-shadow:0 0 0 0 rgba(224,50,43,0)}}
header a:hover{color:var(--white)}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 24px 24px}
.stage{transform:translate3d(var(--px,0),var(--py,0),0);transition:transform .25s ease-out}

/* intro loop */
.intro{width:min(820px,94vw);aspect-ratio:2/1;position:relative;
  -webkit-mask:linear-gradient(180deg,transparent,#000 15%,#000 84%,transparent),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(180deg,transparent,#000 15%,#000 84%,transparent),linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.intro video{width:100%;height:100%;display:block;object-fit:cover;background:#0A0A0B}
/* logo animation */
.logo{width:min(680px,82vw);height:auto;display:block;overflow:visible}
.L{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:drop 1s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(.35s + var(--i)*.14s)}
.L .base{fill:var(--white)}
.shade{fill:var(--grey);transform:translate(-120px,0);opacity:0;animation:shade 1.1s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(1.05s + var(--i)*.12s)}
.shade.red{animation:shade 1.1s cubic-bezier(.2,.9,.2,1) forwards,tally 5s 2.2s infinite;animation-delay:calc(1.05s + var(--i)*.12s),2.4s}
@keyframes drop{0%{opacity:0;transform:translateY(40px) scaleY(.6);filter:blur(8px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none}}
@keyframes shade{to{transform:none;opacity:1}}
@keyframes tally{0%,100%{fill:var(--red)}2%{fill:#5a1512}4%{fill:var(--red)}6%{fill:#5a1512}8%{fill:var(--red)}}
.sweep{animation:sweep 6s 2.6s cubic-bezier(.5,0,.3,1) infinite}
@keyframes sweep{0%{transform:translateX(0)}35%,100%{transform:translateX(1400px)}}

.tag{margin-top:34px;font-size:clamp(11px,1.25vw,15px);font-weight:500;letter-spacing:.62em;margin-right:-.62em;min-height:1.4em;white-space:nowrap}
.tag .c{opacity:0;display:inline-block;animation:in .35s forwards}
.tag .cur{display:inline-block;width:2px;height:1em;background:var(--red);vertical-align:-2px;margin-left:4px;animation:blink .8s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.arname{position:relative;margin-top:calc(min(820px,94vw) * -0.06);font-size:clamp(15px,1.6vw,20px);font-weight:500;color:var(--grey);opacity:0;animation:in .8s 4.6s forwards}

.msg{margin-top:clamp(34px,6vh,64px);opacity:0;animation:in .9s 3.4s forwards}
.msg h1{font-size:clamp(26px,3.6vw,46px);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.msg h1 em{font-style:normal;color:var(--red)}
.msg .ar{display:block;margin-top:10px;font-size:clamp(18px,2.1vw,26px);font-weight:500;color:var(--grey)}

.render{width:min(460px,86vw);margin:30px auto 0;opacity:0;animation:in .9s 3.7s forwards}
.render .row{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.28em;font-weight:600;color:var(--mute)}
.render .row b{color:var(--white);font-weight:600}
.bar{margin-top:10px;height:3px;background:var(--line);border-radius:3px;overflow:hidden;position:relative}
.bar span{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);box-shadow:0 0 14px var(--red);transition:width .6s ease}

.cta{margin-top:34px;display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border:1px solid rgba(243,242,238,.22);border-radius:999px;
  font-size:15px;font-weight:500;letter-spacing:.04em;position:relative;overflow:hidden;opacity:0;animation:in .9s 4s forwards;transition:border-color .3s,color .3s}
.cta:before{content:"";position:absolute;inset:0;background:var(--white);transform:translateY(101%);transition:transform .45s cubic-bezier(.2,.9,.2,1);z-index:-1}
.cta:hover{color:var(--black);border-color:var(--white)}
.cta:hover:before{transform:none}
.cta .dot{width:7px;height:7px;animation:none}

/* timeline */
.tl{position:relative;height:150px;margin:0 48px 40px;border-top:1px solid var(--line);opacity:0;animation:in 1s 1.6s forwards;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.ruler{height:22px;position:relative;overflow:hidden}
.track{height:34px;margin-top:6px;position:relative;overflow:hidden}
.strip{position:absolute;left:0;top:0;height:100%;display:flex;gap:6px;will-change:transform;animation:roll linear infinite}
@keyframes roll{to{transform:translateX(-50%)}}
.ruler .strip{gap:0;animation-duration:30s}
.ruler .tick{width:60px;flex:none;border-left:1px solid #2E2E32;height:10px;margin-top:12px;position:relative}
.ruler .tick:after{content:"";position:absolute;left:29px;top:5px;height:5px;border-left:1px solid #26262A}
.clip{flex:none;height:100%;border-radius:4px;display:flex;align-items:center;padding:0 12px;font-size:10px;letter-spacing:.26em;font-weight:600;white-space:nowrap;overflow:hidden}
.v1 .clip{background:linear-gradient(180deg,#2B2B30,#1E1E22);color:#B5B4AF;border:1px solid #34343A}
.v1 .clip.hot{background:linear-gradient(180deg,#3A1615,#2A1110);border-color:#5A1F1C;color:#F0B4B0}
.v2 .clip{background:#17171A;border:1px solid #2A2A2E;color:#6F6E6A}
.v1 .strip{animation-duration:30s}.v2 .strip{animation-duration:30s}
canvas#wave{position:absolute;left:0;top:0;width:100%;height:100%}
.head{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--red);box-shadow:0 0 12px rgba(224,50,43,.8);z-index:5}
.head:before{content:"";position:absolute;left:-7px;top:0;border:8px solid transparent;border-top:10px solid var(--red)}
.tc{position:absolute;left:50%;top:-1px;transform:translateX(14px);font-size:11px;letter-spacing:.2em;font-weight:600;color:var(--white);z-index:6;font-variant-numeric:tabular-nums}

footer{display:flex;justify-content:space-between;padding:0 48px 34px;font-size:11px;letter-spacing:.28em;color:var(--mute);font-weight:600;margin-top:-26px}

@media (max-width:760px){
  header{padding:30px 26px 0;font-size:10px}
  header .mail{display:none}
  .frame{inset:10px}
  .tl{margin:0 18px 30px;height:126px}
  footer{padding:0 26px 26px;justify-content:center;margin-top:-14px;font-size:10px}
  footer span:first-child{display:none}
  .msg h1 em{display:block}
  .tag{letter-spacing:.42em;margin-right:-.42em}
  .cta{font-size:14px;padding:14px 22px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01s!important;animation-iteration-count:1!important;animation-delay:0s!important;transition:none!important}
}