/* ============================================================
   VOLTA — Creative Studio
   Light · glassmorphism · warm orange · Space Grotesk
   Palette matches dirckmulder.com (orange #ff7e35 on warm white)
   3D glass hero rendered in WebGL (scene.js)
   ============================================================ */

:root {
  --font: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(1.25rem, 3.2vw, 3rem);
}

/* ---------- LIGHT — warm white + brand orange (matches dirckmulder.com) ---------- */
:root[data-theme="light"] {
  --bg: #F7F5F2; --bg-2: #FFFFFF;
  --text: #1A1A1A; --muted: rgba(26,26,26,.60); --faint: rgba(26,26,26,.38);
  --green: #ff7e35; --mint: #ff9a5c; --green-d: #e66a1a;   /* accent (orange) */
  --glass: rgba(255,255,255,.5); --glass-line: rgba(26,26,26,.14); --glass-hi: rgba(255,255,255,.9);
  --line: rgba(26,26,26,.14);
  --halo-a: rgba(247,245,242,.96); --halo-b: rgba(247,245,242,.70);
  --ink: #1A1A1A; --ring: #FFFFFF;
  --cta-fill: rgba(255,255,255,.5); --svc-hover: rgba(255,126,53,.07);
  --cursor-active: rgba(255,126,53,.16); --loader-bar: rgba(26,26,26,.14);
  --panel-shadow: rgba(0,0,0,.18);
  --body-bg: radial-gradient(120% 90% at 72% 26%, #FFFFFF 0%, #F4F1EC 62%);
}

/* ---------- DARK — near-black + sage green (green slime blob) ---------- */
:root[data-theme="dark"] {
  --bg: #070908; --bg-2: #0d100e;
  --text: #ECEFEA; --muted: rgba(236,239,234,.55); --faint: rgba(236,239,234,.32);
  --green: #A9C99B; --mint: #CDEBB4; --green-d: #7FA46E;   /* accent (sage) */
  --glass: rgba(255,255,255,.055); --glass-line: rgba(255,255,255,.14); --glass-hi: rgba(255,255,255,.28);
  --line: rgba(255,255,255,.12);
  --halo-a: rgba(6,8,7,.92); --halo-b: rgba(6,8,7,.60);
  --ink: #10130d; --ring: #10130d;
  --cta-fill: rgba(8,11,8,.34); --svc-hover: rgba(169,201,155,.06);
  --cursor-active: rgba(205,235,180,.14); --loader-bar: rgba(255,255,255,.12);
  --panel-shadow: rgba(0,0,0,.5);
  --body-bg: radial-gradient(120% 90% at 72% 26%, #12160f 0%, #070908 58%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  background: var(--body-bg) fixed;
  color: var(--text);
  font-family: var(--font);
  overflow-x: hidden;
  cursor: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: none; }

/* ===================== CURSOR ===================== */
.cursor {
  position: fixed; top: 0; left: 0; width: 32px; height: 32px; z-index: 9999;
  border: 1px solid var(--green); border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); transition: width .3s var(--ease), height .3s var(--ease), background .3s var(--ease), border-color .3s;
  mix-blend-mode: normal;
}
.cursor.-active { width: 64px; height: 64px; background: var(--cursor-active); }
@media (hover: none) { .cursor { display: none; } body, a, button { cursor: auto; } }

/* ===================== GLASS UTILITY ===================== */
/* Clear glass: no frosted fill, blur dialed right down so the metal balls read
   sharply THROUGH every panel. Just an edge (border + inset highlight) remains. */
.glass {
  background: transparent;
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(2px) saturate(1.1);
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 18px 44px -26px var(--panel-shadow);
}
/* legibility: text over the busy 3D keeps a soft halo (theme-aware colour) */
.whatcard h5, .whatcard p, .talk__text strong, .talk__text span,
.follow h4, .follow p, .svc h3, .svc p, .svc__no, .nav__pill a {
  text-shadow: 0 1px 16px var(--halo-a), 0 0 40px var(--halo-b);
}

/* ===================== LOADER ===================== */
.loader {
  position: fixed; inset: 0; z-index: 9000; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem;
}
.loader__mark { font-size: clamp(2.5rem, 9vw, 6rem); font-weight: 700; letter-spacing: .3em; text-indent: .3em; }
.loader__bar { width: min(260px, 60vw); height: 2px; background: var(--loader-bar); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: 0; background: var(--mint); }

/* ===================== FRAME / HERO ===================== */
.frame {
  position: relative; width: 100%; height: 100svh; min-height: 640px;
}
/* canvas is fixed to the viewport, behind all content, so the 3D scene stays
   visible in the background while scrolling and sections slide over it cleanly */
.gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .12; transform: translateZ(0);
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.frame > :not(.gl):not(.grain) { position: absolute; z-index: 3; }
/* opaque sections scroll over the fixed background canvas */
/* Fully transparent panels: the metal droplets rain freely behind the cards
   and every section. Content sits above via z-index; no tint at all. */
.services, .work, .closing {
  position: relative; z-index: 2;
  background: transparent;
}
/* Legibility halo: keeps large text readable where it crosses the static glass
   blob, without tinting the panels — the scene still shows through the gaps. */
.sec-head h2, .work__name, .work__tag, .work__idx,
.closing__title, .closing__eyebrow {
  text-shadow: 0 0 22px var(--halo-a), 0 0 55px var(--halo-b);
}

/* Vertical brand */
.brand { top: var(--pad); left: var(--pad); display: flex; align-items: flex-start; gap: .5rem; }
.brand__name { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 700; line-height: .8; letter-spacing: -.02em; }
.brand__sub  { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }

/* Nav */
.nav { top: var(--pad); left: 0; width: 100%; padding: 0 var(--pad); display: flex; align-items: center; justify-content: flex-end; gap: .6rem; z-index: 6; }
.nav__pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: .35rem; padding: .4rem; border-radius: 100px; }
.nav__pill a { padding: .6rem 1.25rem; border-radius: 100px; font-size: .82rem; font-weight: 500; color: var(--muted); transition: color .3s, background .3s; }
.nav__pill a:hover { color: var(--text); }
.nav__pill a.is-active { background: var(--green); color: var(--ink); }
.nav__contact { position: relative; padding: .8rem 1.5rem; border-radius: 100px; font-size: .82rem; font-weight: 500; transition: background .3s, color .3s; z-index: 6; }
.nav__contact:hover { background: var(--green); color: var(--ink); }

