/* Compliance vocabulary: IBM Plex Mono (300 Light) (`` (Google Fonts Interactions that feel accidental rather than demanded (hover reveals IntersectionObserver((entries IntersectionObserver` scroll event listener. The `` background transitions progressively deeper tones. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --deep: #0d0f1a; --burgundy: #3a0e1c; --burgundy-mid: #6b1d3a; --rose: #8b3a5c; --cream: #f5efe6; --cream-muted: #d4c9b8; --blush: #c4707e; --void-blue: #161a2e; --depth: 0; } html { overflow-x: hidden; scroll-behavior: smooth; } body { min-height: 100vh; overflow-x: hidden; color: var(--cream-muted); font-family: "Share Tech Mono", "Courier New", monospace; font-weight: 400; font-size: clamp(0.95rem, 1.1vw, 1.15rem); line-height: 1.75; letter-spacing: 0.02em; background: radial-gradient(circle at 50% calc(112% - (var(--depth) * 18%)), rgba(245, 239, 230, calc(var(--depth) * 0.22)), transparent 28%), linear-gradient(170deg, var(--deep) 0%, var(--burgundy) 58%, var(--void-blue) 100%); transition: background 0.4s ease; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(170deg, rgba(13, 15, 26, calc(0.25 + var(--depth) * 0.45)), rgba(22, 26, 46, calc(var(--depth) * 0.48)), rgba(58, 14, 28, calc(0.45 - var(--depth) * 0.2))), radial-gradient(circle at 30% 20%, rgba(107, 29, 58, 0.34), transparent 42%); } #bubble-field { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .bubble { position: absolute; left: 0; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(245, 239, 230, 0.15), rgba(245, 239, 230, 0.02) 60%, transparent 80%); box-shadow: inset 0 -2px 6px rgba(245, 239, 230, 0.05); will-change: transform, opacity; } .hero { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(170deg, #0d0f1a 0%, #3a0e1c 60%, #161a2e 100%); } .submerged-moon { position: absolute; top: 60%; left: 50%; width: clamp(200px, 40vw, 500px); height: clamp(200px, 40vw, 500px); border-radius: 50%; background: radial-gradient(circle, rgba(245,239,230,0.25) 0%, rgba(245,239,230,0.08) 40%, transparent 70%); filter: blur(30px); transform: translate(-50%, -50%) scale(1); opacity: 0.8; animation: moonPulse 8s ease-in-out infinite; } .submerged-moon::after { content: ""; position: absolute; inset: 20%; border-radius: 50%; background: radial-gradient(circle at 40% 45%, rgba(245, 239, 230, 0.2), rgba(196, 112, 126, 0.05) 48%, transparent 70%); } .hero-whisper { position: relative; z-index: 3; margin-top: clamp(320px, 42vh, 520px); color: #d4c9b8; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 2.5vw, 2rem); letter-spacing: 0.03em; opacity: 0; animation: fadeIn 2s ease-in 1.5s forwards; } @keyframes moonPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; } } @keyframes fadeIn { to { opacity: 1; } } .drift { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; padding: clamp(1rem, 4vw, 4rem); } .current-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.9; } .current-map path { fill: none; stroke: rgba(197, 112, 126, 0.12); stroke-width: 0.5px; vector-effect: non-scaling-stroke; } .cluster { position: relative; padding: clamp(5rem, 12vw, 13rem) 0; } .cluster + .cluster { margin-top: clamp(2rem, 6vw, 6rem); } .cluster-kicker, .meta { font-family: "IBM Plex Mono", "Courier New", monospace; font-weight: 300; font-size: clamp(0.7rem, 0.85vw, 0.8rem); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.12em; } .cluster-kicker { margin-bottom: clamp(1.5rem, 3vw, 3rem); color: #c4707e; } .meta { display: inline-flex; align-items: center; gap: 0.65rem; color: #d4c9b8; margin-bottom: 1.25rem; } .phase-icon { --phase-shadow: 8px; display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: #f5efe6; box-shadow: inset var(--phase-shadow) 0 0 rgba(13, 15, 26, 0.82), 0 0 10px rgba(245, 239, 230, 0.14); opacity: 0.85; } .grid-zone { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: minmax(165px, auto); grid-auto-flow: dense; gap: clamp(1.5rem, 3vw, 3rem); } .cell { position: relative; min-height: 260px; padding: clamp(1.35rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid rgba(245, 239, 230, 0.08); border-radius: clamp(1.3rem, 3vw, 2.4rem); background: rgba(245, 239, 230, 0.04); backdrop-filter: blur(12px); filter: blur(8px); opacity: 0.3; transition: filter 0.8s ease-out, opacity 0.6s ease-out, border-color 0.8s ease, background 0.8s ease, transform 0.8s ease; } .cell::before { content: ""; position: absolute; inset: -30%; pointer-events: none; background: radial-gradient(circle at 25% 25%, rgba(245, 239, 230, 0.06), transparent 35%), radial-gradient(circle at 80% 70%, rgba(139, 58, 92, 0.16), transparent 35%); opacity: 0.65; } .cell:hover { transform: translateY(-6px); border-color: rgba(196, 112, 126, 0.34); background: rgba(245, 239, 230, 0.065); } .cell > * { position: relative; z-index: 1; } .span-2 { grid-column: span 2; } .tall { grid-row: span 2; min-height: 430px; } .cell h3 { color: #f5efe6; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.8rem); line-height: 1.15; letter-spacing: 0.03em; margin-bottom: 1rem; } .cell p { max-width: 58ch; color: #d4c9b8; } .dark { background: rgba(22, 26, 46, 0.42); border-color: rgba(245, 239, 230, 0.055); backdrop-filter: blur(16px); } .dark h3 { color: rgba(245, 239, 230, 0.9); } .abyssal { background: rgba(13, 15, 26, 0.62); border-color: rgba(245, 239, 230, 0.035); backdrop-filter: blur(20px); } .abyssal p { color: rgba(212, 201, 184, 0.68); } .returning { background: rgba(245, 239, 230, 0.075); border-color: rgba(245, 239, 230, 0.13); } .visual-cell { align-items: center; justify-content: center; text-align: center; gap: 1.5rem; } .mini-moon, .bottom-moon { width: clamp(90px, 13vw, 170px); height: clamp(90px, 13vw, 170px); border-radius: 50%; background: radial-gradient(circle at 42% 40%, rgba(245, 239, 230, 0.65), rgba(245, 239, 230, 0.2) 48%, rgba(139, 58, 92, 0.09) 72%, transparent 82%); filter: blur(3px); box-shadow: 0 0 50px rgba(245, 239, 230, 0.12), 0 0 90px rgba(196, 112, 126, 0.08); animation: smallPulse 6s ease-in-out infinite; } .bottom-moon { width: clamp(120px, 18vw, 240px); height: clamp(120px, 18vw, 240px); opacity: 0.8; } .orbital-rings { position: relative; width: 190px; height: 190px; } .orbital-rings i { position: absolute; inset: 20%; border: 1px solid rgba(196, 112, 126, 0.2); border-radius: 50%; transform: rotateX(68deg) rotateZ(var(--r, 0deg)); box-shadow: 0 0 20px rgba(139, 58, 92, 0.16); } .orbital-rings i:nth-child(2) { inset: 6%; --r: 55deg; } .orbital-rings i:nth-child(3) { inset: 34%; --r: 115deg; background: rgba(245, 239, 230, 0.08); } .glow-creature { width: 130px; height: 130px; border-radius: 46% 54% 58% 42%; background: radial-gradient(circle at 45% 35%, rgba(196,112,126,0.48), rgba(139,58,92,0.18) 42%, transparent 70%); box-shadow: 0 0 12px 4px rgba(139, 58, 92, 0.4), 0 0 70px rgba(196, 112, 126, 0.16); animation: creature 4.5s ease-in-out infinite; } .pulse { position: absolute; z-index: 0; width: 6px; height: 6px; border-radius: 50%; background: rgba(196, 112, 126, 0.55); box-shadow: 0 0 12px 4px rgba(139, 58, 92, 0.4); animation: bioPulse 3s ease-in-out infinite; } .p1 { top: 9%; left: 14%; animation-duration: 2.3s; } .p2 { top: 18%; right: 16%; animation-duration: 3.8s; animation-delay: -1s; } .p3 { top: 31%; left: 49%; animation-duration: 4.6s; animation-delay: -2s; } .p4 { top: 43%; right: 24%; animation-duration: 2.9s; animation-delay: -0.4s; } .p5 { top: 55%; left: 19%; animation-duration: 5s; animation-delay: -1.5s; } .p6 { top: 66%; right: 10%; animation-duration: 3.2s; animation-delay: -2.4s; } .p7 { top: 78%; left: 40%; animation-duration: 4.2s; animation-delay: -0.8s; } .p8 { top: 88%; right: 34%; animation-duration: 2.6s; animation-delay: -1.7s; } .p9 { top: 94%; left: 12%; animation-duration: 4.8s; animation-delay: -3s; } @keyframes smallPulse { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.05); opacity: 1; } } @keyframes creature { 0%, 100% { transform: scale(0.92) rotate(-4deg); opacity: 0.55; } 50% { transform: scale(1.08) rotate(5deg); opacity: 1; } } @keyframes bioPulse { 0%, 100% { transform: scale(0.7); opacity: 0.2; } 50% { transform: scale(1.65); opacity: 1; } } @media (max-width: 760px) { .span-2 { grid-column: span 1; } .tall { grid-row: span 1; min-height: 320px; } .hero-whisper { margin-top: 56vh; } }