/* ============================================================
   ASMU — CINEMATIC MOTION LAYER
   Purely additive. Every rule is scoped under html.cin (set by a
   tiny inline script only when JS runs AND the visitor has not
   asked for reduced motion), so with the layer off the site is
   pixel-identical to before. Compositor-friendly everywhere:
   transform + opacity only, no animated filters on large areas.
   ============================================================ */

/* ---------- Lenis (smooth scroll) base rules ---------- */
html.lenis, html.lenis body{height:auto;}
html.cin.lenis{scroll-behavior:auto !important;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}

/* ============================================================
   1 · CINEMATIC INTRO
   ============================================================ */
#cinIntro{display:none;}
html.cin-intro #cinIntro{
  display:block;position:fixed;inset:0;z-index:5000;overflow:hidden;
  pointer-events:all;contain:layout paint;
}
.cin-shutter{
  position:absolute;left:0;right:0;height:50.2%;background:var(--bg);
  will-change:transform;
}
.cin-shutter-t{top:0;}
.cin-shutter-b{bottom:0;}
.cin-shutter-t::after,.cin-shutter-b::after{
  content:"";position:absolute;left:0;right:0;height:1px;opacity:.9;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}
.cin-shutter-t::after{bottom:0;}
.cin-shutter-b::after{top:0;}
.cin-intro-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.cin-intro-stage{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;text-align:center;will-change:transform,opacity;
}
.cin-logo{
  display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,7vw,72px);letter-spacing:-.02em;color:var(--text);line-height:1;
}
.cin-logo-dot{
  width:.2em;height:.2em;border-radius:50%;background:var(--accent);flex-shrink:0;
  box-shadow:0 0 .35em var(--accent),0 0 1em var(--accent);
}
.cin-logo-word{display:inline-flex;overflow:hidden;padding:.1em .04em;margin:-.1em -.04em;}
.cin-logo-word .c{display:inline-block;will-change:transform,opacity;}
.cin-bar{width:min(220px,48vw);height:1px;background:var(--border-strong);position:relative;overflow:hidden;border-radius:2px;}
.cin-bar i{
  position:absolute;inset:0;opacity:0;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 10px var(--accent);
}
.cin-pct{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--text-faint);font-variant-numeric:tabular-nums;}

/* ============================================================
   2 · AMBIENT BACKGROUND — aurora + animated grid (fixed, behind content)
   ============================================================ */
.cin-bg{display:none;}
html.cin .cin-bg{
  display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;
  --au1:rgba(63,208,255,.20);--au2:rgba(47,191,135,.13);--au3:rgba(242,184,76,.11);
}
[data-theme="light"] .cin-bg{--au1:rgba(14,127,160,.12);--au2:rgba(47,191,135,.09);--au3:rgba(160,106,20,.07);}
.cin-aurora i{
  position:absolute;border-radius:50%;will-change:transform;
  width:78vmax;height:78vmax;
}
.cin-aurora i:nth-child(1){
  left:-24vmax;top:-34vmax;background:radial-gradient(closest-side,var(--au1),transparent 72%);
  animation:cin-au-1 26s ease-in-out infinite alternate;
}
.cin-aurora i:nth-child(2){
  right:-30vmax;top:8vmax;background:radial-gradient(closest-side,var(--au2),transparent 72%);
  animation:cin-au-2 32s ease-in-out infinite alternate;
}
.cin-aurora i:nth-child(3){
  left:6vmax;bottom:-46vmax;background:radial-gradient(closest-side,var(--au3),transparent 72%);
  animation:cin-au-3 38s ease-in-out infinite alternate;
}
@keyframes cin-au-1{0%{transform:translate3d(0,0,0) scale(1);}100%{transform:translate3d(14vmax,10vmax,0) scale(1.18);}}
@keyframes cin-au-2{0%{transform:translate3d(0,0,0) scale(1.1);}100%{transform:translate3d(-16vmax,8vmax,0) scale(.92);}}
@keyframes cin-au-3{0%{transform:translate3d(0,0,0) scale(.95);}100%{transform:translate3d(12vmax,-12vmax,0) scale(1.15);}}