/* theme toggle button — sits next to Contact Us */
.theme-toggle { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--text); overflow: hidden; z-index: 6; transition: color .3s; }
.theme-toggle:hover { color: var(--green); }
.theme-toggle svg { position: absolute; width: 19px; height: 19px; transition: opacity .35s var(--ease), transform .5s var(--ease); }
:root[data-theme="light"] .ico-sun  { opacity: 0; transform: rotate(-90deg) scale(.3); }
:root[data-theme="light"] .ico-moon { opacity: 1; transform: none; }
:root[data-theme="dark"]  .ico-moon { opacity: 0; transform: rotate(90deg) scale(.3); }
:root[data-theme="dark"]  .ico-sun  { opacity: 1; transform: none; }

/* Hero copy */
.hero { left: clamp(4.5rem, 9vw, 8.5rem); top: 19%; max-width: min(46vw, 540px); }
.hero__title { font-size: clamp(2.8rem, 6vw, 5.6rem); font-weight: 700; line-height: .9; letter-spacing: -.045em; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line span { display: block; }
.hero__title em { color: var(--green); font-style: normal; }
.hero__body { margin-top: 1.6rem; max-width: 34ch; font-size: clamp(.9rem, 1.1vw, 1.02rem); line-height: 1.6; color: var(--muted); }

/* rotating stamp */
.stamp { left: clamp(2rem, 31vw, 30rem); top: 57%; width: 104px; height: 104px; display: grid; place-items: center; }
.stamp__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; }
.stamp__ring text { font-size: 8.2px; letter-spacing: .12em; fill: var(--text); text-transform: uppercase; }
.stamp__arrow { font-size: 1.3rem; color: var(--green); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Follow us */
.corner-bl { left: clamp(4.5rem, 9vw, 8.5rem); bottom: clamp(2rem, 6vh, 3.6rem); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1.6rem, 3.6vh, 2.6rem); z-index: 4; max-width: min(90vw, 560px); }
.follow { max-width: 250px; }
.follow h4 { font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; margin-bottom: .9rem; }
.follow p { font-size: .78rem; line-height: 1.6; color: var(--muted); }
.follow__icons { display: flex; gap: .6rem; margin-top: 1.1rem; }
.follow__icons a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--glass-line); border-radius: 50%; font-size: .72rem; text-transform: lowercase; transition: background .3s, color .3s, border-color .3s; }
.follow__icons a:hover { background: var(--green); color: var(--ink); border-color: var(--green); }

/* What we do card */
.whatcard { right: clamp(1.25rem, 5vw, 6rem); top: 44%; width: min(300px, 34vw); padding: 1.5rem 1.6rem; border-radius: 22px; }
.whatcard h5 { font-size: 1.15rem; font-weight: 600; margin-bottom: .55rem; }
.whatcard p { font-size: .82rem; line-height: 1.55; color: var(--muted); }

