:root{ --accent:#ffffff; --muted:#8a8a8a; --gold:rgba(180,140,60,0.08); }
*{scroll-behavior:smooth;}
html,body{background:#000;}
body{font-family:'Inter',system-ui,sans-serif;}

.grotesk{font-family:'Archivo',sans-serif;}
.display{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.02em;line-height:.92;text-transform:uppercase;}
.tracky{letter-spacing:.32em;}

/* ---------- SCROLL PROGRESS BAR ---------- */
#scrollProgress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,rgba(255,255,255,0.7),rgba(200,170,80,0.9));z-index:400;width:0%;pointer-events:none;will-change:width;}

/* ---------- LOADER (cinematic) ---------- */
#loader{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .8s ease,visibility .8s;}
#loader.done{opacity:0;visibility:hidden;}
/* vignette overlay */
#loader::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(0,0,0,0.7));pointer-events:none;z-index:1;}
/* diagonal light sweep / shimmer */
#loader::after{content:"";position:absolute;top:0;left:-120%;width:80%;height:100%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.04) 45%,rgba(255,255,255,0.08) 50%,rgba(255,255,255,0.04) 55%,transparent 60%);animation:loaderSweep 2s 0.6s ease-in-out forwards;pointer-events:none;z-index:3;}
/* logo wrapper for glow ring */
#loader .logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;z-index:2;}
#loader img{width:min(46vw,300px);opacity:0;animation:logoIn 1.2s cubic-bezier(.16,1,.3,1) forwards;position:relative;z-index:2;}
/* silver shimmer aura around logo */
#loader .logo-wrap::before{content:"";position:absolute;inset:-28px;border-radius:50%;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(220,215,205,0.18) 0%,rgba(200,190,170,0.08) 45%,transparent 75%);opacity:0;animation:logoAura 1.4s 0.3s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none;z-index:1;}
#loader .logo-wrap::after{content:"";position:absolute;inset:-14px;border-radius:50%;box-shadow:0 0 40px 8px rgba(210,200,185,0.12),0 0 80px 20px rgba(190,180,160,0.06);opacity:0;animation:logoAura 1.4s 0.5s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none;z-index:1;}
@keyframes logoIn{from{opacity:0;transform:scale(.88);filter:blur(8px)}to{opacity:1;transform:scale(1);filter:none}}
@keyframes logoAura{0%{opacity:0;transform:scale(.85);}60%{opacity:1;}100%{opacity:0.6;transform:scale(1.05);}}
@keyframes loaderSweep{to{left:200%;}}

/* ---------- HERO AMBIENT GLOW (original subtle gold) ---------- */
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0;}
.hero-glow::before{content:"";position:absolute;top:-10%;left:50%;width:80%;height:60%;transform:translateX(-50%);background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(180,140,60,0.04),transparent 65%);animation:glowPulse 10s ease-in-out infinite alternate;}
.hero-glow::after{content:"";position:absolute;bottom:0;left:50%;width:70%;height:30%;transform:translateX(-50%);background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(120,100,60,0.025),transparent 70%);animation:glowPulse 10s 3s ease-in-out infinite alternate;}
@keyframes glowPulse{from{opacity:0.3}to{opacity:0.8}}

/* ---------- SCROLL INDICATOR (animated line) ---------- */
.scroll-indicator{display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-indicator span{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,0.25);}
.scroll-line{width:1px;height:36px;background:linear-gradient(to bottom,rgba(255,255,255,0.5),transparent);animation:scrollPulse 2.4s ease-in-out infinite;transform-origin:top;}
@keyframes scrollPulse{0%,100%{opacity:0.2;transform:scaleY(0.5);}50%{opacity:1;transform:scaleY(1);}}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:none;}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}
.line-mask{overflow:hidden;display:block;}
.line-mask>span{display:block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.16,1,.3,1);}
.in .line-mask>span{transform:translateY(0);}
.lm1>span{transition-delay:.05s}.lm2>span{transition-delay:.18s}.lm3>span{transition-delay:.31s}.lm4>span{transition-delay:.44s}

/* rotating word */
.rotator{display:inline-grid;grid-template-areas:"stack";align-items:baseline;position:relative;}
.rotator span{grid-area:stack;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;white-space:nowrap;pointer-events:none;}
.rotator span.active{opacity:1;transform:translateY(0);pointer-events:auto;}