.cin-grid{
  position:absolute;left:-64px;right:-64px;top:-64px;bottom:-64px;opacity:.9;will-change:transform;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 28%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 28%,#000 0%,transparent 78%);
  animation:cin-grid-drift 22s linear infinite;
}
[data-theme="light"] .cin-grid{
  background-image:
    linear-gradient(rgba(15,23,42,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(15,23,42,.05) 1px,transparent 1px);
}
@keyframes cin-grid-drift{from{transform:translate3d(0,0,0);}to{transform:translate3d(64px,64px,0);}}
.cin-scan{
  position:absolute;left:0;right:0;top:0;height:220px;opacity:.55;will-change:transform;
  background:linear-gradient(180deg,transparent,rgba(63,208,255,.07) 55%,rgba(63,208,255,.16) 99%,transparent);
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 50% 50%,#000,transparent 82%);
  mask-image:radial-gradient(ellipse 80% 100% at 50% 50%,#000,transparent 82%);
  animation:cin-scan 11s cubic-bezier(.45,0,.25,1) infinite;
}
[data-theme="light"] .cin-scan{opacity:.3;}
@keyframes cin-scan{0%{transform:translate3d(0,-240px,0);}100%{transform:translate3d(0,110vh,0);}}

/* WebGL particle canvas — above content but inert, additive & dim */
.cin-gl{
  position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease;
}
.cin-gl.on{opacity:1;}
html.cin.cin-gl-active #heroCanvas{opacity:0;transition:opacity .8s;}

/* ---------- hero-only layers ---------- */
html.cin .hero-field{contain:paint;}
.cin-hero-light{
  position:absolute;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(63,208,255,.17),transparent 70%);
  pointer-events:none;opacity:0;transition:opacity .6s;will-change:transform;
}
[data-theme="light"] .cin-hero-light{background:radial-gradient(closest-side,rgba(14,127,160,.12),transparent 70%);}
html.cin .hero-field.pointer-in .cin-hero-light{opacity:1;}
.cin-hero-grid{
  position:absolute;inset:-64px;pointer-events:none;will-change:transform;opacity:.7;
  background-image:
    linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 30% 42%,#000,transparent 80%);
  mask-image:radial-gradient(ellipse 55% 60% at 30% 42%,#000,transparent 80%);
  animation:cin-grid-drift 26s linear infinite reverse;
}

/* ============================================================
   3 · TEXT — letter-by-letter
   ============================================================ */
.cin-word{
  display:inline-block;white-space:nowrap;vertical-align:top;
  overflow:hidden;padding:.14em .04em .18em;margin:-.14em -.04em -.18em;
}
.cin-ch{display:inline-block;will-change:transform,opacity;}
html.cin [data-cin-chars]:not(.cin-in) .cin-ch{opacity:0;}
.cin-gchar{
  background-image:linear-gradient(120deg,var(--accent),var(--accent-2));
  background-repeat:no-repeat;
  background-size:var(--gw,100px) 100%;
  background-position:calc(var(--gx,0px) * -1) 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero-name.cin-split .accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;}
.cin-num{font-variant-numeric:tabular-nums;}

/* ============================================================
   4 · CUSTOM CURSOR (fine pointers only — class set by JS)
   ============================================================ */
.cin-cursor{display:none;}
html.cin-cursor-on .cin-cursor{display:block;}
.cin-c-dot,.cin-c-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:6000;will-change:transform;opacity:0;transition:opacity .35s;}
html.cin-cursor-live .cin-c-dot,html.cin-cursor-live .cin-c-ring{opacity:1;}
.cin-c-dot i{
  display:block;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 12px var(--accent);transition:transform .25s var(--ease),opacity .25s;
}
.cin-c-ring i{
  display:block;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  background:transparent;
  transition:transform .4s var(--ease),background-color .3s,border-color .3s,opacity .3s;
}
html.cin-hover .cin-c-ring i{transform:scale(1.55);background:var(--accent-soft);border-color:var(--accent);}
html.cin-hover .cin-c-dot i{transform:scale(.5);}
html.cin-hover-lg .cin-c-ring i{transform:scale(2.2);background:color-mix(in srgb,var(--accent) 7%,transparent);}
html.cin-down .cin-c-ring i{transform:scale(.72);}
html.cin-hover.cin-down .cin-c-ring i{transform:scale(1.2);}
html.cin-text .cin-c-ring i,html.cin-text .cin-c-dot i{opacity:0;}
html.cin-cursor-on, html.cin-cursor-on body,
html.cin-cursor-on a, html.cin-cursor-on button, html.cin-cursor-on summary,
html.cin-cursor-on [role="button"], html.cin-cursor-on label, html.cin-cursor-on select,
html.cin-cursor-on .btn, html.cin-cursor-on .filter-btn, html.cin-cursor-on .proj-card,
html.cin-cursor-on .feat-card, html.cin-cursor-on .cred-card, html.cin-cursor-on .tech-card{cursor:none !important;}
html.cin-cursor-on input:not([type=checkbox]):not([type=radio]):not([type=range]),
html.cin-cursor-on textarea, html.cin-cursor-on [contenteditable]{cursor:text !important;}
html.cin-cursor-on .modal-overlay *, html.cin-cursor-on dialog *{cursor:auto !important;}
html.cin-cursor-on .modal-overlay button, html.cin-cursor-on .modal-overlay a,
html.cin-cursor-on dialog button, html.cin-cursor-on dialog a{cursor:pointer !important;}

/* ============================================================
   5 · SCROLL PROGRESS + PAGE-TRANSITION VEIL
   ============================================================ */
.cin-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:960;pointer-events:none;
  opacity:0;transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px var(--accent);
}
.cin-veil{
  position:fixed;inset:0;z-index:4000;pointer-events:none;visibility:hidden;
  background:var(--bg-soft);will-change:transform;
}
.cin-veil::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 18px var(--accent);
}
.cin-veil::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 18px var(--accent),0 0 60px var(--accent);
}

