/* =========================================================
   STORYTELLERS — LIQUID GLASS LAYER (shared by every page)
   Loaded after style.css. Frosted translucent panels over a live 3D stage:
   backdrop blur + saturation, light-edge borders, inner glow, specular top
   edge, and a pointer-reactive sheen (--mx/--my set by fx.js on desktop).
   Change the look in one place via the tokens below.
   ========================================================= */
:root {
  --g-blur: 26px;
  --g-sat: 175%;
  --g-tint: rgba(255, 255, 255, 0.055);
  --g-tint-2: rgba(255, 255, 255, 0.025);
  --g-edge: rgba(255, 255, 255, 0.13);
  --g-edge-hi: rgba(255, 255, 255, 0.28);
  --g-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
  --g-sheen: rgba(255, 255, 255, 0.11);
  --g-red-glow: 0 0 0 1px rgba(230, 6, 23, 0.35), 0 18px 60px -12px rgba(230, 6, 23, 0.55);
  --line-dark: rgba(255, 255, 255, 0.12);
}
@media (max-width: 760px), (pointer: coarse) { :root { --g-blur: 14px; --g-sat: 150%; } }

/* ---------- The stage (3D canvas + CSS fallback glows) ---------- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage__fallback i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; }
.stage__fallback i:nth-child(1) { width: 60vmax; height: 60vmax; right: -20vmax; bottom: -25vmax; background: radial-gradient(circle, rgba(230, 6, 23, 0.75), transparent 65%); animation: stageDrift 22s ease-in-out infinite alternate; }
.stage__fallback i:nth-child(2) { width: 45vmax; height: 45vmax; left: -15vmax; top: -10vmax; background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 65%); animation: stageDrift 28s ease-in-out infinite alternate-reverse; }
.stage__fallback i:nth-child(3) { width: 30vmax; height: 30vmax; left: 10vw; bottom: -12vmax; background: radial-gradient(circle, rgba(230, 6, 23, 0.4), transparent 70%); animation: stageDrift 34s ease-in-out infinite alternate; }
@keyframes stageDrift { to { transform: translate(-8vw, -6vh) scale(1.12); } }
.webgl .stage__fallback { display: none; }
main, .footer { position: relative; z-index: 1; }

/* CSS glass orb: shown when WebGL isn't running (no JS, reduced motion, low power) */
.css-orb { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 3%, rgba(255, 255, 255, 0.35) 7%, transparent 18%),
    radial-gradient(circle at 70% 78%, rgba(255, 170, 170, 0.55), transparent 32%),
    radial-gradient(circle at 45% 45%, #ff3b47 0%, #e60617 38%, #8e0410 70%, #3a0006 100%);
  box-shadow: inset -18px -24px 60px rgba(0, 0, 0, 0.45), inset 10px 14px 40px rgba(255, 255, 255, 0.18), 0 40px 120px -20px rgba(230, 6, 23, 0.65); }
.webgl .css-orb { display: none; }
.hero--home .css-orb { width: clamp(180px, 22vw, 340px); aspect-ratio: 1; left: 55%; top: 44%; }
.page-hero { position: relative; }
.page-hero::after { content: ""; position: absolute; right: clamp(20px, 8vw, 140px); top: clamp(90px, 12vw, 160px); width: clamp(90px, 13vw, 200px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.9) 0 3%, rgba(255,255,255,0.3) 8%, transparent 18%), radial-gradient(circle at 45% 45%, #ff3b47 0%, #e60617 40%, #7d0510 75%, #2a0004 100%);
  box-shadow: inset -12px -16px 40px rgba(0,0,0,0.45), 0 30px 90px -20px rgba(230,6,23,0.6); }
.webgl .page-hero::after { display: none; }
.page-hero > * { position: relative; z-index: 1; }

/* ---------- Glass surfaces (dark) ---------- */
.glass,
.panel--dark, .panel--light, .panel--accent,
.project__meta, .step, .case-card:not(.case-card--hero), .plan__side, .plan__main,
.clients__tile, .search, .takeaways, .post-next__link, .form-card, .quote-block, .t-card, .stat-card,
.value-card, .team-box, .acc-item, .post__body, .meta-table, .timeline__item, .draft-banner, .toc,
.reel-modal__box, .footer__glass, .contact-details, .map, .results__metric, .mini-steps > *, .cover, .gallery__item, .notfound__panel {
  --fg: var(--text); --line: var(--line-dark);
  color: var(--fg);
  background:
    radial-gradient(520px circle at var(--mx, 50%) var(--my, -30%), var(--g-sheen), transparent 42%),
    linear-gradient(150deg, var(--g-tint) 0%, var(--g-tint-2) 42%, rgba(255, 255, 255, 0.04) 100%);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: inset 0 1px 0 var(--g-edge-hi), inset 0 0 0 1px var(--g-edge), inset 0 -24px 48px -28px rgba(255, 255, 255, 0.06), var(--g-shadow);
}
/* big panels: slightly more tint so long sections stay readable */
.panel--dark, .panel--light, .panel--accent { background:
    radial-gradient(900px circle at var(--mx, 70%) var(--my, -10%), rgba(255, 255, 255, 0.07), transparent 45%),
    linear-gradient(160deg, rgba(20, 20, 22, 0.55) 0%, rgba(10, 10, 12, 0.42) 50%, rgba(18, 6, 8, 0.5) 100%); }
.panel--accent { background:
    radial-gradient(700px circle at 85% 110%, rgba(230, 6, 23, 0.35), transparent 60%),
    radial-gradient(900px circle at var(--mx, 20%) var(--my, -10%), rgba(255, 255, 255, 0.07), transparent 45%),
    linear-gradient(160deg, rgba(40, 4, 8, 0.55), rgba(8, 8, 10, 0.5)); }
