/* ========================================================================== MiZu — 水 — underwater descent -------------------------------------------------------------------------- CONTENTS 0. Design tokens (palette / type — edit here first) 1. Reset & base 2. Fixed atmosphere layers (depth gradient, caustics, god rays, vignette) 3. The sinking logo 4. Fixed UI (nav pill, corner mark, depth meter, grain) 5. Hero — the surface 6. Shared section chrome (headings, kanji watermarks, reveals) 7. Listen 8. Watch (lazy video facades, fish school, socials) 9. About (photos, bio, whale) 10. Footer — the seabed 11. Cursor ripples & click bubbles 12. Responsive 13. Reduced motion & no-JS fallbacks ========================================================================== */ /* ====================== 0. DESIGN TOKENS ====================== */ :root { /* --- palette: the descent, surface → abyss --- */ --c-sky-hi: #e8fafd; --c-sky: #bdebf2; --c-surface: #7fd8e8; --c-mid: #1e6f9f; --c-mid-deep: #0b3b66; --c-deep: #06203b; --c-abyss: #020b16; --c-floor: #01060d; /* --- bioluminescent accents --- */ --c-glow: #5cffc9; --c-glow-2: #3dd6ff; /* --- ink --- */ --c-text: #eaf6f9; --c-text-dim: rgba(234, 246, 249, .62); /* --- type: swap the brand font here --- */ --font-display: 'Unbounded', sans-serif; /* wordmark & headings */ --font-body: 'Hanken Grotesk', sans-serif; --font-jp: 'Shippori Mincho', serif; /* kanji accents */ /* --- runtime vars driven by js/main.js (DEPTH GRADIENT system) --- */ --depth-a: var(--c-sky); /* fallback gradient top */ --depth-b: var(--c-surface); /* fallback gradient bottom */ --dark-o: 0; /* vignette opacity */ } /* ====================== 1. RESET & BASE ====================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html.has-js { scroll-behavior: auto; } /* Lenis takes over */ /* decorative elements (whale, big type) bleed off-screen by design — `clip` on BODY removes the overflow region so mobile browsers don't widen the layout viewport to fit it. BODY ONLY: any non-visible overflow-x on makes the viewport's used overflow-y clipped too — page stops scrolling entirely. (Fixed-position layers aren't affected by body clip.) */ body { overflow-x: clip; } @supports not (overflow-x: clip) { body { overflow-x: hidden; } } body { font-family: var(--font-body); font-size: clamp(15px, 1.05vw + 9px, 18px); line-height: 1.6; color: var(--c-text); background: var(--c-deep); /* NOTE: overflow-x is set above (clip, with a hidden @supports fallback). Do NOT re-declare it here — a duplicate `overflow-x: hidden` on this later block wins the cascade and silently defeats the clip, letting the decorative bleed widen the layout viewport on iOS Safari. */ -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--c-glow); color: var(--c-abyss); } /* keyboard users get a clear glowing focus ring */ a:focus-visible, button:focus-visible { outline: 2px solid var(--c-glow); outline-offset: 3px; border-radius: 6px; } /* the page surfaces out of black on load — js fades this away */ #boot-veil { position: fixed; inset: 0; z-index: 90; background: var(--c-abyss); pointer-events: none; } html.no-js #boot-veil, html.reduced-motion #boot-veil { display: none; } /* ============ 2. FIXED ATMOSPHERE LAYERS (back → front) ============ */ /* [SCROLL FX: DEPTH GRADIENT] — js tweens --depth-a/--depth-b through the palette as you scroll, so the whole sea darkens as one unbroken sink. */ #depth-bg { position: fixed; inset: 0; z-index: 0; background: linear-gradient(to bottom, var(--depth-a), var(--depth-b)); } /* [SCROLL FX: ATMOSPHERE] — fullscreen WebGL shader (sky, clouds, sun, crepuscular rays, underwater light shafts, caustics, depth fog). Sits directly over the #depth-bg fallback. */ #atmosphere { position: fixed; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; } /* [SCROLL FX: VIGNETTE] — the dark closes in as you descend (--dark-o) */ #vignette { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: var(--dark-o); background: radial-gradient(ellipse 105% 80% at 50% 42%, transparent 40%, rgba(1, 4, 9, .75) 100%); } /* ====================== 3. THE SINKING LOGO ====================== */ /* [SCROLL FX: SINKING LOGO] — fixed behind content; js founders it at the surface then sinks it through mid-frame to rest on the sea bed. The top calc puts the glyph BASELINE exactly on the waterline at scroll 0 (waterline = 56% of the 132vh hero = 73.9vh; the artwork's glyphs reach the bottom of its box, height = width × 496/1194 → offset 0.4154 × width). */ #sinking-logo { position: fixed; z-index: 3; /* top uses --vh (synced from JS window.innerHeight) so the hull's baseline tracks the same waterline the sink/water-sim math uses; falls back to the CSS vh unit before JS runs / when JS is off. See #surface height below. */ top: calc(73.9 * var(--vh, 1vh) - 0.4154 * min(66vw, 600px)); /* centre via auto margins (left:0/right:0 + definite width). No calc to misparse, and `transform` stays free for the GSAP sink animation. */ left: 0; right: 0; width: min(66vw, 600px); margin-inline: auto; pointer-events: none; visibility: hidden; /* shown by html.has-js below */ will-change: transform, opacity, filter; } html.has-js:not(.reduced-motion) #sinking-logo { visibility: visible; } .logo-sway { position: relative; aspect-ratio: 1194 / 496; /* the box the pieces fill */ will-change: transform; /* idle bob/sway lives on this wrapper */ } .logo-svg { width: 100%; height: auto; aspect-ratio: 1194 / 496; overflow: visible; } /* the two halves of the hull — a jagged crack splits them; they only move apart when the meteor strike breaks her (js animates the pieces) */ .logo-piece { position: absolute; inset: 0; will-change: transform; filter: drop-shadow(0 4px 18px rgba(3, 22, 36, .45)); } .logo-piece--l { clip-path: polygon(-20% -20%, 49.5% -20%, 52% 16%, 47.5% 38%, 53% 62%, 48.5% 82%, 51% 120%, -20% 120%); } .logo-piece--r { clip-path: polygon(49.5% -20%, 120% -20%, 120% 120%, 51% 120%, 48.5% 82%, 53% 62%, 47.5% 38%, 52% 16%); } /* dry copy above the waterline (crisp) / wet copy below it (refracted, dimmer, swaying) — js keeps both clip lines riding the live swell */ .logo-dry, .logo-wet { position: absolute; top: 0; left: 0; will-change: clip-path; } .logo-wet { filter: brightness(.72) saturate(.55) blur(.5px); opacity: .92; animation: wet-refract 2.6s ease-in-out infinite alternate; } @keyframes wet-refract { from { transform: translate(-1.4px, 3px); } to { transform: translate(1.4px, 4.5px); } } /* mirrored reflection under the floating wordmark — js fades it out the moment the logo goes under. The glyphs touch the box bottom, so the flipped copy sits flush at the baseline. */ .logo-reflection { position: absolute; top: 100%; left: 0; width: 100%; transform: scaleY(-1); margin-top: calc(min(66vw, 600px) * -0.004); opacity: .2; filter: blur(2px); -webkit-mask-image: linear-gradient(to top, transparent 30%, #000 85%); mask-image: linear-gradient(to top, transparent 30%, #000 85%); } /* ====================== 4. FIXED UI ====================== */ /* floating nav pill, bottom centre */ #depth-nav { position: fixed; z-index: 50; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .9em; padding: .65em 1.5em; border-radius: 99px; background: rgba(2, 16, 30, .55); border: 1px solid rgba(127, 216, 232, .22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 32px rgba(1, 6, 13, .45); } #depth-nav span { color: rgba(127, 216, 232, .5); } #depth-nav a { position: relative; padding: .2em 0; color: var(--c-text-dim); transition: color .3s; } #depth-nav a:hover { color: var(--c-glow); text-shadow: 0 0 14px rgba(92,255,201,.6); } #depth-nav a.active { color: var(--c-text); } #depth-nav a.active::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 4px; height: 4px; border-radius: 50%; transform: translateX(-50%); background: var(--c-glow); box-shadow: 0 0 8px var(--c-glow); } /* small wordmark, top-left */ #corner-mark { position: fixed; z-index: 50; top: 18px; left: 22px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: .14em; /* dark ink at the bright surface, fading to light ink with depth */ color: color-mix(in oklab, #093248, var(--c-text) calc(var(--dark-o) * 109%)); transition: text-shadow .3s; } #corner-mark b { color: var(--c-glow); } #corner-mark span { font-family: var(--font-jp); font-size: .85em; opacity: .7; margin-left: .35em; } #corner-mark:hover { text-shadow: 0 0 18px rgba(92, 255, 201, .8); } /* [SCROLL FX: DEPTH METER] right-edge gauge — js updates marker + readout */ #depth-meter { position: fixed; z-index: 50; right: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; pointer-events: none; } .dm-track { position: relative; width: 1px; height: 38vh; background: linear-gradient(to bottom, rgba(234,246,249,.4), rgba(92,255,201,.25)); } .dm-marker { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c-glow); box-shadow: 0 0 10px var(--c-glow); } .dm-read { display: flex; flex-direction: column; gap: 2px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-dim); text-align: left; writing-mode: vertical-rl; height: 38vh; justify-content: center; /* same depth-aware ink as the corner mark */ color: color-mix(in oklab, #0b3a52, var(--c-text) calc(var(--dark-o) * 109%)); } #dm-meters { color: inherit; } #dm-meters { font-family: var(--font-display); font-weight: 400; color: var(--c-text); } /* [SCROLL FX: MILESTONES] — facts that surface as you pass real depths */ #depth-fact { position: fixed; z-index: 50; right: 56px; top: 50%; transform: translateY(-50%); max-width: 200px; text-align: right; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.7; color: rgba(214, 240, 246, .85); text-shadow: 0 0 14px rgba(92, 255, 201, .25), 0 1px 8px rgba(1, 8, 14, .7); opacity: 0; pointer-events: none; } /* foreground particle canvas — over content, faint */ #particles { position: fixed; inset: 0; z-index: 40; pointer-events: none; } /* film grain */ #grain { /* inset:0 keeps this fixed layer EXACTLY the viewport. It must not bleed: overflow-x:clip on can't contain fixed layers (their containing block is the viewport, not body), so any oversize here is exposed when the user pinch-zooms out. The shimmer is driven by background-position (below), not by translating an oversized box. */ position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-shift 1.4s steps(4) infinite; } @keyframes grain-shift { 0% { background-position: 0 0; } 25% { background-position: -8% 6%; } 50% { background-position: 6% -8%; } 75% { background-position: -6% -6%; } 100% { background-position: 0 0; } } /* ====================== 5. HERO — THE SURFACE ====================== */ /* NOTE: #page deliberately has NO z-index — the hero's layers interleave with the fixed atmosphere stack (sky 2 < sinking logo 3 < water overlay 5/6 < section content 10), which only works in one stacking context. */ /* Clip decorative bleed (e.g. the 130vw whale) HERE, not on : overflow on body/html propagates to the viewport and fails to constrain the mobile layout-viewport expansion, which inflates innerWidth/innerHeight and throws off both the logo centring and the --vh top calc. An inner wrapper clips for real. */ #page { position: relative; overflow-x: clip; } .depth-section { position: relative; } .content-section, #seabed { z-index: 10; } #surface { /* same --vh basis as the sinking logo's top calc: the waterline strip is positioned as a % of this height, so tying both to --vh keeps the hull's baseline on the rendered waterline as the Android address bar resizes. */ height: calc(132 * var(--vh, 1vh)); overflow: hidden; --band: 240px; /* half-height of the live water-surface canvas strip */ } /* sky, sun, clouds and rays come from the atmosphere shader — the hero itself only carries the note, the logo, and the breaking-water canvas */ .sky-note { position: absolute; top: 26px; left: 0; right: 0; z-index: 7; text-align: center; font-size: .78rem; letter-spacing: .42em; text-transform: uppercase; color: rgba(20, 48, 60, .6); } /* [SCROLL FX: WATER SURFACE] — js-simulated waterline strip centred on the 56% line: moving swell, foam, spray and displacement around the logo. It scrolls naturally with the page, passing UP over the fixed logo. */ #surface-canvas { position: absolute; top: calc(56% - var(--band)); left: 0; display: block; width: 100%; /* explicit — a canvas is a replaced element and would otherwise size to its backing store, not stretch */ height: calc(var(--band) * 2); z-index: 6; /* the breaking water renders OVER the sinking logo (3) */ pointer-events: none; } /* the translucent water column below the canvas strip — the logo shows through it, tinted and submerged, as the page scrolls. Its top colour continues the canvas fill so the hand-off is invisible. */ .surface-under { position: absolute; top: calc(56% + var(--band)); left: 0; right: 0; bottom: -1px; z-index: 5; /* translucent water in front of the logo → it reads as submerged */ background: linear-gradient(to bottom, rgba(36, 92, 114, .34) 0%, rgba(28, 76, 96, .22) 26%, rgba(16, 56, 76, .10) 60%, transparent 100%); } /* hidden static logo (only for reduced-motion / no-js — see §13) */ .hero-logo-static { display: none; position: absolute; top: 16vh; left: 50%; transform: translateX(-50%); width: min(66vw, 600px); z-index: 4; filter: drop-shadow(0 3px 14px rgba(3, 22, 36, .5)); } .dive-hint { position: absolute; top: 82vh; left: 50%; transform: translateX(-50%); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 1em 2.6em; border-radius: 99px; border: 1px solid rgba(214, 236, 243, .45); background: rgba(8, 34, 50, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: .3em; text-transform: uppercase; text-indent: .3em; color: rgba(240, 250, 252, .95); text-shadow: 0 2px 14px rgba(6, 32, 59, .6); box-shadow: 0 8px 36px rgba(2, 14, 24, .4), inset 0 0 24px rgba(140, 215, 235, .08); transition: border-color .3s, box-shadow .3s, background .3s, transform .3s; animation: dive-pulse 3.2s ease-in-out infinite; } .dive-hint:hover { border-color: var(--c-glow); background: rgba(10, 44, 62, .5); box-shadow: 0 10px 44px rgba(2, 14, 24, .5), 0 0 34px rgba(92, 255, 201, .25); transform: translateX(-50%) translateY(-2px); } @keyframes dive-pulse { 0%, 100% { box-shadow: 0 8px 36px rgba(2, 14, 24, .4), 0 0 0 0 rgba(160, 225, 240, .25); } 50% { box-shadow: 0 8px 36px rgba(2, 14, 24, .4), 0 0 0 14px rgba(160, 225, 240, 0); } } .dive-arrow { font-size: 1.1em; animation: bob 2.4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ============== 6. SHARED SECTION CHROME ============== */ .content-section { min-height: 90vh; padding: clamp(72px, 11vh, 130px) clamp(20px, 7vw, 110px); max-width: 1280px; margin: 0 auto; } .section-head { margin-bottom: clamp(28px, 5vh, 52px); } .depth-tag { font-size: .75rem; letter-spacing: .35em; text-transform: uppercase; color: var(--c-glow-2); opacity: .85; margin-bottom: 12px; } .section-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 7vw, 4.6rem); line-height: 1.05; letter-spacing: .02em; } /* scroll-reveal elements start hidden only when js will reveal them */ html.has-js:not(.reduced-motion) .reveal { opacity: 0; } /* ====================== 7. LISTEN ====================== */ .featured-release { display: grid; grid-template-columns: minmax(260px, 440px) 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: center; } .release-art { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(2, 11, 22, .55), 0 0 0 1px rgba(127, 216, 232, .14); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; } .release-art:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 44px 90px rgba(2, 11, 22, .65), 0 0 44px rgba(61, 214, 255, .18), 0 0 0 1px rgba(92, 255, 201, .35); } .release-art svg, .release-art img { width: 100%; aspect-ratio: 1; object-fit: cover; } .out-now { position: absolute; top: 14px; left: 14px; padding: .4em .9em; border-radius: 99px; font-size: .68rem; font-weight: 700; letter-spacing: .22em; color: var(--c-abyss); background: var(--c-glow); box-shadow: 0 0 22px rgba(92, 255, 201, .55); } .release-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.2; margin-bottom: .35em; overflow-wrap: anywhere; } .release-sub { color: var(--c-text-dim); margin-bottom: 1.6em; } .platform-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .platform-btn { display: inline-flex; align-items: center; gap: .6em; padding: .78em 1.5em; border-radius: 99px; border: 1px solid rgba(127, 216, 232, .35); background: rgba(189, 235, 242, .07); font-weight: 600; font-size: .92rem; letter-spacing: .03em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color .3s, box-shadow .3s, background .3s, transform .3s; } .platform-btn svg { width: 1.25em; height: 1.25em; } .platform-btn:hover { border-color: var(--c-glow); background: rgba(92, 255, 201, .1); box-shadow: 0 0 26px rgba(92, 255, 201, .28); transform: translateY(-2px); } .platform-row--minor { gap: 10px; } .platform-chip { padding: .45em 1.1em; border-radius: 99px; font-size: .78rem; letter-spacing: .06em; color: var(--c-text-dim); border: 1px solid rgba(127, 216, 232, .18); transition: color .3s, border-color .3s; } .platform-chip:hover { color: var(--c-glow-2); border-color: var(--c-glow-2); } .past-releases { margin-top: clamp(44px, 7vh, 72px); } .past-label { font-size: .75rem; letter-spacing: .35em; text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 22px; } .past-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.5vw, 28px); max-width: 760px; } .past-card { border-radius: 10px; overflow: hidden; border: 1px solid rgba(127, 216, 232, .12); background: rgba(2, 16, 30, .25); transition: transform .45s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; } .past-card:hover { transform: translateY(-5px); border-color: rgba(92, 255, 201, .5); box-shadow: 0 18px 44px rgba(2, 11, 22, .5), 0 0 28px rgba(92, 255, 201, .14); } .past-card svg { width: 100%; aspect-ratio: 1; } .past-card span { display: block; padding: .7em .9em; font-size: .8rem; letter-spacing: .04em; color: var(--c-text-dim); } /* ====================== 8. WATCH ====================== */ /* lazy video facade — replaced by an iframe on click (js → LAZY VIDEO) */ .video-feature { max-width: 880px; } .video-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid rgba(127, 216, 232, .18); box-shadow: 0 26px 70px rgba(1, 6, 13, .55); transition: border-color .3s, box-shadow .3s, transform .4s; } .video-facade:hover { border-color: rgba(92, 255, 201, .5); box-shadow: 0 30px 80px rgba(1, 6, 13, .6), 0 0 40px rgba(61, 214, 255, .16); transform: translateY(-3px); } .vf-art { position: absolute; inset: 0; background: #041527; } .vf-art svg { width: 100%; height: 100%; display: block; } .vf-time { position: absolute; right: 12px; bottom: 11px; padding: .25em .55em; border-radius: 4px; font-size: .7rem; font-weight: 600; letter-spacing: .04em; color: #eaf6f9; background: rgba(1, 8, 14, .75); } .vf-play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; border-radius: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; color: var(--c-abyss); background: rgba(92, 255, 201, .92); box-shadow: 0 0 0 0 rgba(92, 255, 201, .45); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; } .vf-play svg { width: 30px; height: 30px; margin-left: 3px; } .video-facade:hover .vf-play { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 16px rgba(92, 255, 201, .12); } .vf-label { position: absolute; left: 16px; bottom: 13px; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(234, 246, 249, .65); } .video-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); max-width: 880px; margin-top: clamp(18px, 3vh, 30px); } .video-card .vf-play { width: 52px; height: 52px; } .video-card .vf-play svg { width: 22px; height: 22px; } .social-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: clamp(36px, 5vh, 56px); } .social-link { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.3em; border-radius: 99px; border: 1px solid rgba(127, 216, 232, .22); font-size: .88rem; letter-spacing: .05em; color: var(--c-text-dim); transition: color .3s, border-color .3s, box-shadow .3s, transform .3s; } .social-link svg { width: 1.3em; height: 1.3em; } .social-link:hover { color: var(--c-glow); border-color: var(--c-glow); box-shadow: 0 0 24px rgba(92, 255, 201, .22); transform: translateY(-2px); } /* [SCROLL FX: CREATURES] — live canvases: fish + sharks in the sunlit zone (Listen), anglerfish + viperfish in the midnight zone (About) */ #fish-canvas, #abyss-canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; } /* decorative backdrop layers (whales etc.) — the trench cliffs themselves are rendered by the atmosphere shader, not DOM elements */ .deco { position: absolute; z-index: 0; pointer-events: none; } /* keep each section's actual content above its creatures & decor */ #listen > *:not(#fish-canvas):not(.deco), #watch > *:not(.whale):not(.deco), #about > *:not(#abyss-canvas):not(.deco) { position: relative; z-index: 1; } /* ====================== 9. ABOUT ====================== */ .about-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.5vw, 30px); align-items: start; } .about-photo { border-radius: 12px; overflow: hidden; border: 1px solid rgba(61, 214, 255, .14); box-shadow: 0 24px 60px rgba(1, 6, 13, .6); transition: border-color .35s, box-shadow .35s; } .about-photo:hover { border-color: rgba(92, 255, 201, .45); box-shadow: 0 24px 60px rgba(1, 6, 13, .6), 0 0 36px rgba(92, 255, 201, .16); } .about-photo svg, .about-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } /* staggered, overlapping editorial placement */ .p1 { grid-column: 1 / span 4; margin-top: 5vh; } .p2 { grid-column: 5 / span 4; margin-top: 0; } .p3 { grid-column: 9 / span 4; margin-top: 9vh; } .about-copy { grid-column: 3 / span 8; margin-top: clamp(36px, 6vh, 64px); } .bio { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.75; color: var(--c-text); } .bio-note { margin-top: 1.2em; font-family: var(--font-jp); color: var(--c-glow); opacity: .75; letter-spacing: .08em; } .contact { margin-top: clamp(32px, 5vh, 48px); } /* contact sits in the abyss (footer) — centred in the dark */ #seabed .contact { margin-top: 0; text-align: center; } .contact-label { font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 10px; } .contact-mail { font-family: var(--font-display); font-weight: 400; font-size: clamp(1rem, 2.4vw, 1.5rem); overflow-wrap: anywhere; } .glow-link { color: var(--c-glow); text-shadow: 0 0 18px rgba(92, 255, 201, .35); transition: text-shadow .3s; } .glow-link:hover { text-shadow: 0 0 30px rgba(92, 255, 201, .85); } .contact-mgmt { margin-top: .6em; color: var(--c-text-dim); font-size: .9rem; } /* [SCROLL FX: WHALES] — twilight pod; js drifts them across with scroll */ .whale { position: absolute; z-index: 0; pointer-events: none; color: rgba(2, 12, 22, .95); } .whale-a { top: 14%; right: -12vw; width: min(82vw, 840px); filter: blur(3px); opacity: .5; } .whale-b { top: 56%; left: -18vw; width: min(38vw, 380px); filter: blur(5px); opacity: .28; transform: scaleX(-1); /* the calf swims the other way */ } /* ====================== 10. FOOTER — THE SEABED ====================== */ #seabed { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; } .seabed-floor { position: absolute; inset: auto 0 0 0; z-index: 0; } .seabed-floor svg { width: 100%; height: clamp(140px, 24vh, 240px); } /* kelp sways gently */ .kelp path { transform-origin: bottom center; animation: kelp-sway 7s ease-in-out infinite alternate; } .kelp .k2 { animation-delay: -2.4s; } .kelp .k3 { animation-delay: -4s; } .kelp .k4 { animation-delay: -1.2s; } @keyframes kelp-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } } /* bioluminescent specks pulse out of sync */ .bio-specks circle { animation: speck-pulse 4s ease-in-out infinite; } .bio-specks .s2 { animation-delay: -1.3s; } .bio-specks .s3 { animation-delay: -2.6s; } .bio-specks .s4 { animation-delay: -3.4s; } @keyframes speck-pulse { 0%, 100% { opacity: .15; } 50% { opacity: .95; } } .footer-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 12vh 24px 15vh; text-align: center; } .footer-logo { width: min(46vw, 260px); opacity: .8; filter: drop-shadow(0 0 22px rgba(61, 214, 255, .12)); } .social-row--footer { margin-top: 0; justify-content: center; } .social-row--footer .social-link { padding: .65em; border-radius: 50%; } .copyright { font-size: .78rem; letter-spacing: .18em; color: rgba(234, 246, 249, .55); } .footer-links { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; } .resurface { font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; } /* ============ 11. CURSOR RIPPLES & CLICK BUBBLES (js-spawned) ============ */ /* tiny bubbles drift up off the cursor as it moves */ .cursor-bub { position: fixed; z-index: 70; pointer-events: none; width: 5px; height: 5px; border-radius: 50%; border: 1px solid rgba(205, 228, 238, .45); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), transparent 65%); transform: translate(-50%, -50%); animation: bub-rise 1.2s ease-out forwards; } @keyframes bub-rise { from { opacity: .65; translate: 0 0; scale: .55; } to { opacity: 0; translate: var(--bx, 4px) -38px; scale: 1; } } .click-bubble { position: fixed; z-index: 70; pointer-events: none; border-radius: 50%; border: 1px solid rgba(189, 235, 242, .7); background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(255,255,255,.05) 60%); transform: translate(-50%, -50%); animation: bubble-rise 1.4s ease-out forwards; } @keyframes bubble-rise { from { opacity: .9; translate: 0 0; } to { opacity: 0; translate: var(--bx, 8px) -120px; } } /* ====================== 12. RESPONSIVE ====================== */ @media (max-width: 900px) { .featured-release { grid-template-columns: 1fr; max-width: 460px; } .about-copy { grid-column: 1 / -1; } .p1 { grid-column: 1 / span 6; margin-top: 4vh; } .p2 { grid-column: 7 / span 6; } .p3 { grid-column: 4 / span 6; margin-top: 0; } } @media (max-width: 640px) { #depth-meter { display: none; } /* declutter small screens */ #depth-fact { display: none; } .sky-note { display: none; } /* collides with the corner mark */ .dive-hint { top: 78vh; padding: .85em 2em; } #corner-mark { top: 14px; left: 16px; } .content-section { padding-top: 16vh; padding-bottom: 16vh; } .video-row { grid-template-columns: 1fr; } .past-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } .past-card span { font-size: .68rem; padding: .55em .6em; } #god-rays i { filter: blur(9px); } /* cheaper blur on mobile */ .whale { width: 130vw; } #surface { --band: 170px; } /* shallower water strip */ } /* ============ 13. REDUCED MOTION & NO-JS FALLBACKS ============ */ /* When motion is reduced (or js is off) the page becomes a clean static layout: sections carry their own depth colours, animated layers hide, and the logo sits statically in the hero. */ html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; transition: none !important; } html.reduced-motion #atmosphere, html.no-js #atmosphere, html.reduced-motion #particles, html.no-js #particles, html.reduced-motion #fish-canvas, html.no-js #fish-canvas, html.reduced-motion #abyss-canvas, html.no-js #abyss-canvas, html.reduced-motion #grain, html.no-js #grain, html.reduced-motion #sinking-logo, html.no-js #sinking-logo, html.reduced-motion #surface-canvas, html.no-js #surface-canvas, html.reduced-motion #depth-meter, html.no-js #depth-meter { display: none; } /* static hero sky/sea when the shader is off */ html.reduced-motion #surface, html.no-js #surface { background: linear-gradient(to bottom, #aebfc7 0%, #c9d3d3 30%, #9dbac4 55.8%, #3a86a0 56%, #1e6f9f 78%, #14597f 100%); } /* static waterline stand-in when the canvas is off */ html.reduced-motion .surface-under, html.no-js .surface-under { top: 56%; border-top: 2px solid rgba(255, 255, 255, .75); background: linear-gradient(to bottom, rgba(127, 216, 232, .8) 0%, rgba(60, 160, 195, .45) 22%, rgba(30, 111, 159, .18) 55%, transparent 100%); } html.reduced-motion .hero-logo-static, html.no-js .hero-logo-static { display: block; } html.reduced-motion .reveal, html.no-js .reveal { opacity: 1; } /* static depth colours per section (the "sink" as four still frames) */ html.reduced-motion #depth-bg, html.no-js #depth-bg { background: var(--c-deep); } html.reduced-motion #listen, html.no-js #listen { background: linear-gradient(to bottom, var(--c-surface), var(--c-mid)); } html.reduced-motion #watch, html.no-js #watch { background: linear-gradient(to bottom, var(--c-mid), var(--c-mid-deep)); } html.reduced-motion #about, html.no-js #about { background: linear-gradient(to bottom, var(--c-mid-deep), var(--c-deep)); } html.reduced-motion #seabed, html.no-js #seabed { background: linear-gradient(to bottom, var(--c-deep), var(--c-abyss)); } html.reduced-motion #surface, html.no-js #surface { height: auto; min-height: 100vh; }