/* ============================================================
   6 · 3D PROFILE CARD
   ============================================================ */
html.cin .hero-portrait{perspective:1000px;}
html.cin .portrait-frame{will-change:transform;transform-style:flat;}
html.cin .portrait-frame img{transform:scale(1.07);will-change:transform;}
.cin-portrait-glow{
  position:absolute;inset:-14%;border-radius:50%;pointer-events:none;will-change:transform;
  background:radial-gradient(closest-side,rgba(63,208,255,.34),rgba(242,184,76,.10) 55%,transparent 72%);
  opacity:.75;
}
[data-theme="light"] .cin-portrait-glow{opacity:.45;}
.cin-sheen{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
  background:
    radial-gradient(260px circle at var(--sx,50%) var(--sy,30%),rgba(255,255,255,.28),transparent 60%),
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 48%,transparent 66%);
  mix-blend-mode:soft-light;
}
.hero-portrait.is-tilting .cin-sheen{opacity:1;}
.cin-edge{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22);
}

/* ============================================================
   7 · MICRO-INTERACTIONS
   ============================================================ */
html.cin .cin-mag{
  transition-property:border-color,color,background-color,box-shadow,opacity !important;
  will-change:transform;
}
html.cin .cin-anim{transition:none !important;}
html.cin .btn{position:relative;}
html.cin .btn-ghost,html.cin .btn-sm{overflow:hidden;}
.cin-ripple{
  position:absolute;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;
  background:currentColor;opacity:.22;transform:scale(0);
  animation:cin-ripple .7s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes cin-ripple{to{transform:scale(var(--rs,16));opacity:0;}}
html.cin .btn:active:not(.cin-mag){transform:scale(.97);}
html.cin .social-card svg{transition:transform .35s var(--ease);}
html.cin .social-card:hover svg{transform:translateY(-3px) scale(1.12);}
html.cin .logo .dot{animation:cin-dot 3.2s ease-in-out infinite;}
@keyframes cin-dot{0%,100%{box-shadow:0 0 8px var(--accent);}50%{box-shadow:0 0 18px var(--accent),0 0 32px var(--accent-soft);}}
html.cin .service-card,html.cin .cred-card,html.cin .ip-card,html.cin .ih-item,html.cin .skill-cat .cat-icon{
  transition:transform .45s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
html.cin .service-card:hover,html.cin .cred-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 0 1px var(--accent-soft);}
html.cin[data-theme="light"] .service-card:hover,html.cin[data-theme="light"] .cred-card:hover{box-shadow:0 18px 40px rgba(15,23,42,.10);}
html.cin .skill-cat:hover .cat-icon{transform:rotate(-6deg) scale(1.08);}
html.cin .tech-card{will-change:auto;}
html.cin .field input:focus,html.cin .field textarea:focus,html.cin .field select:focus{
  box-shadow:0 0 0 3px var(--accent-soft),0 8px 28px -10px var(--accent);
}
html.cin .eyebrow::before{transform-origin:left center;}

/* storytelling: timeline line is drawn by scroll (CSS var driven) */
html.cin .timeline::before{transform:scaleY(var(--cin-tl,1));transform-origin:top;will-change:transform;}

/* section heads are choreographed by JS — keep the legacy reveal from double-animating them */
html.cin .section-head.reveal{opacity:1 !important;transform:none !important;transition:none !important;}

/* richer generic reveal for plain blocks (opacity + transform only) */
html.cin .reveal{
  transform:translate3d(0,46px,0) scale(.985);
  transition:opacity 1s cubic-bezier(.16,.84,.44,1),transform 1.1s cubic-bezier(.16,.84,.44,1);
}
html.cin .reveal.in{transform:translate3d(0,0,0) scale(1);}

/* ============================================================
   8 · PERFORMANCE + SMALL SCREENS
   ============================================================ */
@media (max-width:820px){
  .cin-aurora i{width:110vmax;height:110vmax;}
  .cin-scan{display:none;}
  .cin-hero-light{display:none;}
  .cin-grid{animation-duration:34s;}
}
@media (hover:none),(pointer:coarse){
  .cin-cursor{display:none !important;}
  html.cin .btn:active:not(.cin-mag){transform:scale(.97);}
}
@media (prefers-reduced-motion:reduce){
  #cinIntro,.cin-bg,.cin-gl,.cin-cursor,.cin-progress,.cin-veil{display:none !important;}
}


/* ============================================================
   9 · v2 — CAMERA PUSH, VOLUMETRIC LIGHT, BLOOM, GLITCH, GLASS
   ============================================================ */
/* volumetric light shafts (one element each, transform-only animation) */
.cin-intro-rays,.cin-rays{
  position:absolute;pointer-events:none;will-change:transform;
  background:repeating-conic-gradient(from -40deg at 50% 0%,transparent 0deg,rgba(63,208,255,.075) 2.4deg,transparent 5.6deg,transparent 8deg,rgba(242,184,76,.045) 10.2deg,transparent 13deg,transparent 17deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 38%,transparent 78%);
}
.cin-intro-rays{left:50%;top:-8vh;width:170vmax;height:120vmax;margin-left:-85vmax;opacity:0;transform-origin:50% 0;}
.cin-rays{left:50%;top:-14vh;width:150vmax;height:110vmax;margin-left:-75vmax;opacity:.5;transform-origin:50% 0;animation:cin-rays 24s ease-in-out infinite alternate;}
[data-theme="light"] .cin-rays{opacity:.22;}
@keyframes cin-rays{from{transform:rotate(-5deg);}to{transform:rotate(5deg);}}

/* mouse-reactive light that follows the pointer across the whole page */
.cin-light{
  position:absolute;left:0;top:0;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(63,208,255,.13),rgba(63,208,255,.04) 55%,transparent 72%);
  opacity:0;transition:opacity .8s;will-change:transform;
}
html.cin-cursor-live .cin-light{opacity:1;}
[data-theme="light"] .cin-light{background:radial-gradient(closest-side,rgba(14,127,160,.10),transparent 70%);}