/* nested glass doesn't need its own blur (parent already frosts) */
.panel .step, .panel .t-card, .panel .stat-card, .panel .value-card, .panel .plan__side, .panel .plan__main, .panel .acc-item,
.panel .form-card, .panel .results__metric, .panel .quote-block, .panel .mini-steps > *, .panel .contact-details, .team-box .member { -webkit-backdrop-filter: none; backdrop-filter: none; }
.acc-item { border-radius: var(--radius); padding: 0 clamp(16px, 2vw, 28px); margin-bottom: 8px; border: 0 !important; }
.accordion { border-top: 0 !important; }
.acc-item.is-open { box-shadow: inset 0 1px 0 var(--g-edge-hi), inset 0 0 0 1px rgba(230, 6, 23, 0.35), 0 30px 70px -30px rgba(230, 6, 23, 0.45); }
.timeline__item { border-top: 0; border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); margin-bottom: 10px; }
.contact-details { border-top: 0; border-radius: var(--radius); padding: 6px clamp(16px, 2vw, 26px); }
.contact-details > div:last-child { border-bottom: 0; }
.toc { padding: 20px; border-radius: var(--radius); }
.meta-table { border-radius: var(--radius); padding: 4px clamp(14px, 2vw, 24px); }
.post__body { border-radius: var(--radius-sm); }
.cover, .gallery__item, .map { box-shadow: inset 0 1px 0 var(--g-edge-hi), inset 0 0 0 1px var(--g-edge), var(--g-shadow); }

/* text + controls inside (formerly light) panels, now dark glass */
.panel--light .btn--dark, .team-box .btn--dark, .t-card .btn--dark { --b-bg: var(--paper); --b-fg: var(--ink); --b-dot: var(--accent); }
.avatar { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.avatars i { border-color: rgba(0, 0, 0, 0.6); background: linear-gradient(135deg, #3a3a3a, #111); }
.avatars b { background: var(--paper); color: var(--ink); border-color: rgba(0, 0, 0, 0.6); }
.art--m2 span { color: rgba(255, 255, 255, 0.7); }
.form-card input:not([type="checkbox"]), .form-card select, .form-card textarea {
  background: rgba(255, 255, 255, 0.06); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.12); }
.form-card input::placeholder, .form-card textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.form-card select option { background: #111; color: #fff; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(230, 6, 23, 0.18); outline: none; }
.chip span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); }
.chip input:checked + span { background: var(--paper); color: var(--ink); }
.form-card .consent.is-invalid span { color: #ff6b6b; }

/* ---------- Light glass (founder / person / map cards stay bright) ---------- */
.founder__photo, .founder__info, .person-card, .map__card {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74));
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}

/* ---------- Nav + menu ---------- */
.nav { background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
.nav__links { position: relative; }
.mobile-menu { background: rgba(8, 8, 10, 0.55); -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%); }
.mobile-menu nav a { transition: transform 0.5s var(--ease), color 0.3s; }
.mobile-menu nav a:hover { transform: translateX(10px); }

/* ---------- Buttons: glass pills with a light edge; red ones glow ---------- */
.btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px -12px rgba(0, 0, 0, 0.6); will-change: transform; }
.btn--accent { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), var(--g-red-glow); }
.btn--ghost { --b-bg: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.chip-btn { background: rgba(255, 255, 255, 0.05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.chip-btn.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.35); }
.toggle { background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.cat-pill, .tags li { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* ---------- Home hero: glass frame over the live stage ---------- */
.hero--home { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 60px 120px -60px rgba(230, 6, 23, 0.35); }
.webgl-hero .hero--home { background: transparent; }
.webgl-hero .hero--home .hero__bg img { visibility: hidden; }   /* the 3D stage draws the smoke instead */
.hero__services { padding: 18px 22px; margin-left: -22px; border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 0 0 1px rgba(255,255,255,0.1); justify-self: start; }
.hero__services li { display: flex; align-items: center; gap: 10px; }
.hero__services li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px 2px rgba(230, 6, 23, 0.7); flex: none; }
.hero__tag { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5); }
@media (max-width: 1100px) { .hero__services { margin-left: 0; } .hero__services li { justify-content: flex-end; } }

/* ---------- Clients ---------- */
.clients__tile { color: rgba(255, 255, 255, 0.55); transition: color 0.35s, transform 0.6s var(--ease); }
.clients__tile:hover { color: #fff; }

/* ---------- Projects: glass meta bar + depth ---------- */
.project__media { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.project { transform-style: preserve-3d; }
.project__meta { margin-top: 6px; }

/* ---------- Counters glow when they land ---------- */
.counter { display: inline-block; transition: text-shadow 0.6s; }
.counter.is-glow { text-shadow: 0 0 24px rgba(230, 6, 23, 0.85), 0 0 60px rgba(230, 6, 23, 0.45); }

/* ---------- Footer ---------- */
.footer { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6) 30%); }
.footer__word img { filter: drop-shadow(0 30px 60px rgba(230, 6, 23, 0.25)); }

/* ---------- 3D helpers ---------- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.fx-showcase { perspective: 1400px; }
.fx-showcase .project-grid { display: flex; gap: clamp(14px, 1.6vw, 24px); width: max-content; transform-style: preserve-3d; }
.fx-showcase .project { width: min(42vw, 620px); flex: none; }
.fx-stack .steps { perspective: 1400px; }
.fx-flip .t-grid { perspective: 1600px; }

/* ---------- Reduced motion / no JS: keep it still and legible ---------- */
@media (prefers-reduced-motion: reduce) {
  .stage__fallback i { animation: none; }
}