/* ===================================================================== SOVEREIGN ROW STUDIOS — Hero (Neon City) Built from 9 transparent parallax PNGs in /assets/hero/. The 7 aligned 16:9 layers self-register pixel-perfect (inset:0). The bg (00) and skyline (04) are wider — they fill the same 16:9 box via background-size:cover. Responsive strategy (one ratio everywhere — the 16:9 scene): • mobile (<640) → stacked: text → scene → stats → scroll • tablet (640–1023) → stacked: text → stats → scene, capsule/vtext shown • desktop (1024+) → stacked: text + stats on top, scene full-width below ===================================================================== */ :root{ --bg:#060309; --ink:#ffffff; --muted:#a6a3bb; --dim:#8a87a0; --pink:#ff2e9a; --purple:#a855f7; --blue:#3b82f6; --grad:linear-gradient(95deg,#ff2e9a 0%,#a855f7 48%,#2d7fff 100%); --grad-line:linear-gradient(90deg,#ff2e9a,#a855f7); --font:"Montserrat",system-ui,-apple-system,sans-serif; --pad:clamp(1.1rem,4.5vw,3.5rem); --navh:clamp(62px,8.5vh,90px); --ease:cubic-bezier(.22,1,.36,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* Invisible scrollbar (scroll still works) */ html{scrollbar-width:none;-ms-overflow-style:none} html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* base canvas lives on ; body is transparent so the fixed .bg-engine (z-index:-1) shows through behind all section content */ html{background:#020207} body{ font-family:var(--font);background:transparent;color:var(--ink); line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer;border:none;background:none;color:inherit} /* ---- Atmosphere ---- */ /* Static noise veil. mix-blend-mode is intentionally omitted: a full-screen blend mode forces a whole-viewport composite pass every animation frame. A plain low-opacity overlay reads almost identically for far less cost. */ .grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ===================================================================== NAVIGATION ===================================================================== */ /* Floating header — no bar background or border line; elements float over content */ .nav{position:fixed;inset:0 0 auto 0;z-index:1000;display:flex;align-items:center;gap:1rem; padding:.85rem var(--pad);transition:padding .4s var(--ease)} .nav.is-scrolled{padding-block:.65rem} .nav.is-scrolled .nav__toggle{top:.65rem} .nav__brand{display:flex;align-items:center;gap:.75rem;margin-right:auto} .nav__logo{display:grid;place-items:center;flex:0 0 auto} .nav__logo-img{width:clamp(38px,5vw,48px);height:auto;display:block;filter:drop-shadow(0 0 8px rgba(168,85,247,.4))} .nav__word{display:flex;flex-direction:column;line-height:1.05;font-weight:600;letter-spacing:.12em; font-size:clamp(.95rem,2.4vw,1.18rem);color:#fff} .nav__word em{display:flex;align-items:center;gap:.55em;justify-content:center;font-style:normal; font-size:.5em;letter-spacing:.42em;color:#cbc8dd;margin-top:4px;text-transform:uppercase} .nav__word em::before,.nav__word em::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,rgba(255,46,154,.7),rgba(45,127,255,.7),transparent)} /* hamburger toggle — always visible, fixed top-right, morphs to an X */ .nav__toggle{position:fixed;top:.85rem;right:clamp(1.1rem,2.2vw,1.9rem);z-index:1300; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(10,7,18,.5); backdrop-filter:blur(6px);transition:border-color .3s,background .3s,box-shadow .3s,top .4s var(--ease)} .nav__toggle span{display:block;height:2px;width:22px;border-radius:2px;background:var(--grad); transition:transform .4s var(--ease),opacity .25s} .nav__toggle:hover{border-color:rgba(255,46,154,.55);box-shadow:0 0 16px -4px rgba(255,46,154,.6)} .nav__toggle[aria-expanded="true"]{border-color:rgba(255,46,154,.6);background:rgba(20,8,28,.65);box-shadow:0 0 18px -4px rgba(255,46,154,.7)} .nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(0)} .nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---- nh buttons (shared) ---- */ .nh-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.7rem;border-radius:10px; text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:500;border:1px solid transparent;white-space:nowrap;cursor:pointer; transition:transform .35s var(--ease),box-shadow .35s,background .35s,border-color .35s} .nh-btn span{font-size:.95em} .nh-btn--pink{border-color:var(--pink);color:#fff;background:rgba(255,46,154,.06); box-shadow:0 0 22px -6px rgba(255,46,154,.6),inset 0 0 22px -14px rgba(255,46,154,.85)} .nh-btn--pink:hover{background:rgba(255,46,154,.16);box-shadow:0 0 32px -4px rgba(255,46,154,.85);transform:translateY(-2px)} .nh-btn--ghost{border-color:rgba(255,255,255,.2);color:#d3d0e2;background:transparent} .nh-btn--ghost span{color:#8a87a0} .nh-btn--ghost:hover{border-color:rgba(255,255,255,.45);transform:translateY(-2px)} .nav__cta{padding:.68rem 1.3rem;font-size:.7rem;border-radius:9px} /* ===================================================================== HERO — Full viewport (100vw × 100svh). Scene = absolute BACKGROUND filling the entire hero. Text overlays on top with z-index. The 7 aligned 16:9 PNGs self-register pixel-perfect via inset:0. ===================================================================== */ .nhero{position:relative;width:100vw;height:100svh;min-height:100svh; overflow:hidden;background:var(--bg); padding:calc(var(--navh) + 1.4rem) var(--pad) 1.4rem; display:flex;flex-direction:column} /* --- Scene = the LARGEST 16:9 that fits the viewport (contain-fit), centered. Fills a 16:9 screen edge-to-edge; on other ratios the extra space is just more starfield. No bg layer → the transparent sky reveals the stars behind, fusing the animation and the art into one image. Gentle feather only. --- */ .nhero__scene{position:absolute;top:50%;left:64%;transform:translate(-50%,-50%); width:min(75vw,133svh);aspect-ratio:16/9;z-index:2;pointer-events:none; /* four-edge feather (kills the swoosh / top / bottom hard cuts) */ -webkit-mask-image: linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%), linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%), linear-gradient(to bottom,transparent 0,#000 9%,#000 84%,transparent 100%); mask-composite:intersect} /* Inner wrapper holds the composition + emblem. Each .nh-layer child drifts independently (per-layer pointer parallax set from JS) — translate3d promotes each on demand for the layered-depth effect. */ .nhero__scene-inner{position:absolute;inset:0;container-type:size} .nh-layer{position:absolute;inset:0;background-repeat:no-repeat; background-size:100% 100%;background-position:center} .nh-clouds{background-image:url("../assets/hero/01-clouds.png")} .nh-tech{background-image:url("../assets/hero/02-tech.png")} .nh-triangle{background-image:url("../assets/hero/03-triangle.png")} .nh-skyline{background-image:url("../assets/hero/04-skyline.png")} .nh-reflection{background-image:url("../assets/hero/05-reflection.png")} .nh-pink{background-image:url("../assets/hero/06-pink.png")} .nh-blue{background-image:url("../assets/hero/07-blue.png")} .nh-buildings{background-image:url("../assets/hero/08-buildings.png")} /* --- Neon glass-tube sign centerpiece inside the triangle --- */ .nh-emblem{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);z-index:6; display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center;pointer-events:none} .nh-emblem__sign{font-family:"Pacifico",cursive;font-weight:400;line-height:1; font-size:clamp(1.32rem,5.5cqw,4.1rem);color:#fff5fb; text-shadow:0 0 2px #fff,0 0 6px #ffd9ec,0 0 12px #ff2e9a,0 0 22px #ff2e9a,0 0 40px #d6249f,0 0 70px #a01070; animation:neonFlicker 5.4s infinite} .nh-emblem__sub{font-family:"Pacifico",cursive;font-size:clamp(.72rem,2.4cqw,1.56rem);color:#eaf2ff; text-shadow:0 0 2px #fff,0 0 6px #bcd4ff,0 0 14px #2d7fff,0 0 26px #2d7fff,0 0 44px #1a5fd0; animation:neonFlicker 5.4s .4s infinite} @keyframes neonFlicker{ 0%,8%,9.6%,12%,55.5%,100%{opacity:1} 8.6%,11%{opacity:.55}9%{opacity:.82}55%,57%{opacity:.72}} /* --- Starfield canvas: fills the whole hero, sits behind everything --- */ .nhero__stars{position:absolute;inset:0;z-index:0;pointer-events:none;display:block} /* --- Ambient glow: brand-colored light spilling from the scene into the dark. Slightly larger than the scene so it bleeds past the feathered edges and fuses the scene with the surrounding starfield (no hard boundary). --- */ .nhero__glow{position:absolute;top:50%;left:64%;transform:translate(-50%,-50%); width:min(84vw,1280px);aspect-ratio:16/9;z-index:1;pointer-events:none; background: radial-gradient(42% 60% at 33% 62%,rgba(255,46,154,.30),transparent 72%), radial-gradient(44% 62% at 67% 60%,rgba(45,127,255,.30),transparent 72%), radial-gradient(64% 66% at 50% 56%,rgba(123,47,247,.18),transparent 74%); filter:blur(60px);opacity:.8} /* Light scrim — only a soft left fade for headline legibility; keeps stars visible */ .nhero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(90deg,rgba(6,3,9,.55) 0%,rgba(6,3,9,.2) 30%,transparent 50%)} /* --- Text content --- */ .nhero__content{position:relative;z-index:3;max-width:36rem;margin-top:auto;margin-bottom:auto} .nhero__kicker{text-transform:uppercase;letter-spacing:.3em;font-weight:500; font-size:clamp(.62rem,2.6vw,.8rem);margin-bottom:1.1rem; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%} .nhero__title{text-transform:uppercase;font-weight:300;line-height:1.04;letter-spacing:.004em;color:#fff; font-size:clamp(2.5rem,12vw,3.6rem)} .nhero__title span{display:block} .nhero__title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .nhero__rule{display:block;width:64px;height:3px;border-radius:3px;background:var(--grad-line);margin:1.3rem 0 1.2rem} .nhero__body{font-weight:300;color:var(--muted);max-width:32rem;font-size:clamp(.96rem,4.2vw,1.04rem);line-height:1.7} .nhero__cta{display:flex;flex-direction:column;gap:.9rem;margin-top:1.9rem;align-items:stretch} .nhero__cta .nh-btn{padding-block:1rem} /* --- Stats --- */ .nhero__stats{position:relative;display:flex;align-items:center;flex-wrap:wrap;row-gap:.9rem;margin-top:1.6rem;z-index:3} .nhero__stats-dots{display:none} .nstat{flex:1;display:flex;flex-direction:column;gap:.3rem;align-items:center;text-align:center;padding:0 .5rem} .nstat:not(:last-child){border-right:1px solid rgba(255,255,255,.13)} .nstat__num{font-weight:600;font-size:clamp(1.7rem,8vw,2.3rem);line-height:1} .nstat__num--pink{color:var(--pink)} .nstat__num--purple{color:var(--purple)} .nstat__num--blue{color:#4f8bff} .nstat__label{text-transform:uppercase;letter-spacing:.12em;font-size:clamp(.56rem,2.7vw,.66rem);color:var(--dim);font-weight:500} /* "Only in Oklahoma City" location tag — matches the stats' type + brand gradient */ .nhero__loc{flex:0 0 auto;display:flex;align-items:center;gap:.55rem;padding-left:.7rem} .nhero__loc-pin{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:var(--pink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,46,154,.6))} .nhero__loc-txt{display:flex;flex-direction:column;gap:.3rem;line-height:1} .nhero__loc-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.54rem,2.6vw,.64rem);color:var(--dim);font-weight:500} .nhero__loc-city{font-weight:600;font-size:clamp(1rem,4vw,1.25rem);letter-spacing:.01em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content} /* --- Scroll cue --- */ .nhero__scroll{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.7rem; text-transform:uppercase;letter-spacing:.25em;font-size:.62rem;color:var(--dim);z-index:3} .nhero__mouse{width:24px;height:38px;border:1px solid rgba(255,255,255,.32);border-radius:14px;position:relative} .nhero__mouse i{position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:3px;background:#fff;transform:translateX(-50%);animation:mouseDot 1.8s ease-in-out infinite} @keyframes mouseDot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}} /* --- Overlay annotations (hidden on mobile; shown via media queries) --- */ .nhero__capsule,.nhero__vtext{display:none} .nhero__capsule{position:absolute;z-index:3;gap:.8rem;padding:1rem 1.15rem;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(8,6,16,.4);backdrop-filter:blur(4px)} .nhero__capsule-glyph{color:var(--purple);font-size:.85rem;line-height:1} .nhero__capsule ul{list-style:none;display:grid;gap:.4rem} .nhero__capsule li{text-transform:uppercase;letter-spacing:.2em;font-size:.62rem;color:#cfcde0} .nhero__vtext{position:absolute;z-index:3;writing-mode:vertical-rl;gap:1.3rem; text-transform:uppercase;letter-spacing:.32em;font-size:.6rem;color:#6f6c85} /* ===================================================================== REVEAL ===================================================================== */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.is-visible{opacity:1;transform:none} .reveal[data-reveal-delay="1"]{transition-delay:.08s} .reveal[data-reveal-delay="2"]{transition-delay:.16s} .reveal[data-reveal-delay="3"]{transition-delay:.24s} .reveal[data-reveal-delay="4"]{transition-delay:.32s} /* ===================================================================== TABLET (640–1023) — text overlays scene; stats inline below text ===================================================================== */ @media (min-width:640px){ /* nav links wrap to a centered second row */ .nav{flex-wrap:wrap;row-gap:.3rem} .nav__links{order:3;flex-basis:100%;justify-content:center;gap:.2rem 2rem;margin-top:.3rem} .nhero__content{max-width:42rem} .nhero__title{font-size:clamp(3rem,7.5vw,4.4rem)} .nhero__cta{flex-direction:row;gap:1rem;align-items:flex-start} .nhero__cta .nh-btn{padding-block:.95rem} .nhero__stats{align-items:center;gap:1.4rem;margin-top:2.4rem} .nhero__stats-dots{display:flex;flex-direction:column;gap:5px;margin-right:.4rem} .nhero__stats-dots i{width:6px;height:6px;border-radius:50%} .nhero__stats-dots i:nth-child(1){background:var(--pink);box-shadow:0 0 8px var(--pink)} .nhero__stats-dots i:nth-child(2){background:var(--purple)} .nhero__stats-dots i:nth-child(3){background:#3a3550} .nstat{flex:0 0 auto;align-items:flex-start;text-align:left;padding-right:1.6rem;padding-left:0} .nstat:not(:last-child){border-right:1px solid rgba(255,255,255,.12)} /* capsule + vtext become visible, anchored upper-right */ .nhero__capsule{display:flex;right:5%;top:calc(var(--navh) + 2.2rem);bottom:auto} .nhero__vtext{display:flex;right:.8rem;top:calc(var(--navh) + 2.2rem);bottom:auto;height:14rem} } /* ===================================================================== DESKTOP (≥1024) — text anchored upper-left, stats lower-left, scene = bg ===================================================================== */ @media (min-width:1024px){ /* nav inline, links centered */ .nav{flex-wrap:nowrap} .nav__links{order:0;flex:1;flex-basis:auto;justify-content:center;margin-top:0} /* content anchored upper-left over the scene */ .nhero__content{position:absolute;top:clamp(20%,21vh,23%);left:clamp(1.5rem,5vw,5.5rem); max-width:min(46%,600px);z-index:3;margin:0} .nhero__kicker{font-size:.8rem;margin-bottom:1.5rem} .nhero__title{font-size:clamp(3.4rem,5.2vw,5.4rem);line-height:1.06} .nhero__rule{margin:1.7rem 0 1.6rem} .nhero__body{max-width:30rem;font-size:1.02rem} .nhero__cta{flex-direction:row;gap:1rem;margin-top:2.2rem;align-items:flex-start} /* stats anchored lower-left */ .nhero__stats{position:absolute;left:clamp(1.5rem,5vw,5.5rem);bottom:clamp(8%,11vh,13%); margin:0;gap:1.6rem;z-index:3} /* annotations: capsule + vertical text on the right */ .nhero__capsule{position:absolute;top:calc(var(--navh) + 2.4rem);right:5.5%;bottom:auto} .nhero__vtext{position:absolute;top:50%;right:1.1rem;bottom:auto;transform:translateY(-50%);height:auto} } /* ===================================================================== ULTRA-WIDE (≥1800) — slightly more padding, larger headline ===================================================================== */ @media (min-width:1800px){ .nhero{padding-left:clamp(3rem,6vw,8rem);padding-right:clamp(3rem,6vw,8rem)} .nhero__content{max-width:min(40%,640px)} .nhero__title{font-size:clamp(4rem,4.4vw,6rem)} } /* ===================================================================== PHONE (≤639) — HERO: the layered image scene becomes the focal STAGE at the top (first thing seen); kicker / title / body / buttons / stats flow beneath it. The scene's DOM order already precedes the copy, so switching it from absolute → in-flow puts images first automatically. ===================================================================== */ @media (max-width:639px){ .nhero{height:auto;min-height:100svh;justify-content:flex-start; padding:calc(var(--navh) + .5rem) var(--pad) 2.2rem;gap:1.25rem} /* image stage — full-bleed 16:9 (no distortion), dominant at the top */ .nhero__scene{position:relative;top:auto;left:auto; width:116vw;margin-left:50%;transform:translateX(-50%); aspect-ratio:16/9;z-index:2} /* ambient glow rides up behind the stage */ .nhero__glow{top:34%;left:50%;width:min(150vw,720px);aspect-ratio:16/9} /* the left-fade scrim + scroll cue are only for the overlay layout */ .nhero::after{display:none} .nhero__scroll{display:none} /* copy flows beneath the stage, full width */ .nhero__content{margin:0;max-width:none} .nhero__title{font-size:clamp(2.6rem,12vw,3.5rem);line-height:1.02} .nhero__rule{margin:1rem 0} .nhero__body{font-size:clamp(.95rem,4vw,1.04rem)} .nhero__cta{margin-top:1.4rem} .nhero__stats{margin-top:1.3rem} } /* ===================================================================== SMALL-PHONE NAV (<640) — hamburger ===================================================================== */ @media (max-width:639.98px){ .nav__links{display:none} .nav__cta{display:none} .nav__toggle{display:flex} .nav.is-open .nav__links{display:flex;flex-direction:column;gap:.35rem; position:absolute;top:100%;left:0;right:0;padding:1.1rem var(--pad) 1.5rem; background:rgba(6,3,9,.97);border-bottom:1px solid rgba(168,85,247,.2)} .nav.is-open .nav__links a{padding:.5rem 0;font-size:.85rem} .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav.is-open .nav__toggle span:nth-child(2){opacity:0} .nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } /* ===================================================================== SECTION 2 — CREATIVE SEQUENCE (pinned scrollytelling HUD) Base styles = mobile (static, stacked). Desktop (≥1024) turns on the sticky pin + the single-active-row tilt/frost scroll behaviour. Perf: the scroll loop only writes transform/opacity (compositor-cheap); the frosted blur is a discrete per-step state, never animated per frame; no backdrop-filter anywhere. ===================================================================== */ .seq{position:relative;background:var(--bg)} .seq__track{position:relative} .seq__pin{position:relative} .seq__inner{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:4rem var(--pad)} /* ---- intro (left) ---- */ .seq__kicker{text-transform:uppercase;letter-spacing:.3em;font-weight:500;font-size:.72rem;margin-bottom:1.1rem; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content;max-width:100%} .seq__title{text-transform:uppercase;font-weight:300;line-height:.98;letter-spacing:.01em;color:#fff; font-size:clamp(2.6rem,9vw,5rem);margin-bottom:1.4rem} .seq__title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .seq__title-dot{color:#4f8bff} .seq__body{font-weight:300;color:var(--muted);max-width:34rem;font-size:clamp(.95rem,2.5vw,1.04rem);line-height:1.7;margin-bottom:1.9rem} .seq__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem} /* ---- DAW / audio widget ---- */ .daw{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem; padding:.8rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(12,8,22,.55);max-width:34rem} .daw__meta{display:flex;flex-direction:column;gap:.12rem;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .daw__seq{color:#fff;font-weight:600;font-size:.68rem;letter-spacing:.1em} .daw__bpm em{font-style:normal;color:var(--dim)} .daw__wave{display:flex;align-items:center;gap:2px;height:30px} .daw__wave span{flex:1;height:100%;border-radius:2px;transform-origin:center;transform:scaleY(.32); background:linear-gradient(180deg,#ff7ac6,#a855f7)} .daw__wave span:nth-child(2n){transform:scaleY(.7)} .daw__wave span:nth-child(3n){transform:scaleY(.5)} .daw__wave span:nth-child(4n){transform:scaleY(.95)} .daw__wave span:nth-child(5n){transform:scaleY(.6)} .daw__wave span:nth-child(7n){transform:scaleY(1)} .daw__wave span:nth-child(8n){transform:scaleY(.42)} .daw__eq{display:flex;align-items:flex-end;gap:3px;height:30px} .daw__eq span{width:4px;border-radius:1px;height:100%;transform-origin:bottom;transform:scaleY(.4);background:linear-gradient(180deg,#2d7fff,#a855f7)} .daw__eq span:nth-child(2n){transform:scaleY(.75)} .daw__eq span:nth-child(3n){transform:scaleY(.55)} .daw__eq span:nth-child(5n){transform:scaleY(.9)} .daw__dots{display:flex;flex-direction:column;gap:4px} .daw__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22)} .daw__dots i:first-child{background:var(--pink);box-shadow:0 0 8px var(--pink)} /* ---- HUD stage (right) ---- */ .seq__stage{margin-top:2.6rem} .hud-timeline{margin-bottom:1.2rem} .hud-timeline__head{display:flex;align-items:baseline;gap:1rem;margin-bottom:.5rem} .hud-timeline__title{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} .hud-timeline__code{font-size:.7rem;letter-spacing:.1em;color:#fff;font-variant-numeric:tabular-nums} .hud-ruler{position:relative;border-top:1px solid rgba(255,255,255,.12);padding-top:.4rem} .hud-ruler__ticks{display:flex;justify-content:space-between;font-size:.5rem;letter-spacing:.04em;color:var(--dim);font-variant-numeric:tabular-nums} .hud-ruler__play{position:absolute;top:-1px;left:0;width:1px;height:13px;background:var(--pink);box-shadow:0 0 8px var(--pink);transition:left .3s var(--ease)} /* rows — base (mobile): static, stacked, all visible */ .seq-rows{display:flex;flex-direction:column;gap:1.4rem} .seq-row{position:relative} .seq-row::after{display:none} .seq-row__tag{display:flex;flex-direction:column;gap:.3rem;align-items:flex-start;margin-bottom:.7rem} .seq-row__node{width:10px;height:10px;border-radius:2px;border:1px solid var(--pink);background:rgba(255,46,154,.2);box-shadow:0 0 10px rgba(255,46,154,.5)} .seq-row__no{font-size:1.7rem;font-weight:300;color:#fff;line-height:1} .seq-row__name{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)} .seq-track{display:grid;grid-template-columns:1fr;gap:.8rem} /* cards */ .hud-card{position:relative;display:flex;flex-direction:column;gap:.45rem;min-height:128px; padding:.85rem .9rem;border-radius:10px;border:1px solid rgba(255,46,154,.38); background:linear-gradient(160deg,rgba(22,11,34,.72),rgba(11,9,24,.55)); box-shadow:0 0 22px -9px rgba(255,46,154,.55),inset 0 0 30px -22px rgba(168,85,247,.9)} .seq-track .hud-card:nth-of-type(2){border-color:rgba(168,85,247,.45); box-shadow:0 0 22px -9px rgba(168,85,247,.55),inset 0 0 30px -22px rgba(45,127,255,.9)} .hud-card__title{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;font-weight:600;color:#fff} .hud-card__list{list-style:none;display:flex;flex-direction:column;gap:.14rem} .hud-card__list li{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .hud-graph{width:100%;height:34px;margin-top:auto;filter:drop-shadow(0 0 4px rgba(168,85,247,.6))} .hud-card__brand{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:.5rem} .hud-brandmark{font-size:1.35rem;font-weight:700;letter-spacing:.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hud-swatches{display:flex;gap:4px} .hud-swatches i{width:14px;height:14px;border-radius:3px;background:var(--c);box-shadow:0 0 8px -1px var(--c)} .hud-mock{margin-top:auto;display:grid;gap:3px} .hud-mock span{height:5px;border-radius:2px;background:rgba(130,170,255,.4)} .hud-mock span:first-child{width:42%;background:rgba(255,46,154,.5)} .hud-mock span:nth-child(3){width:75%} .hud-mock span:nth-child(4){width:55%} .hud-card__img{margin-top:auto;height:46px;border-radius:6px;overflow:hidden;position:relative} .img-figure{background:radial-gradient(42% 58% at 50% 38%,rgba(174,132,255,.6),transparent 66%),linear-gradient(180deg,#160c28,#0a0816)} .img-streaks{background:linear-gradient(180deg,#160a22,#0a0816)} .img-streaks::before{content:"";position:absolute;inset:-25%;transform:skewY(-9deg); background:linear-gradient(100deg,transparent 28%,rgba(255,46,154,.65) 44%,transparent 56%), linear-gradient(100deg,transparent 52%,rgba(45,127,255,.6) 64%,transparent 74%)} /* connectors + output */ .seq-link{display:none} .hud-out{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:128px; border-radius:10px;overflow:hidden;border:1px solid rgba(45,127,255,.42);box-shadow:0 0 26px -9px rgba(45,127,255,.6)} .hud-out__label{position:absolute;top:.5rem;left:.6rem;z-index:2;font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .hud-out__img{position:absolute;inset:0} .img-city{background: repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 8px) bottom/100% 48% no-repeat, radial-gradient(72% 60% at 48% 96%,rgba(255,46,154,.55),transparent 70%), radial-gradient(64% 55% at 66% 100%,rgba(45,127,255,.5),transparent 72%), linear-gradient(180deg,#1a0a28,#080612)} .hud-out__arrow{position:absolute;inset:0;display:grid;place-items:center;z-index:2;font-size:1.7rem;color:#fff;text-shadow:0 0 14px #2d7fff} .hud-out__cta{position:relative;z-index:2;margin:auto .6rem .6rem;font-size:.6rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;font-weight:600} .hud-out__cta em{font-style:normal} .hud-out--node{display:none} .hud-out__dot{width:16px;height:16px;border-radius:50%;background:#2d7fff;box-shadow:0 0 16px #2d7fff} /* bottom HUD strip */ .hud-strip{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:1.4rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)} .hud-stat{display:flex;align-items:center;gap:.5rem} .hud-stat__k{font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .hud-stat__v{font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#cfcde0} .hud-stat__v--ok{color:#37e0b0} .hud-signal{width:120px;height:18px;filter:drop-shadow(0 0 4px rgba(168,85,247,.6))} .hud-bars{display:flex;align-items:flex-end;gap:2px;height:15px} .hud-bars i{width:3px;height:100%;border-radius:1px;background:#37e0b0;transform-origin:bottom;transform:scaleY(.5)} .hud-bars i:nth-child(2n){transform:scaleY(.85)} .hud-bars i:nth-child(3n){transform:scaleY(.65)} .hud-bars i:nth-child(5n){transform:scaleY(1)} .hud-sync{width:12px;height:12px;border-radius:50%;border:1px solid #37e0b0;position:relative} .hud-sync::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#37e0b0;box-shadow:0 0 8px #37e0b0} /* ===================================================================== DESKTOP (≥1024) — sticky pin + single-active-row tilt/frost ===================================================================== */ @media (min-width:1024px){ /* Section 2 is now a single 100vh section — the row progression is driven by the JS section pager (one wheel flick / swipe / arrow key = one row), so we no longer need an oversized scrollable track or internal snap stops. */ .seq__track{height:100svh} .seq__snaps{display:none} .seq__pin{position:relative;height:100svh;overflow:hidden;display:flex;align-items:center} .seq__pin::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background: radial-gradient(58% 50% at 80% 40%,rgba(168,85,247,.16),transparent 70%), radial-gradient(48% 46% at 94% 72%,rgba(45,127,255,.14),transparent 72%), radial-gradient(40% 42% at 70% 84%,rgba(255,46,154,.12),transparent 74%)} .seq__inner{display:grid;grid-template-columns:minmax(300px,33%) 1fr;gap:3rem;align-items:center;padding-top:0;padding-bottom:0} .seq__stage{margin-top:0} .seq-rows{position:relative;display:block;height:clamp(380px,56vh,580px);perspective:1700px} .seq-row{position:absolute;left:0;right:0;top:50%;display:flex;align-items:center;gap:1.3rem; transform-origin:center center;will-change:transform,opacity; transition:transform .7s var(--ease),opacity .7s var(--ease),filter .7s var(--ease); transform:translateY(-50%) translateY(calc(var(--rel,0) * 30%)) rotateX(8deg) rotateY(-13deg) scale(.72); opacity:.3;filter:blur(5px) saturate(.85) brightness(.78);z-index:1} .seq-row::after{content:"";display:block;position:absolute;inset:-3% -1.5%;border-radius:18px;pointer-events:none; background:linear-gradient(180deg,rgba(8,6,18,.5),rgba(8,6,18,.26));opacity:1;transition:opacity .7s var(--ease)} .seq-row.is-adjacent{opacity:.5;filter:blur(3px) saturate(.92) brightness(.88);z-index:4} .seq-row.is-active{transform:translateY(-50%) rotateX(4deg) rotateY(-8deg) scale(1);opacity:1;filter:none;z-index:10} .seq-row.is-active::after{opacity:0} .seq-row__tag{flex:0 0 6.5rem;margin-bottom:0} .seq-track{flex:1;display:grid;grid-template-columns:1fr 26px 1fr 26px 1.04fr;gap:0;align-items:center} .seq-link{display:block;position:relative;height:1.5px;background:linear-gradient(90deg,rgba(255,46,154,.65),rgba(45,127,255,.65))} .seq-link::before{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:0 0 10px #fff} .hud-out--node{display:flex;align-items:center;justify-content:center;border:none;box-shadow:none;min-height:0} } /* ===================================================================== SECTION 2 — MOBILE (≤1023): bring the desktop blur + layered depth to phones, driven by SCROLL. Each row fills ~a viewport; the one nearest the centre sharpens & sits upright while the others tilt back, dim and blur — mirroring the desktop reveal. JS adds .is-mobseq + sets the active/adjacent row from scroll position (reusing setSeqActive). ===================================================================== */ @media (max-width:1023px){ .seq.is-mobseq .seq-rows{display:flex;flex-direction:column;gap:0;perspective:1200px;perspective-origin:50% 50%} .seq.is-mobseq .seq-row{min-height:60svh;display:flex;flex-direction:column;justify-content:center; transform-origin:center center;will-change:transform,opacity,filter; transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease); /* default = receded: tilted back, shrunk, blurred, dim */ transform:rotateX(12deg) scale(.84);opacity:.3;filter:blur(4.5px) saturate(.85) brightness(.76)} .seq.is-mobseq .seq-row.is-adjacent{opacity:.5;filter:blur(2.4px) saturate(.92) brightness(.9);transform:rotateX(6deg) scale(.92)} .seq.is-mobseq .seq-row.is-active{opacity:1;filter:none;transform:none} /* keep cards compact so the focused row fits one screen */ .seq.is-mobseq .seq-track{grid-template-columns:1fr;gap:.55rem} .seq.is-mobseq .seq-row__tag{flex-direction:row;align-items:center;gap:.7rem;margin-bottom:.7rem} .seq.is-mobseq .hud-card{min-height:104px} .seq.is-mobseq .hud-out{min-height:104px} } /* ===================================================================== REDUCED MOTION — no pin, no tilt/frost; show all rows statically ===================================================================== */ @media (prefers-reduced-motion:reduce){ .seq__track{height:auto} .seq__pin{position:relative;height:auto;display:block;overflow:visible} .seq__pin::before{display:none} .seq-rows{position:relative;display:flex;flex-direction:column;gap:1.6rem;height:auto;perspective:none} .seq-row{position:relative;top:auto;transform:none!important;opacity:1!important;filter:none!important} .seq-row::after{display:none} } /* ===================================================================== SECTION 3 — PHOTOGRAPHY GALLERY (tilted wall + reflective floor) Static section (no scroll animation). The reflective floor is a real mirror via -webkit-box-reflect on the wall, plus a blurred neon puddle. ===================================================================== */ .gal{position:relative;background:var(--bg);overflow:hidden;padding:clamp(3rem,7vh,5rem) 0 clamp(6.5rem,15vh,10rem)} /* dark paneled wall + ambient brand glow behind everything */ .gal::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background: radial-gradient(46% 48% at 74% 26%,rgba(150,60,200,.18),transparent 70%), radial-gradient(44% 46% at 60% 82%,rgba(90,50,210,.16),transparent 72%), radial-gradient(40% 40% at 90% 60%,rgba(45,127,255,.12),transparent 74%), repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 1px,transparent 1px 74px)} .gal__inner{position:relative;z-index:1;max-width:1600px;margin:0 auto;padding:0 var(--pad); display:grid;grid-template-columns:1fr;gap:3rem;align-items:center} /* ---- intro (left) ---- */ .gal__kicker{text-transform:uppercase;letter-spacing:.32em;font-weight:500;font-size:.72rem;color:#b69ae6;margin-bottom:1.2rem} .gal__title{text-transform:uppercase;font-weight:300;line-height:.99;letter-spacing:.01em;color:#fff; font-size:clamp(2.7rem,9vw,4.6rem);margin-bottom:1.5rem} .gal__title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .gal__title-dot{color:#4f8bff} .gal__body{font-weight:300;color:var(--muted);max-width:30rem;font-size:clamp(.95rem,2.5vw,1.04rem);line-height:1.75;margin-bottom:1.9rem} .gal__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.1rem} /* ---- services panel ---- */ .gal-services{border:1px solid rgba(168,85,247,.28);border-radius:11px;padding:.9rem 1rem; background:rgba(12,8,22,.42);max-width:29rem} .gal-services__title{text-transform:uppercase;letter-spacing:.2em;font-size:.58rem;font-weight:600;color:#b69ae6;margin-bottom:.8rem} .gal-services__grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem .7rem} .gal-services__grid li{display:flex;align-items:flex-start;gap:.45rem; font-size:.57rem;letter-spacing:.08em;line-height:1.28;text-transform:uppercase;color:#cfcde0} .gal-services__grid svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--pink);stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(255,46,154,.5))} /* ---- gallery wall ---- */ .gal__wall-wrap{position:relative;perspective:1700px;perspective-origin:72% 44%;padding-bottom:6%} /* blurred neon puddle on the floor under the wall (wet-floor glow) */ .gal__wall-wrap::after{content:"";position:absolute;left:-12%;right:-12%;top:100%;height:46%;z-index:-1;pointer-events:none; filter:blur(28px); background: radial-gradient(58% 100% at 50% 0%,rgba(168,85,247,.5),transparent 72%), radial-gradient(44% 98% at 25% 0%,rgba(255,46,154,.42),transparent 74%), radial-gradient(48% 98% at 77% 0%,rgba(45,127,255,.46),transparent 74%)} .gal__wall{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto); gap:clamp(10px,1.2vw,16px); -webkit-box-reflect:below 0 linear-gradient(to bottom,rgba(0,0,0,.88),rgba(0,0,0,.4) 26%,transparent 54%)} .gal-frame{position:relative;aspect-ratio:4/3;border-radius:6px;overflow:hidden; border:1.5px solid var(--fc,#a855f7); box-shadow:0 0 26px -6px var(--fc,#a855f7),inset 0 0 50px -26px var(--fc,#a855f7)} .gal-frame__img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center;display:block; /* tone the photo to match the neon studio aesthetic without losing detail */ filter:saturate(1.05) contrast(1.04)} .gal-frame__screen{position:absolute;inset:0;z-index:1;pointer-events:none; /* darker gradient now that there's a real photo behind — keeps caption legible + neon mood */ background: linear-gradient(180deg,rgba(8,6,16,0) 0%,rgba(8,6,16,0) 45%,rgba(8,6,16,.78) 100%), radial-gradient(120% 80% at 50% 0%,rgba(255,46,154,.10),transparent 55%), radial-gradient(120% 80% at 50% 100%,rgba(45,127,255,.12),transparent 55%); mix-blend-mode:normal} .gal-frame figcaption{position:absolute;left:.85rem;bottom:.7rem;z-index:2; font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#e7e4f2;text-shadow:0 1px 8px rgba(0,0,0,.9)} /* per-frame neon colour */ .gal-frame--re {--fc:#ff2e9a} .gal-frame--modeling{--fc:#2d7fff} .gal-frame--portrait{--fc:#ff3ea5} .gal-frame--events {--fc:#b14bff} .gal-frame--product {--fc:#a855f7} .gal-frame--brand {--fc:#4f7cff} /* phone : keep the 3D wall tilt too (gentler + clipped by the section so it never overflows the narrow viewport) — the 2-col grid stays. */ @media (max-width:767px){ .gal__wall-wrap{perspective:1050px;perspective-origin:56% 42%;padding-bottom:12%} .gal__wall{transform:rotateY(-15deg) rotateX(7deg) rotate(-1deg);transform-origin:50% 46%; transform-style:preserve-3d;gap:9px;margin:0 auto;width:96%} } /* tablet+ : 3-column tilted wall */ @media (min-width:768px){ .gal__wall{grid-template-columns:1.12fr .92fr 1.04fr;grid-template-rows:1fr 1fr; height:clamp(400px,44vw,560px); transform:rotateY(-20deg) rotateX(6deg) rotate(-1deg);transform-origin:50% 50%} .gal-frame{aspect-ratio:auto;height:100%} } /* desktop : two-column layout (intro | wall) */ @media (min-width:1024px){ .gal__inner{grid-template-columns:minmax(300px,31%) 1fr;gap:3.2rem} } /* ===================================================================== SECTION 4 — SOUND STUDIO (real-audio spectrum analyzer + player) ===================================================================== */ .snd{position:relative;background:var(--bg);overflow:hidden;padding:clamp(3rem,7vh,5rem) 0 0} .snd::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background: radial-gradient(48% 50% at 78% 22%,rgba(150,50,200,.16),transparent 70%), radial-gradient(46% 48% at 70% 78%,rgba(60,40,210,.13),transparent 72%)} .snd__inner{position:relative;z-index:1;max-width:1680px;margin:0 auto;padding:0 var(--pad); display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:start} /* ---- intro (left) ---- */ .snd__kicker{text-transform:uppercase;letter-spacing:.32em;font-weight:500;font-size:.72rem;color:#d24b9e;margin-bottom:1.1rem} .snd__title{text-transform:uppercase;font-weight:300;line-height:1.04;letter-spacing:.01em;color:#fff; font-size:clamp(1.85rem,7.5vw,3.4rem);margin-bottom:1.2rem;overflow-wrap:break-word} .snd__title-grad{background:linear-gradient(90deg,#ff2e9a,#d6249f);-webkit-background-clip:text;background-clip:text;color:transparent} .snd__title-grad2{background:linear-gradient(90deg,#a855f7,#2d7fff);-webkit-background-clip:text;background-clip:text;color:transparent} .snd__body{font-weight:300;color:var(--muted);max-width:30rem;font-size:clamp(.9rem,2.4vw,.98rem);line-height:1.65;margin-bottom:1.5rem} .snd__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.6rem} /* connected service list */ .snd-list{position:relative;list-style:none;display:flex;flex-direction:column;gap:.95rem;max-width:30rem} .snd-list::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1.5px; background:linear-gradient(180deg,#ff2e9a,#a855f7 55%,#2d7fff);opacity:.55} .snd-list li{position:relative;display:flex;align-items:center;gap:.75rem;padding-left:1.7rem} .snd-list li::before{content:"";position:absolute;left:1px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%; background:#0a0716;border:1.5px solid #ff2e9a;box-shadow:0 0 8px rgba(255,46,154,.7)} .snd-list__ico{flex:0 0 auto;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px; border:1px solid rgba(255,46,154,.3);background:rgba(255,46,154,.06)} .snd-list__ico svg{display:block;width:18px;height:18px;fill:none;stroke:var(--pink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .snd-list div b{display:block;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;margin-bottom:.1rem} .snd-list div span{display:block;font-size:.56rem;line-height:1.35;color:var(--muted)} /* ---- right column (spectrum on top / library card on bottom) ---- */ /* Negative gap: viz overlaps the player slightly so the bars look like they emerge straight out of the library card. The seam glow on the player's top edge does the visual "punching through the surface" effect. */ .snd__right{display:flex;flex-direction:column;gap:0;min-width:0;position:relative;isolation:isolate} /* ---- spectrum analyzer — FRAMELESS, layered/parallax ---- Container has no border / background. Children are stacked z-index 0..4 to form a 3-layer depth model: atmo lines, blurred ghost, real spectrum, front sparks, chrome on top. */ .viz{position:relative;min-width:0} .viz--free{flex:1 1 0;min-height:0;border:none;background:transparent;border-radius:0;overflow:visible; /* Pull the viz down a few px so its bottom edge sits ON the player's top edge — the player's seam glow then reads as if the bars are erupting from it */ margin-bottom:-6px;padding-bottom:6px} /* Background ambient layer (LAYER 0) — vertical depth lines + soft haze */ .viz__atmo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; background: radial-gradient(60% 70% at 50% 100%,rgba(168,85,247,.18),transparent 70%), radial-gradient(80% 60% at 50% 0%,rgba(45,127,255,.06),transparent 70%)} .viz__line{position:absolute;top:0;bottom:0;left:var(--x);width:1px; background:linear-gradient(180deg,transparent 0%,rgba(168,85,247,.22) 30%,rgba(255,46,154,.34) 60%,rgba(45,127,255,.22) 100%); opacity:.45;animation:viz-line 5.5s ease-in-out infinite;animation-delay:var(--d,0s); box-shadow:0 0 4px rgba(255,46,154,.18)} @keyframes viz-line{0%,100%{opacity:.22;transform:translateY(-4%)}50%{opacity:.7;transform:translateY(4%)}} /* Main canvas (LAYER 2) */ .viz__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2} /* Ghost canvas (LAYER 1) — uses CSS to render a blurred halo behind the main bars without doubling the canvas work. We achieve the "ghost spectrum" feel by stretching the main canvas via a sibling backdrop element with backdrop-filter. But since we can't actually duplicate the canvas output via CSS, we instead layer a SOFT GRADIENT bloom that breathes with the bars (CSS-only fake bloom). */ .viz__canvas--ghost{display:none} /* placeholder; the real glow comes from canvas's own additive blending + the haze below */ /* Foreground sparks (LAYER 3) — small rising particles per column */ .viz__sparks{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden} .viz__sparks span{position:absolute;left:var(--x);bottom:0;width:3px;height:3px;border-radius:50%; background:radial-gradient(closest-side,#fff,rgba(255,46,154,.8) 60%,transparent); box-shadow:0 0 8px rgba(255,255,255,.7),0 0 16px rgba(255,46,154,.6); opacity:0;animation:viz-spark 4.2s ease-in-out infinite;animation-delay:var(--d,0s); filter:blur(.3px)} @keyframes viz-spark{ 0%{opacity:0;transform:translate(-50%,0) scale(.6)} 10%{opacity:1} 60%{opacity:.5} 100%{opacity:0;transform:translate(-50%,-180%) scale(1.2)} } /* Chrome — tag, legend, LUFS — all top-layer */ .viz__tag{position:absolute;top:.9rem;left:1.1rem;z-index:5;display:flex;align-items:center;gap:.45rem; font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#efeaf6;font-weight:500} .viz__tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff2e9a;box-shadow:0 0 10px #ff2e9a} .viz__legend{position:absolute;top:.9rem;right:1.1rem;z-index:5;display:flex;align-items:center;gap:.95rem; font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .viz__leg{display:flex;align-items:center;gap:.35rem} .viz__leg::before{content:"";width:6px;height:6px;border-radius:50%} .viz__leg--low::before{background:#ff2e9a} .viz__leg--mid::before{background:#a855f7;box-shadow:0 0 6px #a855f7} .viz__leg--high::before{background:#2d7fff} .viz__more{color:var(--dim);letter-spacing:0} /* ---- Bottom half: merged Now Playing + scrollable library card ---- This card is sized to ~50% of the right column. The top edge carries a thin gradient glow that reads as the "surface" the visualizer's bars are rising out of. NP sits at the top (auto height), library scrolls below it (1fr). */ .player{position:relative;display:grid;grid-template-rows:auto 1fr; flex:1 1 50%;min-height:0; border-radius:16px;overflow:hidden;min-width:0; border:1px solid rgba(255,46,154,.3);background:rgba(13,9,24,.62); box-shadow: 0 0 40px -12px rgba(255,46,154,.55), 0 -20px 50px -32px rgba(255,46,154,.7), inset 0 1px 0 rgba(255,255,255,.06)} /* The glowing seam where the visualizer "punches through" — pink→purple→blue thread */ .player::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:4;pointer-events:none; background:linear-gradient(90deg,transparent 0%,rgba(255,46,154,.85) 25%,rgba(168,85,247,.95) 50%,rgba(45,127,255,.85) 75%,transparent 100%); box-shadow:0 0 14px rgba(255,46,154,.8),0 0 28px rgba(168,85,247,.5)} /* Subtle additional halo above the seam (radiates UP into the visualizer area) */ .player::after{content:"";position:absolute;left:8%;right:8%;top:-22px;height:24px;z-index:0;pointer-events:none; background:radial-gradient(60% 100% at 50% 100%,rgba(255,46,154,.45),rgba(168,85,247,.25) 45%,transparent 80%); filter:blur(6px)} /* now playing */ .np{display:flex;gap:1rem;padding:1rem;min-width:0;background:linear-gradient(160deg,rgba(34,13,48,.5),rgba(11,8,22,.12))} .np__titles{min-width:0} .np__art{position:relative;width:clamp(96px,8vw,118px);aspect-ratio:1;border-radius:11px;overflow:hidden;flex:0 0 auto} .np__badge{position:absolute;top:.4rem;left:.4rem;font-size:.42rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600; background:rgba(255,46,154,.92);color:#fff;padding:.2rem .42rem;border-radius:4px} .np__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4rem} .np__head{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem} .np__title{font-size:.92rem;font-weight:600;color:#fff;line-height:1.25} .np__meta{font-size:.58rem;color:var(--muted);letter-spacing:.04em} .np__more{color:var(--dim);font-size:1rem;background:none;border:none;line-height:1;flex:0 0 auto} .np__wave{display:flex;align-items:center;gap:1.5px;height:30px;cursor:pointer;margin-top:.1rem} .np__times{display:flex;justify-content:space-between;font-size:.54rem;color:var(--dim);font-variant-numeric:tabular-nums} .np__controls{display:flex;align-items:center;gap:.55rem;margin-top:auto} .np__btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#cfcde0;flex:0 0 auto; border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);transition:transform .2s,background .2s,color .2s} .np__btn svg{width:16px;height:16px;fill:currentColor} .np__btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);color:#fff} #shuffleBtn svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .np__btn--play{width:48px;height:48px;color:#fff;background:var(--grad);border:none;box-shadow:0 0 22px -4px rgba(255,46,154,.8)} .np__btn--play svg{width:20px;height:20px} .np__like{margin-left:auto} .np__like.is-liked{color:var(--pink)} .np__btn.is-on{color:var(--pink);border-color:rgba(255,46,154,.4)} .track.is-playing{border-color:var(--pink)} /* Track library — fills remaining height of player card and SCROLLS internally */ .lib{display:flex;flex-direction:column;padding:.8rem 1rem;gap:.6rem;min-width:0;min-height:0; border-top:1px solid rgba(255,255,255,.07)} .lib__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between} .lib__title{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#cfcde0;font-weight:600} .lib__filter{font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);background:none;border:1px solid rgba(255,255,255,.12); border-radius:6px;padding:.3rem .55rem;display:flex;align-items:center;gap:.3rem} /* The list is the scrollable region — flex:1 makes it take what's left, overflow-y:auto enables the scroll */ .tracklist{list-style:none;display:flex;flex-direction:column;gap:.45rem; overflow-y:auto;min-height:0;flex:1 1 0;padding-right:.4rem} .tracklist::-webkit-scrollbar{width:5px} .tracklist::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:3px} .tracklist::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff2e9a,#a855f7);border-radius:3px} .tracklist{scrollbar-width:thin;scrollbar-color:#a855f7 rgba(255,255,255,.05)} .track{display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;border-radius:10px;cursor:pointer; border:1px solid rgba(255,255,255,.06);background:rgba(10,8,20,.5);transition:border-color .25s,background .25s} .track:hover{border-color:rgba(168,85,247,.4);background:rgba(22,13,34,.6)} .track.is-active{border-color:var(--pink);background:rgba(255,46,154,.1);box-shadow:0 0 18px -8px rgba(255,46,154,.7)} .track__art{width:40px;height:40px;border-radius:8px;flex:0 0 auto} .track__info{min-width:0;display:flex;flex-direction:column;gap:.12rem;flex:1 1 auto} .track__title{font-size:.7rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .track__meta{font-size:.52rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .track__wave{display:none;flex:0 0 auto;width:64px;align-items:center;gap:1.5px;height:22px} .track__dur{flex:0 0 auto;font-size:.54rem;color:var(--dim);font-variant-numeric:tabular-nums} .track__play{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.05);color:#fff;font-size:.5rem;display:grid;place-items:center;transition:background .2s} .track.is-active .track__play,.track__play:hover{background:var(--grad);border-color:transparent} .track__more{flex:0 0 auto;color:var(--dim);font-size:.9rem;background:none;border:none;line-height:1} /* relocated LUFS meter — lives in the analyzer (bottom-right) */ .viz__lufs{position:absolute;right:.9rem;bottom:1.85rem;z-index:2;width:clamp(50px,5.2vw,62px);aspect-ratio:1;display:grid;place-items:center} .viz__lufs::before{content:"";position:absolute;inset:-26%;border-radius:50%;background:radial-gradient(circle,rgba(7,5,16,.92),rgba(7,5,16,0) 70%)} .viz__lufs-gauge{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .viz__lufs-bg{fill:none;stroke:rgba(255,255,255,.1);stroke-width:7} .viz__lufs-arc{fill:none;stroke:#c64dff;stroke-width:7;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:78; filter:drop-shadow(0 0 4px rgba(198,77,255,.85))} .viz__lufs-read{position:relative;display:flex;flex-direction:column;align-items:center;line-height:1.05} .viz__lufs-read b{font-size:.72rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums} .viz__lufs-read i{font-style:normal;font-size:.34rem;letter-spacing:.12em;color:var(--dim)} /* merged player → side-by-side with a divider on wider screens */ @media (min-width:768px){ .player{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} .lib{border-top:0;border-left:1px solid rgba(255,255,255,.08)} } /* waveform bars (generated by JS) */ .np__wave span{flex:1;min-width:0;height:100%;border-radius:1px;transform-origin:center;transform:scaleY(var(--h,.4));background:rgba(255,255,255,.16)} .np__wave span.played{background:linear-gradient(180deg,#ff2e9a,#a855f7)} .track__wave span{flex:1;min-width:0;height:100%;border-radius:1px;transform-origin:center;transform:scaleY(var(--h,.4)); background:linear-gradient(180deg,rgba(255,46,154,.55),rgba(45,127,255,.5))} /* album art — synthwave sunset (pink/magenta) */ .art--synth{background: radial-gradient(circle at 50% 44%,#ff8bd0 0%,#ff2e9a 6%,rgba(255,46,154,.5) 13%,transparent 24%), linear-gradient(180deg,#1a0b3a 0%,#3a1568 42%,#0c0622 50%,#23105a 70%,#0a0420 100%)} /* album art — neon highway (cyan/blue) */ .art--neon{background: radial-gradient(circle at 50% 50%,#7fd9ff 0%,#2d7fff 8%,rgba(45,127,255,.5) 16%,transparent 30%), linear-gradient(180deg,#0a1530 0%,#15265c 45%,#0a0e22 55%,#19326e 75%,#070818 100%)} /* album art — trap green (teal/forest) */ .art--trap{background: radial-gradient(circle at 50% 42%,#7fffc8 0%,#1fb88a 8%,rgba(31,184,138,.45) 18%,transparent 32%), linear-gradient(180deg,#0a1d18 0%,#103a2c 42%,#08160f 52%,#0d2a20 72%,#04100b 100%)} /* album art — lo-fi amber (orange/peach) */ .art--lofi{background: radial-gradient(circle at 50% 46%,#ffd9a1 0%,#ff9a3a 9%,rgba(255,154,58,.45) 20%,transparent 34%), linear-gradient(180deg,#2a160a 0%,#5a2a10 45%,#1a0d05 55%,#3a1f0c 72%,#100804 100%)} /* album art — ember red (crimson/gold) */ .art--ember{background: radial-gradient(circle at 50% 44%,#ffba6b 0%,#ff4d3a 8%,rgba(255,77,58,.45) 18%,transparent 32%), linear-gradient(180deg,#2a0810 0%,#5c1322 42%,#180408 52%,#3c0c18 70%,#0e0306 100%)} /* ---- responsive ---- */ @media (min-width:768px){ .track__wave{display:flex} } /* ===================================================================== NAV DOTS (right side) ===================================================================== */ .dots{position:fixed;right:clamp(.55rem,1.5vw,1.35rem);top:50%;transform:translateY(-50%);z-index:1100; display:flex;flex-direction:column;gap:.85rem;align-items:center} .dots__dot{position:relative;width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.4); background:transparent;transition:transform .3s var(--ease),background .3s,border-color .3s,box-shadow .3s} .dots__dot::after{content:attr(data-label);position:absolute;right:22px;top:50%; transform:translateY(-50%) translateX(6px);white-space:nowrap; font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;color:#e7e4f2; background:rgba(8,6,16,.82);padding:.32rem .55rem;border-radius:6px;border:1px solid rgba(255,255,255,.08); opacity:0;pointer-events:none;transition:opacity .25s,transform .25s} .dots__dot:hover{border-color:#fff} .dots__dot:hover::after{opacity:1;transform:translateY(-50%) translateX(0)} .dots__dot.is-active{background:var(--grad);border-color:transparent;box-shadow:0 0 12px rgba(255,46,154,.7);transform:scale(1.3)} @media (max-width:767px){ .dots{display:none} } /* ===================================================================== HOMEPAGE LAYOUT — single-viewport sections (≥1024 only) The actual section-to-section paging is driven by a JS pager (one wheel flick / swipe / Page Down = one section). No CSS scroll-snap — it fights the JS-driven smooth scroll and creates the locked-between-snaps feel. ===================================================================== */ @media (min-width:1024px){ html{scroll-padding-top:0} /* Marker class added by JS for the duration of a programmatic section change. During a pager animation we briefly disable scroll-snap-style behaviors and pointer interactions that would re-trigger the pager. */ html.is-paging{pointer-events:none} html.is-paging .nav,html.is-paging .dots,html.is-paging .nav__toggle{pointer-events:auto} /* section 3 — gallery fits one viewport */ .gal{height:100svh;display:flex;align-items:center;padding:var(--navh) 0 0;overflow:hidden} .gal__inner{width:100%} .gal__wall{height:clamp(320px,38vh,460px)} /* section 4 — single viewport: columns top-aligned so the visualizer top meets the "Our Sound Studio" kicker; whole block centred vertically */ .snd{height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--navh) 0 1.5rem;overflow:hidden} /* columns stretch to equal height → viz top meets the kicker, and the player bottom lines up with the last service-list item (Release-Ready) */ .snd__inner{grid-template-columns:minmax(280px,30%) 1fr;align-items:stretch;gap:2.2rem} .snd__title{font-size:clamp(1.8rem,2.5vw,2.9rem);line-height:1.06;margin-bottom:.9rem} .snd__body{margin-bottom:1.1rem} .snd__cta{margin-bottom:1.3rem} .snd-list{gap:.85rem} .snd__right{gap:0;height:100%} /* Visualizer takes the TOP HALF, library card takes the BOTTOM HALF. Negative margin on the viz (set on .viz--free above) makes the bars look like they erupt straight out of the player's glowing top seam. */ .viz--free{flex:1 1 50%;min-height:0} .player{flex:1 1 50%;min-height:0;grid-template-columns:1fr;grid-template-rows:auto 1fr} .lib{max-height:none;min-height:0;flex:1 1 auto} } /* ===================================================================== SECTION 4 — MOBILE (≤1023): the live visualizer has no intrinsic height (just an absolutely-positioned canvas) so it collapses to 0 on phones. Give it a clear, visible height and add breathing room above the player / track library so the audio-visual has space to live. ===================================================================== */ @media (max-width:1023px){ .snd__right{gap:1.2rem} .viz--free{flex:0 0 auto;height:clamp(210px,54vw,300px);min-height:0;margin-bottom:0;padding-bottom:0} /* bars don't "erupt" from the player on mobile — keep the seam glow but no overlap */ .player::after{display:none} } /* ===================================================================== SECTION 5 — PODCASTING Three stacked cards on the right, each skewY(-4deg) so their edges form one unbroken slant. Inner photo + text counter-skew so the content stays visually upright. Push-pull spotlight: hovering one expands it and compresses the other two — only one card is "open" at a time. Eye-catching extras: neon edge-lights, edge numerals, image parallax, matte-glass blur on the reveal, animated waveform inside the active card. ===================================================================== */ .pod{position:relative;background:var(--bg);overflow:hidden;padding:var(--navh) 0 2rem; background-image: radial-gradient(58% 50% at 12% 28%,rgba(168,85,247,.14),transparent 65%), radial-gradient(50% 50% at 92% 80%,rgba(255,46,154,.12),transparent 68%), radial-gradient(40% 38% at 55% 110%,rgba(45,127,255,.1),transparent 70%)} .pod__inner{position:relative;max-width:1600px;margin:0 auto;padding:1.4rem var(--pad); display:grid;grid-template-columns:1fr;gap:2.6rem;align-items:center} /* ---------- LEFT intro column ---------- */ .pod__intro{display:flex;flex-direction:column} .pod__kicker{font-size:.72rem;letter-spacing:.3em;font-weight:500;color:#d24b9e;text-transform:uppercase;margin-bottom:1.1rem; display:inline-flex;align-items:center;gap:.7rem} .pod__kicker::before{content:"";width:26px;height:1px;background:var(--grad);display:inline-block} .pod__title{text-transform:uppercase;font-weight:300;line-height:.98;letter-spacing:.01em;color:#fff; font-size:clamp(2.6rem,5vw,4.6rem);margin-bottom:1.3rem;display:flex;flex-direction:column;gap:.05em} .pod__title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block} .pod__title-dot{color:#4f8bff} .pod__rule{width:60px;height:1.5px;background:var(--grad);margin:.4rem 0 1.3rem;border-radius:1px} .pod__body{font-weight:300;color:var(--muted);max-width:34rem;font-size:clamp(.95rem,2.5vw,1.04rem);line-height:1.7;margin-bottom:1.7rem} .pod__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.8rem} .pod-stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:30rem} .pod-stats li{display:flex;flex-direction:column;gap:.25rem;padding-left:.85rem;border-left:1px solid rgba(255,255,255,.08)} .pod-stats b{font-size:clamp(1.35rem,3vw,1.85rem);font-weight:300;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.01em} .pod-stats span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);line-height:1.4} /* ---------- RIGHT stack ---------- */ /* The wrapper owns the 3D viewing volume — mirroring .gal__wall-wrap in section 3. PERSPECTIVE MUST LIVE ON THE PARENT, not on the rotated element, or the rotation gets projected flat with no real depth (same matrix, no 3D look). */ .pod__stack-wrap{position:relative; width:100%;max-width:780px;margin-left:auto; perspective:1700px;perspective-origin:50% 50%; isolation:isolate} .pod__stack{position:relative;display:flex;flex-direction:column; width:100%; height:clamp(440px,68vh,640px); /* Section-3-style wall tilt — exact same transform as .gal__wall. Now that the parent provides perspective, this rotateY actually renders in 3D. */ transform:rotateY(-20deg) rotateX(6deg) rotate(-1deg); transform-origin:50% 50%; /* preserve-3d so the cards' translateZ on hover can still pop forward */ transform-style:preserve-3d} .pod-card{position:relative;display:block;flex:1 1 0;min-height:0; background:#0a0814; /* Only the slanted-seam skew on cards now; the 3D rotation comes from the parent .pod__stack, so all three cards stay coplanar within the tilted wall. */ transform:skewY(-4deg); transform-origin:center center; transform-style:preserve-3d; overflow:hidden;cursor:pointer; border:1px solid rgba(255,255,255,.08); /* Unified .65s timing so flex-grow, transform, photo, veil, cover, detail all glide together when the hover spotlight moves between cards. */ transition:flex-grow .65s var(--ease),box-shadow .55s var(--ease),border-color .45s var(--ease),filter .45s var(--ease),transform .65s var(--ease),z-index 0s linear .3s; will-change:flex-grow,transform; isolation:isolate;outline:none} .pod-card + .pod-card{margin-top:-1px} /* perfectly aligned slanted seams */ .pod-card:focus-visible{box-shadow:0 0 0 2px rgba(255,46,154,.6)} /* Photo follows the card's FULL transform (no counter-skew) so it physically matches the slanted + 3D-tilted card shape — zero perspective gaps at the corners. Generous inset (-10% / -20%) guarantees it overshoots the rotated bounds. object-position pulls the crop up so the subject — not a boring middle slice — fills the visible region. */ /* Photo is heavily oversized so the 3D-rotated card's bounds (which extend asymmetrically when tilted) are always covered with photo, no exposed background. max-width:none overrides the global img cap so width:150% sticks. */ .pod-card__photo{position:absolute;left:-25%;top:-22%;width:150%;height:144%; max-width:none;max-height:none; object-fit:cover;object-position:center 38%;display:block;z-index:0; transform:scale(1.06);transform-origin:center center; filter:saturate(1.08) brightness(.95) contrast(1.06); transition:transform .65s var(--ease),filter .65s var(--ease)} /* Per-card crop tuning — each photo's subject lives at a different height */ .pod-card--01 .pod-card__photo{object-position:center 32%} .pod-card--02 .pod-card__photo{object-position:center 42%} .pod-card--03 .pod-card__photo{object-position:center 35%} /* Soft centered darkening only behind the title region — leaves edges photo-clean */ .pod-card__veil{position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(70% 60% at 50% 55%,rgba(8,6,16,.62) 0%,rgba(8,6,16,.28) 55%,rgba(8,6,16,0) 100%), linear-gradient(180deg,rgba(8,6,16,.08) 0%,rgba(8,6,16,.18) 100%); transition:background .65s var(--ease)} /* Subtle sheen sweep — counter-skewed so it still reads as an upright highlight */ .pod-card__shine{position:absolute;left:-10%;right:-10%;top:-10%;height:38%;z-index:1;pointer-events:none; background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,0) 55%); transform:skewY(4deg);mix-blend-mode:screen;opacity:.55} /* ---------- DEFAULT (collapsed) state: centered label ---------- */ .pod-card__cover{position:absolute;inset:0;z-index:3;pointer-events:none; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.65rem; padding:1rem;text-align:center; transform:none; /* tilt WITH the card (no counter-skew) */ transition:opacity .65s var(--ease),transform .65s var(--ease)} .pod-card__tag{font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:#cdb6e8; display:inline-flex;align-items:center;gap:.55rem} .pod-card__tag::before{content:"";width:22px;height:1px;background:var(--grad);display:inline-block} .pod-card__label{font-size:clamp(1.35rem,2.1vw,2rem);font-weight:300;letter-spacing:.04em;color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.7);line-height:1.1} .pod-card__hint{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:#9b8fd6;opacity:.7; transition:opacity .4s,transform .55s} /* large edge numeral */ .pod-card__num{position:absolute;top:50%;right:clamp(.8rem,1.4vw,1.2rem);z-index:5;pointer-events:none; font-size:clamp(2.6rem,4.4vw,4rem);font-weight:200;letter-spacing:.05em;line-height:1; transform:translateY(-50%) rotate(90deg) translateY(-100%); /* tilt WITH the card */ transform-origin:right center; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; opacity:.35;transition:opacity .55s,transform .6s var(--ease),filter .5s; filter:drop-shadow(0 0 12px rgba(255,46,154,.18))} /* ---------- HOVER (expanded) state: detail panel with matte glass ---------- The panel itself is NOT counter-skewed — it inherits the parent card's skewY(-4deg), so the matte-glass parallelogram is the EXACT shape of the card (no exposed slanted corners at the top/bottom). The inner content wrapper does the counter-skew so the text reads upright. */ .pod-card__detail{position:absolute;inset:0;z-index:4; display:flex;align-items:center; background:rgba(8,6,16,.32); backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15); opacity:0;pointer-events:none; transition:opacity .65s var(--ease)} .pod-card__detail-inner{ display:flex;flex-direction:column;justify-content:center;gap:.85rem; width:100%;padding:1.4rem clamp(1.4rem,3.5vw,2.6rem); transform:none;transform-origin:center center} /* text tilts WITH the card */ .pod-card__h{font-size:clamp(1.4rem,2.1vw,2.05rem);font-weight:300;color:#fff;letter-spacing:.02em;line-height:1.12} .pod-card__h-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .pod-card__copy{font-size:.92rem;color:#d4d1e3;line-height:1.6;max-width:34rem;font-weight:300} .pod-card__bullets{list-style:none;display:flex;gap:1.2rem 1.4rem;flex-wrap:wrap; font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#cdb6e8;margin:.1rem 0} .pod-card__bullets li{position:relative;padding-left:1.05rem} .pod-card__bullets li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%; background:var(--grad);transform:translateY(-50%);box-shadow:0 0 10px rgba(255,46,154,.6)} .pod-card__btn{align-self:flex-start;margin-top:.2rem} /* ---------- ALWAYS-VISIBLE CHROME — fills the dark space at rest ---------- */ /* Recording-indicator chip in the top-right corner (red blinking dot + label). Tints differently per service: pink REC for camera, blue LIVE MIX for audio, purple RENDER for post. Counter-skewed so it reads horizontally. */ .pod-card__rec{position:absolute;top:.85rem;right:1rem;z-index:5; display:inline-flex;align-items:center;gap:.45rem; padding:.32rem .65rem;border-radius:999px; background:rgba(8,6,16,.55);border:1px solid rgba(255,46,154,.45); font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:#ffd6e8;font-weight:600; transform:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 0 18px -4px rgba(255,46,154,.5)} .pod-card__rec--audio{border-color:rgba(45,127,255,.45);color:#cfe2ff;box-shadow:0 0 18px -4px rgba(45,127,255,.5)} .pod-card__rec--post{border-color:rgba(168,85,247,.5);color:#e5d6ff;box-shadow:0 0 18px -4px rgba(168,85,247,.5)} .pod-card__rec-dot{width:7px;height:7px;border-radius:50%;background:#ff2e9a;box-shadow:0 0 8px #ff2e9a; animation:pod-rec-pulse 1.4s ease-in-out infinite} .pod-card__rec--audio .pod-card__rec-dot{background:#2d7fff;box-shadow:0 0 8px #2d7fff} .pod-card__rec--post .pod-card__rec-dot{background:#a855f7;box-shadow:0 0 8px #a855f7} @keyframes pod-rec-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.65)}} /* Mini equalizer always visible in the bottom-left — subtle, gentle animation */ .pod-card__mini{position:absolute;left:1rem;bottom:1rem;z-index:5; display:flex;align-items:flex-end;gap:2px;height:22px;width:clamp(50px,8vw,72px); transform:skewY(4deg);opacity:.7} .pod-card__mini span{flex:1;height:100%;transform-origin:bottom center; transform:scaleY(var(--h,.3));border-radius:1px; background:linear-gradient(180deg,#ff2e9a,#a855f7,#2d7fff); animation:pod-mini 1.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * 90ms)} @keyframes pod-mini{0%,100%{transform:scaleY(calc(var(--h,.3) * .4))}50%{transform:scaleY(var(--h,.3))}} /* Faint corner crosshair (camera-reticle vibe) at top-left — pure decoration */ .pod-card__crosshair{position:absolute;top:.85rem;left:1rem;z-index:5;width:22px;height:22px; transform:skewY(4deg);pointer-events:none;opacity:.45} .pod-card__crosshair::before,.pod-card__crosshair::after{content:"";position:absolute; background:rgba(255,255,255,.7);box-shadow:0 0 6px rgba(255,46,154,.5)} .pod-card__crosshair::before{left:0;right:0;top:50%;height:1px;transform:translateY(-50%)} .pod-card__crosshair::after{top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%)} /* ---------- ACTIVE / HOVER transitions ---------- The whole stack is tilted as one wall, so we don't re-rotate the card. Instead the active card "pops forward" via translateZ — clearly engaged, readable detail, while siblings stay coplanar with the tilted wall. */ .pod-card:hover,.pod-card:focus-within{border-color:rgba(255,46,154,.45); box-shadow:0 0 60px -10px rgba(255,46,154,.5),0 0 90px -30px rgba(45,127,255,.42); transform:skewY(-4deg) translateZ(40px); z-index:2} .pod-card:hover .pod-card__cover, .pod-card:focus-within .pod-card__cover{opacity:0;transform:translateY(-14px)} .pod-card:hover .pod-card__detail, .pod-card:focus-within .pod-card__detail{opacity:1;pointer-events:auto} .pod-card:hover .pod-card__photo, .pod-card:focus-within .pod-card__photo{transform:scale(1.1);filter:saturate(1.2) brightness(1.02) contrast(1.06)} /* On hover, swap the centered-radial darkening for a full overlay so the matte-glass detail panel reads clearly */ .pod-card:hover .pod-card__veil, .pod-card:focus-within .pod-card__veil{ background:radial-gradient(80% 70% at 50% 50%,rgba(8,6,16,.5) 0%,rgba(8,6,16,.4) 70%,rgba(8,6,16,.3) 100%)} .pod-card:hover .pod-card__num, .pod-card:focus-within .pod-card__num{opacity:.85;filter:drop-shadow(0 0 16px rgba(255,46,154,.45))} /* Hide the rest-only chrome on the hovered/expanded card so it doesn't crowd the detail */ .pod-card:hover .pod-card__rec, .pod-card:focus-within .pod-card__rec, .pod-card:hover .pod-card__mini, .pod-card:focus-within .pod-card__mini, .pod-card:hover .pod-card__crosshair, .pod-card:focus-within .pod-card__crosshair{opacity:0;transition:opacity .35s var(--ease)} /* neon slanted edge accents */ .pod-card__edge{position:absolute;left:0;right:0;height:2px;z-index:5;pointer-events:none; background:linear-gradient(90deg,transparent,#ff2e9a 25%,#a855f7 50%,#2d7fff 75%,transparent); opacity:0;transition:opacity .5s var(--ease);box-shadow:0 0 12px rgba(255,46,154,.5)} .pod-card__edge--top{top:0} .pod-card__edge--bot{bottom:0} .pod-card:hover .pod-card__edge, .pod-card:focus-within .pod-card__edge{opacity:.9} /* ---------- Bottom equalizer ---------- At rest: a compact, centered waveform silhouette that BREATHES as one (all bars rise/fall together). On hover/focus it GROWS OUTWARD to the full card width and springs into a per-bar live equalizer. It sits flush on the card's slanted bottom edge and inherits the card's exact skew + the stack's 3D tilt (no counter-skew). */ .pod-card__wave{position:absolute;left:50%;bottom:0;z-index:5; display:flex;align-items:flex-end;gap:2px; height:clamp(32px,5.5vh,50px);width:clamp(92px,16%,150px); transform:translateX(-50%);transform-origin:bottom center; opacity:.5;pointer-events:none; transition:width .6s var(--ease),opacity .45s var(--ease)} .pod-card__wave span{flex:1;height:100%;transform-origin:bottom center; transform:scaleY(calc(var(--h,.3) * .22));border-radius:1.5px 1.5px 0 0; background:linear-gradient(180deg,#ff2e9a,#a855f7,#2d7fff); animation:pod-breathe 3.2s ease-in-out infinite} /* rest — every bar shares one timing/phase, so the silhouette breathes together */ @keyframes pod-breathe{0%,100%{transform:scaleY(calc(var(--h,.3) * .12))}50%{transform:scaleY(calc(var(--h,.3) * .30))}} /* hover/focus — full width + lively per-bar equalizer (staggered only when active) */ .pod-card:hover .pod-card__wave, .pod-card:focus-within .pod-card__wave{width:100%;opacity:.92} .pod-card:hover .pod-card__wave span, .pod-card:focus-within .pod-card__wave span{animation-name:pod-bar;animation-duration:1.15s} .pod-card:hover .pod-card__wave span:nth-child(odd), .pod-card:focus-within .pod-card__wave span:nth-child(odd){animation-duration:1.35s} .pod-card:hover .pod-card__wave span:nth-child(3n), .pod-card:focus-within .pod-card__wave span:nth-child(3n){animation-duration:.95s;animation-delay:.12s} .pod-card:hover .pod-card__wave span:nth-child(5n), .pod-card:focus-within .pod-card__wave span:nth-child(5n){animation-duration:1.5s;animation-delay:.28s} .pod-card:hover .pod-card__wave span:nth-child(7n), .pod-card:focus-within .pod-card__wave span:nth-child(7n){animation-duration:1.1s;animation-delay:.42s} @keyframes pod-bar{0%,100%{transform:scaleY(var(--h,.3))}50%{transform:scaleY(calc(var(--h,.3) * 0.32))}} /* ---------- Push-pull layout: hover one → compress siblings ---------- */ .pod__stack:hover .pod-card{flex-grow:.55} .pod__stack .pod-card:hover, .pod__stack .pod-card:focus-within{flex-grow:2.6} /* below 1024 — keep the slanted 3D look, TAP to expand (mirrors desktop hover). The detail becomes a relative accordion panel (hidden until .is-open); the card keeps its skewY slant and the stack keeps a gentle 3D tilt. */ @media (max-width:1023px){ .pod__stack-wrap{perspective:1150px;perspective-origin:50% 50%} .pod__stack{height:auto;width:94%;margin:0 auto; transform:rotateY(-9deg) rotateX(4deg) rotate(-.5deg);transform-style:preserve-3d} .pod-card{flex:0 0 auto;min-height:118px;overflow:hidden;cursor:pointer; transform:skewY(-3.5deg)} .pod-card + .pod-card{margin-top:-1px} /* counter-skew contents so they read upright inside the slanted card */ .pod-card__photo{transform:skewY(3.5deg) scale(1.06)!important} .pod-card__cover{transform:none!important;opacity:1!important} .pod-card__num{transform:translateY(-50%) rotate(90deg) translateY(-100%)!important} .pod-card__rec,.pod-card__mini,.pod-card__crosshair{opacity:1!important} /* detail = relative accordion panel, collapsed until tapped open */ .pod-card__detail{position:relative!important;inset:auto!important;z-index:4; opacity:0!important;pointer-events:none!important; background:rgba(8,6,16,.88);backdrop-filter:none;-webkit-backdrop-filter:none; max-height:0;overflow:hidden; transition:max-height .55s var(--ease),opacity .4s var(--ease)} .pod-card__detail-inner{transform:none} /* OPEN (tap) — hide the label cover + chrome, reveal the detail */ .pod-card.is-open .pod-card__cover, .pod-card.is-open .pod-card__rec, .pod-card.is-open .pod-card__mini, .pod-card.is-open .pod-card__crosshair{opacity:0!important} .pod-card.is-open .pod-card__detail{opacity:1!important;pointer-events:auto!important;max-height:680px} .pod-card.is-open{border-color:rgba(255,46,154,.5);box-shadow:0 0 38px -10px rgba(255,46,154,.55)} /* keep the breathing waveform at rest on mobile; the detail panel replaces it when open */ .pod-card__wave{height:26px;width:clamp(78px,30%,120px);opacity:.6} .pod-card.is-open .pod-card__wave{display:none} } /* desktop full layout — match snd/gal patterns */ @media (min-width:1024px){ .pod{height:100svh;display:flex;align-items:center;padding:var(--navh) 0 1.5rem} .pod__inner{grid-template-columns:minmax(300px,38%) 1fr;gap:3rem;width:100%;align-items:center} } /* reduced motion: keep slant but disable animation + auto-open detail */ @media (prefers-reduced-motion:reduce){ .pod-card,.pod-card__photo,.pod-card__cover,.pod-card__detail,.pod-card__num, .pod-card__veil,.pod-card__wave,.pod-card__wave span,.pod-card__edge{transition:none!important;animation:none!important} .pod__stack:hover .pod-card,.pod__stack .pod-card:hover,.pod__stack .pod-card:focus-within{flex-grow:1} .pod-card__cover{display:none} .pod-card__detail{opacity:1;pointer-events:auto;backdrop-filter:none;background:rgba(8,6,16,.7)} } /* ===================================================================== FOOTER ===================================================================== */ .foot{position:relative;background:var(--bg);overflow:hidden; background-image:radial-gradient(60% 60% at 50% -8%,rgba(120,50,200,.14),transparent 60%),radial-gradient(55% 50% at 50% 112%,rgba(60,40,180,.1),transparent 60%)} /* top waveform divider */ .foot__topline{position:relative;height:50px;display:flex;align-items:center;justify-content:center} .foot__topline::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px; background:linear-gradient(90deg,transparent,#ff2e9a 30%,#a855f7 50%,#2d7fff 70%,transparent);opacity:.55} .foot__topwave{position:relative;display:flex;align-items:center;gap:1.5px;height:34px;width:clamp(150px,18vw,250px)} .foot__topwave span{flex:1;height:100%;transform-origin:center;transform:scaleY(var(--h,.4));border-radius:1px; background:linear-gradient(180deg,#ff2e9a,#a855f7,#2d7fff)} .foot__inner{position:relative;z-index:1;max-width:1680px;margin:0 auto;padding:1.4rem var(--pad) 2.4rem; display:grid;grid-template-columns:1fr 1fr;gap:2.4rem 2rem} /* brand */ .foot__brand{grid-column:1/-1;display:flex;flex-direction:column;gap:1.1rem} .foot__logo{display:flex;align-items:center;gap:.8rem;width:max-content} .foot__logo-img{width:clamp(46px,4vw,56px);height:auto;display:block;filter:drop-shadow(0 0 10px rgba(168,85,247,.45))} .foot__word{display:flex;flex-direction:column;line-height:1.05;font-weight:600;letter-spacing:.12em;font-size:clamp(1rem,2.2vw,1.3rem);color:#fff;text-transform:uppercase} /* Match the header lockup: "Studios" sits centered between two thin gradient lines */ .foot__word em{display:flex;align-items:center;gap:.55em;justify-content:center;font-style:normal; font-size:.5em;letter-spacing:.42em;color:#cbc8dd;margin-top:4px} .foot__word em::before,.foot__word em::after{content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,rgba(255,46,154,.7),rgba(45,127,255,.7),transparent)} .foot__tag{font-size:.82rem;line-height:1.65;color:var(--muted);max-width:26rem} .foot__eq{display:flex;align-items:center;gap:1.5px;height:30px;max-width:24rem} .foot__eq span{flex:1;height:100%;transform-origin:center;transform:scaleY(var(--h,.4));border-radius:1px; background:linear-gradient(180deg,#ff2e9a,#a855f7,#2d7fff)} .foot__follow{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#d24b9e;font-weight:600} .foot__social{list-style:none;display:flex;gap:.6rem;flex-wrap:wrap} /* real platform icons with a per-icon glow that matches the brand colour (each link carries its colour via inline --glow) */ /* NO container — the transparent PNG itself is the icon (sized to the old box), with a soft brand-colour glow behind it (radial bloom + drop-shadow). */ .foot__social a{position:relative;display:grid;place-items:center;width:46px;height:46px; background:none;border:none;box-shadow:none;transition:transform .25s} .foot__social a::before{content:"";position:absolute;inset:6%;border-radius:50%;z-index:0; background:radial-gradient(closest-side,var(--glow,rgba(255,46,154,.6)),transparent 72%); opacity:.5;filter:blur(7px);transition:opacity .25s,transform .25s} .foot__social img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block; filter:drop-shadow(0 0 6px var(--glow,rgba(255,46,154,.55)))} .foot__social a:hover{transform:translateY(-3px)} .foot__social a:hover::before{opacity:.9;transform:scale(1.18)} .foot__social a:hover img{filter:drop-shadow(0 0 11px var(--glow,rgba(255,46,154,.9)))} /* link columns */ .foot__h{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#d24b9e;font-weight:600;margin-bottom:1rem} .foot__col ul{list-style:none;display:flex;flex-direction:column;gap:.7rem} .foot__col a{font-size:.82rem;color:#bdbace;transition:color .25s,padding-left .25s} .foot__col a:hover{color:#fff;padding-left:3px} /* contact block (replaces the old Start-a-Project CTA) — location / email / phone */ .foot__reach{grid-column:1/-1;display:flex;flex-direction:column;gap:1rem} .foot__reach-list{list-style:none;display:flex;flex-direction:column;gap:.8rem;margin:0;padding:0} .foot__reach-row{display:flex;align-items:center;gap:.8rem;transition:transform .25s} a.foot__reach-row:hover{transform:translateX(2px)} .foot__reach-ico{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#ff7ac0; border:1px solid rgba(168,85,247,.28);background:linear-gradient(150deg,rgba(255,46,154,.1),rgba(45,127,255,.1)); box-shadow:inset 0 0 14px -4px rgba(168,85,247,.45),0 0 18px -8px rgba(255,46,154,.5)} .foot__reach-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .foot__reach-ico img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 0 5px rgba(255,46,154,.5))} .foot__reach-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .foot__reach-txt b{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#d24b9e;font-weight:600} .foot__reach-txt span{font-size:.9rem;color:#fff;font-weight:400;transition:color .25s} a.foot__reach-row:hover .foot__reach-txt span{color:#ff7ac0} /* bottom bar — single centered copyright line */ .foot__bar{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.08); max-width:1680px;margin:0 auto;padding:1.4rem var(--pad) 2rem; display:flex;justify-content:center;text-align:center} .foot__copy{font-size:.72rem;color:var(--dim);line-height:1.5;letter-spacing:.04em;text-align:center} /* responsive */ @media (min-width:560px){ .foot__inner{grid-template-columns:repeat(2,1fr)} } @media (min-width:1100px){ .foot__inner{grid-template-columns:1.7fr 1fr 1fr 1.5fr;gap:2.4rem 2rem;align-items:start} .foot__brand,.foot__reach{grid-column:auto} } /* Footer is part of the pager rotation on desktop — it occupies one section slot. */ /* ===================================================================== SECTION 6 — SOFTWARE STACK / OUR TOOLKIT Premium studio-technology showcase, themed to MATCH the rest of the site (Montserrat / var(--grad) / var(--pink) / matching kicker+title pattern from Sections 3/4/5). All styles scoped under .software-stack-section. Snap-engine compatible: exactly 100svh, content fits, no overflow. ===================================================================== */ .software-stack-section{position:relative;width:100%; height:100svh;min-height:760px; background:var(--bg);color:#fff;overflow:hidden; padding:var(--navh) 0 1.6rem; display:flex;flex-direction:column;justify-content:center; isolation:isolate;box-sizing:border-box} /* Background atmosphere — same palette + bloom rhythm as Sections 3-5 */ .software-stack-section .software-stack-bg{position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(55% 50% at 70% 32%,rgba(168,85,247,.18),transparent 65%), radial-gradient(45% 45% at 22% 72%,rgba(255,46,154,.10),transparent 70%), radial-gradient(50% 50% at 88% 88%,rgba(45,127,255,.13),transparent 68%)} .software-stack-section .software-stack-bg::before{content:"";position:absolute;inset:0; background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.5) 100%)} /* ----- Inner grid (38 / 62 split) ----- */ .software-stack-section .software-stack-inner{position:relative;z-index:1; display:grid;grid-template-columns:minmax(420px,.78fr) minmax(620px,1.22fr); align-items:center;gap:3rem; max-width:1600px;margin:0 auto;width:100%; flex:0 1 auto;min-height:0; /* content-sized; the section flex-centres it vertically */ padding:1rem var(--pad)} /* ===== LEFT: copy column — kicker / title / rule / body / statement / CTA ===== */ .software-stack-section .software-copy{display:flex;flex-direction:column;max-width:42rem;min-width:0} /* Kicker — same pattern as .snd__kicker / .pod__kicker */ .software-stack-section .software-kicker{font-size:.72rem;letter-spacing:.3em;font-weight:500;color:#d24b9e; text-transform:uppercase;margin-bottom:1.3rem; display:inline-flex;align-items:center;gap:.7rem} .software-stack-section .software-kicker::before{content:"";width:26px;height:1px;background:var(--grad);display:inline-block} /* Title — Montserrat 300, uppercase, line 2 gradient with blue dot — like other section titles. List removed, so the title can breathe a little larger for balance. */ .software-stack-section .software-title{text-transform:uppercase;font-weight:300;line-height:1.0; letter-spacing:.005em;color:#fff; font-size:clamp(2.2rem,4.2vw,3.6rem);display:flex;flex-direction:column;gap:.08em;margin:0 0 1.1rem} .software-stack-section .software-title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .software-stack-section .software-title-dot{color:#4f8bff} /* Gradient rule under title (matches .pod__rule / .snd__rule) */ .software-stack-section .software-rule{width:60px;height:1.5px;background:var(--grad);margin:.5rem 0 1.5rem;border-radius:1px} /* Body + statement */ .software-stack-section .software-body{font-weight:300;color:var(--muted);max-width:34rem; font-size:clamp(.97rem,2.4vw,1.07rem);line-height:1.75;margin:0 0 1rem} .software-stack-section .software-statement{font-size:.95rem;color:#e7e4f2;font-weight:400;letter-spacing:.01em;margin:0 0 1.9rem;max-width:34rem} /* CTA buttons row — matches .snd__cta / .pod__cta */ .software-stack-section .software-cta{display:flex;flex-wrap:wrap;gap:1rem} /* ===== RIGHT: COVERFLOW browser of floating logos (no containers) ===== */ .software-stack-section .software-stage-wrap{position:relative;width:100%; height:clamp(420px,68vh,640px); /* bounded so the CoverFlow + meta + controls always fit one viewport */ display:flex;align-items:center;justify-content:center} .software-stack-section .cf{position:relative;width:100%;height:100%;min-height:0; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:clamp(.7rem,2vh,1.5rem)} /* The 3D stage — items are positioned in JS off the active index */ .software-stack-section .cf__stage{position:relative;width:100%;flex:1 1 auto;min-height:0; perspective:1500px;perspective-origin:50% 46%} .software-stack-section .cf__track{position:absolute;inset:0;transform-style:preserve-3d} /* Floating item = just the logo + its glass-floor reflection. No tile/card. */ .software-stack-section .cf__item{position:absolute;left:50%;top:50%; width:var(--cf-size,220px);height:var(--cf-size,220px); display:flex;align-items:center;justify-content:center; background:none;border:none;padding:0;margin:0;cursor:pointer; transform-style:preserve-3d;outline:none; transition:transform .55s var(--ease),opacity .55s var(--ease); will-change:transform,opacity} .software-stack-section .cf__logo{width:100%;height:100%;object-fit:contain;display:block; /* off-focus icons sit behind a matte frosted blur (desaturated + dimmed); the centred/active icon snaps sharp + glowing (rule below) */ filter:blur(5px) saturate(.55) brightness(.72) drop-shadow(0 14px 30px rgba(0,0,0,.6)); transition:filter .55s var(--ease)} .software-stack-section .cf__reflect{filter:blur(5px) saturate(.55) brightness(.72)} /* Mirrored reflection beneath the logo, faded with a mask */ .software-stack-section .cf__reflect{position:absolute;top:100%;left:0;width:100%;height:100%; object-fit:contain;display:block;transform:scaleY(-1);transform-origin:top center; opacity:.2;pointer-events:none;max-width:none; -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 52%); mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 52%)} /* Centre item — bright neon glow + gentle float (margin so it never fights the JS transform) */ .software-stack-section .cf__item--active{animation:cfFloat 5s ease-in-out infinite} .software-stack-section .cf__item--active .cf__logo{ filter:blur(0) saturate(1) brightness(1) drop-shadow(0 0 26px rgba(255,46,154,.5)) drop-shadow(0 0 54px rgba(45,127,255,.32)) drop-shadow(0 16px 32px rgba(0,0,0,.6))} .software-stack-section .cf__item--active .cf__reflect{filter:blur(0) saturate(1) brightness(1)} @keyframes cfFloat{0%,100%{margin-top:0}50%{margin-top:-10px}} /* Centre tool name + role */ .software-stack-section .cf__meta{display:flex;flex-direction:column;align-items:center;gap:.35rem; text-align:center;min-height:2.8em;flex:0 0 auto} .software-stack-section .cf__name{font-size:clamp(1.1rem,1.9vw,1.55rem);font-weight:300;letter-spacing:.05em; text-transform:uppercase;color:#fff;line-height:1} .software-stack-section .cf__role{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase; color:#d24b9e;font-weight:600} /* Controls — prev / dots / next */ .software-stack-section .cf__controls{display:flex;align-items:center;gap:1rem;flex:0 0 auto} .software-stack-section .cf__arrow{width:42px;height:42px;border-radius:50%;display:grid;place-items:center; color:#cfcde0;border:1px solid rgba(168,85,247,.3);background:rgba(13,9,24,.5);flex:0 0 auto; transition:transform .25s,color .25s,border-color .25s,box-shadow .25s} .software-stack-section .cf__arrow svg{width:20px;height:20px} .software-stack-section .cf__arrow:hover{color:#fff;border-color:rgba(255,46,154,.6); box-shadow:0 0 20px -4px rgba(255,46,154,.6);transform:translateY(-1px)} .software-stack-section .cf__dots{display:flex;align-items:center;gap:.5rem} .software-stack-section .cf__dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22); border:none;padding:0;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s} .software-stack-section .cf__dot.is-active{background:var(--pink);box-shadow:0 0 10px var(--pink);transform:scale(1.35)} /* ===== RESPONSIVE ===== */ @media (max-width:1199px){ .software-stack-section .software-stack-inner{grid-template-columns:minmax(340px,.78fr) minmax(500px,1.22fr);gap:2.2rem} } @media (max-width:899px){ .software-stack-section{height:auto;min-height:0;padding:var(--navh) 0 2.4rem} .software-stack-section .software-stack-inner{grid-template-columns:1fr;gap:2.2rem} .software-stack-section .software-stage-wrap{height:60vh;min-height:380px} } /* ===== REDUCED MOTION ===== */ @media (prefers-reduced-motion:reduce){ .software-stack-section .cf__item{transition:none!important} .software-stack-section .cf__item--active{animation:none!important} } /* ===================================================================== 404 PAGE — "Lost in the Mix" Single-viewport landing that mirrors the site's neon/gradient aesthetic. Big slanted 404 digits with a subtle "EQ skip" jitter, gradient title in the same shape as section titles, two CTAs, plus a pill-row of suggested destinations so the user can still find their way around. ===================================================================== */ .four{position:relative;min-height:100svh;overflow:hidden; padding:calc(var(--navh) + 2rem) var(--pad) 3rem; display:flex;align-items:center;justify-content:center; background-image: radial-gradient(58% 50% at 50% 28%,rgba(168,85,247,.20),transparent 62%), radial-gradient(50% 50% at 18% 80%,rgba(255,46,154,.12),transparent 65%), radial-gradient(50% 50% at 82% 80%,rgba(45,127,255,.14),transparent 65%)} .four__inner{position:relative;z-index:1;max-width:780px;width:100%; text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.3rem} .four__kicker{font-size:.72rem;letter-spacing:.36em;font-weight:500;color:#d24b9e;text-transform:uppercase; display:inline-flex;align-items:center;gap:.7rem} .four__kicker::before,.four__kicker::after{content:"";width:32px;height:1px;background:var(--grad);display:inline-block} /* The massive 404 digits — slanted, gradient-filled, subtle glitch jitter */ .four__digits{display:flex;align-items:center;justify-content:center;gap:clamp(.3rem,1.4vw,.9rem); font-family:inherit;font-weight:200;line-height:.9;letter-spacing:.02em; font-size:clamp(7rem,22vw,17rem); margin:.2rem 0 0;perspective:1400px} .four__d{display:inline-block; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 0 30px rgba(255,46,154,.35)) drop-shadow(0 0 60px rgba(45,127,255,.18)); transform:skewY(-4deg);transform-origin:center; animation:four-glitch 5s ease-in-out infinite} .four__d--a{animation-delay:0s} .four__d--b{animation-delay:.45s} .four__d--c{animation-delay:.9s} @keyframes four-glitch{ 0%,88%,100%{transform:skewY(-4deg) translate(0,0)} 90%{transform:skewY(-4deg) translate(-2px,-2px)} 92%{transform:skewY(-4deg) translate(3px, 2px)} 94%{transform:skewY(-4deg) translate(-1px, 1px)} 96%{transform:skewY(-4deg) translate(0,0)} } /* Subtitle "Lost in the Mix." — gradient on last word + blue dot, like section titles */ .four__title{text-transform:uppercase;font-weight:300;color:#fff; font-size:clamp(1.9rem,4.8vw,3.2rem);line-height:1.05;letter-spacing:.02em;margin:.2rem 0 0} .four__title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .four__title-dot{color:#4f8bff} .four__rule{width:60px;height:1.5px;background:var(--grad);border-radius:1px;margin:.2rem 0} .four__body{font-weight:300;color:var(--muted);max-width:36rem; font-size:clamp(.95rem,2.4vw,1.04rem);line-height:1.7;margin-bottom:.4rem} .four__cta{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center} /* Suggested destinations — pill row */ .four__suggest{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem; margin-top:1rem;padding-top:1.6rem;width:100%;max-width:620px; border-top:1px solid rgba(255,255,255,.06)} .four__suggest a{display:inline-block; font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#cdb6e8; padding:.55rem 1rem;border-radius:999px; background:rgba(168,85,247,.06);border:1px solid rgba(168,85,247,.18); transition:color .3s,border-color .3s,background .3s,transform .3s,box-shadow .3s} .four__suggest a:hover{color:#fff;border-color:rgba(255,46,154,.55); background:rgba(255,46,154,.08);transform:translateY(-2px); box-shadow:0 0 18px -4px rgba(255,46,154,.55)} /* Animated waveforms top + bottom — same bar style as the rest of the site */ .four__wave{position:absolute;left:50%;transform:translateX(-50%);z-index:0; display:flex;align-items:flex-end;gap:2px;height:34px; width:clamp(160px,20vw,260px);opacity:.45;pointer-events:none} .four__wave--top{top:calc(var(--navh) + 1rem)} .four__wave--bot{bottom:1.6rem} .four__wave span{flex:1;height:100%;transform-origin:bottom center; transform:scaleY(var(--h,.3));border-radius:1px; background:linear-gradient(180deg,#ff2e9a,#a855f7,#2d7fff); animation:four-bar 1.6s ease-in-out infinite} .four__wave span:nth-child(odd){animation-duration:1.3s} .four__wave span:nth-child(3n){animation-duration:.95s;animation-delay:.18s} .four__wave span:nth-child(5n){animation-duration:1.5s;animation-delay:.34s} @keyframes four-bar{0%,100%{transform:scaleY(var(--h,.3))}50%{transform:scaleY(calc(var(--h,.3) * .35))}} @media (prefers-reduced-motion:reduce){ .four__d,.four__wave span{animation:none!important} } /* ===================================================================== SLIDE-IN MENU (hamburger) ===================================================================== */ html.menu-open{overflow:hidden} html.menu-open .dots{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s} .menu-backdrop{position:fixed;inset:0;z-index:1040;background:rgba(4,2,10,.55);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s} .menu-backdrop.is-shown{opacity:1;visibility:visible} .menu{position:fixed;top:clamp(.8rem,1.5vh,1.3rem);right:clamp(.8rem,1.5vw,1.3rem);bottom:clamp(.8rem,1.5vh,1.3rem);z-index:1050; width:min(92vw,520px);display:flex;flex-direction:column;overflow:hidden;border-radius:22px; background:radial-gradient(110% 26% at 50% 0%,rgba(120,28,118,.16),transparent 62%),#070409; box-shadow:0 0 64px -12px rgba(255,46,154,.45),0 0 150px -60px rgba(168,85,247,.55); transform:translateX(calc(100% + 1.6rem));transition:transform .55s var(--ease)} /* gradient neon border (pink → purple → blue) via masked pseudo */ .menu::after{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;pointer-events:none;z-index:3; background:linear-gradient(162deg,#ff2e9a 0%,#ff3a93 15%,#c92d9e 44%,#8a3fd6 72%,#3b66d6 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude} .menu.is-open{transform:none} .menu__scroll{flex:1;min-height:0;display:flex;flex-direction:column;padding:clamp(1.4rem,2.6vw,2.1rem); overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a855f7 transparent} .menu__scroll::-webkit-scrollbar{width:5px} .menu__scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff2e9a,#a855f7);border-radius:3px} .menu__head{display:flex;align-items:center;margin-bottom:clamp(1.2rem,2.6vh,2rem);padding-right:3.2rem} .menu__logo{display:flex;align-items:center;gap:.7rem} .menu__logo img{width:clamp(40px,4vw,48px);height:auto;display:block;filter:drop-shadow(0 0 8px rgba(168,85,247,.5))} .menu__word{display:flex;flex-direction:column;line-height:1.05;font-weight:600;letter-spacing:.1em;font-size:clamp(.95rem,2vw,1.15rem);color:#fff;text-transform:uppercase} .menu__word em{font-style:normal;font-size:.5em;letter-spacing:.4em;color:#cbc8dd;margin-top:3px} .menu__nav{margin-bottom:auto} .menu__list{list-style:none;position:relative;display:flex;flex-direction:column;gap:.15rem} .menu__link{position:relative;display:flex;align-items:center;gap:.9rem;padding:.65rem .8rem .65rem 2.3rem;border-radius:14px; border:1px solid transparent;text-decoration:none;transition:background .3s,border-color .3s} .menu__node{position:absolute;left:0;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%; border:2px solid rgba(255,255,255,.3);background:#070409;z-index:1;transition:border-color .3s,background .3s,box-shadow .3s} .menu__no{font-size:.82rem;font-weight:600;color:#d24b9e;letter-spacing:.05em;font-variant-numeric:tabular-nums} /* thin (hero-style) title type with a soft glow behind it */ .menu__label{font-size:clamp(1.15rem,2.6vw,1.55rem);font-weight:300;color:#ece9f5;letter-spacing:.02em;white-space:nowrap; text-shadow:0 0 16px rgba(190,170,255,.22);transition:color .3s,text-shadow .3s} .menu__accent{margin-left:auto;flex:0 0 auto} .menu__link:hover{background:rgba(255,255,255,.035)} .menu__link:hover .menu__label{color:#fff;text-shadow:0 0 22px rgba(255,120,210,.55)} .menu__link:hover .menu__node{border-color:var(--pink);box-shadow:0 0 9px rgba(255,46,154,.7)} .menu__item.is-active .menu__link{background:rgba(255,46,154,.08);border-color:rgba(255,46,154,.38);box-shadow:inset 0 0 34px -20px rgba(255,46,154,.9)} .menu__item.is-active .menu__label{color:#ff77c2;font-weight:300;text-shadow:0 0 26px rgba(255,46,154,.7),0 0 10px rgba(255,46,154,.55)} .menu__item.is-active .menu__no{color:#ff2e9a} .menu__item.is-active .menu__node{border-color:#ff2e9a;background:#ff2e9a;box-shadow:0 0 12px rgba(255,46,154,.9)} .menu__deco{margin:1.1rem 0 1.3rem;opacity:.55} .menu__decowave{display:flex;align-items:center;gap:1px;height:22px} .menu__decowave span{flex:1;height:100%;transform-origin:center;transform:scaleY(var(--h,.3));border-radius:1px;background:linear-gradient(180deg,rgba(255,46,154,.6),rgba(45,127,255,.4))} .menu__talk{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border:1px solid rgba(255,46,154,.3);border-radius:16px; background:linear-gradient(160deg,rgba(32,13,46,.55),rgba(11,8,22,.3));margin-bottom:1.2rem;text-decoration:none} .menu__talk-ico{position:relative;flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;border-radius:50%; border:1px solid rgba(255,46,154,.45);color:#ff2e9a;box-shadow:0 0 18px -6px rgba(255,46,154,.7)} .menu__talk-ico svg{width:24px;height:24px;fill:currentColor} .menu__talk-ico::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1px solid rgba(255,46,154,.5);opacity:0} .menu.is-open .menu__talk-ico::after{animation:menuRing 2s ease-out infinite} @keyframes menuRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.45);opacity:0}} .menu__talk-eyebrow{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:#d24b9e;font-weight:600} .menu__talk-num{display:block;font-size:clamp(1.4rem,3.2vw,1.85rem);font-weight:700;letter-spacing:.01em;margin:.12rem 0; background:linear-gradient(90deg,#ff2e9a,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content} .menu__talk-sub{font-size:.7rem;color:var(--muted)} .menu__foot{display:flex;flex-direction:column;align-items:center;gap:.9rem} .menu__social{list-style:none;display:flex;gap:.7rem;flex-wrap:wrap} /* NO container — transparent PNG sized to the old box, glow behind */ .menu__social a{position:relative;display:grid;place-items:center;width:42px;height:42px; background:none;border:none;box-shadow:none;transition:transform .25s} .menu__social a::before{content:"";position:absolute;inset:6%;border-radius:50%;z-index:0; background:radial-gradient(closest-side,var(--glow,rgba(255,46,154,.6)),transparent 72%); opacity:.5;filter:blur(6px);transition:opacity .25s,transform .25s} .menu__social img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block; filter:drop-shadow(0 0 6px var(--glow,rgba(255,46,154,.55)))} .menu__social a:hover{transform:translateY(-3px)} .menu__social a:hover::before{opacity:.9;transform:scale(1.18)} .menu__social a:hover img{filter:drop-shadow(0 0 11px var(--glow,rgba(255,46,154,.9)))} .menu__copy{font-size:.68rem;color:var(--dim);letter-spacing:.06em} /* staggered entrance — text + accents animate in on open */ .menu__head,.menu__item,.menu__deco,.menu__talk,.menu__foot{opacity:0;transform:translateX(26px); transition:opacity .5s var(--ease),transform .5s var(--ease)} .menu.is-open .menu__head{opacity:1;transform:none;transition-delay:.1s} .menu.is-open .menu__item{opacity:1;transform:none;transition-delay:calc(.16s + var(--i) * .07s)} .menu.is-open .menu__deco{opacity:1;transform:none;transition-delay:.62s} .menu.is-open .menu__talk{opacity:1;transform:none;transition-delay:.68s} .menu.is-open .menu__foot{opacity:1;transform:none;transition-delay:.74s} /* ===================================================================== SCROLL CHOREOGRAPHY — cinematic intro/outro per element, paired with the snap engine. JS tags atomic elements with .anim + a --ai stagger index, and toggles .is-in / .is-out on each section as it enters/leaves. ===================================================================== */ .anim{opacity:0;transform:translateY(56px) scale(.94); transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s var(--ease)} /* titles get a cinematic blur-in (declared BEFORE .is-in so .is-in wins on equal specificity) */ .anim.anim-blur{filter:blur(14px)} .is-in .anim,.is-in .anim.anim-blur{opacity:1;transform:none;filter:none;transition-delay:calc(var(--ai,0) * 36ms + 40ms)} .is-out .anim,.is-out .anim.anim-blur{opacity:0;transform:translateY(-48px) scale(.96);filter:blur(8px);transition-duration:.5s,.55s,.5s;transition-delay:calc(var(--ai,0) * 14ms)} /* exit downward when scrolling back up */ html.scroll-up .is-out .anim{transform:translateY(56px) scale(.96)} /* ----- Section 5 podcasting cards: preserve slanted seam during intro/outro ----- The 3D rotation now lives on .pod__stack (the wall), so cards only need to carry their skewY(-4deg) through the intro/outro choreography. We also override .anim's transition timing here so that hover handoff between cards is fully coordinated at .65s (the generic .anim sets transform to .8s, which would leave the card slightly behind the photo/veil/detail during a swap). */ .pod-card.anim{transform:translateY(56px) scale(.94) skewY(-4deg); transition:opacity .65s var(--ease),transform .65s var(--ease),filter .65s var(--ease), flex-grow .65s var(--ease),box-shadow .55s var(--ease),border-color .45s var(--ease)} .is-in .pod-card.anim{opacity:1;transform:skewY(-4deg)} .is-out .pod-card.anim{opacity:0;transform:translateY(-48px) scale(.96) skewY(-4deg)} html.scroll-up .is-out .pod-card.anim{transform:translateY(56px) scale(.96) skewY(-4deg)} /* Hover override (same specificity, later in file → wins): pop the active card forward in 3D space within the tilted wall. */ .is-in .pod-card.anim:hover,.is-in .pod-card.anim:focus-within{transform:skewY(-4deg) translateZ(40px)} @media (max-width:1023px){ .pod-card.anim,.is-in .pod-card.anim,.is-out .pod-card.anim, html.scroll-up .is-out .pod-card.anim, .is-in .pod-card.anim:hover,.is-in .pod-card.anim:focus-within{transform:translateY(56px) scale(.94)} .is-in .pod-card.anim{transform:none} .is-out .pod-card.anim{transform:translateY(-48px) scale(.96)} } /* ----- Hero scene: fly-in from off-screen right + subtle perspective tilt ----- */ .nhero__scene{perspective:1400px;perspective-origin:62% 48%} .nh-layer{transform-style:preserve-3d;will-change:transform,opacity;--px:0px;--py:0px} /* Per-layer subtle tilt — under 4deg total, varies with parallax depth for layered feel */ .nh-layer[data-parallax="0.02"]{--tilt-y:-1.4deg;--tilt-x:.6deg} .nh-layer[data-parallax="0.04"]{--tilt-y:-2.0deg;--tilt-x:.9deg} .nh-layer[data-parallax="0.06"]{--tilt-y:-2.6deg;--tilt-x:1.1deg} .nh-layer[data-parallax="0.08"]{--tilt-y:-3.0deg;--tilt-x:1.3deg} .nh-layer[data-parallax="0.10"]{--tilt-y:-3.4deg;--tilt-x:1.5deg} .nh-layer[data-parallax="0.12"]{--tilt-y:-3.8deg;--tilt-x:1.7deg} /* Initial (pre-intro) state — fully off the right edge, rotated, slightly back in depth */ .nh-layer.anim-fly{ opacity:0; transform:translate3d(calc(38vw + var(--px)), var(--py), -120px) rotateY(-14deg) rotateX(2deg) scale(1.05); transition:opacity .9s var(--ease),transform 1.15s var(--ease); transition-delay:calc(var(--fi,0) * 90ms + 120ms); } /* Settled state — at rest position with the subtle perspective tilt (parallax adds drift via --px/--py) */ #hero.is-in .nh-layer.anim-fly{ opacity:1; transform:translate3d(var(--px), var(--py), 0) rotateY(var(--tilt-y,-3.2deg)) rotateX(var(--tilt-x,1.4deg)) scale(1); } /* Once fly-in completes (JS adds .fly-done), suppress transform transition so parallax drift is instant + smooth */ .nh-layer.anim-fly.fly-done{transition:opacity .9s var(--ease)} /* Outro — drift off to the left with a counter-tilt; re-enable transform transition for the exit */ #hero.is-out .nh-layer.anim-fly, #hero.is-out .nh-layer.anim-fly.fly-done{ opacity:0; transform:translate3d(calc(-22vw + var(--px)), -32px, -60px) rotateY(8deg) rotateX(-1deg) scale(.97); transition:opacity .7s var(--ease),transform .85s var(--ease); transition-delay:calc(var(--fi,0) * 30ms); } @media (prefers-reduced-motion:reduce){ .anim{opacity:1!important;transform:none!important;filter:none!important;transition:none!important} .nh-layer.anim-fly{opacity:1!important;transform:none!important;transition:none!important} .nhero__scene{perspective:none} } /* ===================================================================== MORPHING COLOR BACKGROUND ENGINE A single fixed color field behind every section. Five reusable gradient blobs (brand pink/purple/blue) drift slowly (idle) and reposition+retint per section. JS sets html[data-bg="N"]; CSS morphs each blob to that section's arrangement via a smooth transition on transform/opacity. Pure compositor work (transform/opacity only) — 60fps, no per-frame JS. ===================================================================== */ .bg-engine{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden; background:#020207;isolation:isolate} /* The color field — frosted: blobs are blurred + slightly desaturated so the whole thing reads as soft matte glass rather than sharp gradients. */ .bg-engine__field{position:absolute;inset:0;z-index:0; filter:blur(40px) saturate(.82) brightness(.92)} /* Matte frosted-glass film over the field — a faint milky sheet + a slightly deeper edge so the colours feel diffused behind glass, never garish. */ .bg-engine__frost{position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0) 30%,rgba(8,6,16,.05)); box-shadow:inset 0 0 200px 40px rgba(2,2,7,.55)} /* Vignette — stronger now, pulls colour toward accent zones + darkens the rest so section elements have clearly more contrast against the field. */ .bg-engine::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(120% 90% at 50% 45%,transparent 38%,rgba(2,2,7,.82) 100%), linear-gradient(180deg,rgba(2,2,7,.35),transparent 26%,transparent 74%,rgba(2,2,7,.4))} /* Outer blob = per-section POSITION. Transition easing matches the section element choreography (var(--ease)) so the morph and the content reveals share one rhythm and read as synced. */ .bg-blob{position:absolute;left:50%;top:50%;border-radius:50%; mix-blend-mode:screen; transform:translate(calc(-50% + var(--x,0vw)),calc(-50% + var(--y,0vh))) scale(var(--s,1)); opacity:var(--o,.3); transition:transform 1s var(--ease),opacity 1s var(--ease); will-change:transform,opacity} /* Inner = continuous IDLE DRIFT (own transform, composes with the outer) */ .bg-blob__inner{position:absolute;inset:0;border-radius:50%;will-change:transform} /* blob sizes + colors (soft radial, fades to transparent) */ .bg-blob--1{width:70vmax;height:70vmax} .bg-blob--1 .bg-blob__inner{background:radial-gradient(closest-side,rgba(255,46,154,.85),rgba(255,46,154,0) 70%);animation:bgDrift1 30s ease-in-out infinite} .bg-blob--2{width:84vmax;height:84vmax} .bg-blob--2 .bg-blob__inner{background:radial-gradient(closest-side,rgba(168,85,247,.8),rgba(168,85,247,0) 70%);animation:bgDrift2 36s ease-in-out infinite} .bg-blob--3{width:76vmax;height:76vmax} .bg-blob--3 .bg-blob__inner{background:radial-gradient(closest-side,rgba(45,127,255,.8),rgba(45,127,255,0) 70%);animation:bgDrift3 33s ease-in-out infinite} .bg-blob--4{width:56vmax;height:56vmax} .bg-blob--4 .bg-blob__inner{background:radial-gradient(closest-side,rgba(255,72,170,.75),rgba(255,72,170,0) 70%);animation:bgDrift4 40s ease-in-out infinite} .bg-blob--5{width:80vmax;height:80vmax} .bg-blob--5 .bg-blob__inner{background:radial-gradient(closest-side,rgba(106,61,255,.75),rgba(106,61,255,0) 70%);animation:bgDrift5 38s ease-in-out infinite} /* idle drift keyframes — gentler amplitude (subtler), each unique */ @keyframes bgDrift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2%,-2.4%) scale(1.035)}} @keyframes bgDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-2.4%,1.8%) scale(1.04)}} @keyframes bgDrift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(2.2%,2.2%) scale(1.03)}} @keyframes bgDrift4{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-1.8%,-2.6%) scale(1.045)}} @keyframes bgDrift5{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(1.8%,-1.8%) scale(1.035)}} /* ---- Per-section arrangements — INTENTIONAL accenting ---- Each section's content is text-left / visual-right, so the brighter accent blobs cluster behind the RIGHT-side focal element (city, photo wall, viz, cards, 3D tower) while the left/text side stays dark for legibility + contrast. Lower opacities throughout = subtle. Default = hero. ---- */ /* Section 0 — HERO: glow wraps the neon city on the right; text-left stays dark */ .bg-blob--1{--x:18vw;--y:-2vh;--s:1;--o:.34} .bg-blob--2{--x:30vw;--y:20vh;--s:1.05;--o:.26} .bg-blob--3{--x:36vw;--y:-6vh;--s:.95;--o:.34} .bg-blob--4{--x:24vw;--y:8vh;--s:.6;--o:.2} .bg-blob--5{--x:6vw;--y:26vh;--s:.8;--o:.16} [data-bg="0"] .bg-blob--1{--x:18vw;--y:-2vh;--s:1;--o:.34} [data-bg="0"] .bg-blob--2{--x:30vw;--y:20vh;--s:1.05;--o:.26} [data-bg="0"] .bg-blob--3{--x:36vw;--y:-6vh;--s:.95;--o:.34} [data-bg="0"] .bg-blob--4{--x:24vw;--y:8vh;--s:.6;--o:.2} [data-bg="0"] .bg-blob--5{--x:6vw;--y:26vh;--s:.8;--o:.16} /* Section 1 — SEQUENCE: accent the HUD timeline cards (right), purple-led */ [data-bg="1"] .bg-blob--1{--x:8vw;--y:24vh;--s:.7;--o:.2} [data-bg="1"] .bg-blob--2{--x:30vw;--y:-12vh;--s:1.1;--o:.34} [data-bg="1"] .bg-blob--3{--x:26vw;--y:18vh;--s:.95;--o:.28} [data-bg="1"] .bg-blob--4{--x:38vw;--y:6vh;--s:.6;--o:.22} [data-bg="1"] .bg-blob--5{--x:-30vw;--y:-20vh;--s:.7;--o:.14} /* Section 2 — PHOTOGRAPHY: accent the tilted photo wall (right) pink+blue */ [data-bg="2"] .bg-blob--1{--x:22vw;--y:-10vh;--s:1;--o:.32} [data-bg="2"] .bg-blob--2{--x:34vw;--y:22vh;--s:.85;--o:.22} [data-bg="2"] .bg-blob--3{--x:34vw;--y:0vh;--s:1;--o:.32} [data-bg="2"] .bg-blob--4{--x:14vw;--y:20vh;--s:.6;--o:.2} [data-bg="2"] .bg-blob--5{--x:-28vw;--y:24vh;--s:.7;--o:.14} /* Section 3 — SOUND: accent the visualizer/player stack (right) purple+pink */ [data-bg="3"] .bg-blob--1{--x:24vw;--y:18vh;--s:.9;--o:.3} [data-bg="3"] .bg-blob--2{--x:30vw;--y:-10vh;--s:1.1;--o:.32} [data-bg="3"] .bg-blob--3{--x:34vw;--y:24vh;--s:.95;--o:.26} [data-bg="3"] .bg-blob--4{--x:14vw;--y:-18vh;--s:.6;--o:.2} [data-bg="3"] .bg-blob--5{--x:-30vw;--y:20vh;--s:.7;--o:.14} /* Section 4 — PODCASTING: accent the stacked cards (right) pink+purple */ [data-bg="4"] .bg-blob--1{--x:26vw;--y:-16vh;--s:1;--o:.32} [data-bg="4"] .bg-blob--2{--x:30vw;--y:10vh;--s:1.05;--o:.3} [data-bg="4"] .bg-blob--3{--x:34vw;--y:26vh;--s:.95;--o:.26} [data-bg="4"] .bg-blob--4{--x:16vw;--y:24vh;--s:.6;--o:.2} [data-bg="4"] .bg-blob--5{--x:-28vw;--y:-18vh;--s:.7;--o:.14} /* Section 5 — TOOLKIT: accent the 3D software tower (right) purple+blue */ [data-bg="5"] .bg-blob--1{--x:12vw;--y:24vh;--s:.8;--o:.24} [data-bg="5"] .bg-blob--2{--x:30vw;--y:-6vh;--s:1.15;--o:.34} [data-bg="5"] .bg-blob--3{--x:30vw;--y:26vh;--s:1;--o:.3} [data-bg="5"] .bg-blob--4{--x:38vw;--y:-16vh;--s:.6;--o:.2} [data-bg="5"] .bg-blob--5{--x:-30vw;--y:18vh;--s:.7;--o:.14} /* Section 6 — FOOTER: centered content, calm — soft purple top-center */ [data-bg="6"] .bg-blob--1{--x:-16vw;--y:-22vh;--s:.8;--o:.2} [data-bg="6"] .bg-blob--2{--x:6vw;--y:-16vh;--s:1.05;--o:.28} [data-bg="6"] .bg-blob--3{--x:16vw;--y:24vh;--s:.95;--o:.22} [data-bg="6"] .bg-blob--4{--x:28vw;--y:-18vh;--s:.6;--o:.16} [data-bg="6"] .bg-blob--5{--x:-18vw;--y:24vh;--s:.8;--o:.16} /* ---- Neutralize the OLD per-section backgrounds so the engine is the single color source behind everything (engine replaces all backgrounds) ---- */ .nhero{background:transparent} .seq{background:transparent} .seq__pin::before{background:none} .gal{background:transparent} .gal::before{background:none} .snd{background:transparent} .snd::before{background:none} .pod{background:transparent;background-image:none} .foot{background:transparent;background-image:none} .software-stack-section{background:transparent} .software-stack-section .software-stack-bg{display:none} @media (prefers-reduced-motion:reduce){ .bg-blob__inner{animation:none!important} .bg-blob{transition:none!important} } /* ===================================================================== CONTACT PAGE (contact.html) — premium lead-converting layout. Two columns: editorial pitch + contact methods on the left, a glass lead form on the right. Sits on the shared morphing background engine and reuses the site's kicker/title/rule + .nh-btn components. ===================================================================== */ .contact{position:relative;min-height:100svh;overflow:hidden; display:flex;align-items:center; padding:calc(var(--navh) + 2.4rem) var(--pad) 3.4rem} .contact__inner{position:relative;z-index:1;max-width:1500px;margin:0 auto;width:100%; display:grid;grid-template-columns:1fr;gap:2.6rem;align-items:start} /* ---- LEFT: pitch ---- */ .contact__intro{display:flex;flex-direction:column;max-width:40rem} .contact__kicker{font-size:.72rem;letter-spacing:.3em;font-weight:500;color:#d24b9e;text-transform:uppercase; margin-bottom:1.2rem;display:inline-flex;align-items:center;gap:.7rem} .contact__kicker::before{content:"";width:26px;height:1px;background:var(--grad);display:inline-block} .contact__title{text-transform:uppercase;font-weight:300;line-height:1.0;letter-spacing:.005em;color:#fff; font-size:clamp(2.3rem,4.6vw,3.9rem);display:flex;flex-direction:column;gap:.06em;margin:0 0 1.1rem} .contact__title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .contact__title-dot{color:#4f8bff} .contact__rule{width:60px;height:1.5px;background:var(--grad);margin:.4rem 0 1.4rem;border-radius:1px} .contact__body{font-weight:300;color:var(--muted);font-size:clamp(.97rem,2.4vw,1.07rem);line-height:1.75; margin:0 0 1.9rem;max-width:34rem} /* contact methods */ .contact__methods{list-style:none;display:flex;flex-direction:column;gap:1.05rem;margin:0 0 2rem;padding:0} .contact__method{display:flex;align-items:center;gap:1rem} .contact__method-ico{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:12px; color:#ff7ac0;background:linear-gradient(150deg,rgba(255,46,154,.12),rgba(45,127,255,.1)); border:1px solid rgba(168,85,247,.3); box-shadow:inset 0 0 16px -4px rgba(168,85,247,.45),0 0 22px -8px rgba(255,46,154,.5)} .contact__method-ico svg{width:21px;height:21px} .contact__method-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .contact__method-txt b{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#d24b9e;font-weight:600} .contact__method-txt a,.contact__method-static{font-size:1rem;color:#fff;font-weight:400;transition:color .25s} .contact__method-txt a:hover{color:#ff7ac0} /* what happens next */ .contact__steps{border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem;max-width:34rem} .contact__steps-h{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#9b8fd6;font-weight:600} .contact__steps ol{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem} .contact__steps li{display:flex;align-items:baseline;gap:.8rem;font-size:.9rem;color:var(--muted);line-height:1.5} .contact__steps li b{flex:0 0 auto;font-size:.72rem;font-weight:600;letter-spacing:.06em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} /* ---- RIGHT: lead form (glass card) ---- */ .cform{position:relative;border-radius:18px;padding:clamp(1.4rem,2.6vw,2.2rem); background:linear-gradient(160deg,rgba(28,16,44,.62),rgba(11,8,22,.5)); border:1px solid rgba(168,85,247,.28); box-shadow:0 30px 90px -30px rgba(0,0,0,.8),0 0 50px -18px rgba(168,85,247,.45),inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} /* neon top accent */ .cform::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,#ff2e9a 25%,#a855f7 50%,#2d7fff 75%,transparent); box-shadow:0 0 14px rgba(255,46,154,.6)} .cform__head{margin-bottom:1.4rem} .cform__badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.58rem;letter-spacing:.2em; text-transform:uppercase;font-weight:600;color:#ffd6e8; padding:.36rem .7rem;border-radius:999px;border:1px solid rgba(255,46,154,.4);background:rgba(255,46,154,.08); box-shadow:0 0 18px -6px rgba(255,46,154,.6);margin-bottom:.9rem} .cform__badge i{width:7px;height:7px;border-radius:50%;background:#ff2e9a;box-shadow:0 0 8px #ff2e9a; animation:cformPulse 1.6s ease-in-out infinite} @keyframes cformPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}} .cform__title{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:300;letter-spacing:.01em;color:#fff;margin:0 0 .4rem} .cform__sub{font-size:.78rem;color:var(--dim);line-height:1.5;margin:0} .cform__sub span{color:#ff7ac0} .cform__grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem .9rem} .cform__field{display:flex;flex-direction:column;gap:.35rem;min-width:0} .cform__field--full{grid-column:1/-1} .cform__label{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#cbc8dd;font-weight:600; display:flex;align-items:center;gap:.35rem} .cform__label i{color:#ff5aa8;font-style:normal} .cform__label em{font-style:normal;color:var(--dim);letter-spacing:.04em;text-transform:none;font-weight:400} .cform__input{width:100%;font:inherit;font-size:.92rem;color:#fff; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);border-radius:10px; padding:.7rem .85rem;transition:border-color .25s,box-shadow .25s,background .25s} .cform__input::placeholder{color:#7c7891} .cform__input:hover{border-color:rgba(255,255,255,.22)} .cform__input:focus{outline:none;border-color:rgba(255,46,154,.65);background:rgba(255,46,154,.05); box-shadow:0 0 0 3px rgba(255,46,154,.16),0 0 22px -8px rgba(255,46,154,.7)} .cform__input.is-invalid{border-color:rgba(255,72,120,.8);box-shadow:0 0 0 3px rgba(255,72,120,.18)} .cform__textarea{resize:vertical;min-height:96px;line-height:1.55} .cform__select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b39ddb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:15px} .cform__select option{background:#140c20;color:#fff} .cform__submit{margin-top:1.3rem;width:100%;justify-content:center} .cform__note{display:flex;align-items:center;justify-content:center;gap:.45rem; margin:.9rem 0 0;font-size:.72rem;color:var(--dim)} .cform__note svg{color:#37e0b0;flex:0 0 auto} /* success state */ .cform__success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem; padding:1.6rem .6rem .6rem} .cform__success-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#fff; background:var(--grad);box-shadow:0 0 30px -6px rgba(255,46,154,.7)} .cform__success-ico svg{width:30px;height:30px} .cform__success h3{font-size:1.4rem;font-weight:300;letter-spacing:.02em;color:#fff;margin:.2rem 0 0;text-transform:uppercase} .cform__success p{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:24rem;margin:0} .cform__success a{color:#ff7ac0} .cform.is-sent{display:flex;align-items:center;justify-content:center;min-height:340px} /* ---- responsive ---- */ @media (min-width:980px){ .contact__inner{grid-template-columns:minmax(360px,1fr) minmax(440px,540px);gap:4rem;align-items:center} } @media (max-width:560px){ .cform__grid{grid-template-columns:1fr} } /* the success block must stay hidden until JS reveals it (class display:flex was overriding the [hidden] attribute due to equal specificity) */ .cform__success[hidden]{display:none} /* ===================================================================== FAQ PAGE (faq.html) — modular accordion + search + category filter. Sits on the shared morphing background engine; reuses kicker/title/rule + .nh-btn. Accordion animates via the grid-template-rows 0fr to 1fr trick. ===================================================================== */ .faq{position:relative;min-height:100svh;overflow:hidden; padding:calc(var(--navh) + 2.4rem) var(--pad) 4rem} .faq__inner{position:relative;z-index:1;max-width:940px;margin:0 auto;width:100%} /* intro (centred) */ .faq__intro{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:2.2rem} .faq__kicker{font-size:.72rem;letter-spacing:.3em;font-weight:500;color:#d24b9e;text-transform:uppercase; margin-bottom:1.1rem;display:inline-flex;align-items:center;gap:.7rem} .faq__kicker::before,.faq__kicker::after{content:"";width:26px;height:1px;background:var(--grad);display:inline-block} .faq__title{text-transform:uppercase;font-weight:300;line-height:1.0;letter-spacing:.005em;color:#fff; font-size:clamp(2.2rem,4.4vw,3.6rem);display:flex;flex-direction:column;gap:.06em;margin:0 0 1.1rem} .faq__title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .faq__title-dot{color:#4f8bff} .faq__rule{width:60px;height:1.5px;background:var(--grad);margin:.3rem auto 1.3rem;border-radius:1px} .faq__body{font-weight:300;color:var(--muted);font-size:clamp(.95rem,2.4vw,1.05rem);line-height:1.7;max-width:40rem;margin:0} .faq__body a{color:#ff7ac0;border-bottom:1px solid rgba(255,122,192,.35);transition:color .25s} .faq__body a:hover{color:#fff} /* toolbar */ .faq__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-bottom:1.2rem} .faq__search{position:relative;flex:1 1 280px;display:flex;align-items:center} .faq__search-ico{position:absolute;left:14px;width:18px;height:18px;color:#9b8fd6;pointer-events:none} .faq__search-input{width:100%;font:inherit;font-size:.92rem;color:#fff; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);border-radius:11px; padding:.72rem 2.4rem;transition:border-color .25s,box-shadow .25s,background .25s} .faq__search-input::placeholder{color:#7c7891} .faq__search-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .faq__search-input:focus{outline:none;border-color:rgba(255,46,154,.65);background:rgba(255,46,154,.05); box-shadow:0 0 0 3px rgba(255,46,154,.16),0 0 22px -8px rgba(255,46,154,.7)} .faq__search-clear{position:absolute;right:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center; color:#cfcde0;font-size:1.1rem;line-height:1;background:rgba(255,255,255,.08);border:none;transition:background .25s,color .25s} .faq__search-clear:hover{background:rgba(255,46,154,.25);color:#fff} .faq__toolbar-right{display:flex;align-items:center;gap:1rem;margin-left:auto} .faq__count{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;white-space:nowrap} .faq__toggle-all{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#cbc8dd;font-weight:600; padding:.55rem .9rem;border-radius:9px;border:1px solid rgba(168,85,247,.3);background:rgba(13,9,24,.5); transition:color .25s,border-color .25s,box-shadow .25s} .faq__toggle-all:hover{color:#fff;border-color:rgba(255,46,154,.55);box-shadow:0 0 18px -6px rgba(255,46,154,.6)} .faq__toggle-all:disabled{opacity:.4;pointer-events:none} /* category tabs */ .faq__tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem} .faq-tab{display:inline-flex;align-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:#bdbace;padding:.5rem .85rem;border-radius:999px; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03); transition:color .25s,border-color .25s,background .25s,box-shadow .25s} .faq-tab i{font-style:normal;font-size:.9em;color:var(--dim); min-width:1.3em;height:1.3em;padding:0 .35em;display:inline-grid;place-items:center;border-radius:999px; background:rgba(255,255,255,.06);transition:background .25s,color .25s} .faq-tab:hover{color:#fff;border-color:rgba(168,85,247,.45)} .faq-tab.is-active{color:#fff;border-color:rgba(255,46,154,.55);background:rgba(255,46,154,.1); box-shadow:0 0 20px -6px rgba(255,46,154,.6)} .faq-tab.is-active i{background:var(--pink);color:#fff} /* the modular list */ .faq__list{display:flex;flex-direction:column;gap:.7rem} .faq-item{position:relative;border-radius:13px;overflow:hidden; border:1px solid rgba(255,255,255,.09);background:rgba(13,9,24,.5); transition:border-color .3s,box-shadow .3s,background .3s} .faq-item.is-hidden{display:none} .faq-item:hover{border-color:rgba(168,85,247,.4)} .faq-item.is-open{border-color:rgba(255,46,154,.4);background:rgba(20,12,32,.6); box-shadow:0 0 34px -14px rgba(255,46,154,.5)} .faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:var(--grad);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)} .faq-item.is-open::before{transform:scaleY(1)} /* question button */ .faq-item__q{width:100%;text-align:left;background:none;border:none;cursor:pointer; display:grid;grid-template-columns:1fr auto;grid-template-areas:"tag icon" "text icon"; column-gap:1rem;row-gap:.15rem;align-items:center;padding:1.05rem 1.2rem} .faq-item__tag{grid-area:tag;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:#9b8fd6;font-weight:600} .faq-item__text{grid-area:text;font-size:1rem;font-weight:500;color:#fff;line-height:1.35} .faq-item__icon{grid-area:icon;position:relative;width:22px;height:22px;flex:0 0 auto;color:#ff7ac0; transition:transform .35s var(--ease),color .25s} .faq-item__icon::before,.faq-item__icon::after{content:"";position:absolute;background:currentColor;border-radius:2px} .faq-item__icon::before{left:3px;right:3px;top:10px;height:2px} .faq-item__icon::after{top:3px;bottom:3px;left:10px;width:2px;transition:transform .35s var(--ease),opacity .3s} .faq-item.is-open .faq-item__icon{transform:rotate(180deg)} .faq-item.is-open .faq-item__icon::after{transform:scaleY(0);opacity:0} /* answer animated open via grid-template-rows */ .faq-item__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)} .faq-item.is-open .faq-item__a{grid-template-rows:1fr} .faq-item__a-inner{overflow:hidden;min-height:0} .faq-item__a-inner p{margin:0;padding:0 1.2rem 1.2rem 1.2rem;font-size:.92rem;line-height:1.7;color:var(--muted);font-weight:300} .faq-item__a-inner a{color:#ff7ac0;border-bottom:1px solid rgba(255,122,192,.35);transition:color .25s} .faq-item__a-inner a:hover{color:#fff} .faq-item__a-inner b{color:#e7e4f2;font-weight:600} /* no results */ .faq__empty{text-align:center;padding:2.4rem 1rem;display:flex;flex-direction:column;align-items:center;gap:1rem} .faq__empty p{font-size:1rem;color:var(--muted);margin:0} /* bottom CTA */ .faq__cta{margin-top:2.4rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.7rem; padding:2.2rem 1.4rem;border-radius:16px; border:1px solid rgba(168,85,247,.3); background:linear-gradient(160deg,rgba(28,12,42,.5),rgba(11,8,22,.4)); box-shadow:0 0 42px -18px rgba(168,85,247,.6)} .faq__cta-ico{display:flex;align-items:center;justify-content:center;gap:1.5px;height:22px;width:80px;margin-bottom:.2rem} .faq__cta-ico span{flex:1;height:100%;transform-origin:center;transform:scaleY(var(--h,.4));border-radius:1px; background:linear-gradient(180deg,#ff2e9a,#a855f7)} .faq__cta-title{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:300;letter-spacing:.02em;text-transform:uppercase;color:#fff;margin:0} .faq__cta-text{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:26rem;margin:0} .faq__cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:.5rem} @media (prefers-reduced-motion:reduce){ .faq-item__a{transition:none} .faq-item__icon,.faq-item__icon::after,.faq-item::before{transition:none} } /* ===================================================================== BOOKINGS PAGE (book.html) — multi-step lead-capture wizard. Same shell + glass/neon system as contact/faq. Left = pitch + trust, right = a 3-step wizard (Service - Details - Contact) with a live summary and success state. ===================================================================== */ .book{position:relative;min-height:100svh;overflow:hidden; padding:calc(var(--navh) + 2.4rem) var(--pad) 3.6rem} .book__inner{position:relative;z-index:1;max-width:1500px;margin:0 auto;width:100%; display:grid;grid-template-columns:1fr;gap:2.6rem;align-items:start} /* ---- LEFT pitch ---- */ .book__intro{display:flex;flex-direction:column;max-width:40rem} .book__kicker{font-size:.72rem;letter-spacing:.3em;font-weight:500;color:#d24b9e;text-transform:uppercase; margin-bottom:1.2rem;display:inline-flex;align-items:center;gap:.7rem} .book__kicker::before{content:"";width:26px;height:1px;background:var(--grad);display:inline-block} .book__title{text-transform:uppercase;font-weight:300;line-height:1.0;letter-spacing:.005em;color:#fff; font-size:clamp(2.3rem,4.6vw,3.9rem);display:flex;flex-direction:column;gap:.06em;margin:0 0 1.1rem} .book__title-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .book__title-dot{color:#4f8bff} .book__rule{width:60px;height:1.5px;background:var(--grad);margin:.4rem 0 1.4rem;border-radius:1px} .book__body{font-weight:300;color:var(--muted);font-size:clamp(.97rem,2.4vw,1.07rem);line-height:1.75;margin:0 0 1.8rem;max-width:34rem} .book-stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:30rem;margin:0 0 1.9rem;padding:0} .book-stats li{display:flex;flex-direction:column;gap:.25rem;padding-left:.85rem;border-left:1px solid rgba(255,255,255,.1)} .book-stats b{font-size:clamp(1.3rem,3vw,1.7rem);font-weight:300;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.01em} .book-stats span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);line-height:1.4} .book-steps{border-top:1px solid rgba(255,255,255,.08);padding-top:1.4rem;max-width:34rem;margin-bottom:1.8rem} .book-steps__h{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:#9b8fd6;font-weight:600} .book-steps ol{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem} .book-steps li{display:flex;align-items:baseline;gap:.8rem;font-size:.9rem;color:var(--muted);line-height:1.5} .book-steps li b{flex:0 0 auto;font-size:.72rem;font-weight:600;letter-spacing:.06em; background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .book-reach{display:flex;flex-direction:column;gap:.7rem;max-width:34rem} .book-reach__row{display:flex;align-items:center;gap:.8rem;transition:transform .25s} .book-reach__row:hover{transform:translateX(2px)} .book-reach__ico{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;color:#ff7ac0; border:1px solid rgba(168,85,247,.28);background:linear-gradient(150deg,rgba(255,46,154,.1),rgba(45,127,255,.1)); box-shadow:inset 0 0 14px -4px rgba(168,85,247,.45),0 0 18px -8px rgba(255,46,154,.5)} .book-reach__ico svg{width:18px;height:18px} .book-reach__txt{display:flex;flex-direction:column;gap:1px;min-width:0} .book-reach__txt b{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#d24b9e;font-weight:600} .book-reach__txt span{font-size:.9rem;color:#fff;transition:color .25s} .book-reach__row:hover .book-reach__txt span{color:#ff7ac0} /* ---- RIGHT wizard (glass card) ---- */ .bk{position:relative;border-radius:18px;padding:clamp(1.4rem,2.6vw,2.1rem); background:linear-gradient(160deg,rgba(28,16,44,.62),rgba(11,8,22,.5)); border:1px solid rgba(168,85,247,.28); box-shadow:0 30px 90px -30px rgba(0,0,0,.8),0 0 50px -18px rgba(168,85,247,.45),inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .bk::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,#ff2e9a 25%,#a855f7 50%,#2d7fff 75%,transparent); box-shadow:0 0 14px rgba(255,46,154,.6)} /* progress */ .bk__head{margin-bottom:1.5rem} .bk__progress{display:flex;align-items:center;gap:.4rem;margin-bottom:.9rem} .bk__pstep{display:inline-flex;align-items:center;gap:.5rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase; color:var(--dim);font-weight:600;white-space:nowrap} .bk__pstep i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:.7rem; border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#cfcde0;transition:all .3s var(--ease)} .bk__pstep em{font-style:normal} .bk__pstep.is-active{color:#fff} .bk__pstep.is-active i{border-color:transparent;background:var(--grad);color:#fff;box-shadow:0 0 16px -3px rgba(255,46,154,.8)} .bk__pstep.is-done i{border-color:rgba(255,46,154,.5);background:rgba(255,46,154,.14);color:#ff7ac0} .bk__pline{flex:1;height:1px;background:rgba(255,255,255,.12)} .bk__bar{height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden} .bk__bar span{display:block;height:100%;width:0;border-radius:3px;background:var(--grad);transition:width .45s var(--ease);box-shadow:0 0 12px rgba(255,46,154,.6)} /* panels */ .bk__panel{display:none;border:none;margin:0;padding:0;min-width:0} .bk__panel.is-active{display:block;animation:bkFade .42s var(--ease)} @keyframes bkFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .bk__q{font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:300;letter-spacing:.01em;color:#fff;margin:0 0 1.1rem;padding:0;outline:none} /* service selector cards */ .bk-services{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-bottom:1.1rem} .bk-service{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;text-align:left;cursor:pointer; padding:.85rem .9rem;border-radius:12px;color:#cfcde0; border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03); transition:border-color .25s,background .25s,box-shadow .25s,transform .2s} .bk-service__ico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:#ff7ac0; border:1px solid rgba(168,85,247,.3);background:rgba(255,46,154,.06);transition:all .25s} .bk-service__ico svg{width:18px;height:18px} .bk-service__t{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:#fff;line-height:1.2} .bk-service:hover{border-color:rgba(168,85,247,.5);transform:translateY(-2px)} .bk-service.is-selected{border-color:rgba(255,46,154,.6);background:rgba(255,46,154,.09); box-shadow:0 0 24px -6px rgba(255,46,154,.6)} .bk-service.is-selected .bk-service__ico{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 0 14px -2px rgba(255,46,154,.8)} /* fields (shared look with the contact form) */ .bk__grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem .9rem;margin-bottom:.2rem} .bk__field{display:flex;flex-direction:column;gap:.35rem;min-width:0;margin-bottom:.9rem} .bk__label{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#cbc8dd;font-weight:600;display:flex;align-items:center;gap:.35rem} .bk__label i{color:#ff5aa8;font-style:normal} .bk__label em{font-style:normal;color:var(--dim);letter-spacing:.04em;text-transform:none;font-weight:400} .bk__input{width:100%;font:inherit;font-size:.92rem;color:#fff; background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.13);border-radius:10px; padding:.7rem .85rem;transition:border-color .25s,box-shadow .25s,background .25s} .bk__input::placeholder{color:#7c7891} .bk__input:hover{border-color:rgba(255,255,255,.22)} .bk__input:focus{outline:none;border-color:rgba(255,46,154,.65);background:rgba(255,46,154,.05); box-shadow:0 0 0 3px rgba(255,46,154,.16),0 0 22px -8px rgba(255,46,154,.7)} .bk__input.is-invalid{border-color:rgba(255,72,120,.8);box-shadow:0 0 0 3px rgba(255,72,120,.18)} .bk__textarea{resize:vertical;min-height:104px;line-height:1.55} .bk__select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b39ddb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:15px} .bk__select option{background:#140c20;color:#fff} .bk__input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.7) sepia(1) hue-rotate(280deg)} /* segmented control (session type) */ .bk-seg{display:flex;gap:.4rem;flex-wrap:wrap} .bk-seg__opt{flex:1 1 auto;min-width:90px;padding:.6rem .7rem;border-radius:9px;cursor:pointer; font-size:.72rem;font-weight:600;letter-spacing:.02em;color:#cfcde0;text-align:center; border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.03);transition:all .25s} .bk-seg__opt:hover{border-color:rgba(168,85,247,.5)} .bk-seg__opt.is-selected{color:#fff;border-color:rgba(255,46,154,.6);background:rgba(255,46,154,.1);box-shadow:0 0 18px -6px rgba(255,46,154,.6)} /* errors */ .bk__err{font-size:.74rem;color:#ff6a99;margin:.1rem 0 .9rem;display:flex;align-items:center;gap:.4rem} /* nav */ .bk__nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.3rem} .bk__btn{padding:.85rem 1.5rem} .bk__btn i{font-style:normal} .bk__back{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#bdbace;font-weight:600; background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;transition:color .25s} .bk__back i{font-style:normal} .bk__back:hover{color:#fff} .bk__rea{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:.9rem 0 0;font-size:.7rem;color:var(--dim);line-height:1.5} .bk__rea svg{color:#37e0b0;flex:0 0 auto} /* live summary */ .bk-summary{margin-top:.4rem;border:1px solid rgba(168,85,247,.22);border-radius:12px;padding:.9rem 1rem;background:rgba(10,8,20,.4)} .bk-summary:empty{display:none} .bk-summary__h{display:block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:#9b8fd6;font-weight:600;margin-bottom:.6rem} .bk-summary__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.28rem 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:.82rem} .bk-summary__row:last-child{border-bottom:none} .bk-summary__row span{color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-size:.6rem} .bk-summary__row b{color:#fff;font-weight:500;text-align:right} .bk-summary--final{margin:1.2rem 0 .4rem;text-align:left} /* success */ .bk__success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;padding:1.4rem .4rem .6rem} .bk__success-ico{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;color:#fff; background:var(--grad);box-shadow:0 0 30px -6px rgba(255,46,154,.7)} .bk__success-ico svg{width:32px;height:32px} .bk__success h2{font-size:1.5rem;font-weight:300;letter-spacing:.02em;color:#fff;margin:.2rem 0 0;text-transform:uppercase} .bk__success p{font-size:.92rem;color:var(--muted);line-height:1.6;max-width:30rem;margin:0} .bk__success a{color:#ff7ac0} .bk__success .nh-btn{margin-top:.6rem} /* ---- responsive ---- */ @media (min-width:980px){ .book__inner{grid-template-columns:minmax(360px,1fr) minmax(460px,560px);gap:4rem;align-items:center} } @media (max-width:560px){ .bk__grid{grid-template-columns:1fr} .bk-services{grid-template-columns:1fr 1fr} .bk__pstep em{display:none} } .bk__success[hidden]{display:none} /* ===================================================================== UNIFIED KICKERS — every section kicker now matches the hero kicker: gradient-clipped text, .3em tracking, weight 500, no accent line. ===================================================================== */ .seq__kicker,.gal__kicker,.snd__kicker,.pod__kicker,.software-kicker, .book__kicker,.contact__kicker,.faq__kicker{ text-transform:uppercase!important;letter-spacing:.3em!important;font-weight:500!important; font-size:clamp(.62rem,2.6vw,.8rem)!important; background:var(--grad)!important;-webkit-background-clip:text!important;background-clip:text!important; color:transparent!important;-webkit-text-fill-color:transparent; display:block;width:max-content;max-width:100%;margin-bottom:1.1rem;gap:0} .seq__kicker::before,.gal__kicker::before,.snd__kicker::before,.pod__kicker::before, .software-kicker::before,.book__kicker::before,.contact__kicker::before, .faq__kicker::before,.faq__kicker::after{content:none!important;display:none!important} /* the FAQ intro is centred, so centre its kicker too */ .faq__kicker{margin-left:auto;margin-right:auto} /* ===================================================================== OVERHAULED MENU — full-screen, perspective-tilted accordion. The old slide-in panel rules are overridden here; the injected markup uses the .smenu namespace. Rows expand (one at a time) into a detail panel: text left, full-bleed photo (right half) with a left-to-right black gradient, and the spec list overlaid on the darkened right edge. ===================================================================== */ html.menu-open{overflow:hidden} html.menu-open .dots{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s} .menu-backdrop{position:fixed;inset:0;z-index:1040;background:rgba(3,2,9,.82); backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1); opacity:0;visibility:hidden;transition:opacity .55s var(--ease),visibility .55s} .menu-backdrop.is-shown{opacity:1;visibility:visible} /* full-screen overlay (fully overrides the old slide-in panel) */ .menu{position:fixed;inset:0;z-index:1050;width:100%;height:100%;max-width:none; display:flex;align-items:center;justify-content:center; padding:clamp(4.5rem,9vh,6.5rem) clamp(1rem,4vw,3rem) clamp(1rem,3vh,2rem); background:none;border:none;border-radius:0;box-shadow:none;transform:none;overflow:hidden; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .55s var(--ease),visibility .55s} .menu::after,.menu::before{content:none!important} .menu.is-open{opacity:1;visibility:visible;pointer-events:auto} .menu__scroll{display:contents} .smenu__inner{position:relative;width:min(1200px,94vw);max-height:90vh; display:flex;flex-direction:column;gap:clamp(.7rem,2vh,1.3rem)} /* head */ .smenu__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:0 0 auto} .smenu__logo{display:flex;align-items:center;gap:.7rem} .smenu__logo img{width:40px;height:auto;display:block;filter:drop-shadow(0 0 8px rgba(168,85,247,.5))} .smenu__logo span{display:flex;flex-direction:column;line-height:1.05;font-weight:600;letter-spacing:.14em;font-size:.82rem;color:#fff;text-transform:uppercase} .smenu__logo em{font-style:normal;font-size:.58em;letter-spacing:.3em;color:#b9b4cc;margin-top:2px} .smenu__head-tag{font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:#6f6a85;white-space:nowrap} /* the perspective-tilted stack (scrolls within its area if it overflows) */ .smenu__listwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column; overflow-y:auto;overflow-x:hidden;padding:3vh clamp(14px,4vw,46px); perspective:2600px;perspective-origin:50% 50%; scrollbar-width:none;-ms-overflow-style:none; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%)} .smenu__listwrap::-webkit-scrollbar{width:0;height:0;display:none} .smenu__list{list-style:none;margin:auto 0;padding:0;width:100%; display:flex;flex-direction:column;gap:clamp(.25rem,.6vh,.45rem); transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(6deg);transform-origin:50% 50%} /* rows */ .smenu__item{transform-style:preserve-3d;transition:transform .5s var(--ease)} .smenu__row{position:relative;width:100%;display:grid;grid-template-columns:auto 1px 1fr auto;align-items:center; gap:clamp(1rem,2.6vw,2.1rem);padding:clamp(.5rem,1.3vh,.8rem) clamp(1.2rem,2.6vw,2rem); cursor:pointer;text-align:left;color:#fff;border-radius:6px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(120deg,rgba(30,28,50,.62),rgba(10,9,20,.52)); transition:border-color .4s,background .4s,box-shadow .4s} .smenu__row:hover{border-color:rgba(120,95,225,.5);background:linear-gradient(120deg,rgba(42,38,70,.6),rgba(14,12,28,.5))} .smenu__no{font-size:clamp(.9rem,1.6vw,1.1rem);font-weight:400;color:#8f8aa6;letter-spacing:.08em;font-variant-numeric:tabular-nums} .smenu__bar{width:1px;height:1.5em;background:rgba(255,255,255,.22);justify-self:center} .smenu__label{font-size:clamp(1rem,2vw,1.55rem);font-weight:300;letter-spacing:.34em;text-transform:uppercase;color:#fff} .smenu__plus{position:relative;width:20px;height:20px;justify-self:end} .smenu__plus::before,.smenu__plus::after{content:"";position:absolute;background:#cfcbe0;border-radius:2px;transition:transform .4s var(--ease),opacity .3s} .smenu__plus::before{left:2px;right:2px;top:9px;height:2px} .smenu__plus::after{top:2px;bottom:2px;left:9px;width:2px} /* expanded row — neon-blue glow like the reference (stays coplanar = uniform tilt) */ .smenu__item.is-expanded{transform:none} .smenu__item.is-expanded .smenu__plus::after{transform:scaleY(0);opacity:0} .smenu__item.is-expanded .smenu__label{background:linear-gradient(90deg,#8e7bff,#5b8bff);-webkit-background-clip:text;background-clip:text;color:transparent} .smenu__item.is-expanded .smenu__no{color:#a98bff} .smenu__item.is-expanded .smenu__row{border-color:rgba(90,120,255,.55); background:linear-gradient(120deg,rgba(44,38,86,.72),rgba(16,14,36,.6)); box-shadow:0 0 0 1px rgba(90,120,255,.4),0 -12px 44px -12px rgba(70,100,255,.7),0 16px 48px -14px rgba(80,70,255,.55)} /* accordion panel */ .smenu__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)} .smenu__item.is-expanded .smenu__panel{grid-template-rows:1fr} /* clip element — NO padding/border so grid-rows:0fr collapses fully to 0 */ .smenu__panel-inner{overflow:hidden;min-height:0} /* visible card — holds all padding/border/bg/shadow + the 2-col layout */ .smenu__panel-card{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.4vw,2rem);align-items:stretch; padding:clamp(1.1rem,2.5vh,1.7rem) clamp(1.2rem,2.6vw,2rem); border:1px solid rgba(90,120,255,.32);border-top:none;border-radius:0 0 8px 8px; background:linear-gradient(180deg,rgba(22,18,46,.6),rgba(10,9,22,.5)); box-shadow:0 22px 60px -16px rgba(60,80,220,.5)} /* text (left) */ .smenu__text{display:flex;flex-direction:column;justify-content:center;gap:.7rem;min-width:0} .smenu__kicker{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#a98bff;font-weight:600} .smenu__title{font-size:clamp(1.4rem,2.6vw,2.15rem);font-weight:300;line-height:1.08;text-transform:uppercase;color:#fff;margin:0} .smenu__body{font-size:.86rem;line-height:1.6;color:var(--muted);max-width:30rem;font-weight:300;margin:0} .smenu__cta{align-self:flex-start;margin-top:.4rem;display:inline-flex;align-items:center;gap:.7rem; padding:.7rem 1.3rem;border-radius:7px;border:1px solid rgba(140,110,255,.5);color:#cbbcff; font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600; transition:background .3s,color .3s,box-shadow .3s,transform .3s} .smenu__cta i{font-style:normal;font-size:1.1em} .smenu__cta:hover{background:rgba(120,90,255,.2);color:#fff;box-shadow:0 0 22px -6px rgba(120,90,255,.85);transform:translateX(2px)} /* media (right half) — photo fills it; its LEFT edge (panel centre) fades out via a mask so the seam blends smoothly into the card; subtle right scrim keeps specs legible */ .smenu__media{position:relative;border-radius:8px;overflow:hidden;min-height:clamp(200px,30vh,300px)} .smenu__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 46%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 46%)} .smenu__media::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,transparent 56%,rgba(6,5,16,.66) 100%)} .smenu__specs{position:absolute;top:0;right:0;bottom:0;z-index:2; display:flex;flex-direction:column;justify-content:center;gap:clamp(.7rem,1.6vh,1rem); padding:1rem clamp(1rem,2vw,1.5rem);width:min(58%,240px);text-shadow:0 1px 6px rgba(0,0,0,.9)} .smenu__spec{display:flex;align-items:center;gap:.7rem} .smenu__spec-ico{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;color:#a98bff} .smenu__spec-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .smenu__spec-txt{display:flex;flex-direction:column;gap:1px;min-width:0} .smenu__spec-txt b{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:#9a95b0;font-weight:600} .smenu__spec-txt span{font-size:.78rem;color:#fff;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* footer line */ .smenu__foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem; font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:#6f6a85} /* responsive */ @media (max-width:768px){ .menu{padding:clamp(4.5rem,9vh,6rem) 1rem 1rem} .smenu__list{transform:rotateY(-12deg) rotateX(3deg);gap:.35rem} .smenu__label{letter-spacing:.18em;font-size:1.05rem} .smenu__panel-card{grid-template-columns:1fr;gap:.9rem} .smenu__media{min-height:170px} .smenu__media img{-webkit-mask-image:none;mask-image:none} .smenu__specs{width:auto;background:linear-gradient(90deg,transparent,rgba(0,0,0,.6))} .smenu__head-tag{display:none} } @media (max-width:768px) and (max-height:720px){ .smenu__title{font-size:1.3rem} .smenu__body{display:none} } /* keep the header toggle (which morphs to an X) clickable above the menu overlay */ html.menu-open #nav{z-index:1100} /* keep the header logo exactly where it is — it must not move when the menu opens */ /* menu footer: centered copyright + the same social icons as the site footer */ .smenu__copy{margin:0;white-space:nowrap} .smenu__social{display:flex;align-items:center;gap:.3rem;margin:0;padding:0;list-style:none} .smenu__social a{width:40px;height:40px} @media (max-width:768px){ .smenu__foot{flex-direction:column;gap:.6rem;text-align:center} .smenu__social a{width:42px;height:42px} } /* respect reduced-motion: flatten the tilt and drop the heavier transitions */ @media (prefers-reduced-motion:reduce){ .smenu__list{transform:none!important} .smenu__panel,.smenu__item,.smenu__row,.smenu__cta{transition:none!important} }