/* Talk pill */
.talk { right: clamp(1.25rem, 5vw, 6rem); bottom: clamp(2rem, 6vh, 3.4rem); display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem .7rem .8rem; border-radius: 100px; }
.talk__avatars { display: flex; }
.talk__avatars span { width: 34px; height: 34px; border-radius: 50%; margin-left: -10px; border: 2px solid var(--ring); background: linear-gradient(135deg, var(--green), var(--green-d)); }
.talk__avatars span:first-child { margin-left: 0; }
.talk__avatars span:nth-child(2){ background: linear-gradient(135deg, var(--mint), var(--green));}
.talk__avatars span:nth-child(3){ background: linear-gradient(135deg, color-mix(in srgb, var(--mint) 55%, #fff), var(--mint));}
.talk__text { display: flex; flex-direction: column; line-height: 1.1; }
.talk__text strong { font-size: .9rem; font-weight: 600; }
.talk__text span { font-size: .74rem; color: var(--muted); }
.talk__arrow { color: var(--green); font-size: 1.1rem; }

/* Big CTA */
.cta {
  display: inline-flex; align-items: center; gap: 1.4rem; padding: .7rem .7rem .7rem 1.8rem;
  border-radius: 100px; font-size: clamp(.85rem, 1vw, 1rem); font-weight: 500;
}
.cta.glass { background: var(--cta-fill); }
.cta__arrow { width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--ink); display: grid; place-items: center; font-style: normal; font-size: 1.1rem; transition: transform .4s var(--ease); }
.cta:hover .cta__arrow { transform: translateX(4px) rotate(0deg); }

/* ===================== SCROLL SECTIONS ===================== */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(2rem, 5vw, 4rem); }
.kicker { font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--green); }
.sec-head h2 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700; letter-spacing: -.03em; }
.sec-head h2 em { color: var(--green); font-style: normal; }

.services { padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
@media (max-width: 900px){ .services__grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 540px){ .services__grid { grid-template-columns: 1fr;} }
/* fully transparent cards — the metal balls rain freely behind them */
.svc { padding: 1.8rem 1.5rem; border-radius: 18px; background: transparent; border: 1px solid var(--line); transition: transform .5s var(--ease), border-color .3s, background .3s; }
.svc:hover { transform: translateY(-6px); border-color: var(--green); background: var(--svc-hover); }
.svc__no { font-size: .74rem; color: var(--green); letter-spacing: .1em; }
.svc h3 { font-size: 1.35rem; font-weight: 600; margin: 1rem 0 .6rem; }
.svc p { font-size: .84rem; line-height: 1.6; color: var(--muted); }

.work { padding: clamp(5rem, 12vh, 9rem) var(--pad); }
.work__list { border-top: 1px solid var(--line); }
.work__row { display: grid; grid-template-columns: 60px 1fr auto 40px; align-items: center; gap: 1rem; padding: 1.6rem .4rem; border-bottom: 1px solid var(--line); transition: transform .4s var(--ease), color .3s; }
.work__row:hover { transform: translateX(14px); }
.work__idx { color: var(--faint); font-size: .8rem; }
.work__name { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; }
.work__tag { color: var(--muted); font-size: .82rem; }
.work__row i { color: var(--green); font-style: normal; opacity: 0; transform: translate(-6px,6px); transition: opacity .3s, transform .3s; }
.work__row:hover i { opacity: 1; transform: none; }
.work__row:hover .work__name { color: var(--green); }

.closing { min-height: 100svh; padding: 8vh var(--pad); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.closing__eyebrow { font-size: .74rem; letter-spacing: .28em; text-transform: uppercase; color: var(--green); margin-bottom: 1.4rem; }
.closing__title { font-size: clamp(2.1rem, 5.6vw, 4.8rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; max-width: 14ch; }
.closing__title .line { display: block; overflow: hidden; padding-bottom: .08em; }
.closing__title .line span { display: block; }
.closing__title em { color: var(--green); font-style: normal; }
.cta--solid { position: relative; margin-top: 2.6rem; background: var(--green); color: var(--ink); border: none; padding: .7rem .7rem .7rem 1.8rem; }
.cta--solid .cta__arrow { background: var(--ink); color: var(--green); }
.foot { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(1.5rem, 4vh, 2.5rem); display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; }

/* reveal helper */
[data-reveal] { will-change: transform, opacity; }

/* ===================== THEME-SWITCH: circular iris wipe =====================
   The View Transitions API snapshots old + new theme. We kill the default
   cross-fade and drive a growing-circle clip on the NEW snapshot from JS, so the
   whole page (bg, text, panels AND the WebGL blob) flips theme along the circle. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2147483646; }
/* keep the custom cursor painting above the transition layer */
::view-transition-group(root) { isolation: isolate; }

/* ===================== RESPONSIVE FALLBACK ===================== */
@media (max-width: 820px) {
  .whatcard, .talk, .stamp { display: none; }
  .hero { top: 22%; max-width: 88%; }
  .nav__pill { display: none; }
  .follow { max-width: 70%; }
  .cta { font-size: .8rem; padding-left: 1.2rem; gap: 1rem; }
}