/* bloom on the intro wordmark + brief chromatic glitch bursts */
.cin-logo{transition:text-shadow .4s;text-shadow:0 0 0 rgba(63,208,255,0);}
.cin-logo.bloom{text-shadow:0 0 28px rgba(63,208,255,.55),0 0 80px rgba(63,208,255,.28);}
.cin-logo.glitch,.hero-name.cin-glitch,header .logo.cin-glitch{animation:cin-glitch .34s steps(2,end) 1;}
@keyframes cin-glitch{
  0%{filter:drop-shadow(-3px 0 0 rgba(255,60,130,.65)) drop-shadow(3px 0 0 rgba(63,208,255,.75));transform:translate3d(-2px,0,0) skewX(-4deg);}
  25%{filter:drop-shadow(3px 0 0 rgba(255,60,130,.6)) drop-shadow(-3px 0 0 rgba(63,208,255,.7));transform:translate3d(2px,0,0) skewX(3deg);}
  50%{filter:drop-shadow(-2px 0 0 rgba(255,60,130,.5)) drop-shadow(2px 0 0 rgba(63,208,255,.6));transform:translate3d(-1px,0,0);}
  75%{filter:drop-shadow(2px 0 0 rgba(255,60,130,.35)) drop-shadow(-2px 0 0 rgba(63,208,255,.4));transform:translate3d(1px,0,0) skewX(-2deg);}
  100%{filter:none;transform:none;}
}