/* ---------- SHOWREEL FRAME ---------- */
.reel-frame{position:relative;overflow:hidden;background:#0a0a0a;border:1px solid rgba(255,255,255,.1);}
.reel-frame video,.reel-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.reel-frame:hover .reel-play{transform:scale(1.08);background:#fff;}
.reel-play{transition:transform .4s,background .4s;}

/* ---------- WORK ROWS ---------- */
.work-row{position:relative;overflow:hidden;background:#080808;border-top:1px solid rgba(255,255,255,.08);}
.work-row .media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .6s;}
.work-row:hover .media{transform:scale(1.05);opacity:.7;}
.work-row .ph{position:absolute;inset:0;background:radial-gradient(70% 120% at 70% 0%,rgba(255,255,255,.06),transparent 55%),linear-gradient(160deg,#161616,#070707);}
.work-row .idx-big{position:absolute;left:0;bottom:-1.5rem;font-family:'Archivo';font-weight:900;font-size:clamp(7rem,18vw,16rem);line-height:.8;color:rgba(255,255,255,.03);pointer-events:none;}
.view-link{position:relative;}
.view-link:after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .4s;}
.work-row:hover .view-link:after{transform:scaleX(1);}

/* grid tile fallback */
.tile{position:relative;overflow:hidden;background:#0a0a0a;border:1px solid rgba(255,255,255,.08);transition:border-color .4s;}
.tile:hover{border-color:rgba(255,255,255,.3);}
.tile .ph{position:absolute;inset:0;background:radial-gradient(70% 120% at 50% 0%,rgba(255,255,255,.05),transparent 55%),linear-gradient(160deg,#151515,#060606);}
.tile .idx{position:absolute;right:12px;bottom:2px;font-family:'Archivo';font-weight:900;font-size:5rem;color:rgba(255,255,255,.04);}

/* ---------- SERVICES ---------- */
.svc-row{border-top:1px solid rgba(255,255,255,.12);transition:background .4s;}
.svc-row:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
.svc-row:hover{background:rgba(255,255,255,.02);}
.svc-row:hover .svc-title{transform:translateX(10px);}
.svc-title{transition:transform .45s cubic-bezier(.16,1,.3,1);}
.svc-num{color:var(--muted);display:flex;align-items:center;gap:8px;}
.svc-dot{display:inline-block;width:6px;height:6px;border-radius:50%;transition:box-shadow .4s ease;}
.svc-row:hover .svc-dot{box-shadow:0 0 10px 3px currentColor;}

/* ---------- MARQUEE ---------- */
.marquee{display:flex;gap:4rem;width:max-content;animation:scroll 30s linear infinite;align-items:center;}
@keyframes scroll{to{transform:translateX(-50%)}}
/* fade edges */
.marquee-wrap{position:relative;overflow:hidden;}
.marquee-wrap::before,.marquee-wrap::after{content:"";position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none;}
.marquee-wrap::before{left:0;background:linear-gradient(to right,#000,transparent);}
.marquee-wrap::after{right:0;background:linear-gradient(to left,#000,transparent);}

/* ---------- NAV ---------- */
.nav-glass{background:rgba(0,0,0,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}

/* ---------- BUTTONS ---------- */
.btn-w{background:#fff;color:#000;border-radius:6px;transition:all .35s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;}
.btn-w:hover{background:#000;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 20px rgba(255,255,255,.06);}
/* shine sweep on hover */
.btn-w::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.15) 50%,transparent 60%);pointer-events:none;transition:none;}
.btn-w:hover::after{animation:btnSweep .7s ease forwards;}
@keyframes btnSweep{to{left:200%;}}

.link-underline{position:relative;}
.link-underline:after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:#fff;transition:width .35s;}
.link-underline:hover:after{width:100%;}

/* ---------- MOBILE MENU ---------- */
#mobileMenu{transition:opacity .4s,visibility .4s;}
#mobileMenu.hidden-menu{opacity:0;visibility:hidden;}

/* ---------- FORM INPUTS (premium focus) ---------- */
input:focus,textarea:focus,select:focus{border-color:rgba(255,255,255,0.6) !important;box-shadow:0 4px 20px -4px rgba(255,255,255,0.05);}

/* ---------- SOCIAL ICONS (footer) ---------- */
.social-icon{display:inline-flex;align-items:center;gap:8px;transition:color .3s;}
.social-icon svg{opacity:0.5;transition:opacity .3s,transform .3s;}
.social-icon:hover svg{opacity:1;transform:translateY(-1px);}

/* ---------- MISC ---------- */
::selection{background:#fff;color:#000;}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:#000;}
::-webkit-scrollbar-thumb{background:#222;}
::-webkit-scrollbar-thumb:hover{background:#444;}