/* Abyss Dive Log — Landing Page Styles Colors mirror divelog/Core/DesignSystem/AbyssColor.swift */ :root { --abyss-bg: #05070B; --abyss-bg-sec: #0D1016; --abyss-bg-ter: #161B24; --abyss-bg-elevated: #1E2430; --abyss-border: rgba(255, 255, 255, 0.08); --abyss-border-active: rgba(170, 199, 255, 0.34); --abyss-body: rgba(255, 255, 255, 0.84); --abyss-muted: rgba(255, 255, 255, 0.48); --abyss-dim: rgba(255, 255, 255, 0.20); --abyss-accent-primary: #AAC7FF; --abyss-accent-secondary: #B4F0E0; --abyss-accent-tertiary: #FFB4B4; --abyss-accent-ocean: #4C6F91; --abyss-blue-0: #11233C; --abyss-blue-1: #365A80; --radius-card: 20px; --radius-inner: 14px; --radius-button: 14px; --space-xs: 6px; --space-s: 10px; --space-m: 16px; --space-l: 24px; --space-xl: 32px; --space-xxl: 48px; --space-screen-h: 24px; --font-rounded: ui-rounded, -apple-system, "SF Pro Rounded", "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; background: var(--abyss-bg); } body { position: relative; /* anchors .abyss-column so it scrolls with content */ min-height: 100%; font-family: var(--font-rounded); background: transparent; color: var(--abyss-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; line-height: 1.55; } a { color: var(--abyss-accent-primary); text-decoration: none; transition: opacity 0.2s ease; } a:hover { opacity: 0.8; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* === Background Layers === */ :root { /* Driven by depth-scroll.js (0 = surface, 1 = abyss) — used by the HUD and the bubble field, NOT by the background gradient. The background is a body-anchored gradient that scrolls with content, which keeps the darkening perfectly smooth and monotonic as the user scrolls. */ --depth: 0; } /* Solid fallback that always covers the viewport — prevents any flash of page color during load or over-scroll. */ .abyss-bg { position: fixed; inset: 0; z-index: -4; background: #02040a; pointer-events: none; } /* The "water column" — absolutely positioned inside , so its height equals the full document height and it scrolls with content. Every point on the page therefore has a fixed colour, and scrolling is a pure pass through the column: smooth, monotonic darkening with zero re-brightening artefacts. The top of the column carries a subtle sun-glow that scrolls away with the first viewport. */ .abyss-column { position: absolute; inset: 0; z-index: -3; pointer-events: none; background: /* Sun glow — warm, bright light above the surface. */ radial-gradient(ellipse 160% 55vh at 50% 0, rgba(200, 235, 255, 0.75), transparent 50%), radial-gradient(ellipse 90% 45vh at 35% 3vh, rgba(230, 245, 255, 0.40), transparent 55%), radial-gradient(ellipse 80% 40vh at 65% 5vh, rgba(210, 248, 240, 0.32), transparent 55%), /* Above the surface (~0-14%): bright, airy sky-water feel. The wave sits at ~14%. Below that, the ocean darkens steadily. Bottom holds dark navy so deep silhouettes stay visible. */ linear-gradient(180deg, #68b4d8 0%, #5caace 3%, #509ec4 6%, #4592ba 9%, #3a86b0 12%, #2f7aa6 15%, #266d98 18%, #1d5480 24%, #174267 28%, #133a5c 36%, #0f3050 44%, #0c2844 52%, #0a2038 62%, #081a30 72%, #071628 82%, #061322 90%, #050f1c 100%); } /* Bubble field */ .bubble-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; /* Bubbles only appear below the surface — fade in as you dive, fade out in the deep abyss. Peak visibility in the shallows. */ opacity: clamp(0, calc(var(--depth) * 5 * (1 - var(--depth) * 0.45)), 1); } .bubble { position: absolute; bottom: -20px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); animation-name: bubbleRise; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform, opacity; } @keyframes bubbleRise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-110vh); opacity: 0; } } /* === Wildlife silhouettes === */ /* Each .wildlife spans the FULL viewport width (left:50% + 100vw trick) and sits behind in-section content via z-index: -1 inside an isolation parent. Two nested layers drive the motion independently so they can't conflict: .wildlife-body — animates translateX across the viewport (the "swim") .wildlife-body img — animates a tier-specific wiggle/flap (the "body") The scaleX(--dir) mirror happens inside the wiggle keyframe, so fish coming from the right correctly face the direction they're travelling. Per-instance inline vars: --pos-y, --swim-delay, --swim-duration. */ .wildlife { position: absolute; left: 50%; top: 0; bottom: 0; width: 100vw; margin-left: -50vw; pointer-events: none; overflow: hidden; z-index: -1; } .wildlife-body { position: absolute; left: 0; top: var(--pos-y, 40%); opacity: 0; will-change: transform, opacity; } .wildlife-body img { display: block; /* SVGs use fill="currentColor" which defaults to black when loaded via . brightness(0) → pure black, invert(1) → pure white, drop-shadow → glow. */ filter: brightness(0) invert(1) drop-shadow(0 0 28px rgba(170, 220, 255, 0.35)); transform-origin: 50% 50%; will-change: transform; } /* Deep-section silhouettes — in the darkest part of the page, creatures are pure dark shadows instead of bright white glows. They stay visible against the near-black water via a soft tonal lift (not full black) plus a subtle cool rim-light, mimicking how you actually see life in the deep. */ .feature-rows > article:last-of-type .wildlife, .mini-features .wildlife, .cta-strip-wrap .wildlife { --swim-opacity: 0.82; } .feature-rows > article:last-of-type .wildlife-body img, .mini-features .wildlife-body img, .cta-strip-wrap .wildlife-body img { filter: brightness(0) invert(0.26) drop-shadow(0 0 10px rgba(90, 130, 170, 0.22)); } .wildlife.is-swimming .wildlife-body { animation: swimStraight var(--swim-duration, 24s) linear var(--swim-delay, 0s) infinite; } /* Path variants — assign via an extra modifier class (.wildlife--path-dip, --path-rise, --path-dive, --path-wave) so each animal gets a different trajectory instead of all sliding in a perfectly straight line. */ .wildlife--path-dip.is-swimming .wildlife-body { animation-name: swimDip; } .wildlife--path-rise.is-swimming .wildlife-body { animation-name: swimRise; } .wildlife--path-dive.is-swimming .wildlife-body { animation-name: swimDive; } .wildlife--path-wave.is-swimming .wildlife-body { animation-name: swimWave; } @keyframes swimStraight { 0% { transform: translate(var(--from), 0); opacity: 0; } 10% { opacity: var(--swim-opacity, 0.36); } 90% { opacity: var(--swim-opacity, 0.36); } 100% { transform: translate(var(--to), 0); opacity: 0; } } /* Dips down through the middle, straightens out at the end */ @keyframes swimDip { 0% { transform: translate(var(--from), -10px); opacity: 0; } 10% { opacity: var(--swim-opacity, 0.36); } 50% { transform: translate(calc(var(--from) / 2 + var(--to) / 2), 55px); } 90% { opacity: var(--swim-opacity, 0.36); } 100% { transform: translate(var(--to), 10px); opacity: 0; } } /* Starts low, rises toward the end */ @keyframes swimRise { 0% { transform: translate(var(--from), 40px); opacity: 0; } 10% { opacity: var(--swim-opacity, 0.36); } 50% { transform: translate(calc(var(--from) / 2 + var(--to) / 2), 10px); } 90% { opacity: var(--swim-opacity, 0.36); } 100% { transform: translate(var(--to), -45px); opacity: 0; } } /* Starts high, dives toward the end */ @keyframes swimDive { 0% { transform: translate(var(--from), -40px); opacity: 0; } 10% { opacity: var(--swim-opacity, 0.36); } 50% { transform: translate(calc(var(--from) / 2 + var(--to) / 2), -5px); } 90% { opacity: var(--swim-opacity, 0.36); } 100% { transform: translate(var(--to), 50px); opacity: 0; } } /* Gentle S-curve wave across the viewport */ @keyframes swimWave { 0% { transform: translate(var(--from), 0); opacity: 0; } 10% { opacity: var(--swim-opacity, 0.36); } 25% { transform: translate(calc(var(--from) * 0.75 + var(--to) * 0.25), -25px); } 50% { transform: translate(calc(var(--from) / 2 + var(--to) / 2), 25px); } 75% { transform: translate(calc(var(--from) * 0.25 + var(--to) * 0.75), -20px); } 90% { opacity: var(--swim-opacity, 0.36); } 100% { transform: translate(var(--to), 0); opacity: 0; } } /* --- Per-animal body choreographies --- Each creature has a long, hand-choreographed keyframe sequence that runs over the entire swim-duration (matching the swim path). Bursts, glides, tail flicks and rest moments are baked into the timeline so the motion feels dynamic and never mechanically-periodic: the fish doesn't wiggle at a constant frequency, it swims like a real fish would. Three distinct fish choreographies (A = normal, B = calm, C = darting) plus different swim-durations per instance mean no two fish look synchronised. Animations loop infinitely and start on page load (wildlife.js just adds .is-swimming once), so creatures keep swimming even while off-screen — scrolling away and back shows them further along their path, never reset to the entry pose. Every choreography starts and ends at the same neutral rest pose so loops wrap without a visible jump. scaleX(var(--dir, 1)) sits in every keyframe so reverse fish stay flipped. */ /* --- Fish: default choreography (burst → glide → wiggle → rest pattern) --- */ .wildlife--fish.is-swimming .wildlife-body img { animation: fishChoreoA var(--swim-duration, 24s) ease-in-out var(--swim-delay, 0s) infinite; transform-origin: 18% 50%; /* tail-side pivot so rotation reads as tail flex */ } .wildlife--fish.wildlife--calm.is-swimming .wildlife-body img { animation-name: fishChoreoB; } .wildlife--fish.wildlife--dart.is-swimming .wildlife-body img { animation-name: fishChoreoC; } @keyframes fishChoreoA { 0% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Opening burst — tail flicks to get moving */ 2% { transform: scaleX(var(--dir, 1)) rotate(-8deg); } 4% { transform: scaleX(var(--dir, 1)) rotate(7deg); } 6% { transform: scaleX(var(--dir, 1)) rotate(-5deg); } 8% { transform: scaleX(var(--dir, 1)) rotate(3deg); } 10% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } /* Glide */ 14% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Soft wiggle */ 17% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 19% { transform: scaleX(var(--dir, 1)) rotate(3deg); } 21% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 23% { transform: scaleX(var(--dir, 1)) rotate(1deg); } /* Long glide */ 28% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Mid-swim burst */ 33% { transform: scaleX(var(--dir, 1)) rotate(-7deg); } 35% { transform: scaleX(var(--dir, 1)) rotate(6deg); } 37% { transform: scaleX(var(--dir, 1)) rotate(-5deg); } 39% { transform: scaleX(var(--dir, 1)) rotate(3deg); } 41% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } /* Glide */ 45% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Gentle wiggle */ 52% { transform: scaleX(var(--dir, 1)) rotate(-4deg); } 54% { transform: scaleX(var(--dir, 1)) rotate(4deg); } 56% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 58% { transform: scaleX(var(--dir, 1)) rotate(2deg); } /* Long glide */ 62% { transform: scaleX(var(--dir, 1)) rotate(0deg); } 70% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Big power burst */ 72% { transform: scaleX(var(--dir, 1)) rotate(-9deg); } 74% { transform: scaleX(var(--dir, 1)) rotate(8deg); } 76% { transform: scaleX(var(--dir, 1)) rotate(-6deg); } 78% { transform: scaleX(var(--dir, 1)) rotate(4deg); } 80% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } /* Long glide to exit */ 85% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Final soft flick */ 92% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 94% { transform: scaleX(var(--dir, 1)) rotate(2deg); } 96% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } 100% { transform: scaleX(var(--dir, 1)) rotate(0deg); } } @keyframes fishChoreoB { /* Calm fish — mostly glides, rare soft wiggles */ 0% { transform: scaleX(var(--dir, 1)) rotate(0deg); } 8% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 11% { transform: scaleX(var(--dir, 1)) rotate(2deg); } 14% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } 17% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Long glide */ 30% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Small burst */ 33% { transform: scaleX(var(--dir, 1)) rotate(-5deg); } 35% { transform: scaleX(var(--dir, 1)) rotate(4deg); } 38% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 41% { transform: scaleX(var(--dir, 1)) rotate(1deg); } 44% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Extended glide */ 58% { transform: scaleX(var(--dir, 1)) rotate(0deg); } 61% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 63% { transform: scaleX(var(--dir, 1)) rotate(3deg); } 65% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 68% { transform: scaleX(var(--dir, 1)) rotate(1deg); } 71% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Long glide */ 83% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Final burst before exit */ 86% { transform: scaleX(var(--dir, 1)) rotate(-6deg); } 88% { transform: scaleX(var(--dir, 1)) rotate(5deg); } 90% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 93% { transform: scaleX(var(--dir, 1)) rotate(1deg); } 96% { transform: scaleX(var(--dir, 1)) rotate(0deg); } 100% { transform: scaleX(var(--dir, 1)) rotate(0deg); } } @keyframes fishChoreoC { /* Darting fish — several rapid bursts separated by glides */ 0% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Immediate dart */ 1.5% { transform: scaleX(var(--dir, 1)) rotate(-11deg); } 3% { transform: scaleX(var(--dir, 1)) rotate(10deg); } 4.5% { transform: scaleX(var(--dir, 1)) rotate(-7deg); } 6% { transform: scaleX(var(--dir, 1)) rotate(5deg); } 7.5% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 9% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Glide */ 20% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Second dart */ 22% { transform: scaleX(var(--dir, 1)) rotate(-10deg); } 24% { transform: scaleX(var(--dir, 1)) rotate(9deg); } 26% { transform: scaleX(var(--dir, 1)) rotate(-6deg); } 28% { transform: scaleX(var(--dir, 1)) rotate(4deg); } 30% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } 32% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Glide */ 43% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Biggest dart */ 45% { transform: scaleX(var(--dir, 1)) rotate(-12deg); } 47% { transform: scaleX(var(--dir, 1)) rotate(10deg); } 49% { transform: scaleX(var(--dir, 1)) rotate(-7deg); } 51% { transform: scaleX(var(--dir, 1)) rotate(5deg); } 53% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 55% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Glide */ 65% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Fourth dart */ 67% { transform: scaleX(var(--dir, 1)) rotate(-9deg); } 69% { transform: scaleX(var(--dir, 1)) rotate(8deg); } 71% { transform: scaleX(var(--dir, 1)) rotate(-5deg); } 73% { transform: scaleX(var(--dir, 1)) rotate(3deg); } 75% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } 77% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Long glide */ 88% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Soft wind-down */ 90% { transform: scaleX(var(--dir, 1)) rotate(-6deg); } 92% { transform: scaleX(var(--dir, 1)) rotate(5deg); } 94% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 96% { transform: scaleX(var(--dir, 1)) rotate(1deg); } 100% { transform: scaleX(var(--dir, 1)) rotate(0deg); } } /* --- Turtle: slow bob with 2 stronger flipper pushes --- */ .wildlife--turtle.is-swimming .wildlife-body img { animation: turtleChoreo var(--swim-duration, 38s) ease-in-out var(--swim-delay, 0s) infinite; } @keyframes turtleChoreo { 0% { transform: scaleX(var(--dir, 1)) translateY(0) rotate(0deg); } 6% { transform: scaleX(var(--dir, 1)) translateY(-2px) rotate(-1.2deg); } 14% { transform: scaleX(var(--dir, 1)) translateY(2px) rotate(1.2deg); } 22% { transform: scaleX(var(--dir, 1)) translateY(-2px) rotate(-1.2deg); } 28% { transform: scaleX(var(--dir, 1)) translateY(0) rotate(0deg); } /* Stronger flipper push */ 34% { transform: scaleX(var(--dir, 1)) translateY(3px) rotate(1.8deg); } 40% { transform: scaleX(var(--dir, 1)) translateY(-3px) rotate(-1.8deg); } 46% { transform: scaleX(var(--dir, 1)) translateY(2px) rotate(1.2deg); } 54% { transform: scaleX(var(--dir, 1)) translateY(-2px) rotate(-1.2deg); } 62% { transform: scaleX(var(--dir, 1)) translateY(2px) rotate(1.2deg); } 70% { transform: scaleX(var(--dir, 1)) translateY(0) rotate(0deg); } /* Second stronger push */ 76% { transform: scaleX(var(--dir, 1)) translateY(-3px) rotate(-1.8deg); } 82% { transform: scaleX(var(--dir, 1)) translateY(3px) rotate(1.8deg); } 90% { transform: scaleX(var(--dir, 1)) translateY(-1px) rotate(-0.8deg); } 100% { transform: scaleX(var(--dir, 1)) translateY(0) rotate(0deg); } } /* --- Manta: wing-flap sequence with glide pauses --- */ .wildlife--manta.is-swimming .wildlife-body img { animation: mantaChoreo var(--swim-duration, 40s) ease-in-out var(--swim-delay, 0s) infinite; } @keyframes mantaChoreo { 0% { transform: scaleX(var(--dir, 1)) scaleY(1) rotate(0deg); } 4% { transform: scaleX(var(--dir, 1)) scaleY(0.94) rotate(-0.8deg); } 8% { transform: scaleX(var(--dir, 1)) scaleY(1.04) rotate(0.8deg); } 12% { transform: scaleX(var(--dir, 1)) scaleY(0.92) rotate(-1deg); } 16% { transform: scaleX(var(--dir, 1)) scaleY(1.04) rotate(1deg); } /* Glide */ 22% { transform: scaleX(var(--dir, 1)) scaleY(0.98) rotate(0deg); } 32% { transform: scaleX(var(--dir, 1)) scaleY(0.98) rotate(0deg); } /* Strong power-flap sequence */ 36% { transform: scaleX(var(--dir, 1)) scaleY(0.90) rotate(-1.5deg); } 40% { transform: scaleX(var(--dir, 1)) scaleY(1.06) rotate(1.5deg); } 44% { transform: scaleX(var(--dir, 1)) scaleY(0.90) rotate(-1.5deg); } 48% { transform: scaleX(var(--dir, 1)) scaleY(1.05) rotate(1.2deg); } /* Glide */ 54% { transform: scaleX(var(--dir, 1)) scaleY(0.98) rotate(0deg); } 65% { transform: scaleX(var(--dir, 1)) scaleY(0.98) rotate(0deg); } /* Gentle flap to exit */ 68% { transform: scaleX(var(--dir, 1)) scaleY(0.93) rotate(-1deg); } 72% { transform: scaleX(var(--dir, 1)) scaleY(1.04) rotate(1deg); } 76% { transform: scaleX(var(--dir, 1)) scaleY(0.93) rotate(-1deg); } 80% { transform: scaleX(var(--dir, 1)) scaleY(1.03) rotate(0.8deg); } 88% { transform: scaleX(var(--dir, 1)) scaleY(0.98) rotate(0deg); } 100% { transform: scaleX(var(--dir, 1)) scaleY(1) rotate(0deg); } } /* --- Shark: slow sweeps with 2 powerful tail thrusts --- */ .wildlife--shark.is-swimming .wildlife-body img { animation: sharkChoreo var(--swim-duration, 30s) ease-in-out var(--swim-delay, 0s) infinite; transform-origin: 65% 50%; } @keyframes sharkChoreo { 0% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Cruising sweep */ 4% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 8% { transform: scaleX(var(--dir, 1)) rotate(2deg); } 12% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 16% { transform: scaleX(var(--dir, 1)) rotate(1deg); } 20% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* First power thrust */ 26% { transform: scaleX(var(--dir, 1)) rotate(-5deg); } 30% { transform: scaleX(var(--dir, 1)) rotate(4deg); } 34% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 38% { transform: scaleX(var(--dir, 1)) rotate(2deg); } 42% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } /* Glide */ 46% { transform: scaleX(var(--dir, 1)) rotate(0deg); } 55% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Gentle cruise */ 58% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 61% { transform: scaleX(var(--dir, 1)) rotate(2deg); } 64% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 67% { transform: scaleX(var(--dir, 1)) rotate(1deg); } 72% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Second, stronger thrust */ 77% { transform: scaleX(var(--dir, 1)) rotate(-6deg); } 81% { transform: scaleX(var(--dir, 1)) rotate(5deg); } 85% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 89% { transform: scaleX(var(--dir, 1)) rotate(2deg); } 93% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } 100% { transform: scaleX(var(--dir, 1)) rotate(0deg); } } /* --- Whale shark: very slow undulation, tiny variation --- */ .wildlife--whale-shark.is-swimming .wildlife-body img { animation: whaleSharkChoreo var(--swim-duration, 48s) ease-in-out var(--swim-delay, 0s) infinite; transform-origin: 60% 50%; } @keyframes whaleSharkChoreo { 0% { transform: scaleX(var(--dir, 1)) translateY(0) rotate(0deg); } 10% { transform: scaleX(var(--dir, 1)) translateY(-2px) rotate(-1deg); } 22% { transform: scaleX(var(--dir, 1)) translateY(2px) rotate(1deg); } 34% { transform: scaleX(var(--dir, 1)) translateY(-2px) rotate(-1deg); } /* Slightly stronger flex */ 42% { transform: scaleX(var(--dir, 1)) translateY(-3px) rotate(-1.3deg); } 50% { transform: scaleX(var(--dir, 1)) translateY(3px) rotate(1.3deg); } 62% { transform: scaleX(var(--dir, 1)) translateY(-2px) rotate(-1deg); } 74% { transform: scaleX(var(--dir, 1)) translateY(2px) rotate(1deg); } 86% { transform: scaleX(var(--dir, 1)) translateY(-1px) rotate(-0.5deg); } 100% { transform: scaleX(var(--dir, 1)) translateY(0) rotate(0deg); } } /* --- Fish (small, fast, scattered throughout) --- */ .wildlife--fish { --from: -20vw; --to: 115vw; --swim-duration: 24s; --swim-opacity: 0.42; --dir: 1; /* SVG faces right; right-swimming uses no flip */ } .wildlife--fish img { width: clamp(36px, 4vw, 58px); height: auto; } /* Fish swimming right-to-left: reverse travel + flip orientation */ .wildlife--reverse { --from: 115vw; --to: -20vw; --dir: -1; } /* --- Sea turtle (right → left, slow) --- */ .wildlife--turtle { --from: 115vw; --to: -30vw; --swim-duration: 38s; --swim-opacity: 0.34; --dir: 1; /* SVG already faces left */ } .wildlife--turtle img { width: clamp(120px, 14vw, 200px); } /* --- Manta ray (left → right, broad glide) --- */ .wildlife--manta { --from: -30vw; --to: 115vw; --swim-duration: 40s; --swim-opacity: 0.30; --dir: 1; /* SVG faces right */ } .wildlife--manta img { width: clamp(200px, 26vw, 320px); } /* --- Shark (right → left) --- */ .wildlife--shark { --from: 115vw; --to: -30vw; --swim-duration: 30s; --swim-opacity: 0.40; --dir: 1; /* SVG already faces left */ } .wildlife--shark img { width: clamp(220px, 28vw, 340px); } /* --- Whale shark (left → right, massive slow drift) --- */ .wildlife--whale-shark { --from: -35vw; --to: 120vw; --swim-duration: 48s; --swim-opacity: 0.28; --dir: 1; /* SVG faces right */ } .wildlife--whale-shark img { width: clamp(280px, 40vw, 500px); } /* --- Dolphin (left → right, swims underwater with natural undulation) --- */ .wildlife--dolphin { --from: -25vw; --to: 120vw; --swim-duration: 28s; --swim-opacity: 0.40; --dir: 1; /* SVG faces right */ } .wildlife--dolphin img { width: clamp(90px, 12vw, 160px); } .wildlife--dolphin.is-swimming .wildlife-body { animation: swimWave var(--swim-duration, 28s) linear var(--swim-delay, 0s) infinite; } /* Dolphin body choreography — realistic vertical undulation. Dolphins swim with powerful fluke strokes separated by efficient glide phases. Each burst starts strong and decays, then the body stretches flat for the glide. Three distinct rhythm sections (burst → glide → burst → glide → burst → glide) prevent the mechanical feel of uniform oscillation. */ @keyframes dolphinChoreo { /* === Phase 1: Opening power burst (0–15%) === */ 0% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* Fluke downstroke — nose tilts up */ 2% { transform: scaleX(var(--dir, 1)) rotate(-6deg); } /* Fluke upstroke — nose dips */ 4.5% { transform: scaleX(var(--dir, 1)) rotate(5deg); } /* Second stroke, slightly smaller */ 7% { transform: scaleX(var(--dir, 1)) rotate(-5deg); } 9.5% { transform: scaleX(var(--dir, 1)) rotate(4deg); } /* Decay — body settling */ 12% { transform: scaleX(var(--dir, 1)) rotate(-2deg); } 14% { transform: scaleX(var(--dir, 1)) rotate(1deg); } /* === Phase 2: Long efficient glide (15–30%) === */ 15% { transform: scaleX(var(--dir, 1)) rotate(0deg); } 30% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* === Phase 3: Gentle correction strokes (30–42%) === */ /* Soft maintenance strokes — just enough to hold speed */ 32% { transform: scaleX(var(--dir, 1)) rotate(-4deg); } 35% { transform: scaleX(var(--dir, 1)) rotate(3deg); } 38% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 40% { transform: scaleX(var(--dir, 1)) rotate(2deg); } 42% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* === Phase 4: Medium glide (42–55%) === */ 55% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* === Phase 5: Power burst — strongest (55–70%) === */ /* Big downstroke */ 57% { transform: scaleX(var(--dir, 1)) rotate(-8deg); } /* Fast upstroke */ 59.5% { transform: scaleX(var(--dir, 1)) rotate(7deg); } /* Follow-up strokes with natural decay */ 62% { transform: scaleX(var(--dir, 1)) rotate(-6deg); } 64.5% { transform: scaleX(var(--dir, 1)) rotate(5deg); } 67% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 69% { transform: scaleX(var(--dir, 1)) rotate(1deg); } 70% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* === Phase 6: Long glide to exit (70–88%) === */ 88% { transform: scaleX(var(--dir, 1)) rotate(0deg); } /* === Phase 7: Final gentle flick before fade (88–100%) === */ 90% { transform: scaleX(var(--dir, 1)) rotate(-3deg); } 93% { transform: scaleX(var(--dir, 1)) rotate(2deg); } 96% { transform: scaleX(var(--dir, 1)) rotate(-1deg); } 100% { transform: scaleX(var(--dir, 1)) rotate(0deg); } } .wildlife--dolphin.is-swimming .wildlife-body img { animation: dolphinChoreo var(--swim-duration, 28s) ease-in-out var(--swim-delay, 0s) infinite; transform-origin: 25% 50%; /* pivot near tail — flukes drive the rotation */ } /* Parents that host wildlife need a positioning + stacking context. `isolation: isolate` keeps z-index: -1 children behind in-section content but not behind the page background. */ .hero, .feature-row, .feature-rows, .mini-features, .carousel-wrap, .cta-strip-wrap { position: relative; isolation: isolate; } /* === Layout === */ .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-screen-h); } .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--space-screen-h); } /* === Nav === */ .nav { padding: var(--space-l) 0; position: relative; z-index: 10; } .nav-inner { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: 3px; color: #ffffff; -webkit-text-fill-color: #ffffff; filter: drop-shadow(0 1px 6px rgba(0, 30, 60, 0.4)); } .brand-dot { width: 8px; height: 8px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 12px rgba(170, 199, 255, 0.8); } .nav-links { display: flex; gap: var(--space-l); font-size: 13px; color: rgba(255, 255, 255, 0.85); } .nav-links a { color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 4px rgba(0, 30, 60, 0.3); } .nav-links a:hover { color: var(--abyss-body); opacity: 1; } /* === Hero === */ .hero { padding: var(--space-xxl) 0 var(--space-l); text-align: center; position: relative; } .eyebrow { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: #ffffff; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(0, 40, 80, 0.25); margin-bottom: var(--space-l); opacity: 0; animation: fadeUp 0.7s ease-out 0.1s forwards; } .wordmark { font-size: clamp(60px, 14vw, 144px); font-weight: 900; letter-spacing: clamp(6px, 1.2vw, 14px); line-height: 1; background: linear-gradient(90deg, #ffffff, #e0eeff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 12px rgba(0, 40, 80, 0.4)); margin-bottom: var(--space-l); opacity: 0; transform: scale(0.9); animation: fadeScale 1s cubic-bezier(0.2, 0.9, 0.3, 1) 0.25s forwards; } .tagline { font-size: clamp(20px, 2.8vw, 26px); font-weight: 600; color: #ffffff; text-shadow: 0 1px 8px rgba(0, 30, 60, 0.5); max-width: 620px; margin: 0 auto; opacity: 0; animation: fadeUp 0.7s ease-out 0.55s forwards; } /* Scroll hint below the hero tagline — "dive in" prompt */ .dive-hint { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--space-xl); padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); background: rgba(0, 40, 80, 0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; animation: fadeUp 0.7s ease-out 0.85s forwards; } .dive-hint-arrow { display: inline-block; color: var(--abyss-accent-primary); animation: diveBounce 2.2s ease-in-out infinite; } @keyframes diveBounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } } /* === Depth meter (fixed side HUD) === */ .depth-meter { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 16px; min-width: 74px; border: 1px solid var(--abyss-border-active); border-radius: 16px; background: rgba(5, 7, 11, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(170, 199, 255, 0.06); font-family: var(--font-rounded); color: var(--abyss-accent-primary); opacity: 0; animation: fadeUp 0.8s ease-out 1.1s forwards; pointer-events: none; } .depth-meter-value { font-size: 22px; font-weight: 800; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; line-height: 1; color: #ffffff; text-shadow: 0 0 18px rgba(170, 199, 255, 0.55); } .depth-meter-value small { font-size: 11px; font-weight: 700; margin-left: 2px; color: var(--abyss-accent-primary); text-shadow: none; } .depth-meter-label { font-size: 9px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--abyss-muted); } .depth-meter-bar { position: relative; width: 4px; height: 80px; background: rgba(170, 199, 255, 0.12); border-radius: 4px; overflow: hidden; } .depth-meter-fill { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--depth) * 100%); background: linear-gradient(180deg, var(--abyss-accent-primary), var(--abyss-accent-secondary)); box-shadow: 0 0 12px rgba(170, 199, 255, 0.55); } @media (max-width: 720px) { .depth-meter { right: 10px; min-width: 60px; padding: 10px 8px 12px; } .depth-meter-value { font-size: 18px; } .depth-meter-bar { height: 60px; } } @media (max-width: 480px) { .depth-meter { display: none; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeScale { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } /* === Waitlist Form === */ .waitlist { max-width: 480px; margin: 0 auto; opacity: 0; animation: fadeUp 0.7s ease-out 1.1s forwards; } .waitlist-form { display: flex; gap: 10px; background: var(--abyss-bg-ter); border: 1px solid var(--abyss-border); border-radius: var(--radius-button); padding: 6px; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .waitlist-form:focus-within { border-color: var(--abyss-border-active); box-shadow: 0 0 0 4px rgba(170, 199, 255, 0.08); } .waitlist-form input { flex: 1; background: transparent; border: none; outline: none; color: white; font-family: inherit; font-size: 15px; padding: 0 14px; min-width: 0; } .waitlist-form input::placeholder { color: var(--abyss-muted); } .waitlist-form button { background: var(--abyss-accent-primary); color: var(--abyss-bg); font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 10px; transition: transform 0.15s ease, background 0.2s ease; white-space: nowrap; } .waitlist-form button:hover { background: #c4d6ff; transform: translateY(-1px); } .waitlist-form button:active { transform: translateY(0); } .waitlist-form button:disabled { opacity: 0.6; cursor: wait; transform: none; } .waitlist-note { font-size: 12px; color: var(--abyss-muted); margin-top: var(--space-m); text-align: center; } .waitlist-status { margin-top: var(--space-m); font-size: 14px; text-align: center; min-height: 20px; } .waitlist-status.success { color: var(--abyss-accent-secondary); } .waitlist-status.error { color: var(--abyss-accent-tertiary); } /* === Hero Carousel (3D Coverflow) === */ .surface-wave { position: relative; z-index: 2; margin-top: -2px; line-height: 0; overflow: hidden; /* Fade bottom edge + left/right edges for seamless blending */ -webkit-mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%), linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, black 0%, black 35%, transparent 100%), linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); mask-composite: intersect; } .surface-wave svg { display: block; /* Slightly wider than viewport to avoid hard cuts at edges */ width: 110%; margin-left: -5%; height: clamp(100px, 14vw, 180px); } .surface-wave-back { fill: rgba(35, 90, 140, 0.30); animation: waveDriftBack 7s ease-in-out infinite alternate; } .surface-wave-mid { fill: rgba(25, 75, 120, 0.40); animation: waveDriftMid 5s ease-in-out 0.5s infinite alternate-reverse; } .surface-wave-front { fill: rgba(18, 60, 100, 0.55); animation: waveDriftFront 6s ease-in-out 1s infinite alternate; } @keyframes waveDriftBack { 0% { transform: translateX(-18px) scaleY(0.92); } 100% { transform: translateX(18px) scaleY(1.08); } } @keyframes waveDriftMid { 0% { transform: translateX(12px) scaleY(1.05); } 100% { transform: translateX(-14px) scaleY(0.95); } } @keyframes waveDriftFront { 0% { transform: translateX(-10px) scaleY(0.96); } 100% { transform: translateX(14px) scaleY(1.04); } } @media (prefers-reduced-motion: reduce) { .surface-wave-back, .surface-wave-mid, .surface-wave-front { animation: none; } } .carousel-wrap { padding: var(--space-xl) 0 var(--space-xxl); position: relative; } .carousel-stage { position: relative; height: clamp(480px, 68vw, 660px); perspective: 1600px; transform-style: preserve-3d; touch-action: pan-y pinch-zoom; /* Ensure pointer events fire over the whole stage area, even between phones */ } .carousel-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 820px; height: 420px; max-width: 95vw; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(170, 199, 255, 0.28), transparent 60%); filter: blur(70px); pointer-events: none; z-index: 0; } .carousel-stage .phone { --pos: 0; --abs: 0; --gap: clamp(120px, 16vw, 200px); --depth: clamp(80px, 12vw, 160px); --tilt: 22deg; position: absolute; left: 50%; top: 50%; width: clamp(200px, 24vw, 260px); margin: 0; transform-origin: center center; transform: translate(-50%, -50%) translateX(calc(var(--pos) * var(--gap))) translateZ(calc(var(--abs) * var(--depth) * -1)) rotateY(calc(var(--pos) * var(--tilt) * -1)) scale(calc(1 - var(--abs) * 0.04)); /* No transitions on transform/opacity/filter — JS RAF drives all of them */ opacity: clamp(0, calc(1.05 - var(--abs) * 0.35), 1); filter: brightness(calc(1 - var(--abs) * 0.08)) saturate(calc(1 - var(--abs) * 0.06)); z-index: calc(50 - var(--abs) * 10); cursor: pointer; outline: none; will-change: transform, opacity, filter; } .carousel-stage .phone.is-active { filter: brightness(1) saturate(1) drop-shadow(0 0 60px rgba(170, 199, 255, 0.35)); z-index: 100; } .carousel-stage .phone:focus-visible { outline: 2px solid var(--abyss-accent-primary); outline-offset: 6px; } /* === Phone mockup (screenshots have built-in device frame) === */ .phone { width: 100%; max-width: 240px; aspect-ratio: 1022 / 2082; position: relative; } .phone-screen { width: 100%; height: 100%; position: relative; } .phone-screen img, .phone-screen svg { width: 100%; height: 100%; display: block; object-fit: contain; } /* === Feature Rows (alternating) === */ .feature-rows { padding: var(--space-xxl) 0; } .feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 6vw, 80px); padding: var(--space-xxl) 0; } .feature-row .feature-row-media { display: flex; justify-content: center; position: relative; z-index: 1; } .feature-row .feature-row-media::before { content: ""; position: absolute; inset: 10% -10% 10% -10%; background: radial-gradient(ellipse at center, rgba(170, 199, 255, 0.16), transparent 65%); filter: blur(50px); z-index: -1; } .feature-row .phone { max-width: 260px; } .feature-row.reversed .feature-row-media { order: 2; } .feature-row.reversed .feature-row-text { order: 1; } .feature-row-text { max-width: 460px; position: relative; z-index: 1; } .feature-row-text .section-eyebrow { margin-bottom: var(--space-s); } .feature-row-title { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; color: white; margin-bottom: var(--space-m); } .feature-row-body { font-size: 16px; line-height: 1.65; color: var(--abyss-body); margin-bottom: var(--space-l); } .feature-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-s); } .feature-bullets li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; color: var(--abyss-body); } .feature-bullets li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--abyss-accent-primary); box-shadow: 0 0 12px rgba(170, 199, 255, 0.55); } /* === Mini features (compact 4-card strip) === */ .mini-features { padding: var(--space-xxl) 0; } .mini-features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-m); } .mini-card { background: var(--abyss-bg-ter); border: 1px solid var(--abyss-border); border-radius: var(--radius-card); padding: var(--space-l); transition: border-color 0.25s ease, transform 0.25s ease; } .mini-card:hover { border-color: var(--abyss-border-active); transform: translateY(-2px); } .mini-card .mini-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(170, 199, 255, 0.12); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: var(--space-s); } .mini-card h3 { font-size: 14px; font-weight: 700; color: white; margin-bottom: 4px; } .mini-card p { font-size: 13px; line-height: 1.55; color: var(--abyss-muted); } /* === CTA strip === */ .cta-strip-wrap { padding: var(--space-xxl) 0; } .cta-strip { max-width: 580px; margin: 0 auto; text-align: center; padding: var(--space-xl) var(--space-l); background: var(--abyss-bg-ter); border: 1px solid var(--abyss-border-active); border-radius: var(--radius-card); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(170, 199, 255, 0.04); } .cta-strip-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--abyss-accent-primary); margin-bottom: var(--space-s); } .cta-strip h2 { font-size: clamp(22px, 3.2vw, 30px); font-weight: 800; color: white; letter-spacing: -0.3px; margin-bottom: var(--space-s); } .cta-strip p { font-size: 14px; color: var(--abyss-body); margin-bottom: var(--space-l); } .cta-button { display: inline-flex; align-items: center; gap: 8px; background: var(--abyss-accent-primary); color: var(--abyss-bg); font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: var(--radius-button); transition: transform 0.15s ease, background 0.2s ease; } .cta-button:hover { background: #c4d6ff; transform: translateY(-1px); opacity: 1; } /* === Reveal on scroll === */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* === Dive verse (poetic microcopy between sections) === */ .dive-verse { padding: clamp(48px, 10vw, 120px) 0; text-align: center; position: relative; } .dive-verse p { font-family: var(--font-rounded); font-size: clamp(24px, 4.6vw, 44px); font-weight: 300; font-style: normal; line-height: 1.3; letter-spacing: 0.3px; max-width: 720px; margin: 0 auto; background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), #ffffff 50%, rgba(255, 255, 255, 0.35)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 40px rgba(170, 199, 255, 0.18); } /* === Section heading === */ .section-head { text-align: center; margin-bottom: var(--space-xl); } .section-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--abyss-accent-primary); margin-bottom: var(--space-s); } .section-title { font-size: clamp(24px, 4vw, 34px); font-weight: 700; color: white; letter-spacing: -0.3px; } /* === Footer === */ .footer { padding: var(--space-xxl) 0 var(--space-xl); border-top: none; margin-top: var(--space-xxl); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); } .footer-copy { font-size: 12px; color: var(--abyss-muted); } .footer-links { display: flex; gap: var(--space-l); font-size: 12px; } .footer-links a { color: var(--abyss-muted); } .footer-links a:hover { color: var(--abyss-body); opacity: 1; } /* === Legal pages === */ .legal { padding: var(--space-xl) 0 var(--space-xxl); } .legal h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; color: white; letter-spacing: -0.5px; margin-bottom: var(--space-s); } .legal .meta { font-size: 13px; color: var(--abyss-muted); margin-bottom: var(--space-xl); } /* Tab switch for Privacy page */ .tab-switch { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-xl); } .tab-switch-item { font-family: inherit; font-size: 15px; font-weight: 500; color: var(--abyss-muted); padding: 4px 2px; transition: color 0.2s ease; background: none; border: none; cursor: pointer; position: relative; } .tab-switch-item:hover { color: var(--abyss-body); } .tab-switch-item.is-active { color: white; font-weight: 600; } .tab-switch-item.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--abyss-accent-primary); } .tab-switch-sep { color: var(--abyss-dim); font-weight: 400; user-select: none; } .tab-panel { animation: fadeUp 0.4s ease-out; } .tab-panel[hidden] { display: none; } .legal h2 { font-size: 20px; font-weight: 700; color: white; margin-top: var(--space-xl); margin-bottom: var(--space-m); letter-spacing: -0.2px; } .legal h3 { font-size: 16px; font-weight: 600; color: white; margin-top: var(--space-l); margin-bottom: var(--space-s); } .legal p, .legal li { font-size: 15px; color: var(--abyss-body); margin-bottom: var(--space-s); } .legal ul, .legal ol { padding-left: var(--space-l); margin-bottom: var(--space-m); } .legal .back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--abyss-muted); margin-bottom: var(--space-l); } .legal .back:hover { color: var(--abyss-body); opacity: 1; } .legal address { font-style: normal; color: var(--abyss-body); line-height: 1.7; } /* === Responsive === */ @media (max-width: 880px) { .feature-row { grid-template-columns: 1fr; gap: var(--space-l); text-align: center; padding: var(--space-xl) 0; } .feature-row.reversed .feature-row-media { order: 0; } .feature-row.reversed .feature-row-text { order: 1; } .feature-row-text { margin: 0 auto; } .feature-bullets { align-items: center; text-align: left; max-width: 400px; margin: 0 auto; } } @media (max-width: 720px) { .carousel-stage { height: clamp(380px, 88vw, 520px); } .carousel-stage .phone { --gap: clamp(80px, 18vw, 140px); --depth: clamp(80px, 16vw, 150px); --tilt: 24deg; width: clamp(170px, 34vw, 220px); } } @media (max-width: 640px) { .nav-links { gap: var(--space-xs); } .nav-links a { padding: 8px 12px; min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; } .waitlist-form { flex-direction: column; padding: 10px; } .waitlist-form input { padding: 12px 14px; } .waitlist-form button { width: 100%; padding: 14px; } .hero { padding: var(--space-l) 0 var(--space-xl); } .footer-inner { flex-direction: column; text-align: center; } } @media (min-width: 768px) { :root { --space-screen-h: 32px; } } @media (max-width: 480px) { :root { --space-screen-h: 16px; } /* Hero */ .wordmark { letter-spacing: clamp(3px, 0.8vw, 6px); } .dive-hint { padding: 6px 12px; font-size: 10px; letter-spacing: 1.4px; margin-top: var(--space-l); } /* Carousel */ .carousel-stage { height: clamp(340px, 92vw, 420px); perspective: 900px; } .carousel-stage .phone { --gap: clamp(56px, 16vw, 100px); --depth: clamp(50px, 12vw, 100px); --tilt: 18deg; width: clamp(140px, 36vw, 180px); } .carousel-stage::before { width: 400px; height: 260px; filter: blur(50px); } /* Feature rows */ .feature-row { padding: var(--space-l) 0; } .feature-row .phone { max-width: 200px; } .feature-row-title { font-size: clamp(24px, 6vw, 32px); } /* Dive verse */ .dive-verse p { font-size: clamp(22px, 5.8vw, 32px); } /* Mini features */ .mini-features-grid { grid-template-columns: 1fr; } .mini-card { padding: var(--space-l) var(--space-m); } .mini-card h3 { font-size: 15px; } .mini-card p { font-size: 14px; } /* Footer */ .footer-links { gap: var(--space-xl); } .footer-links a { padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; } /* CTA strip (future-proofing) */ .cta-strip { padding: var(--space-l) var(--space-m); } .cta-button { width: 100%; justify-content: center; } } @media (max-width: 390px) { .brand { font-size: 13px; letter-spacing: 2px; } .brand-dot { width: 6px; height: 6px; } .tagline { font-size: clamp(18px, 4.8vw, 22px); } .carousel-stage .phone { --gap: clamp(48px, 14vw, 80px); --depth: clamp(40px, 10vw, 80px); --tilt: 16deg; width: clamp(120px, 32vw, 160px); } } /* Carousel swipe hint — visible only on touch devices */ .carousel-hint { display: none; text-align: center; font-size: 11px; color: var(--abyss-muted); margin-top: var(--space-s); letter-spacing: 1px; text-transform: uppercase; font-weight: 700; } @media (pointer: coarse) { .carousel-hint { display: block; } } @media (prefers-reduced-motion: reduce) { .bubble, .abyss-depths::after, .abyss-rays, .dive-hint-arrow, .wordmark, .eyebrow, .tagline, .dive-hint, .depth-meter, .waitlist, .reveal { animation: none !important; opacity: 1 !important; } /* Wildlife silhouettes stay hidden entirely under reduced motion. */ .wildlife .wildlife-body, .wildlife .wildlife-body img { animation: none !important; opacity: 0 !important; } .reveal { transform: none !important; } .carousel-stage .phone { transition: none !important; } }