:root { --premium-red:#E50914; --premium-ease:cubic-bezier(.22,1,.36,1); }
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }
.intro-loader[hidden] { display:none !important; }
.intro-loader { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden; color:#f7f7f8; background:radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.055),transparent 36%),#050506; transition:opacity .48s var(--premium-ease),transform .55s var(--premium-ease); }
.intro-loader.is-leaving { opacity:0; transform:translateY(-2.5vh); pointer-events:none; }
.intro-spotlight { position:absolute; width:min(76vw,620px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(229,9,20,.12),rgba(255,255,255,.035) 28%,transparent 67%); filter:blur(12px); opacity:0; transform:scale(.8); transition:opacity .8s ease,transform 1.2s var(--premium-ease); }
.intro-loader.is-active .intro-spotlight { opacity:1; transform:scale(1); }
.intro-dot,.intro-line { position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); opacity:0; box-shadow:0 0 18px rgba(255,255,255,.8); }
.intro-dot { animation:intro-dot-in .3s .15s forwards; }
.intro-line { width:2px; height:5px; border-radius:2px; transition:height .42s var(--premium-ease),opacity .3s; }
.intro-loader.is-stretched .intro-dot { opacity:0; }
.intro-loader.is-stretched .intro-line { height:78px; opacity:.95; }
.intro-scribble { position:absolute; left:50%; top:50%; width:min(260px,60vw); transform:translate(-50%,-50%); overflow:visible; opacity:0; }
.intro-scribble path { fill:none; stroke:#fff; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:460; stroke-dashoffset:460; }
.intro-loader.is-scribbling .intro-scribble { opacity:.75; }
.intro-loader.is-scribbling .intro-scribble path { animation:scribble-draw .65s var(--premium-ease) forwards; }
.intro-name { position:absolute; top:calc(50% + 88px); margin:0; min-height:1.2em; color:#f5f6f8; font:700 clamp(18px,3vw,28px)/1 var(--display,Arial,sans-serif); letter-spacing:.34em; text-indent:.34em; text-shadow:0 0 20px rgba(255,255,255,.18); }
.intro-skip { position:absolute; right:clamp(22px,5vw,70px); bottom:clamp(24px,5vh,54px); border:0; border-bottom:1px solid rgba(255,255,255,.5); padding:7px 0; color:rgba(255,255,255,.74); background:none; font:600 11px/1.4 var(--mono,monospace); letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.intro-skip:hover { color:#fff; border-color:var(--premium-red); }
@keyframes intro-dot-in { to { opacity:1; transform:translate(-50%,-50%) scale(1.25); } }
@keyframes scribble-draw { to { stroke-dashoffset:0; } }
body.intro-active { overflow:hidden; }
body.intro-active #topbar { opacity:0; transform:translateY(-12px); pointer-events:none; }
#topbar { transition:opacity .55s var(--premium-ease),transform .55s var(--premium-ease),background .3s ease,backdrop-filter .3s ease; }
#topbar.scrolled { backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.hero h1.chrome-title { position:relative; isolation:isolate; color:transparent; background:linear-gradient(180deg,#fff 0%,#f8f8fa 16%,#aeb2bb 35%,#fff 48%,#767a84 68%,#f4f5f7 84%,#9ca1ab 100%); background-clip:text; -webkit-background-clip:text; }
.hero h1.chrome-title::after { content:""; position:absolute; inset:-8% -3%; z-index:2; pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.06) 43%,rgba(255,255,255,.64) 49%,rgba(255,255,255,.1) 54%,transparent 61%); transform:translateX(-120%); animation:title-sweep 6.8s 1.2s ease-in-out infinite; mix-blend-mode:screen; }
@keyframes title-sweep { 0%,45% { transform:translateX(-120%); opacity:0; } 54% { opacity:.8; } 72%,100% { transform:translateX(120%); opacity:0; } }
.hero h1 .hero-title-word { display:block; overflow:hidden; padding-bottom:.08em; white-space:nowrap; }
.hero h1 .hero-title-letter { display:inline-block; font-style:normal; color:transparent; background:inherit; background-clip:text; -webkit-background-clip:text; opacity:0; transform:translateY(110%); transition:transform .72s var(--premium-ease),opacity .56s ease; transition-delay:calc(var(--letter-index,0) * 38ms); }
.hero h1.is-title-visible .hero-title-letter { opacity:1; transform:translateY(0); }
.hero h1 .hero-title-word + .hero-title-word { margin-top:.12em; }
.hero .hero-tagline em { color:#fff; font-style:italic; }
.hero-contact-link { display:inline-block; margin:0 0 18px; border-bottom:1px solid rgba(255,255,255,.55); padding:0 0 3px; color:#f4f2f2; font-size:12px; letter-spacing:.07em; text-decoration:none; transition:color .25s,border-color .25s,transform .25s; }
.hero-contact-link:hover { color:var(--premium-red); border-color:var(--premium-red); transform:translateY(-2px); }
.hero-art { overflow:hidden; }
.portrait-canvas,.portrait-static { position:absolute; z-index:1; inset:7% 4% 4%; width:92%; height:89%; object-fit:cover; object-position:var(--portrait-focus,50% 50%); pointer-events:none; }
.portrait-canvas { display:none; }
.portrait-static { display:none; mix-blend-mode:screen; opacity:.9; -webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%); mask-image:linear-gradient(180deg,#000 76%,transparent 100%); }
.hero-art.has-particles .portrait-canvas,.hero-art.has-static-portrait .portrait-static { display:block; }
.hero-art.has-particles::before,.hero-art.has-particles::after { opacity:.25; }
.premium-heading .heading-word { display:inline-block; overflow:hidden; vertical-align:top; opacity:0; transform:translateY(105%); transition:opacity .7s ease,transform .8s var(--premium-ease); transition-delay:calc(var(--word-index,0) * 75ms); }
.reveal.is-visible .premium-heading .heading-word,.premium-heading.is-visible .heading-word { opacity:1; transform:translateY(0); }
.project-card,.channel-card,.timeline-item,.skill-card,.service-row { border:1px solid rgba(255,255,255,.105); background-color:rgba(255,255,255,.035); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.project-card { transition:transform .35s var(--premium-ease),border-color .35s,background-color .35s; }
.project-card:hover { border-color:rgba(229,9,20,.46); background-color:rgba(255,255,255,.055); }
.project-art { background-size:cover; background-position:center; }
.skills-rail.skills-marquee { display:flex; flex-direction:column; gap:12px; overflow:hidden; padding:10px 0 18px; scroll-snap-type:none; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.skills-marquee-row { width:100%; overflow:hidden; }
.skills-marquee-track { display:flex; width:max-content; gap:10px; animation:marquee-left var(--marquee-duration,32s) linear infinite; will-change:transform; }
.skills-marquee-row.is-reverse .skills-marquee-track { animation-name:marquee-right; }
.skills-marquee-row:hover .skills-marquee-track,.skills-marquee-row:focus-within .skills-marquee-track { animation-play-state:paused; }
.skill-chip { display:inline-flex; align-items:center; gap:9px; flex:none; min-height:42px; border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:0 17px; color:#f5f2f2; background:rgba(255,255,255,.055); font:500 12px/1 var(--mono,monospace); white-space:nowrap; transition:border-color .25s,background-color .25s,transform .25s; }
.skill-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--premium-red); box-shadow:0 0 10px rgba(229,9,20,.5); }
.skill-chip:hover { transform:translateY(-2px); border-color:rgba(229,9,20,.55); background:rgba(229,9,20,.08); }
@keyframes marquee-left { to { transform:translateX(-50%); } }
@keyframes marquee-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
.services-section { position:relative; }
.services-list { margin-top:36px; border-top:1px solid rgba(255,255,255,.14); }
.service-row { position:relative; display:grid; grid-template-columns:72px 1fr 42px; align-items:center; gap:16px; min-height:100px; overflow:hidden; border:0; border-bottom:1px solid rgba(255,255,255,.14); padding:18px 20px 18px 6px; background:transparent; transform:translateX(0); transition:transform .42s var(--premium-ease),opacity .6s ease; }
.service-row::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:1px; background:var(--premium-red); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--premium-ease); }
.service-row:hover { transform:translateX(10px); }
.service-row:hover::after { transform:scaleX(1); }
.service-number { color:rgba(255,255,255,.43); font:12px var(--mono,monospace); }
.service-copy h3 { margin:0 0 7px; color:#f5f3f3; font:600 clamp(18px,2.2vw,25px)/1.1 var(--display,Arial,sans-serif); letter-spacing:-.04em; }
.service-copy p { margin:0; max-width:660px; color:rgba(238,234,235,.62); font-size:13px; line-height:1.65; }
.service-arrow { justify-self:end; color:rgba(255,255,255,.6); font-size:22px; transform:rotate(0); transition:color .3s,transform .35s var(--premium-ease); }
.service-row:hover .service-arrow { color:var(--premium-red); transform:rotate(45deg); }
.service-row[data-revealed="false"] { opacity:0; transform:translateY(18px); }
.service-row[data-revealed="true"] { opacity:1; transform:translateY(0); }
.cursor-glow { position:fixed; z-index:0; top:0; left:0; width:260px; height:260px; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle,rgba(229,9,20,.075),rgba(229,9,20,.025) 34%,transparent 70%); transform:translate3d(-50%,-50%,0); transition:opacity .3s; will-change:transform; }
body.cursor-glow-enabled .cursor-glow { opacity:1; }
[data-magnetic] { will-change:transform; transition:transform .24s var(--premium-ease); }
@media (max-width:720px) {
  .intro-skip { right:24px; bottom:28px; }
  .hero-art { opacity:.72; }
  .portrait-canvas,.portrait-static { inset:12% 0 6%; width:100%; height:82%; }
  .service-row { grid-template-columns:40px 1fr 28px; gap:10px; min-height:88px; padding-right:6px; }
  .service-row:hover { transform:translateX(4px); }
  .service-copy p { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .cursor-glow { display:none !important; }
}