/* ========================================================================== 
   GGIGGL.com — retro-futurism underwater aurora observatory
   Design compliance tokens: Anybody (Google Fonts), Space Grotesk (Google Fonts),
   IBM Plex Sans (Google Fonts), IBM Plex Mono (Google Fonts). JavaScript uses
   Intersection Observer (no external libraries) to toggle a CSS class that
   transitions `font-variation-settings: 'wdth'` from 75 to 125 over 600ms.
   Space Grotesk subtext appears 800ms after the logo completes. Scroll
   indicator: a single bubble drifting downward.
   ========================================================================== */

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

:root {
    /* Palette */
    --abyss: #0a0e1a;
    --twilight-sea: #141b2d;
    --deep-slate: #1c2541;
    --borealis: #3d7a6e;
    --shimmer: #6b4c8a;
    --fizz: #5b99a5;
    --soft-white: #d4dbe8;
    --fog: #7a8ba6;
    --ember: #a67c52;
    --bubble-pop: #8ecae6;

    /* Gradients */
    --aurora-sweep: linear-gradient(135deg, var(--borealis) 0%, var(--shimmer) 50%, var(--fizz) 100%);
    --depth-bg: radial-gradient(ellipse at 30% 20%, var(--deep-slate) 0%, var(--abyss) 70%);
    --bubble-sheen: radial-gradient(circle at 30% 30%, rgba(142, 202, 230, 0.3) 0%, transparent 60%);

    /* Spotlight */
    --mx: 50%;
    --my: 40%;

    /* Type */
    --font-display: "Anybody", "Space Grotesk", system-ui, sans-serif;
    --font-head: "Space Grotesk", "Anybody", system-ui, sans-serif;
    --font-body: "IBM Plex Sans", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--abyss);
    color: var(--soft-white);
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    background: var(--depth-bg);
    background-attachment: fixed;
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

/* ==========================================================================
   Noise grain overlay
   ========================================================================== */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.83, 0 0 0 0 0.86, 0 0 0 0 0.91, 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
}

/* ==========================================================================
   Aurora light system
   ========================================================================== */
.aurora-system {
    position: fixed;
    inset: -20vh -10vw;
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    mix-blend-mode: screen;
}

.aurora {
    position: absolute;
    inset: 0;
    opacity: 0.45;
    will-change: transform, opacity;
}

.aurora-1 {
    background: linear-gradient(115deg, transparent 20%, var(--borealis) 40%, transparent 70%);
    animation: aurora-drift-1 20s ease-in-out infinite alternate;
}

.aurora-2 {
    background: linear-gradient(220deg, transparent 30%, var(--shimmer) 50%, transparent 80%);
    animation: aurora-drift-2 35s ease-in-out infinite alternate;
    opacity: 0.35;
}

.aurora-3 {
    background: linear-gradient(350deg, transparent 25%, var(--fizz) 55%, transparent 85%);
    animation: aurora-drift-3 50s ease-in-out infinite alternate;
    opacity: 0.3;
}

@keyframes aurora-drift-1 {
    0%   { transform: translate3d(-8%, -4%, 0) rotate(-3deg) scale(1.1); opacity: 0.35; }
    100% { transform: translate3d(12%,  6%, 0) rotate(4deg)  scale(1.25); opacity: 0.55; }
}
@keyframes aurora-drift-2 {
    0%   { transform: translate3d(10%, 6%, 0) rotate(6deg) scale(1.15); opacity: 0.25; }
    100% { transform: translate3d(-10%, -5%, 0) rotate(-4deg) scale(1.3); opacity: 0.45; }
}
@keyframes aurora-drift-3 {
    0%   { transform: translate3d(0, 8%, 0) rotate(-2deg) scale(1.1); opacity: 0.2; }
    100% { transform: translate3d(-6%, -10%, 0) rotate(5deg) scale(1.35); opacity: 0.42; }
}

/* ==========================================================================
   Particle field
   ========================================================================== */
