/* ═══════════════════════════════════════════════════════════════
   PREMIUM GSAP EXPERIENCE LAYER
   ═══════════════════════════════════════════════════════════════ */
:root{--gsap-accent:var(--primary);--gsap-ease:cubic-bezier(.16,1,.3,1)}
html{cursor:none}
body{cursor:none}
button,a,input,textarea{cursor:none}

/* Intro curtain */
.loader {
      position:fixed; z-index:999; inset:0; overflow:hidden; background:var(--bg);
      transition:clip-path 1s cubic-bezier(.76,0,.18,1),visibility 0s linear 1.1s;
    }
    .loader.done { clip-path:inset(0 0 100% 0); visibility:hidden; }
    .loader:before {
      content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
      background:linear-gradient(90deg,transparent 49.9%,var(--paper) 50%,transparent 50.1%),
                 linear-gradient(0deg,transparent 49.9%,var(--paper) 50%,transparent 50.1%);
    }
    .top {
      position:absolute; z-index:5; top:30px; left:34px; right:34px;
      display:flex; justify-content:space-between; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    }
    .top strong { color:var(--lime); }
    .portrait-wrap {
      position:absolute; top:50%; left:50%; width:min(62vh,53vw); aspect-ratio:1;
      transform:translate(-50%,-50%); display:grid; place-items:center;
    }
    .portrait-wrap:before, .portrait-wrap:after {
      content:""; position:absolute; border:1px solid rgba(249 133 31 / 0.8); border-radius:50%;
    }
    .portrait-wrap:before { inset:-10%; border-left-color:var(--lime); transform:rotate(-25deg); }
    .portrait-wrap:after { inset:-20%; border-right-color:var(--coral); border-style:dashed; animation:spin 20s linear infinite; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .portrait {
      position:relative; width:100%; height:100%; overflow:hidden; border-radius:47% 53% 45% 55% / 57% 47% 53% 43%;
      background:#171818; transform:rotate(3deg); box-shadow:0 0 80px rgba(217,255,63,.08);
      animation:breathe 5s ease-in-out infinite;
    }
    @keyframes breathe { 50% { border-radius:54% 46% 54% 46% / 44% 56% 44% 56%; transform:rotate(-2deg) scale(1.025); } }
    .portrait img {
      display:block; width:100%; height:100%; object-fit:cover; object-position:center;
      filter:contrast(1.08) saturate(1.1);
      clip-path:inset(100% 0 0 0); transition:clip-path .1s linear;
    }
    .portrait .scan {
      position:absolute; left:0; right:0; height:2px; top:0; background:var(--lime);
      box-shadow:0 0 20px 4px rgba(249 133 31 / 0.5); opacity:.85;
    }
    .portrait .grid {
      position:absolute; inset:0; opacity:.2; mix-blend-mode:screen;
      background:repeating-linear-gradient(0deg,transparent 0 12px,var(--paper) 13px 14px);
    }
    .big-type {
      position:absolute; z-index:1; left:-5%; right:-5%; bottom:12%; overflow:hidden; white-space:nowrap;
      color:transparent; font-size:clamp(55px,10vw,140px); font-weight:800; letter-spacing:-.1em;
      -webkit-text-stroke:1px rgba(249 133 31 / 0.26); transform:rotate(-7deg);
    }
    .big-type span { display:inline-block; animation:move 18s linear infinite; }
    @keyframes move { to { transform:translateX(-50%); } }
    .label {
      position:absolute; z-index:5; left:34px; bottom:76px; display:flex; align-items:center; gap:12px;
      font-size:10px; letter-spacing:.15em; text-transform:uppercase;
    }
    .label i { width:7px; height:7px; border-radius:50%; background:var(--lime); }
    .bar {
      position:absolute; z-index:5; left:34px; right:34px; bottom:32px; height:1px; background:#333531;
    }
    .bar b { display:block; width:0; height:100%; background:var(--lime); transition:width .1s linear; }
    .count { position:absolute; z-index:5; right:34px; bottom:47px; color:var(--lime); font-size:12px; font-variant-numeric:tabular-nums; }
    .preview { min-height:100vh; padding:35px 6vw; background:#161717; }
    .preview header { display:flex; justify-content:space-between; font-size:12px; }
    .preview h1 { margin-top:25vh; font-size:clamp(54px,10vw,150px); line-height:.8; letter-spacing:-.1em; }
    .preview em { color:var(--lime); font-style:normal; }
    @media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
    
/* Cursor system */
.mm-cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--fg);z-index:99990;pointer-events:none;mix-blend-mode:difference}
.mm-cursor-ring{position:fixed;left:0;top:0;width:52px;height:52px;border:1px solid color-mix(in srgb,var(--fg) 65%,transparent);border-radius:50%;z-index:99989;pointer-events:none;transform-origin:center;mix-blend-mode:difference}
.mm-cursor-ring:after{content:"";position:absolute;inset:17px;border-radius:50%;background:var(--gsap-accent);opacity:.85;transform:scale(0);transition:transform .3s var(--gsap-ease)}
.mm-cursor-label{position:fixed;left:0;top:0;padding:8px 11px;border:1px solid rgba(255,255,255,.18);background:rgba(10,10,10,.78);backdrop-filter:blur(12px);border-radius:999px;color:#fff;font:600 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;z-index:99988;pointer-events:none;opacity:0;white-space:nowrap}
.mm-cursor.is-hover .mm-cursor-ring{width:76px;height:76px;margin-left:-38px;margin-top:-38px;border-color:var(--gsap-accent)}
.mm-cursor.is-hover+.mm-cursor-ring:after{transform:scale(1)}

/* Floating journey rail */
.mm-journey{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column;align-items:center;gap:11px;opacity:0}
.mm-journey__line{position:absolute;top:10px;bottom:10px;width:1px;background:var(--border);z-index:-1}
.mm-journey__progress{position:absolute;top:10px;width:1px;height:0;background:var(--gsap-accent);box-shadow:0 0 10px color-mix(in srgb,var(--gsap-accent) 70%,transparent);}
.mm-journey__item{width:9px;height:9px;border:1px solid var(--muted-fg);border-radius:50%;background:var(--bg);transition:.35s var(--gsap-ease);position:relative}
.mm-journey__item:after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(5px);opacity:0;white-space:nowrap;color:var(--muted-fg);font:600 9px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;transition:.25s}
.mm-journey__item:hover:after,.mm-journey__item.active:after{opacity:1;transform:translateY(-50%) translateX(0)}
.mm-journey__item.active{width:13px;height:13px;border-color:var(--gsap-accent);background:var(--gsap-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--gsap-accent) 12%,transparent),0 0 18px color-mix(in srgb,var(--gsap-accent) 50%,transparent)}

