/* /seek — the page is a small seeking. Self-contained. The hour's light is set on before first paint; every color rides these tokens. */ :root { --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Lato", -apple-system, system-ui, sans-serif; --measure: 620px; --gutter: clamp(24px, 5vw, 48px); /* day */ --paper: #F6F1E6; --paper-deep: #EDE5D3; --ink: #2B241F; --ink-soft: #3C2E24; --ink-fog: #756A60; --halo: #C7A14F; --halo-soft: rgba(199, 161, 79, 0.35); --fog-tint: rgba(214, 205, 188, 0.85); } html[data-hour="golden"] { --paper: #F5E7CF; --paper-deep: #EDD9B8; --ink: #35281C; --ink-soft: #4A3722; --ink-fog: #8A7457; --halo: #D9A662; --halo-soft: rgba(217, 166, 98, 0.42); --fog-tint: rgba(226, 205, 170, 0.85); } html[data-hour="night"] { --paper: #10131F; --paper-deep: #141228; --ink: #E8E0FF; --ink-soft: #D8CCEF; --ink-fog: #8A84A8; --halo: #C8C0FF; --halo-soft: rgba(200, 192, 255, 0.30); --fog-tint: rgba(26, 24, 52, 0.88); } html { background: var(--paper); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 19px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin: 0; transition: background 1.2s ease, color 1.2s ease; } /* ========== Fog ========== */ .fog { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: var(--fog-opacity, 0.9); transition: opacity 2.8s ease; } .fog-blob { position: absolute; border-radius: 50%; filter: blur(60px); background: radial-gradient(circle, var(--fog-tint) 0%, transparent 70%); } .fog-blob--1 { width: 90vw; height: 70vh; top: -10vh; left: -20vw; animation: fog-drift-1 26s ease-in-out infinite alternate; } .fog-blob--2 { width: 80vw; height: 80vh; bottom: -20vh; right: -25vw; animation: fog-drift-2 34s ease-in-out infinite alternate; } .fog-blob--3 { width: 60vw; height: 50vh; top: 30vh; left: 20vw; animation: fog-drift-3 30s ease-in-out infinite alternate; } @keyframes fog-drift-1 { from { transform: translate(0, 0); } to { transform: translate(8vw, 4vh); } } @keyframes fog-drift-2 { from { transform: translate(0, 0); } to { transform: translate(-7vw, -5vh); } } @keyframes fog-drift-3 { from { transform: translate(0, 0); } to { transform: translate(-5vw, 6vh); } } @media (prefers-reduced-motion: reduce) { .fog-blob { animation: none; } } html.revealed .fog { opacity: 0.12; } /* While the stillness ring fills, the fog breathes with you — in for a beat, out for a beat, three times to the clearing. */ html.filling .fog { animation: fog-breath 3s ease-in-out 3; } @keyframes fog-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @media (prefers-reduced-motion: reduce) { html.filling .fog { animation: none; } } /* ========== The world beneath ========== Dreamlike from afar; arrives as you near. --world-clarity runs 0..1. */ .world { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: calc(0.06 + var(--world-clarity, 0) * 0.5); filter: blur(calc((1 - var(--world-clarity, 0)) * 26px)) saturate(calc(0.55 + var(--world-clarity, 0) * 0.65)); transition: opacity 1.6s ease, filter 1.6s ease; } html.revealed .world { opacity: 0.62; filter: blur(2px) saturate(1.15); } .world-disc { position: absolute; left: 50%; top: 16vh; width: 15vmin; height: 15vmin; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, var(--halo) 0%, var(--halo-soft) 55%, transparent 75%); } .world-hill { position: absolute; border-radius: 50%; background: var(--ink-fog); } .world-hill--far { width: 130vw; height: 42vh; bottom: -26vh; left: -32vw; opacity: 0.28; } .world-hill--mid { width: 120vw; height: 38vh; bottom: -25vh; right: -40vw; opacity: 0.42; } .world-hill--near { width: 150vw; height: 34vh; bottom: -24vh; left: -25vw; opacity: 0.6; } /* Night grows stars — the page's constellation mode. */ .stars { position: absolute; inset: 0; display: none; } html[data-hour="night"] .stars { display: block; } .star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--ink); animation: star-twinkle var(--twinkle, 4s) ease-in-out infinite; } @keyframes star-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .star { animation: none; opacity: 0.6; } } /* ========== Crescent ========== */ .crescent { position: fixed; left: 50%; top: 56%; z-index: 3; color: var(--halo); opacity: 0; filter: drop-shadow(0 0 calc(4px + var(--crescent-glow, 0.5) * 8px) var(--halo-soft)); transform: translate(-50%, -50%); transition: opacity 1.4s ease; pointer-events: none; } html.seeking .crescent { opacity: var(--crescent-glow, 0.5); } html.revealed .crescent { opacity: 0; } .crescent svg { transform: rotate(var(--crescent-angle, 90deg)); transition: transform 0.9s ease; animation: crescent-breathe var(--pulse-period, 3s) ease-in-out infinite; } #crescent-arc { transition: stroke-dasharray 0.9s ease, stroke-dashoffset 0.9s ease; } @keyframes crescent-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.09; } } @media (prefers-reduced-motion: reduce) { .crescent svg { animation: none; } } .crescent-hint { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); width: max-content; max-width: 80vw; text-align: center; font-style: italic; font-size: 15px; color: var(--ink-fog); margin: 0; opacity: 0; transition: opacity 1.4s ease; } html.seeking .crescent-hint.showing { opacity: 0.9; } /* ========== Stillness prompt ========== */ .stillness { position: fixed; left: 50%; bottom: clamp(48px, 12vh, 120px); transform: translateX(-50%); z-index: 4; text-align: center; color: var(--ink-soft); opacity: 0; pointer-events: none; transition: opacity 1.2s ease; } html.in-zone:not(.revealed) .stillness { opacity: 1; } .stillness-ring { color: var(--halo); } #stillness-fill { transition: none; } .stillness-text { font-style: italic; font-size: 20px; margin: 10px 0 0; letter-spacing: 0.02em; } .stillness-sub { font-family: var(--sans); font-weight: 300; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-fog); margin: 6px 0 0; } .stillness-fallback { pointer-events: auto; background: none; border: none; border-bottom: 1px solid var(--ink-fog); color: var(--ink-fog); font-family: var(--sans); font-weight: 300; font-size: 13px; margin-top: 14px; padding: 0 0 2px; cursor: pointer; } /* ========== Arrival ========== */ main { position: relative; z-index: 1; } .arrival { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(48px, 8vh, 96px) var(--gutter); box-sizing: border-box; position: relative; z-index: 3; /* above the fog: the door stands clear before the walk */ } .hour-line { margin: 0 0 clamp(24px, 4vh, 48px); } .hour-cycle { background: none; border: none; color: var(--ink-fog); font-family: var(--sans); font-weight: 300; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; padding: 4px 8px; } .hour-cycle:hover { color: var(--halo); } .arrival h1 { font-size: clamp(44px, 9vw, 84px); line-height: 1.08; font-weight: 400; font-style: italic; color: var(--ink-soft); margin: 0 0 clamp(28px, 5vh, 56px); letter-spacing: -0.01em; } .arrival-lede { max-width: var(--measure); color: var(--ink-soft); margin: 0 0 1em; } .arrival-lede--second { color: var(--ink-fog); } .intention { margin-top: clamp(28px, 5vh, 56px); display: flex; flex-direction: column; align-items: center; gap: 14px; } .intention label { font-style: italic; font-size: 22px; color: var(--ink-soft); } .intention input { background: transparent; border: none; border-bottom: 1px solid var(--ink-fog); color: var(--ink); font-family: var(--serif); font-style: italic; font-size: 24px; text-align: center; padding: 6px 12px; width: min(320px, 80vw); outline: none; } .intention input:focus { border-bottom-color: var(--halo); } .intention input::placeholder { color: var(--ink-fog); opacity: 0.7; } .arrival-actions { display: flex; align-items: center; gap: 22px; margin-top: 10px; flex-wrap: wrap; justify-content: center; } .begin { background: none; border: 1px solid var(--halo); border-radius: 999px; color: var(--ink); font-family: var(--serif); font-size: 19px; padding: 12px 28px; cursor: pointer; transition: background 0.4s ease, box-shadow 0.4s ease; } .begin:hover { background: var(--halo-soft); box-shadow: 0 0 24px var(--halo-soft); } .sound-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; color: var(--ink-fog); font-family: var(--sans); font-weight: 300; font-size: 14px; cursor: pointer; padding: 6px 4px; } .sound-toggle[aria-pressed="true"] { color: var(--halo); } .noscript-note { margin-top: 32px; color: var(--ink-fog); font-size: 16px; } .noscript-note a { color: var(--ink-soft); } /* ========== The path ========== */ .path { position: relative; height: 520svh; } .waymark { position: absolute; left: 50%; transform: translateX(-50%); width: min(480px, 78vw); text-align: center; font-style: italic; font-size: clamp(19px, 2.6vw, 24px); color: var(--ink-fog); opacity: 0; transition: opacity 2s ease; margin: 0; z-index: 1; } .waymark.seen { opacity: 0.85; } /* Once the clearing opens, the waymarks bow out with the fog. */ html.revealed .waymark { opacity: 0; } /* ========== The clearing ========== */ .clearing { position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(560px, 88vw); text-align: center; } .clearing-halo { position: absolute; left: 50%; top: 50%; width: 130vmin; height: 130vmin; transform: translate(-50%, -50%); background: radial-gradient(circle, var(--halo-soft) 0%, rgba(0, 0, 0, 0) 62%); opacity: 0; transition: opacity 3s ease; pointer-events: none; } html.in-zone .clearing-halo { opacity: 0.45; } html.revealed .clearing-halo { opacity: 1; } .clearing-card { position: relative; opacity: 0; visibility: hidden; transition: opacity 2.2s ease 0.6s; outline: none; } html.revealed .clearing-card { opacity: 1; visibility: visible; } .clearing-found { font-family: var(--sans); font-weight: 300; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-fog); margin: 0 0 18px; } .clearing-word { font-size: clamp(40px, 8vw, 64px); font-style: italic; line-height: 1.1; color: var(--ink); margin: 0 0 26px; overflow-wrap: break-word; } .clearing-line { font-size: clamp(20px, 3vw, 25px); color: var(--ink-soft); margin: 0 auto 20px; max-width: 26ch; } .clearing-date { font-family: var(--sans); font-weight: 300; font-size: 13px; color: var(--ink-fog); margin: 0 0 28px; } .clearing-seed { font-family: var(--sans); font-weight: 300; font-size: 13px; color: var(--ink-fog); max-width: 44ch; margin: 0 auto 18px; } .clearing-practice { font-size: 17px; font-style: italic; color: var(--ink-fog); max-width: 40ch; margin: 0 auto 30px; } .clearing-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; } .clearing-actions button { background: none; border: 1px solid var(--ink-fog); border-radius: 999px; color: var(--ink); font-family: var(--serif); font-size: 17px; padding: 10px 24px; cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease; } .clearing-actions button:hover { border-color: var(--halo); background: var(--halo-soft); } #keepsake-btn { border-color: var(--halo); } /* ========== The story ========== */ .story { position: relative; z-index: 3; max-width: var(--measure); margin: 0 auto; padding: clamp(80px, 14vh, 160px) var(--gutter) clamp(64px, 10vh, 120px); } .story h2 { font-size: clamp(32px, 5vw, 44px); font-weight: 400; font-style: italic; color: var(--ink-soft); margin: 0 0 1em; } .story p { margin: 0 0 1.4em; color: var(--ink-soft); } .story-seed { color: var(--ink); } .story-promise { font-style: italic; color: var(--ink-fog); border-left: 2px solid var(--halo); padding-left: 18px; } .store-badges { display: flex; gap: 18px; flex-wrap: wrap; margin: clamp(40px, 6vh, 64px) 0 0; } .store-link { border: 1px solid var(--ink-fog); border-radius: 999px; color: var(--ink); text-decoration: none; font-family: var(--sans); font-weight: 300; font-size: 15px; padding: 12px 24px; transition: border-color 0.3s ease, background 0.3s ease; } .store-link:hover { border-color: var(--halo); background: var(--halo-soft); } .seek-footer { display: flex; justify-content: space-between; margin-top: clamp(64px, 10vh, 120px); font-family: var(--sans); font-weight: 300; font-size: 14px; } .seek-footer a { color: var(--ink-fog); text-decoration: none; border-bottom: 1px solid transparent; } .seek-footer a:hover { color: var(--ink-soft); border-bottom-color: var(--ink-fog); }