.particle-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.particle {
    position: absolute;
    width: var(--size, 3px);
    height: var(--size, 3px);
    border-radius: 50%;
    background: var(--bubble-pop);
    opacity: 0.28;
    left: var(--x, 50%);
    bottom: -40px;
    filter: blur(0.5px);
    animation: particle-rise var(--dur, 28s) linear infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes particle-rise {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    8%   { opacity: 0.35; }
    50%  { transform: translate3d(var(--drift, 30px), -55vh, 0); }
    92%  { opacity: 0.35; }
    100% { transform: translate3d(0, -120vh, 0); opacity: 0; }
}

/* ==========================================================================
   Bubble field (large, decorative)
   ========================================================================== */
.bubble-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.bubble {
    position: absolute;
    left: var(--x, 50%);
    bottom: -260px;
    width: var(--size, 60px);
    height: var(--size, 60px);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(142, 202, 230, 0.18) 0%, rgba(10, 14, 26, 0.05) 70%);
    box-shadow:
        inset 0 0 40px rgba(142, 202, 230, 0.12),
        0 0 18px rgba(91, 153, 165, 0.15);
    filter: drop-shadow(0 0 6px rgba(61, 122, 110, 0.25));
    animation: bubble-rise var(--dur, 22s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}

.bubble::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 180deg, rgba(142, 202, 230, 0.25), rgba(107, 76, 138, 0.2), rgba(61, 122, 110, 0.2), rgba(142, 202, 230, 0.25));
    opacity: 0.35;
    mix-blend-mode: screen;
}

.bubble::after {
    content: "";
    position: absolute;
    top: 18%;
    left: 22%;
    width: 14%;
    height: 14%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(1px);
}

@keyframes bubble-rise {
    0%   { transform: translate3d(0, 0, 0) scale(0.85); opacity: 0; }
    10%  { opacity: 0.85; }
    50%  { transform: translate3d(calc(var(--drift, 30px)), -70vh, 0) scale(1); }
    90%  { opacity: 0.7; }
    100% { transform: translate3d(0, -130vh, 0) scale(1.05); opacity: 0; }
}

/* ==========================================================================
   Cursor spotlight (Act 4)
   ========================================================================== */
.spotlight {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(142, 202, 230, 0.18) 0%, rgba(61, 122, 110, 0.08) 35%, transparent 65%);
    transition: opacity 600ms ease;
    mix-blend-mode: screen;
}

.spotlight.is-active { opacity: 1; }

/* ==========================================================================
   Pill nav
   ========================================================================== */
.pill-nav {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    z-index: 20;
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(20, 27, 45, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: transform 450ms ease, opacity 450ms ease;
    opacity: 0;
    animation: nav-fade-in 1.4s 1.4s ease-out forwards;
}

.pill-nav::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: var(--aurora-sweep);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.85;
}

.pill-nav.is-hidden {
    transform: translateX(-50%) translateY(-140%);
    opacity: 0;
}

@keyframes nav-fade-in {
    to { opacity: 1; }
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 28px;
}

.nav-link {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--fog);
    text-decoration: none;
    transition: color 260ms ease, text-shadow 260ms ease;
    padding: 4px 2px;
}

.nav-link:hover { color: var(--bubble-pop); text-shadow: 0 0 12px rgba(142, 202, 230, 0.5); }
.nav-link.is-active { color: var(--soft-white); text-shadow: 0 0 10px rgba(142, 202, 230, 0.45); }

/* ==========================================================================
   Acts / sections
   ========================================================================== */
.acts { position: relative; z-index: 5; }

.act {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 8vh 6vw;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    overflow: hidden;
}

