/* ============================================================ Sanna van Rhene — Ceramic Artist A dark stage. Sun rakes in from the top-left and rests on a potter's wheel at the centre. Her name is thrown on the wheel, unfolds into the title, and — as you scroll — folds back in while the work rises and the sun pans to centre. Scroll progress (0 = hero, 1 = work) is published by app.js as the custom property --p on , plus a few derived vars. ============================================================ */ :root { --black: #050403; --brown-deep: #160c06; --brown-warm: #281708; --brown-glow: #3a230e; --wheel-size: clamp(380px, 56vmin, 720px); --tilt: 59deg; /* matches the disc's baked perspective */ --unsquash: 1.94; /* 1 / cos(tilt) — recovers a round disc */ --hole-x: 50.5%; /* the wheel's axis in the image */ --hole-y: 44.6%; /* reserved top zone for the docked masthead — work stays below it */ --header-h: clamp(128px, 16vh, 185px); /* driven by JS — defaults match the resting (hero) state */ --p: 0; /* scroll progress 0..1 */ --fold: 0; /* name fold 0 (open) .. 1 (folded) */ } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: var(--black); } /* gentle snap so each work piece settles centred, clear of the masthead */ html { scroll-snap-type: y proximity; /* the piece reserves the header via padding-top, so snap centring uses no extra top padding (avoids double-counting the header) */ scroll-padding-top: 0; } body { font-family: "Georgia", "Times New Roman", serif; color: #f0e7da; -webkit-font-smoothing: antialiased; } /* persistent atmosphere — a brown heart fading to black, fixed behind the whole page so the warmth never abruptly stops at the work */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient( ellipse 70% 60% at 50% 44%, var(--brown-glow) 0%, var(--brown-warm) 26%, var(--brown-deep) 52%, var(--black) 84% ); } /* ---------- Pinned hero ---------- */ /* The hero-pin is tall; the stage sticks to the top through it, then releases so the work scrolls up underneath. */ .hero-pin { height: 220vh; /* the scroll room for the choreography */ } .stage { position: sticky; top: 0; height: 100vh; overflow: hidden; isolation: isolate; } /* ---------- Layer 1: ground tone ---------- */ .ground { position: absolute; inset: 0; z-index: 0; background: radial-gradient( ellipse 65% 65% at 50% 52%, var(--brown-glow) 0%, var(--brown-warm) 24%, var(--brown-deep) 50%, var(--black) 80% ); } /* ---------- Layer 2: the sun ---------- */ /* directional rake from the top-left corner — fades out as the sun moves to centre (opacity driven by JS) */ .sun-rake { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 135deg, rgba(255, 228, 182, 0.34) 0%, rgba(255, 216, 160, 0.16) 13%, rgba(255, 202, 140, 0.05) 30%, transparent 48% ); will-change: opacity; } /* the warm pool of light; JS slides it from up-left to centre */ .sun-pool { position: absolute; z-index: 1; top: 50%; left: 50%; width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax; pointer-events: none; background: radial-gradient( circle at 50% 50%, rgba(255, 224, 174, 0.26) 0%, rgba(255, 206, 150, 0.10) 26%, transparent 55% ); will-change: transform, opacity; } /* ---------- Layer 3: the potter's wheel ---------- */ .wheel-area { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; perspective: 1500px; perspective-origin: 50% 50%; } /* a soft shadow grounding the disc (flat on the floor, not tilted) */ .wheel-shadow { position: absolute; z-index: -1; left: 50%; top: 56%; width: calc(var(--wheel-size) * 0.86); height: calc(var(--wheel-size) * 0.42); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 70%); filter: blur(20px); } /* the perspective tilt lives here; the spin happens inside it */ .wheel { position: relative; width: var(--wheel-size); height: var(--wheel-size); transform: translateY(7%) rotateX(var(--tilt)); transform-origin: var(--hole-x) var(--hole-y); transform-style: preserve-3d; } /* scroll-driven spin (JS sets rotateZ here) */ .wheel__spin { position: absolute; inset: 0; transform-origin: var(--hole-x) var(--hole-y); transform-style: preserve-3d; will-change: transform; } /* gentle continuous idle spin */ .wheel__idle { position: absolute; inset: 0; transform-origin: var(--hole-x) var(--hole-y); transform-style: preserve-3d; animation: spin-idle 60s linear infinite; } /* on load the wheel spins fast and decelerates as the name enters; it ends on a whole number of turns so the idle spin continues seamlessly afterwards */ .is-intro .wheel__idle { animation: wheel-throw 2.9s cubic-bezier(0.10, 0.62, 0.18, 1) both; } @keyframes wheel-throw { from { transform: rotate(0deg); } to { transform: rotate(2160deg); } /* 6 fast turns, slowing in */ } /* the wood disc, un-squashed so it spins as a round turntable */ .wheel__img { display: block; width: 100%; height: 100%; transform: scaleY(var(--unsquash)); transform-origin: var(--hole-x) var(--hole-y); } @keyframes spin-idle { to { transform: rotate(360deg); } } /* ---------- Layer 4: the name (brand) ---------- */ /* Fixed and outside the stage so it persists over the work. */ .brand { position: fixed; inset: 0; z-index: 50; pointer-events: none; } /* JS drives this element: centred on the wheel → spins in → docks top-left at the same size, where it stays while you browse. */ .brand__inner { position: absolute; top: 0; left: 0; display: inline-block; text-align: center; transform-origin: 50% 50%; will-change: transform, opacity; } .brand__inner.docked { text-align: left; } .title { font-weight: 400; font-size: clamp(2.1rem, 8.5vw, 7rem); letter-spacing: 0.04em; line-height: 1; color: #fbf3e6; text-shadow: 0 2px 30px rgba(0,0,0,0.6), 0 0 60px rgba(255,210,150,0.12); perspective: 600px; /* so letters can fold in 3D */ } .title .letter { display: inline-block; transform-origin: 50% 100%; } .title .space { display: inline-block; width: 0.3em; } .subhead { margin-top: clamp(10px, 2vh, 22px); font-size: clamp(0.9rem, 1.8vw, 1.2rem); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; color: #f6ecdd; /* dark halo so it stays legible over the busy wheel texture */ text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 16px rgba(0,0,0,0.75); opacity: 0; } /* ---------- Layer 6: vignette ---------- */ .vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient( ellipse 82% 82% at 50% 50%, transparent 52%, rgba(0,0,0,0.45) 86%, rgba(0,0,0,0.8) 100% ); } /* ---------- scroll cue ---------- */ .scroll-cue { position: absolute; left: 50%; bottom: 4vh; z-index: 7; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.85rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(220, 205, 185, 0.6); opacity: 0; pointer-events: none; } .scroll-cue__arrow { font-size: 1.1rem; animation: nudge 1.8s ease-in-out infinite; } @keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* ---------- top scrim ---------- Masks the work as it scrolls up into the header zone, so nothing ever sits visibly under the masthead. JS fades it in once the name has docked (kept off during the hero so the top-left sun shows). */ .top-scrim { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 40; pointer-events: none; opacity: 0; background: linear-gradient( to bottom, #0a0604 0%, #0a0604 62%, rgba(10, 6, 4, 0) 100% ); } /* ---------- fixed credit (bottom-right, quiet grey) ---------- */ .credit { position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(12px, 2vh, 22px); z-index: 60; font-size: 0.72rem; letter-spacing: 0.04em; color: #7d7468; text-shadow: 0 1px 3px rgba(0,0,0,0.7); pointer-events: auto; } .credit a { color: #9a9082; text-decoration: none; border-bottom: 1px solid rgba(154, 144, 130, 0.35); transition: color 0.25s ease, border-color 0.25s ease; } .credit a:hover { color: #cdbba6; border-color: rgba(205, 187, 166, 0.6); } /* ============================================================ THE WORK — one piece at a time, alternating sides. Tiles are dark black; a vector artwork drops into each. ============================================================ */ .work { position: relative; z-index: 1; /* transparent: the fixed brown→black atmosphere shows through */ background: transparent; } .piece { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 120px); max-width: 1480px; min-height: 100vh; margin: 0 auto; /* top padding reserves the header zone so the work stays below it */ padding: var(--header-h) clamp(24px, 6vw, 96px) clamp(40px, 8vh, 100px); scroll-snap-align: center; } /* the dark art tile (placeholder frame for the vector) */ .piece__art { position: relative; /* large on desktop, but bounded to the space below the header */ height: min(calc(100vh - var(--header-h) - 8vh), 960px); aspect-ratio: 4 / 5; /* width derives from height, ratio preserved */ max-width: 100%; justify-self: center; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(120% 120% at 32% 24%, #0f0b08 0%, #050403 60%); border: 1px solid rgba(190, 150, 100, 0.16); box-shadow: 0 50px 100px rgba(0,0,0,0.6), inset 0 0 90px rgba(0,0,0,0.7); overflow: hidden; } .piece__art::after { /* faint top-left sheen, echoing the sun */ content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 28% 22%, rgba(255,225,180,0.06), transparent 70%); pointer-events: none; } .piece__index { font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 400; letter-spacing: 0.04em; color: rgba(255, 236, 208, 0.07); } /* artwork media fills the dark frame, clipped to its rounded corners */ .piece__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* the text beside it */ .piece__text { align-self: center; justify-self: start; max-width: 36rem; text-align: left; } .piece__eyebrow { font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(210, 160, 110, 0.75); margin-bottom: 1.1em; } .piece__title { font-weight: 400; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.1; color: #fbf3e6; } .piece__meta { margin-top: 0.7em; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: #a8987f; } .piece__desc { margin-top: 1.3em; max-width: 38ch; line-height: 1.75; font-size: 1.04rem; color: #cdbba6; } /* alternate: even pieces put the art on the right, text on the left */ .piece:nth-child(even) .piece__art { order: 2; } .piece:nth-child(even) .piece__text { order: 1; justify-self: end; text-align: right; } .piece:nth-child(even) .piece__desc { margin-left: auto; } /* entrance — revealed one at a time as it scrolls into view */ .piece__art, .piece__text { opacity: 0; transform: translateY(34px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); } .piece__text { transition-delay: 0.12s; } .piece.in .piece__art, .piece.in .piece__text { opacity: 1; transform: none; } /* stack on narrow screens — art always on top */ @media (max-width: 760px) { .piece { grid-template-columns: 1fr; gap: 30px; min-height: auto; /* reserve the header zone on top here too */ padding: calc(var(--header-h) + 2vh) 26px clamp(60px, 9vh, 96px); } /* shorter tile on mobile so stacked content clears the fixed credit */ .piece__art { height: min(44vh, 360px); } .piece__art, .piece:nth-child(even) .piece__art { order: 0; } .piece__text, .piece:nth-child(even) .piece__text { order: 1; justify-self: start; text-align: left; } .piece:nth-child(even) .piece__desc { margin-left: 0; } /* keep the last piece's text clear of the fixed credit */ .work { padding-bottom: 88px; } /* centred on one line at the very bottom (sized by vw so it fits) */ .credit { left: 12px; right: 12px; bottom: 10px; max-width: none; text-align: center; white-space: nowrap; letter-spacing: 0.02em; line-height: 1.4; font-size: clamp(7.5px, 2.7vw, 12px); } } /* ============================================================ NAVIGATION — a single "Menu" button (top-right) that opens a full-screen overlay. Identical on phone and desktop. The overlay holds the menu; tapping a link swaps to a placeholder "page". ============================================================ */ .nav { position: fixed; top: clamp(20px, 5vh, 48px); right: clamp(20px, 4.5vw, 60px); z-index: 70; /* held back during the intro, handed in once the name settles */ opacity: 0; pointer-events: none; transition: opacity 1s ease 0.4s; } .is-ready .nav { opacity: 1; pointer-events: auto; } .nav__toggle { display: inline-flex; align-items: center; gap: 12px; padding: 8px 4px; background: none; border: 0; cursor: pointer; color: #f0e7da; font-family: inherit; } .nav__toggle-label { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 600; /* dark halo so it stays legible over the bright hero */ text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 16px rgba(0,0,0,0.75); transition: color 0.25s ease; } .nav__toggle-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 26px; } .nav__toggle-icon span { display: block; height: 1.5px; width: 100%; background: currentColor; box-shadow: 0 1px 2px rgba(0,0,0,0.6); } .nav__toggle:hover .nav__toggle-label { color: #e9c79b; } /* on phones the docked name can reach across the top, so drop the "Menu" word and keep just the icon (desktop keeps both) */ @media (max-width: 760px) { .nav__toggle-label { display: none; } } /* ---------- overlay ---------- */ .nav-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 8vh 24px; background: radial-gradient(ellipse 80% 80% at 50% 42%, rgba(40, 25, 10, 0.96) 0%, rgba(12, 7, 4, 0.985) 70%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s linear 0.5s; } .nav-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0s; } .nav-overlay__close { position: absolute; top: clamp(16px, 4.5vh, 44px); right: clamp(18px, 4.5vw, 56px); width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: #d8c6b0; font-size: 2.4rem; line-height: 1; font-family: inherit; transition: color 0.25s ease, transform 0.25s ease; } .nav-overlay__close:hover { color: #f3e7d4; transform: rotate(90deg); } /* ---------- menu view ---------- */ .nav-menu { list-style: none; text-align: center; display: flex; flex-direction: column; gap: clamp(16px, 4vh, 38px); } .nav-menu[hidden], .nav-page[hidden] { display: none; } .nav-menu__link { background: none; border: 0; cursor: pointer; font-family: inherit; color: #f4ebdc; font-size: clamp(2.1rem, 7vw, 4rem); font-weight: 400; letter-spacing: 0.05em; line-height: 1.1; transition: color 0.25s ease, letter-spacing 0.25s ease; } .nav-menu__link:hover { color: #e9c79b; letter-spacing: 0.1em; } /* staggered entrance when the overlay opens */ .nav-overlay.open .nav-menu__link { animation: nav-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .nav-menu li:nth-child(1) .nav-menu__link { animation-delay: 0.08s; } .nav-menu li:nth-child(2) .nav-menu__link { animation-delay: 0.16s; } .nav-menu li:nth-child(3) .nav-menu__link { animation-delay: 0.24s; } @keyframes nav-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ---------- placeholder "page" view ---------- */ .nav-page { text-align: center; position: relative; } .nav-page__back { display: inline-block; margin-bottom: clamp(24px, 5vh, 48px); background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(210, 160, 110, 0.85); transition: color 0.25s ease; } .nav-page__back:hover { color: #e9c79b; } .nav-page__title { font-weight: 400; font-size: clamp(2.2rem, 7vw, 4rem); letter-spacing: 0.04em; color: #fbf3e6; } .nav-page__soon { margin-top: 1.1em; font-size: clamp(0.95rem, 2vw, 1.2rem); letter-spacing: 0.18em; text-transform: uppercase; color: #a8987f; } /* lock the page scroll while the overlay is open */ body.nav-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .nav-overlay.open .nav-menu__link { animation: none; } .nav-overlay__close:hover { transform: none; } } /* ============================================================ INTRO — runs once on load. The title is thrown on the wheel (fast blurred spin), decelerates, then the letters unfold. ============================================================ */ .is-intro .title { animation: throw-spin 2.4s cubic-bezier(0.12, 0.62, 0.16, 1) both; } .is-intro .title .letter { opacity: 0; transform: rotateX(90deg); animation: unfold 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(1.75s + var(--i) * 0.05s); } @keyframes throw-spin { 0% { transform: rotate(1260deg) scale(0.5); filter: blur(16px); opacity: 0; } 35% { opacity: 1; } 100% { transform: rotate(0deg) scale(1); filter: blur(0); opacity: 1; } } @keyframes unfold { 0% { opacity: 0; transform: rotateX(90deg); } 100% { opacity: 1; transform: rotateX(0deg); } } /* once the intro is done, reveal the subhead and cue the scroll */ .is-ready .subhead { opacity: 1; transition: opacity 1s ease 0.1s; } .is-ready .scroll-cue { opacity: 1; transition: opacity 1s ease 0.3s; } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .wheel__idle, .is-intro .wheel__idle { animation: none; } .is-intro .title { animation: none; } .is-intro .title .letter { animation: none; opacity: 1; transform: none; } .scroll-cue__arrow { animation: none; } .piece__art, .piece__text { opacity: 1; transform: none; transition: none; } }