/* Creative Nightfall / native motion edition — 2026 */
:root{
  --ink:#0b0b15;--black:#070912;--panel:#101222;
  --line:rgba(190,177,255,.17);--text:#f2f1fb;--muted:#b0aec4;
  --gold:#c2fc7b;--gold-soft:#ddffb5;--paper:#111222;--paper-ink:#f4f1fc;
}
html{scroll-padding-top:86px}
body{background:#070912;color:var(--text)}
::selection{background:#b9ff85;color:#0a1120}
.grain{opacity:.065;z-index:50}
.scroll-progress{height:3px;background:linear-gradient(90deg,#ab86ff 0%,#8be9f4 45%,#c8ff83 100%);box-shadow:0 0 16px rgba(183,255,118,.45)}
.cursor-glow{display:none!important}
.smooth-cursor-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:110;pointer-events:none;opacity:1}
.site-header.scrolled,.site-header.menu-open{background:rgba(8,9,19,.89);border-bottom-color:rgba(182,155,255,.24);box-shadow:0 16px 45px rgba(0,0,0,.24)}
.brand-emblem{border-color:rgba(183,255,118,.5);border-radius:50%;box-shadow:inset 0 0 22px rgba(188,250,114,.06)}
.brand-emblem span{color:#b9ff7b}.brand-words{letter-spacing:2.9px}
.nav-links>a{color:#aaa9c2}.nav-links>a:hover,.nav-links>a.active{color:#d8ffad}
.nav-contact{border-color:rgba(191,248,115,.62);color:#dcffb2;border-radius:50px;padding:14px 22px}
.nav-contact:hover{background:#c2fc7b;color:#11141b}
.hero{background:radial-gradient(ellipse at 74% 62%,rgba(81,53,136,.22),transparent 51%),radial-gradient(ellipse at 25% 12%,rgba(36,78,105,.21),transparent 56%),#070912;min-height:max(770px,100svh)}
.hero::before{background:linear-gradient(105deg,transparent 42%,rgba(181,143,255,.07)),radial-gradient(circle at 84% 22%,rgba(190,255,135,.035),transparent 42%)}
.hero-orbit{border-color:rgba(166,142,242,.13)}.hero-eyebrow,.section-eyebrow,.overline{color:#c8fa93}
.signal-dot{background:#baff7d;box-shadow:0 0 0 5px rgba(190,255,125,.08),0 0 16px rgba(172,255,106,.6)}
.hero-prelude{color:#c2c0d6}.hero-prelude span,.hero-title em,.title-asterisk{color:#c6fe86}
.hero-title{letter-spacing:-.075em;text-shadow:0 6px 48px rgba(0,0,0,.3)}
.hero-title em{background:linear-gradient(110deg,#f6ffe8 10%,#baff80 65%,#76ddd8);color:transparent;background-clip:text;-webkit-background-clip:text}
.hero-summary{color:#c4c4d3}.hero-summary strong{color:#fff}
.hero-image-wrap{background:#10142c;border:1px solid rgba(158,156,239,.22);box-shadow:0 52px 116px rgba(0,0,0,.54),0 0 120px rgba(124,94,232,.13)}
.hero-image-wrap img{filter:contrast(1.1) brightness(.88) saturate(.94)}
.hero-image-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(126deg,rgba(135,130,225,.12),transparent 42%,rgba(142,255,188,.05))}
.hero-seal{background:#c1fb7c;color:#0b1217;box-shadow:0 0 65px rgba(191,255,128,.2),0 12px 36px #0008}
.hero-side-label,.scroll-invite{color:#9995b8}.hero-bottom{border-color:rgba(173,172,235,.2)}.hero-bottom strong{color:#e3dfed}
.btn-gold{background:#c1fa81;color:#0d101b;border-radius:40px}.btn-gold:hover{background:#e5ffb9;box-shadow:0 0 45px rgba(191,252,125,.25)}
.link-underline{border-color:#b9fb79}
.section-projects{background:#0b0c19}.studio-capabilities{background:#0e1020;border-color:rgba(156,140,226,.15)}
.client-card{background:#141628;border-color:rgba(176,162,240,.17);border-radius:13px}.client-card:hover{border-color:rgba(184,248,136,.58)!important;box-shadow:0 20px 70px rgba(0,0,0,.36)}
.filter{border-radius:35px}.filter.active{background:#c1fc7e!important;color:#0d1220!important}.filter:hover{border-color:rgba(196,248,136,.62)!important}
.magic-bento{gap:15px}.bento-tile{background:#15172a;border-color:rgba(159,143,241,.26);border-radius:17px}
.bento-tile::after{background:radial-gradient(370px circle at var(--glow-x) var(--glow-y),rgba(161,136,255,.23),rgba(125,216,225,.045) 40%,transparent 72%)}
.bento-tile:hover,.bento-tile:focus-visible{border-color:rgba(197,255,149,.57)}.bento-no,.bento-overline{color:#baf4d3}
.bento-tile h3 em{color:#c0fd84}.bento-tile p{color:#c4bfd0}.bento-link{border-color:#bbff94}
.bento-wide:first-child{background:radial-gradient(ellipse at 88% 35%,rgba(125,80,216,.45),transparent 61%),linear-gradient(125deg,#20203b,#101425 75%)}
.bento-contact{background:radial-gradient(ellipse at 95% 30%,rgba(82,153,178,.25),transparent 62%),#182138}
.bento-symbol{color:rgba(196,194,255,.105)}.bento-big-arrow{color:rgba(185,252,125,.17)}
.bento-photo::before,.bento-film::before{background:linear-gradient(0deg,rgba(7,9,19,.95),transparent 85%)}
.bento-ripple{border-color:rgba(179,253,142,.52)}
.manifesto{background:radial-gradient(ellipse at 50% 18%,rgba(137,106,224,.23),transparent 62%),linear-gradient(180deg,#131527 0%,#121328 68%,#101125 100%);color:#f4f2ff;border-block:1px solid rgba(165,155,238,.16);padding:102px 0}
.manifesto-star{color:#b8ff87}.manifesto em{color:#d1c1ff}.manifesto p span{border-color:#baff83}.manifesto-foot{color:#b4afc9}
.section-photography{background:#0c0e1b}.section-motion{background:#101225}.section-experience{background:#0b0d1a}.section-about{background:#121529}
.photo-card,.reel-card{border-radius:11px}.reel-card{background:#16182b}.reel-card:hover{box-shadow:0 22px 65px rgba(2,0,25,.57)}
.experience-list{border-color:rgba(183,174,234,.25)}.experience-item{border-color:rgba(184,179,226,.18)}
.section-contact{background:radial-gradient(ellipse at 68% 15%,rgba(115,75,212,.23),transparent 48%),radial-gradient(ellipse at 20% 110%,rgba(55,145,165,.17),transparent 50%),#080a17;color:#f8f7ff;border-top:1px solid rgba(178,160,237,.27)}
.section-contact .contact-label,.section-contact .section-index{color:#bffe86}.section-contact .contact-copy h2 em{color:#c1b1ff}.section-contact .gold-dot{color:#c4ff7e}.contact-copy>p{color:#c8c4d5}
.section-contact .btn-dark{background:#c1fc7d!important;color:#0c1120!important;border-radius:45px}.section-contact .btn-dark:hover{background:#e1ffb1!important}
.qr-frame{border:1px solid rgba(158,137,247,.32);background:rgba(16,20,43,.86);border-radius:18px;box-shadow:0 22px 80px #0006}.qr-eyebrow,.qr-link{color:#c1fe88}
.contact-email{color:#ddd7f5}.contact-socials{border-color:rgba(175,153,231,.25)}.contact-socials>span{color:#aaa9c0}.contact-socials a:hover{color:#c1ff7c}
.site-footer{background:#070811;border-color:rgba(183,169,237,.16)}
.floating-top{background:#c0fa7d;color:#0b1016;border-radius:50%}
.dialog-panel,.lightbox-shell,.video-shell{background:#111323;border-color:rgba(163,145,245,.42)}
.client-panel{background:#111323}.dialog-close{border-color:#626282;background:#20213c;color:#f6f3ff}.dialog-close:hover{background:#c0ff7c}
.featured-gallery{border-color:rgba(151,141,230,.26)}
.featured-card{border-radius:12px;border-color:rgba(194,185,255,.27);background:#111525}.featured-card[data-active=true]{border-color:#b8fc85}
.featured-arrow{border-color:#b5bded;color:#e9e4ff}.featured-arrow:hover,.gallery-mode.active{background:#c0ff7f;color:#0b0e17}.gallery-mode-switch{border-color:rgba(170,167,239,.27);border-radius:28px}.gallery-mode{border-radius:25px}.gallery-progress-track{background:rgba(190,183,238,.25)}
.aurora-layer:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 45% 50%,transparent,rgba(8,9,20,.2) 70%,#080a18);mix-blend-mode:multiply}
.aurora-layer canvas{opacity:.42;filter:hue-rotate(92deg) saturate(1.4)}
/* THE PARALLAX PILL ATLAS */
.pill-lab{position:relative;overflow:hidden;padding:145px 0 104px;background:radial-gradient(ellipse at 60% 70%,rgba(45,66,122,.22),transparent 50%),radial-gradient(ellipse at 15% 10%,rgba(122,65,166,.16),transparent 56%),#080b18;border-top:1px solid rgba(160,146,255,.2);border-bottom:1px solid rgba(160,146,255,.2)}
.pill-lab::before{content:'';inset:0;position:absolute;background-image:linear-gradient(rgba(160,153,240,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(160,153,240,.035) 1px,transparent 1px);background-size:64px 64px;pointer-events:none;mask-image:linear-gradient(180deg,transparent 5%,#000 28%,#000 88%,transparent 100%)}
.pill-lab-shell{position:relative}.pill-intro{max-width:710px}.pill-intro h2{font:normal clamp(60px,7.4vw,119px)/.95 var(--serif);letter-spacing:-.076em;margin:22px 0 23px}.pill-intro h2 em{font-weight:400;background:linear-gradient(95deg,#e9e4ff,#c0adff 43%,#baff9d);color:transparent;-webkit-background-clip:text;background-clip:text}
.pill-description{color:#bcbad1;font-size:15px;line-height:1.85;max-width:510px}
.pill-note{margin:32px 0 0;display:flex;align-items:center;gap:15px;font:10px var(--mono);letter-spacing:1.4px;color:#a5a6c4}.pill-note-dot{width:7px;height:7px;border-radius:50%;background:#c0fc83;box-shadow:0 0 12px #a6ff7b}.pill-note-line{width:36px;height:1px;background:#7774a0}
.pill-stage{--focus:1;position:relative;margin-top:22px;height:640px;isolation:isolate;perspective:1300px;overflow:visible}
.pill-stage::before{content:'';position:absolute;inset:7% 9% 8%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(105,85,178,.2),rgba(58,72,118,.085) 45%,transparent 70%);filter:blur(19px);pointer-events:none}
.pill-stage::after{content:'CREATIVE / FREQUENCY';position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);font:700 clamp(56px,11vw,165px)/1 var(--sans);letter-spacing:-.07em;color:rgba(183,160,244,.035);width:100%;text-align:center;white-space:nowrap;pointer-events:none}
.pill-orbit{position:absolute;border:1px solid rgba(172,161,253,.125);left:50%;top:50%;transform:translate(-50%,-50%) rotate(-22deg);border-radius:50%;pointer-events:none}
.pill-orbit-a{width:78%;height:70%}.pill-orbit-b{width:55%;height:52%;transform:translate(-50%,-50%) rotate(23deg)}.pill-orbit-c{width:34%;height:34%;border-style:dashed;opacity:.7}
.pill-center-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:32px;color:#b8ff89;filter:drop-shadow(0 0 12px rgba(183,255,137,.75));opacity:.8}
.pill-coordinate{position:absolute;font:10px var(--mono);letter-spacing:1.2px;color:#777996;z-index:1}.pill-coordinate-top{right:1%;top:4%}.pill-coordinate-bottom{bottom:3%;left:1%}
.parallax-pill{--dx:0px;--dy:0px;position:absolute;left:var(--px);top:var(--py);display:flex;align-items:center;justify-content:space-between;gap:12px;width:var(--pill-width);min-height:67px;padding:18px 21px;background:var(--pill-bg);color:var(--pill-ink);border:1px solid rgba(255,255,255,.18);border-radius:20px;text-decoration:none;white-space:nowrap;font:700 12px var(--sans);letter-spacing:.95px;box-shadow:0 9px 30px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.35);z-index:4;transform:translate3d(var(--dx),calc(var(--dy) + var(--intro-y,0px)),0) rotate(var(--rot)) scale(var(--hover-scale,1));opacity:var(--entry-opacity,0);transition:box-shadow .24s,filter .24s,background .24s,opacity .48s ease;will-change:transform}
.parallax-pill span{font-size:21px;font-weight:400;flex-shrink:0;opacity:.72;transition:transform .2s}
.parallax-pill:hover,.parallax-pill:focus-visible{--hover-scale:1.045;filter:saturate(1.12);box-shadow:0 24px 55px rgba(0,0,0,.48),0 0 24px rgba(160,153,253,.13);z-index:8}
.parallax-pill:hover span,.parallax-pill:focus-visible span{transform:translate(3px,-3px)}
.parallax-pill:focus-visible{outline:3px solid #fff;outline-offset:4px}
.parallax-pill.pill-action{z-index:6;box-shadow:0 0 32px rgba(165,255,124,.18),0 14px 28px #0005}
.pill-stage:not(.is-visible) .parallax-pill{--intro-y:-52px;--entry-opacity:0}
.pill-stage.is-visible .parallax-pill{--intro-y:0px;--entry-opacity:1}
.pill-foot{margin-top:26px;padding-top:22px;border-top:1px solid rgba(175,159,238,.17);display:flex;align-items:center;justify-content:space-between;gap:18px;font:10px var(--mono);letter-spacing:1.4px;color:#a7a6c2}
.pill-foot a{color:#c8ffa0;border-bottom:1px solid rgba(192,255,126,.65);padding:9px 0}.pill-foot a span{font-size:17px}
@media(max-width:1100px){.pill-lab{padding-top:108px}.pill-stage{height:610px}.parallax-pill{min-height:59px;padding:14px 17px;max-width:230px;font-size:11px}.pill-coordinate-top{right:0}}
@media(max-width:720px){.hero{min-height:auto}.pill-lab{padding:85px 0 80px}.pill-intro h2{font-size:clamp(54px,11vw,80px)}.pill-intro .section-eyebrow{margin:0 0 20px}.pill-stage{height:auto;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:53px 0 27px;perspective:none}.pill-stage::after,.pill-orbit,.pill-center-mark{display:none}.pill-stage::before{inset:0;border-radius:18px}.pill-coordinate-top{top:5px;left:0;right:auto}.pill-coordinate-bottom{bottom:0;left:0}.parallax-pill{position:relative;left:auto;top:auto;width:100%;min-width:0;max-width:none;min-height:58px;border-radius:14px;font-size:10px;padding:13px;white-space:normal;line-height:1.35;letter-spacing:.45px;transform:translateY(var(--intro-y,0px)) rotate(0deg)!important;will-change:auto}.parallax-pill span{font-size:16px}.pill-stage:not(.is-visible) .parallax-pill{--intro-y:20px}.pill-description{font-size:13px}.pill-foot{align-items:start;flex-direction:column;line-height:1.8}.section-contact{padding-top:90px}.nav-links{background:#111329!important;border-color:rgba(178,143,245,.34)!important}}
@media(max-width:380px){.pill-stage{gap:8px}.parallax-pill{min-height:61px;padding:12px 10px;font-size:9px}.parallax-pill span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.smooth-cursor-canvas{display:none!important}.parallax-pill{transform:none!important;opacity:1!important;transition:none!important;will-change:auto}.pill-stage:not(.is-visible) .parallax-pill{--intro-y:0px;--entry-opacity:1}}
/* Split-headline fix: a parent background-clip gradient does not paint text after
   the original SplitText interaction wraps each glyph in its own inline block. */
.hero-title em .split-char{color:#caff91;-webkit-text-fill-color:#caff91;background:none}