.act-frame {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.act-frame.split {
    display: grid;
    grid-template-columns: 1fr minmax(0, 1.6fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.act-frame.center-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
}

.act-tag {
    display: inline-block;
    color: var(--fog);
    font-size: 0.72rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    margin-bottom: 18px;
    padding: 4px 10px;
    border: 1px solid rgba(122, 139, 166, 0.3);
    border-radius: 2px;
    background: rgba(20, 27, 45, 0.4);
}

.mono {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--fog);
    letter-spacing: 0.02em;
}

/* Variable Anybody headline */
.variable-head {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--soft-white);
    font-variation-settings: "wdth" 90, "wght" 700;
    letter-spacing: -0.01em;
    line-height: 0.9;
    transition: font-variation-settings 800ms cubic-bezier(0.22, 1, 0.36, 1);
    margin: 0 0 18px;
    font-size: clamp(3rem, 8vw, 6rem);
}

.variable-head.huge { font-size: clamp(4rem, 11vw, 9rem); }

.variable-head[data-morph].is-morphed {
    font-variation-settings: "wdth" 125, "wght" 700;
}

.variable-head:hover {
    font-variation-settings: "wdth" 75, "wght" 800;
    color: var(--bubble-pop);
}

.act-header .act-title { margin-top: 4px; }

.act-lede {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--soft-white);
    max-width: 44ch;
    opacity: 0.85;
    margin: 0;
}

.act-lede.wide { max-width: 62ch; }

.act-header.center {
    text-align: center;
    margin: 0 auto 60px;
    max-width: 720px;
}
.act-header.center .act-lede { margin: 0 auto; }

/* ==========================================================================
   Act 1 — Surface (Hero)
   ========================================================================== */
.act-surface { min-height: 100vh; }

.act-surface .act-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

.micro-label {
    display: flex;
    gap: 24px;
    margin: 0 0 14px;
    opacity: 0;
    animation: fade-up 1s 0.3s ease-out forwards;
}

.hero-logotype {
    font-family: var(--font-display);
    font-variation-settings: "wdth" 125, "wght" 800;
    font-size: clamp(5rem, 18vw, 18rem);
    line-height: 0.85;
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--soft-white);
    text-shadow:
        0 0 40px rgba(61, 122, 110, 0.35),
        0 0 80px rgba(107, 76, 138, 0.25);
    cursor: default;
    transition: font-variation-settings 900ms cubic-bezier(0.22, 1, 0.36, 1), color 500ms ease;
}

.hero-logotype:hover {
    font-variation-settings: "wdth" 75, "wght" 900;
    color: var(--bubble-pop);
}

.hero-logotype .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    animation: letter-fade-in 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(200ms + var(--i) * 150ms);
    background: linear-gradient(180deg, var(--soft-white) 0%, var(--fog) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

@keyframes letter-fade-in {
    0%   { opacity: 0; transform: translateY(22px); filter: blur(8px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

.hero-subtitle {
    font-family: var(--font-head);
    font-weight: 500;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    color: var(--fog);
    letter-spacing: -0.01em;
    max-width: 56ch;
    margin: 8px 0 0;
    opacity: 0;
    animation: fade-up 1s 1.4s ease-out forwards;
}

@keyframes fade-up {
    0%   { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

.scroll-indicator {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    animation: fade-up 1s 2s ease-out forwards;
}

.scroll-bubble {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(142, 202, 230, 0.4) 0%, rgba(10, 14, 26, 0.05) 70%);
    border: 1px solid rgba(142, 202, 230, 0.3);
    box-shadow: 0 0 18px rgba(142, 202, 230, 0.3);
    animation: drift-down 2.8s ease-in-out infinite;
    position: relative;
}

.scroll-bubble::after {
    content: "";
    position: absolute;
    top: 18%;
    left: 22%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
}

@keyframes drift-down {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(14px); opacity: 1; }
}

.scroll-label { letter-spacing: 0.3em; }

/* ==========================================================================
   Act 2 — Descent panels (glassmorphism + animated borders)
   ========================================================================== */
.act-descent { background: linear-gradient(180deg, rgba(10, 14, 26, 0.1) 0%, rgba(20, 27, 45, 0.5) 100%); }

.panel-cluster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
}

.glass-panel {
    position: relative;
    border-radius: 24px;
    padding: 28px;
    background: rgba(28, 37, 65, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: panel-sway 6s ease-in-out infinite alternate;
    animation-delay: calc(var(--delay, 0) * 1.5s);
    overflow: hidden;
}

.glass-panel:nth-child(2n) { animation-direction: alternate-reverse; }

@keyframes panel-sway {
    0%   { transform: rotate(-0.5deg) translateX(-3px); }
    100% { transform: rotate(0.5deg)  translateX(3px); }
}

.panel-border {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--angle), var(--borealis), var(--shimmer), var(--fizz), var(--borealis));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin-angle 8s linear infinite;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(61, 122, 110, 0.3);
}

@keyframes spin-angle {
    to { --angle: 360deg; }
}

.panel-body {
    position: relative;
    z-index: 1;
}

.panel-index {
    display: block;
    margin-bottom: 10px;
    color: var(--fizz);
}

.panel-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--soft-white);
}