/* Ambient hero pointer */
.mm-hero-orb{position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--gsap-accent) 13%,transparent),transparent 68%);filter:blur(12px);pointer-events:none;z-index:0;opacity:.75;transform:translate(-50%,-50%)}

.hero > .hero-grid,
.hero > .hero-glow { position:absolute; z-index:0; }

/* Hero image depth */
.hero-photo-col{transform-style:preserve-3d;will-change:transform}
.hero-photo{will-change:transform;transform-origin:center}
.float-badge{will-change:transform}

/* Split reveal */
.mm-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.mm-word__inner{display:inline-block;will-change:transform,opacity}

/* Section transition markers */
.mm-section-mark{position:absolute;left:0;top:8%;font:600 10px var(--font-mono);letter-spacing:.2em;color:var(--muted-fg);writing-mode:vertical-rl;opacity:.65;display:flex;gap:10px;align-items:center}
.mm-section-mark:before{content:"";display:block;width:1px;height:34px;background:var(--gsap-accent)}

/* Project spotlight */
.project-card,.skill-card,.tl-card,.bento-tile{--mx:50%;--my:50%;position:relative;overflow:hidden}
.project-card:before,.skill-card:before,.tl-card:before,.bento-tile:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(320px circle at var(--mx) var(--my),color-mix(in srgb,var(--gsap-accent) 10%,transparent),transparent 60%);opacity:0;transition:opacity .35s;z-index:2}
.project-card:hover:before,.skill-card:hover:before,.tl-card:hover:before,.bento-tile:hover:before{opacity:1}
.project-card .proj-img{will-change:transform}
.project-card .proj-thumb{overflow:hidden}

/* Project hover chrome */
.mm-project-corner{position:absolute;right:14px;top:14px;width:32px;height:32px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;z-index:5;color:#fff;background:rgba(0,0,0,.25);backdrop-filter:blur(8px);transition:.4s var(--gsap-ease)}
.project-card:hover .mm-project-corner{transform:rotate(45deg) scale(1.12);border-color:var(--gsap-accent);color:var(--gsap-accent)}

/* Experience rail enhancement */
.timeline{position:relative}
.timeline-rail:after{content:"";position:absolute;left:0;top:0;width:2px;height:0;background:linear-gradient(to bottom,var(--gsap-accent),transparent);box-shadow:0 0 18px color-mix(in srgb,var(--gsap-accent) 30%,transparent);z-index:1}
.timeline-item .tl-dot{transition:transform .45s var(--gsap-ease),box-shadow .45s}
.timeline-item.is-active .tl-dot{transform:scale(1.35);box-shadow:0 0 0 7px color-mix(in srgb,var(--gsap-accent) 12%,transparent),0 0 22px color-mix(in srgb,var(--gsap-accent) 55%,transparent)}
.timeline-item.is-active .tl-card{border-color:color-mix(in srgb,var(--gsap-accent) 30%,var(--border))}

/* Skill cards */
.skill-card{transform-style:preserve-3d;will-change:transform}
.sc-inner{transform:translateZ(18px);position:relative;z-index:3}

/* Contact reveal */
.contact-wm{will-change:transform}

/* Accessibility */
@media (prefers-reduced-motion:reduce){
  html,body{cursor:auto!important}
  .mm-preloader{display:none!important}.mm-cursor,.mm-cursor-ring,.mm-cursor-label,.mm-journey,.mm-hero-orb{display:none!important}
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
@media(max-width:900px){
  html,body{cursor:auto}.mm-cursor,.mm-cursor-ring,.mm-cursor-label,.mm-journey,.mm-hero-orb{display:none!important}
}
.timeline-rail{overflow:hidden}
.timeline-rail:after{transform-origin:top}
.project-card{transform-style:preserve-3d}
@media(max-width:900px){.mm-section-mark{display:none}}

/* Hero cinematic split layers — safe responsive enhancement */
.hero-left{will-change:transform;}
.hero-photo-col{will-change:transform,clip-path;}
.hero-name{position:relative;}
.hero-name:after{
  content:"";
  position:absolute;
  left:-1rem;
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,var(--gsap-accent),transparent);
  opacity:.35;
  transform:scaleY(0);
  transform-origin:top;
}
@media(max-width:1023px){
  .hero-name:after{display:none;}
}


/* Animation system respects the layout system. Decorative/desktop
   transforms are disabled on touch layouts rather than patched later. */
@media (hover:none), (pointer:coarse), (max-width:1023px) {
  .hero-photo-col { transform:none !important; }
  .hero-left { will-change:auto; }
  .hero-photo { will-change:auto; }
  .float-badge { will-change:auto; }
}