/* glass: translucent surfaces with a lit top edge. backdrop blur is kept to a few
   large, rarely-repainted panels so scrolling stays on the compositor. */
html.cin header{
  background:color-mix(in srgb,var(--bg) 46%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 -1px 0 var(--border);
}
html.cin .stats-strip,html.cin .hero-meta{position:relative;}
html.cin .stats-strip{
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px -30px rgba(0,0,0,.6);
}
html.cin .exp-card,html.cin .service-card,html.cin .cred-card,html.cin .ip-card,html.cin .proj-card,html.cin .skill-cat{
  background-color:color-mix(in srgb,var(--surface) 72%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
html.cin .modal-panel,html.cin .mobile-drawer{
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
}
html.cin[data-theme="light"] .stats-strip{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 50px -30px rgba(15,23,42,.25);}
html.cin[data-theme="light"] .exp-card,html.cin[data-theme="light"] .service-card,html.cin[data-theme="light"] .cred-card,
html.cin[data-theme="light"] .ip-card,html.cin[data-theme="light"] .proj-card,html.cin[data-theme="light"] .skill-cat{box-shadow:inset 0 1px 0 rgba(255,255,255,.9);}

/* achievements: numbers pop and glow when a count lands */
.cin-num.cin-pop{animation:cin-pop .7s cubic-bezier(.16,.84,.44,1);}
@keyframes cin-pop{0%{transform:scale(1);text-shadow:0 0 0 transparent;}35%{transform:scale(1.14);text-shadow:0 0 22px var(--accent);}100%{transform:scale(1);text-shadow:0 0 0 transparent;}}
.cin-num{display:inline-block;}

@media (max-width:820px){
  .cin-light,.cin-rays{display:none;}
  html.cin .stats-strip{-webkit-backdrop-filter:none;backdrop-filter:none;}
}