.panel-text {
    margin: 0 0 14px;
    color: var(--soft-white);
    opacity: 0.82;
    font-size: 1rem;
    line-height: 1.7;
}

.panel-meta {
    display: block;
    color: var(--fog);
    border-top: 1px solid rgba(122, 139, 166, 0.2);
    padding-top: 10px;
}

/* ==========================================================================
   Act 3 — Discovery bubble cards
   ========================================================================== */
.act-discovery { background: linear-gradient(180deg, rgba(20, 27, 45, 0.4) 0%, rgba(10, 14, 26, 0.1) 100%); }

.discovery-header { text-align: center; margin: 0 auto 80px; max-width: 820px; }
.discovery-header .act-lede { margin: 0 auto; }

.bubble-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 24px;
    align-items: center;
}

.bubble-card {
    position: relative;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background: radial-gradient(circle at 30% 30%, rgba(28, 37, 65, 0.75) 0%, rgba(10, 14, 26, 0.75) 70%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14%;
    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    cursor: default;
    overflow: hidden;
}

.bubble-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--bubble-sheen);
    opacity: 0.9;
    transition: opacity 300ms ease;
}

.bubble-card::after {
    content: "";
    position: absolute;
    top: 14%;
    left: 18%;
    width: 8%;
    height: 8%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(1px);
}

.bubble-card:hover { transform: scale(1.06); }
.bubble-card:hover::before { opacity: 1.8; }

.bubble-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 1px;
    background: conic-gradient(from var(--angle), var(--borealis), var(--shimmer), var(--fizz), var(--borealis));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin-angle 10s linear infinite;
    pointer-events: none;
    box-shadow: 0 0 14px rgba(107, 76, 138, 0.35);
}

.bubble-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.bubble-tag { color: var(--fizz); }

.bubble-title {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.7vw, 1.5rem);
    margin: 0;
    letter-spacing: -0.02em;
    color: var(--soft-white);
}

.bubble-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--soft-white);
    opacity: 0.78;
    max-width: 22ch;
    line-height: 1.55;
}

/* Asymmetric bubble placement */
.bubble-a { grid-column: 1 / span 4; grid-row: 1 / span 2; transform: translateY(30px); }
.bubble-b { grid-column: 5 / span 3; grid-row: 1 / span 2; transform: translateY(-20px); }
.bubble-c { grid-column: 9 / span 4; grid-row: 1 / span 2; transform: translateY(40px); }
.bubble-d { grid-column: 2 / span 3; grid-row: 3 / span 2; transform: translateY(10px); }
.bubble-e { grid-column: 6 / span 4; grid-row: 3 / span 2; transform: translateY(-30px); }
.bubble-f { grid-column: 10 / span 3; grid-row: 3 / span 2; transform: translateY(20px); }

/* ==========================================================================
   Act 4 — Luminescence
   ========================================================================== */
