/* ==========================================================================
   Motion layer: hero entrance, bento pop-in, video tile, player.
   Everything here is switched off by "Reduced motion" (system or in-page setting).
   ========================================================================== */

/* hero entrance */
.stagger{display:inline-block;opacity:0;transform:translateY(26px);filter:blur(6px)}
.hero h1 .line{display:inline-block}
.ready .stagger{animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 90ms + var(--d0,0ms))}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
.hero .lede.stagger,.hero .cta.stagger{display:block}
.hero .cta.stagger{display:flex}
.pop{opacity:0;transform:translateY(30px) scale(.96)}
.ready .pop{animation:popIn .8s cubic-bezier(.2,1,.3,1) forwards;animation-delay:calc(var(--i) * 70ms + 500ms + var(--d0,0ms))}
@keyframes popIn{to{opacity:1;transform:none}}
.spark{stroke-dasharray:320;stroke-dashoffset:320}
.ready .spark{animation:draw 1.6s 1.2s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* starfield canvas */
.stars{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.7}

/* magnetic buttons */
.magnet{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s,color .25s}
:root[dir="rtl"] .flip-rtl{transform:scaleX(-1)}

/* video tile */
.t-video{grid-column:span 4;grid-row:span 2;padding:0;border:0;text-align:start;color:#fff;background:#16121f;cursor:pointer}
.t-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.t-video:hover img{transform:scale(1.05)}
.t-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgb(15 10 30 / .85))}
.t-video .play{position:absolute;inset-inline-start:50%;top:42%;translate:-50% -50%;z-index:2;width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:rgb(255 255 255 / .92);color:#6d4aff;box-shadow:0 0 0 0 rgb(255 255 255 / .5);animation:pulsePlay 2.4s infinite}
:root[dir="rtl"] .t-video .play{translate:50% -50%}
.t-video .play svg{width:28px;height:28px;margin-inline-start:4px}
:root[dir="rtl"] .t-video .play svg{transform:scaleX(-1);margin-inline-start:0;margin-inline-end:4px}
@keyframes pulsePlay{70%{box-shadow:0 0 0 18px rgb(255 255 255 / 0)}100%{box-shadow:0 0 0 0 rgb(255 255 255 / 0)}}
.t-video .vlabel{position:absolute;inset-inline:18px;bottom:16px;z-index:2;display:grid}
.t-video .vlabel b{font-size:1.1rem}
.t-video .vlabel span{font-size:.82rem;opacity:.8}
@media (max-width:1020px){.t-video{grid-column:span 6;min-height:260px}}
@media (max-width:640px){.t-video{grid-column:span 2;min-height:220px}}

/* bento layout with the video tile (12 cols) */
@media (min-width:1021px){
  .t-photo{grid-column:span 4;grid-row:span 3}
  .t-years{grid-column:span 3;grid-row:span 2}
  .t-now{grid-column:span 5;grid-row:span 2}
  .t-video{grid-column:span 4;grid-row:span 2}
  .t-clock{grid-column:span 4;grid-row:span 1}
  .t-code{grid-column:span 5;grid-row:span 2}
  .t-stack{grid-column:span 3;grid-row:span 1}
  .t-a11y{grid-column:span 4;grid-row:span 1}
}

/* video player */
.player{padding:10px;max-width:980px;margin-inline:auto;border-radius:28px;background:linear-gradient(135deg,var(--accent-2),var(--pink),var(--accent));box-shadow:var(--shadow-lg)}
.player video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:20px;background:#16121f}
.player video::cue{background:rgb(15 10 30 / .8);color:#fff;font-family:var(--font);font-size:1rem}
:root[data-contrast="yellow"] .player{background:#ff0}

/* reduced motion: show everything immediately */
:root[data-motion="reduced"] .stagger,:root[data-motion="reduced"] .pop{opacity:1;transform:none;filter:none}
:root[data-motion="reduced"] .spark{stroke-dashoffset:0}
:root[data-motion="reduced"] .stars{display:none}
@media (prefers-reduced-motion:reduce){
  :root:not([data-motion="full"]) .stagger,:root:not([data-motion="full"]) .pop{opacity:1;transform:none;filter:none}
  :root:not([data-motion="full"]) .spark{stroke-dashoffset:0}
  :root:not([data-motion="full"]) .stars{display:none}
}
.no-js .stagger,.no-js .pop{opacity:1;transform:none;filter:none}
:root[data-contrast="yellow"] .stars,:root[data-contrast="yellow"] .t-video::after{display:none}

/* ───────── theme switch: View Transitions reveal (ported from mashroo3hub) ─────────
   New theme grows as a soft-edged circle from the click point; the old view
   dims ("dusk") or brightens ("dawn") behind it. Other preference changes fade. */
@property --vt-r{syntax:'<length>';inherits:false;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
html[data-vt="reveal"]::view-transition-old(root){animation:vt-recede .9s cubic-bezier(.16,1,.3,1) both;transform-origin:var(--vt-x,50%) var(--vt-y,0%)}
html[data-vt="reveal"][data-vt-to="dark"]::view-transition-old(root){animation-name:vt-dusk}
html[data-vt="reveal"][data-vt-to="light"]::view-transition-old(root){animation-name:vt-dawn}
html[data-vt="reveal"]::view-transition-new(root){
  animation:vt-reveal .9s cubic-bezier(.65,0,.2,1) both,vt-settle .9s cubic-bezier(.16,1,.3,1) both;
  transform-origin:var(--vt-x,50%) var(--vt-y,0%);mix-blend-mode:normal;
  -webkit-mask-image:radial-gradient(circle at var(--vt-x,50%) var(--vt-y,0%),#000 calc(var(--vt-r) - 90px),transparent var(--vt-r));
  mask-image:radial-gradient(circle at var(--vt-x,50%) var(--vt-y,0%),#000 calc(var(--vt-r) - 90px),transparent var(--vt-r))}
@keyframes vt-reveal{from{--vt-r:0px}to{--vt-r:170vmax}}
@keyframes vt-settle{from{scale:1.015}}
@keyframes vt-dusk{to{scale:.975;filter:brightness(.62) saturate(.85)}}
@keyframes vt-dawn{to{scale:1.02;filter:brightness(1.25) saturate(1.1) blur(1px)}}
@keyframes vt-recede{to{scale:.985;filter:brightness(.92)}}
html[data-vt="fade"]::view-transition-old(root){animation:vt-fade-out .36s ease-out both}
html[data-vt="fade"]::view-transition-new(root){animation:vt-fade-in .36s ease-out both}
@keyframes vt-fade-out{to{opacity:0}}
@keyframes vt-fade-in{from{opacity:0}}