/* Intro (Stage 3): logo start screen → camera pushes through long grass → home. js/intro.js drives every transform from scroll progress; this file sets the stage. Without JS (no .js on ) the intro is skipped and the page starts at the home. */ .intro { display: none; } .js .intro { display: block; position: fixed; inset: 0; z-index: 50; overflow: hidden; contain: strict; } .js .intro.is-through { pointer-events: none; } .js .intro.is-done { visibility: hidden; } /* the scroll distance the intro plays over; the hero is pinned for exactly this long */ .js .intro-spacer { height: 170vh; } .js .intro-pin { position: sticky; top: 0; } .intro-bg { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 42%, rgba(143, 203, 170, .16), transparent 70%), radial-gradient(120% 80% at 50% 110%, #1b3326, transparent 60%), var(--bg); } /* "inside the grass" wash: deep green that thickens while pushing through */ .intro-deep { position: absolute; inset: 0; opacity: 0; background: radial-gradient(90% 70% at 50% 40%, #16301f, #0a160f 80%); } /* ---------- logo ---------- */ .intro-logo { position: absolute; left: 50%; top: 42%; width: min(92vw, 640px); display: grid; justify-items: center; text-align: center; transform: translate(-50%, -50%); } .intro-lotus { width: clamp(120px, 34vw, 190px); height: auto; overflow: visible; } .intro-lotus .p { fill: var(--sage); transform-box: fill-box; transform-origin: 50% 100%; } .intro-lotus .p-base { fill: none; stroke: var(--sage); stroke-width: 2.2; stroke-linecap: round; } .intro-name { margin: 18px 0 0; font: 800 clamp(22px, 6.8vw, 46px)/1.05 var(--f-brand); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); } .intro-tag { margin: 10px 0 0; font: 500 clamp(11px, 3vw, 15px)/1.3 var(--f-brand); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .intro-rule { width: 110px; height: 4px; margin-top: 18px; border-radius: 4px; background: var(--sage); } .intro-badge { position: absolute; top: calc(18px + env(safe-area-inset-top)); right: 18px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: .95; background: radial-gradient(circle at 35% 30%, #cdeedb, var(--sage) 70%); color: #10201a; transform: rotate(-8deg); box-shadow: 0 8px 24px -8px rgba(143, 203, 170, .6), inset 0 0 0 4px rgba(16, 32, 26, .12); } /* entrance: petals unfold, words rise, rule draws */ .intro-lotus .p { animation: bloom 1.1s cubic-bezier(.2, .9, .25, 1.1) both; } .intro-lotus .p-l2, .intro-lotus .p-r2 { animation-delay: .05s; } .intro-lotus .p-l1, .intro-lotus .p-r1 { animation-delay: .2s; } .intro-lotus .p-c { animation-delay: .35s; } .intro-lotus .p-l2 { --r: 35deg; } .intro-lotus .p-l1 { --r: 18deg; } .intro-lotus .p-r2 { --r: -35deg; } .intro-lotus .p-r1 { --r: -18deg; } .intro-lotus .p-base { animation: fade-in .6s .6s both; } .intro-name { animation: rise .8s .55s cubic-bezier(.2, .8, .2, 1) both; } .intro-tag { animation: rise .8s .7s cubic-bezier(.2, .8, .2, 1) both; } .intro-rule { animation: draw .9s .85s cubic-bezier(.65, 0, .35, 1) both; } /* fill "backwards" (not "both") so the scroll-driven inline opacity wins once they have played */ .intro-badge { animation: pop .7s 1.1s cubic-bezier(.2, .9, .3, 1.4) backwards; } /* ---------- grass ---------- */ .intro-grass { position: absolute; inset: 0; } .grass-layer { position: absolute; left: -8%; right: -8%; bottom: 0; height: 92%; transform-origin: 50% 100%; will-change: transform; } .grass-half { position: absolute; inset: 0; will-change: transform; } .grass-sway { position: absolute; inset: 0; transform-origin: 50% 100%; animation: sway var(--sway, 6s) ease-in-out infinite alternate; } .grass-sway svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .grass-sway path { stroke: none; } /* ---------- cue ---------- */ .intro-cue { position: absolute; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); z-index: 2; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 8px 16px; border: 0; background: none; color: var(--mint); cursor: pointer; font: 600 24px/1 var(--f-script); white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); animation: fade-in .8s 1.4s backwards; -webkit-tap-highlight-color: transparent; } .intro-cue svg { width: 26px; height: 26px; stroke-width: 2.2; animation: nudge 1.6s ease-in-out infinite; } .intro-cue:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: 12px; } @keyframes bloom { from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.4); } to { opacity: 1; transform: none; } } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pop { from { opacity: 0; transform: rotate(-30deg) scale(.4); } to { opacity: 1; transform: rotate(-8deg) scale(1); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes sway { from { transform: skewX(-2.2deg); } to { transform: skewX(2.2deg); } } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (min-width: 900px) { .intro-badge { top: 28px; right: 32px; width: 104px; height: 104px; } .intro-badge .quote-free { font-size: 25px; } .intro-badge .quote-quotes { font-size: 22px; } .intro-badge .quote-no { font-size: 8px; } .grass-layer { height: 86%; } }