.act-luminescence {
    background: linear-gradient(180deg, rgba(20, 27, 45, 0.3) 0%, rgba(10, 14, 26, 0.55) 100%);
}

.wireframe-stage {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
    margin-top: 24px;
}

.wire-shape {
    width: 100%;
    max-width: 520px;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    stroke: var(--fizz);
    stroke-opacity: 0.45;
    filter: drop-shadow(0 0 12px rgba(61, 122, 110, 0.35));
    animation: slow-rotate 60s linear infinite;
}

@keyframes slow-rotate {
    to { transform: rotate(360deg); }
}

.luminescent-callouts {
    display: grid;
    gap: 22px;
}

.lumen-card {
    position: relative;
    border-radius: 20px;
    padding: 24px 26px;
    background: rgba(28, 37, 65, 0.65);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
}

.lumen-card .panel-border { border-radius: inherit; }

/* ==========================================================================
   Act 5 — Ascent (closing)
   ========================================================================== */
.act-ascent {
    background: linear-gradient(180deg, rgba(10, 14, 26, 0.5) 0%, rgba(20, 27, 45, 0.85) 100%);
}

.act-ascent .bubble-field,
.act-ascent .particle-field { /* keep global but accelerated via class on body */ }

body.is-ascent .bubble { animation-duration: calc(var(--dur, 22s) * 0.5); }
body.is-ascent .particle { animation-duration: calc(var(--dur, 28s) * 0.5); }
body.is-ascent .aurora-1 { filter: blur(60px) saturate(0.7); }
body.is-ascent .aurora-2 { opacity: 0.05; }
body.is-ascent .aurora-3 { opacity: 0.05; }
body.is-ascent .acts { opacity: 0.95; }

.closing {
    font-size: clamp(4.5rem, 15vw, 13rem);
    margin: 0;
    font-variation-settings: "wdth" 150, "wght" 800;
    color: var(--soft-white);
    text-shadow: 0 0 30px rgba(61, 122, 110, 0.5);
}

.closing.pulse { animation: pulse-opacity 4s ease-in-out infinite; }

@keyframes pulse-opacity {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

.closing-line {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--soft-white);
    opacity: 0.7;
    max-width: 50ch;
    margin: 0;
}

.deep-footer {
    margin-top: 80px;
    width: 100%;
    max-width: 880px;
    display: grid;
    gap: 10px;
    padding-top: 28px;
    border-top: 1px solid rgba(122, 139, 166, 0.2);
}

.footer-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-row .mono { color: var(--fog); }

/* ==========================================================================
   Reveal animations (Intersection Observer driven)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--delay, 0) * 80ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
    .act-frame.split { grid-template-columns: 1fr; }
    .wireframe-stage { grid-template-columns: 1fr; }
    .bubble-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(180px, auto);
    }
    .bubble-a { grid-column: 1 / span 2; grid-row: auto; transform: none; }
    .bubble-b { grid-column: 1 / span 1; grid-row: auto; transform: none; }
    .bubble-c { grid-column: 2 / span 1; grid-row: auto; transform: none; }
    .bubble-d { grid-column: 1 / span 1; grid-row: auto; transform: none; }
    .bubble-e { grid-column: 2 / span 1; grid-row: auto; transform: none; }
    .bubble-f { grid-column: 1 / span 2; grid-row: auto; transform: none; }
    .footer-row { flex-direction: column; }
}

@media (max-width: 600px) {
    .act { padding: 10vh 6vw; }
    .pill-nav { padding: 8px 14px; }
    .nav-list { gap: 14px; }
    .nav-link { font-size: 0.68rem; letter-spacing: 0.24em; }
    .bubble-grid { grid-template-columns: 1fr; }
    .bubble-a, .bubble-b, .bubble-c, .bubble-d, .bubble-e, .bubble-f {
        grid-column: 1; grid-row: auto; transform: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .particle-field, .bubble-field { display: none; }
    .aurora { animation: none; opacity: 0.2; }
    .variable-head { transition: none; }
}