/* ========================================================================== Dr Kamsiah Dental Clinic — Grand Opening invitation Uses tokens from /css/tokens.css (linked first). No imports. Modes (set on by /js/boot.js): - no class : no JavaScript — static, fully readable page (default styles) - .js : JS present — curtain gate, preloader and dock exist - .motion : cinematic mode — pinned (sticky) scenes + initial hidden states - .reduced-motion: JS, but everything static; gate is a simple fade ========================================================================== */ :root { --dock-h: 64px; --dock-space: calc(var(--dock-h) + 22px + env(safe-area-inset-bottom, 0px)); --gutter: clamp(16px, 5vw, 40px); --measure: 60ch; /* Button fill: its lightest stop (#9a6b22) keeps cream label text ≥ 4.5:1. */ --btn-gold: linear-gradient(110deg, #6f460f 0%, #86591b 30%, #9a6b22 50%, #86591b 70%, #6f460f 100%); /* Gradient for gold display text on cream: its lightest stop (#a8782c, 3.6:1) keeps even thin italic strokes above 3:1. The bright --gold-gradient is kept for dark surfaces (finale) and decoration. */ --gold-text: linear-gradient(110deg, #7a5015 0%, #946622 26%, #a8782c 50%, #946622 74%, #7a5015 100%); --night: #461b1b; /* poster maroon, deep */ --night-2: #5c2626; /* poster maroon */ --glow: 241, 214, 140; } /* -------------------------------------------------------------------------- Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); color: var(--ink); overflow-x: clip; } /* Keyboard focus scrolling keeps fields clear of the fixed dock. */ html.js { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--dock-space) + 8px); } .nowrap { white-space: nowrap; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; background: var(--bg); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; } html.is-locked, html.is-locked body { overflow: hidden; } html.is-dusk { background: var(--night); } img, svg, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--gold-700); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } p { margin: 0; } h1, h2, h3 { margin: 0; font-weight: 500; } ul { margin: 0; padding: 0; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; } .poster__title:focus, .section-title:focus, .sheet__title:focus, .closed__title:focus, .pass:focus, .thanks:focus { outline: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 12px; top: -120px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--cream-50); color: var(--ink); font-weight: 500; text-decoration: none; box-shadow: var(--shadow-lift); transition: top 0.3s var(--ease-out); } .skip-link:focus-visible { top: 12px; } .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Paper grain — fixed, very subtle, same over every section so joins stay invisible */ .paper { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.55; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .17 0 0 0 0 .11 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* -------------------------------------------------------------------------- Typography helpers -------------------------------------------------------------------------- */ .container { width: min(100% - 2 * var(--gutter), 1100px); margin-inline: auto; } .container--narrow { width: min(100% - 2 * var(--gutter), 720px); } .eyebrow, .caption__eyebrow, .beat__label, .action-group__label, .countdown__label { font-family: var(--font-body); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-700); } .section-head { text-align: center; max-width: 40rem; margin: 0 auto clamp(28px, 6vw, 56px); } .section-head .eyebrow { margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px; } .section-head .eyebrow::before, .section-head .eyebrow::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-500)); transform-origin: 100% 50%; transition: transform 1.2s var(--ease-out) 0.25s; } .section-head .eyebrow::after { background: linear-gradient(270deg, transparent, var(--gold-500)); transform-origin: 0 50%; } .motion .section-head:not(.is-in) .eyebrow::before, .motion .section-head:not(.is-in) .eyebrow::after { transform: scaleX(0); } .section-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 8.4vw, 3.8rem); line-height: 1.04; letter-spacing: -0.005em; color: var(--brown-800); text-wrap: balance; } .section-title em, .finale__title em { font-style: italic; font-weight: 500; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 0.06em; margin: 0 -0.06em; } .finale__title em { background-image: var(--gold-gradient); } /* A lone hairline ampersand is too thin for a gradient: solid deep gold. */ .wishes .section-title em { background: none; color: var(--gold-700); -webkit-text-fill-color: currentColor; } .section-lede { margin: 16px auto 0; max-width: 34rem; color: var(--ink-soft); font-size: clamp(1rem, 3.6vw, 1.1rem); font-weight: 400; text-wrap: pretty; } .gold-text { background: var(--gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 24px; border-radius: 999px; border: 1px solid transparent; font-family: var(--font-body); font-weight: 500; font-size: 1rem; line-height: 1.2; letter-spacing: 0.02em; text-decoration: none; text-align: center; cursor: pointer; transition: translate 0.35s var(--ease-out), scale 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.35s, border-color 0.35s, color 0.35s; -webkit-user-select: none; user-select: none; } .btn .icon { width: 19px; height: 19px; } .btn:active { scale: 0.98; } .btn--gold { color: #fffdf8; font-weight: 600; background: var(--btn-gold); background-size: 220% 100%; background-position: 0% 0; border-color: rgba(122, 82, 22, 0.35); text-shadow: 0 1px 1px rgba(70, 40, 8, 0.45); box-shadow: 0 10px 24px -8px rgba(138, 95, 31, 0.55), inset 0 1px 0 rgba(255, 245, 214, 0.45); transition: translate 0.35s var(--ease-out), scale 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-position 0.9s var(--ease-out); } @media (hover: hover) { .btn--gold:hover { background-position: 100% 0; box-shadow: 0 14px 30px -10px rgba(138, 95, 31, 0.7), inset 0 1px 0 rgba(255, 245, 214, 0.5); } .btn--line:hover { background: var(--cream-50); border-color: var(--gold-600); } .btn--ghost:hover { background: rgba(198, 154, 67, 0.1); } } .btn--line { color: var(--brown-700); background: rgba(255, 253, 248, 0.55); border-color: rgba(198, 154, 67, 0.75); } .btn--line .icon { color: var(--gold-600); } .btn--ghost { color: var(--brown-700); background: transparent; border-color: var(--line); } .btn--line-light { color: var(--cream-100); background: rgba(255, 240, 210, 0.04); border-color: rgba(227, 191, 104, 0.7); } .btn--line-light .icon { color: var(--gold-400); } @media (hover: hover) { .btn--line-light:hover { background: rgba(227, 191, 104, 0.12); } } .btn--block { width: 100%; } .link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: none; border: 0; padding: 10px 8px; font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--gold-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; cursor: pointer; } /* -------------------------------------------------------------------------- Scene 0 — Preloader -------------------------------------------------------------------------- */ .preloader { display: none; } .js .preloader { display: grid; place-items: center; position: fixed; inset: 0; z-index: 90; } .preloader__bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(var(--glow), 0.14), rgba(var(--glow), 0) 42%), radial-gradient(150% 105% at 50% 48%, rgba(30, 8, 8, 0) 50%, rgba(30, 8, 8, 0.5) 100%), var(--maroon-700); } .preloader__inner { position: relative; display: grid; justify-items: center; gap: 26px; } .preloader__mark { width: 86px; height: auto; overflow: visible; will-change: transform; } .preloader__mark path { fill: var(--gold-400); fill-opacity: 1; stroke: var(--gold-400); stroke-width: 9; stroke-opacity: 0; } .motion .preloader__mark path { fill-opacity: 0; stroke-opacity: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: pl-draw 1.6s var(--ease-in-out) 0.1s forwards, pl-fill 0.7s ease 1.35s forwards; } @keyframes pl-draw { to { stroke-dashoffset: 0; } } @keyframes pl-fill { to { fill-opacity: 1; stroke-opacity: 0; } } .preloader__bar { width: 120px; height: 1px; overflow: hidden; background: rgba(227, 191, 104, 0.2); } .preloader__fill { display: block; height: 100%; width: 100%; background: var(--gold-gradient-soft); transform-origin: 0 50%; transform: scaleX(0.06); transition: transform 0.6s var(--ease-out); } /* If the script never arrives, the preloader bows out by itself. */ .boot-failed .preloader { display: none; } /* -------------------------------------------------------------------------- Poster world (SPEC §5A) — the maroon stage, tied-back velvet curtains and the gold glitter canopy. Shared by the gate, the poster (#home) and the finale. Curtain geometry: the drapes run the full scene height; their natural width is 198/1280 of it. Narrow phones squeeze them to ≤ 25vw and tuck up to 16% of their width off-canvas, which keeps the gold bows visible. -------------------------------------------------------------------------- */ .poster__stage, .finale__stage { --sh: max(600px, 100svh); --cw-n: calc(var(--sh) * 0.1547); --cw: min(var(--cw-n), max(78px, 25vw)); --co: clamp(0px, calc((var(--cw-n) - 25vw) * 0.5), calc(var(--cw) * 0.16)); } /* Maroon stage: watercolour mottling + a soft vignette (no images). */ .maroon-stage { background-color: var(--maroon-700); background-image: radial-gradient(115% 75% at 50% 40%, rgba(122, 52, 50, 0.05), rgba(92, 38, 38, 0) 62%), radial-gradient(150% 110% at 50% 46%, rgba(30, 8, 8, 0) 58%, rgba(30, 8, 8, 0.3) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .016' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .3 0 0 0 0 .28 0 0 0 .11 -.09'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='d' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .013' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .05 0 0 0 0 .05 0 0 0 .42 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E"); background-size: 100% 100%, 100% 100%, cover, cover; background-position: center; background-repeat: no-repeat; } /* Tied-back curtains (the poster's own drapes, cut from the approved artwork). */ .curtain { position: absolute; top: 0; bottom: 0; z-index: 3; width: var(--cw); pointer-events: none; } .curtain--l { left: calc(-1 * var(--co)); } .curtain--r { right: calc(-1 * var(--co)); } .curtain__drape { position: absolute; inset: 0; } /* Pivots on the outer top corner: the sway only ever swings outward, never opening a gap at the edge. */ .curtain--l .curtain__drape { transform-origin: 0 0; } .curtain--r .curtain__drape { transform-origin: 100% 0; } .curtain__drape img { width: 100%; height: 100%; max-width: none; object-fit: fill; filter: brightness(var(--lit, 1)) drop-shadow(0 0 18px rgba(24, 6, 6, 0.45)); } /* A tiny four-point sparkle that glints on each gold bow now and then. */ .sparkle { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 251, 232, 1) 0 7%, rgba(255, 226, 150, 0.55) 20%, rgba(255, 226, 150, 0) 48%); opacity: 0; pointer-events: none; } .sparkle::before, .sparkle::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; border-radius: 2px; background: radial-gradient(closest-side, #fffbe9, rgba(255, 232, 160, 0.85) 45%, rgba(255, 232, 160, 0)); } .sparkle::after { transform: rotate(90deg); } .curtain--l .sparkle { left: 23%; top: 66.6%; } .curtain--r .sparkle { left: 77%; top: 66.6%; } /* Static glitter canopy (no JS / reduced motion). With motion a canvas twinkles instead. */ .canopy { display: none; } html:not(.motion) .canopy { display: block; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: max(90px, calc(var(--sh) * 0.16)); /* a scatter of gold flecks (pre-generated, like the poster's canopy), repeated across */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='150'%3E%3Cg fill='%23f6d682'%3E%3Ccircle cx='130' cy='75' r='0.9' fill-opacity='0.49'/%3E%3Ccircle cx='189' cy='25' r='1.4' fill-opacity='0.57'/%3E%3Ccircle cx='151' cy='4' r='1.3' fill-opacity='0.75'/%3E%3Ccircle cx='343' cy='25' r='1.3' fill-opacity='0.70'/%3E%3Ccircle cx='248' cy='13' r='1.4' fill-opacity='0.63'/%3E%3Ccircle cx='173' cy='54' r='1.2' fill-opacity='0.39'/%3E%3Ccircle cx='341' cy='3' r='1.3' fill-opacity='0.87'/%3E%3Ccircle cx='275' cy='21' r='1.0' fill-opacity='0.81'/%3E%3Ccircle cx='200' cy='38' r='1.0' fill-opacity='0.61'/%3E%3Ccircle cx='331' cy='5' r='1.2' fill-opacity='0.57'/%3E%3Ccircle cx='66' cy='48' r='1.4' fill-opacity='0.40'/%3E%3Ccircle cx='358' cy='0' r='1.0' fill-opacity='0.83'/%3E%3Ccircle cx='249' cy='27' r='0.7' fill-opacity='0.56'/%3E%3Ccircle cx='226' cy='24' r='1.2' fill-opacity='0.66'/%3E%3Ccircle cx='139' cy='135' r='1.4' fill-opacity='0.18'/%3E%3Ccircle cx='115' cy='24' r='1.0' fill-opacity='0.55'/%3E%3Ccircle cx='255' cy='1' r='1.4' fill-opacity='0.81'/%3E%3Ccircle cx='280' cy='3' r='0.7' fill-opacity='0.79'/%3E%3Ccircle cx='109' cy='31' r='0.8' fill-opacity='0.68'/%3E%3Ccircle cx='143' cy='13' r='0.7' fill-opacity='0.85'/%3E%3Ccircle cx='328' cy='20' r='0.7' fill-opacity='0.85'/%3E%3Ccircle cx='355' cy='54' r='1.1' fill-opacity='0.39'/%3E%3Ccircle cx='331' cy='14' r='0.9' fill-opacity='0.87'/%3E%3Ccircle cx='107' cy='76' r='1.3' fill-opacity='0.49'/%3E%3Ccircle cx='329' cy='46' r='1.4' fill-opacity='0.56'/%3E%3Ccircle cx='321' cy='18' r='0.9' fill-opacity='0.80'/%3E%3Ccircle cx='23' cy='6' r='0.9' fill-opacity='0.76'/%3E%3Ccircle cx='27' cy='6' r='1.1' fill-opacity='0.79'/%3E%3Ccircle cx='360' cy='1' r='0.7' fill-opacity='0.95'/%3E%3Ccircle cx='147' cy='51' r='1.0' fill-opacity='0.41'/%3E%3Ccircle cx='290' cy='20' r='1.5' fill-opacity='0.53'/%3E%3Ccircle cx='202' cy='1' r='1.7' fill-opacity='0.92'/%3E%3Ccircle cx='153' cy='26' r='1.2' fill-opacity='0.63'/%3E%3Ccircle cx='159' cy='3' r='1.4' fill-opacity='0.82'/%3E%3Ccircle cx='282' cy='31' r='0.9' fill-opacity='0.67'/%3E%3Ccircle cx='130' cy='26' r='1.3' fill-opacity='0.53'/%3E%3Ccircle cx='322' cy='21' r='0.8' fill-opacity='0.73'/%3E%3Ccircle cx='11' cy='36' r='0.8' fill-opacity='0.45'/%3E%3Ccircle cx='24' cy='65' r='1.4' fill-opacity='0.59'/%3E%3Ccircle cx='73' cy='8' r='0.7' fill-opacity='0.91'/%3E%3Ccircle cx='121' cy='10' r='0.9' fill-opacity='0.91'/%3E%3Ccircle cx='61' cy='51' r='0.7' fill-opacity='0.62'/%3E%3Ccircle cx='46' cy='84' r='1.2' fill-opacity='0.40'/%3E%3Ccircle cx='245' cy='57' r='1.2' fill-opacity='0.45'/%3E%3Ccircle cx='118' cy='66' r='0.7' fill-opacity='0.57'/%3E%3Ccircle cx='305' cy='13' r='1.1' fill-opacity='0.70'/%3E%3Ccircle cx='124' cy='23' r='1.2' fill-opacity='0.56'/%3E%3Ccircle cx='249' cy='7' r='1.1' fill-opacity='0.72'/%3E%3Ccircle cx='95' cy='24' r='0.9' fill-opacity='0.66'/%3E%3Ccircle cx='314' cy='116' r='1.0' fill-opacity='0.23'/%3E%3Ccircle cx='114' cy='12' r='0.9' fill-opacity='0.77'/%3E%3Ccircle cx='200' cy='15' r='1.0' fill-opacity='0.66'/%3E%3Ccircle cx='65' cy='3' r='0.7' fill-opacity='0.94'/%3E%3Ccircle cx='12' cy='6' r='0.7' fill-opacity='0.78'/%3E%3Ccircle cx='154' cy='29' r='0.7' fill-opacity='0.82'/%3E%3Ccircle cx='285' cy='41' r='1.4' fill-opacity='0.68'/%3E%3Ccircle cx='203' cy='13' r='1.0' fill-opacity='0.57'/%3E%3Ccircle cx='178' cy='75' r='1.4' fill-opacity='0.41'/%3E%3Ccircle cx='215' cy='5' r='1.0' fill-opacity='0.54'/%3E%3C/g%3E%3Cg fill='%23ecc262'%3E%3Ccircle cx='327' cy='26' r='1.1' fill-opacity='0.62'/%3E%3Ccircle cx='208' cy='86' r='1.0' fill-opacity='0.27'/%3E%3Ccircle cx='52' cy='10' r='0.8' fill-opacity='0.86'/%3E%3Ccircle cx='139' cy='10' r='1.6' fill-opacity='0.71'/%3E%3Ccircle cx='314' cy='15' r='0.8' fill-opacity='0.73'/%3E%3Ccircle cx='37' cy='15' r='1.6' fill-opacity='0.53'/%3E%3Ccircle cx='131' cy='3' r='0.7' fill-opacity='0.81'/%3E%3Ccircle cx='181' cy='23' r='1.2' fill-opacity='0.78'/%3E%3Ccircle cx='61' cy='38' r='0.8' fill-opacity='0.73'/%3E%3Ccircle cx='5' cy='4' r='1.5' fill-opacity='0.77'/%3E%3Ccircle cx='87' cy='2' r='0.8' fill-opacity='0.89'/%3E%3Ccircle cx='343' cy='7' r='1.0' fill-opacity='0.95'/%3E%3Ccircle cx='225' cy='12' r='1.4' fill-opacity='0.92'/%3E%3Ccircle cx='86' cy='22' r='0.8' fill-opacity='0.50'/%3E%3Ccircle cx='226' cy='79' r='1.1' fill-opacity='0.39'/%3E%3Ccircle cx='197' cy='32' r='1.4' fill-opacity='0.56'/%3E%3Ccircle cx='66' cy='7' r='1.3' fill-opacity='0.65'/%3E%3Ccircle cx='293' cy='25' r='0.7' fill-opacity='0.77'/%3E%3Ccircle cx='265' cy='2' r='1.2' fill-opacity='0.66'/%3E%3Ccircle cx='1' cy='1' r='1.1' fill-opacity='0.68'/%3E%3Ccircle cx='308' cy='42' r='1.2' fill-opacity='0.63'/%3E%3Ccircle cx='29' cy='7' r='1.4' fill-opacity='0.79'/%3E%3Ccircle cx='108' cy='32' r='1.1' fill-opacity='0.51'/%3E%3Ccircle cx='155' cy='31' r='0.9' fill-opacity='0.80'/%3E%3Ccircle cx='193' cy='0' r='1.5' fill-opacity='0.69'/%3E%3Ccircle cx='70' cy='2' r='1.4' fill-opacity='0.58'/%3E%3Ccircle cx='349' cy='7' r='0.9' fill-opacity='0.63'/%3E%3Ccircle cx='320' cy='9' r='0.8' fill-opacity='0.78'/%3E%3Ccircle cx='256' cy='18' r='1.0' fill-opacity='0.52'/%3E%3Ccircle cx='111' cy='43' r='1.7' fill-opacity='0.64'/%3E%3Ccircle cx='154' cy='5' r='1.0' fill-opacity='0.80'/%3E%3Ccircle cx='215' cy='3' r='1.2' fill-opacity='0.70'/%3E%3Ccircle cx='131' cy='26' r='1.3' fill-opacity='0.48'/%3E%3Ccircle cx='129' cy='5' r='0.8' fill-opacity='0.89'/%3E%3Ccircle cx='353' cy='6' r='1.1' fill-opacity='0.92'/%3E%3Ccircle cx='212' cy='26' r='0.9' fill-opacity='0.64'/%3E%3Ccircle cx='289' cy='0' r='1.3' fill-opacity='0.58'/%3E%3Ccircle cx='325' cy='9' r='0.7' fill-opacity='0.69'/%3E%3Ccircle cx='328' cy='5' r='0.8' fill-opacity='0.82'/%3E%3Ccircle cx='302' cy='19' r='1.3' fill-opacity='0.66'/%3E%3Ccircle cx='111' cy='25' r='0.9' fill-opacity='0.50'/%3E%3Ccircle cx='10' cy='5' r='0.8' fill-opacity='0.69'/%3E%3Ccircle cx='227' cy='52' r='1.2' fill-opacity='0.41'/%3E%3Ccircle cx='345' cy='27' r='1.1' fill-opacity='0.52'/%3E%3Ccircle cx='95' cy='7' r='1.4' fill-opacity='0.69'/%3E%3Ccircle cx='56' cy='5' r='0.9' fill-opacity='0.76'/%3E%3Ccircle cx='344' cy='8' r='0.9' fill-opacity='0.95'/%3E%3Ccircle cx='7' cy='20' r='1.4' fill-opacity='0.75'/%3E%3Ccircle cx='298' cy='30' r='1.1' fill-opacity='0.80'/%3E%3Ccircle cx='59' cy='18' r='1.9' fill-opacity='0.81'/%3E%3Ccircle cx='83' cy='45' r='1.3' fill-opacity='0.72'/%3E%3Ccircle cx='21' cy='57' r='1.4' fill-opacity='0.59'/%3E%3Ccircle cx='34' cy='49' r='1.1' fill-opacity='0.43'/%3E%3Ccircle cx='30' cy='62' r='0.7' fill-opacity='0.52'/%3E%3Ccircle cx='5' cy='18' r='1.0' fill-opacity='0.87'/%3E%3Ccircle cx='148' cy='19' r='0.8' fill-opacity='0.57'/%3E%3Ccircle cx='67' cy='39' r='0.7' fill-opacity='0.66'/%3E%3Ccircle cx='114' cy='28' r='1.5' fill-opacity='0.63'/%3E%3Ccircle cx='320' cy='17' r='1.0' fill-opacity='0.74'/%3E%3Ccircle cx='31' cy='13' r='1.1' fill-opacity='0.59'/%3E%3C/g%3E%3Cg fill='%23e2b24c'%3E%3Ccircle cx='54' cy='12' r='1.6' fill-opacity='0.74'/%3E%3Ccircle cx='28' cy='95' r='1.1' fill-opacity='0.39'/%3E%3Ccircle cx='214' cy='35' r='1.2' fill-opacity='0.73'/%3E%3Ccircle cx='168' cy='133' r='1.4' fill-opacity='0.18'/%3E%3Ccircle cx='295' cy='49' r='1.3' fill-opacity='0.55'/%3E%3Ccircle cx='161' cy='91' r='1.4' fill-opacity='0.44'/%3E%3Ccircle cx='282' cy='71' r='1.3' fill-opacity='0.36'/%3E%3Ccircle cx='314' cy='17' r='1.4' fill-opacity='0.60'/%3E%3Ccircle cx='73' cy='66' r='1.1' fill-opacity='0.44'/%3E%3Ccircle cx='155' cy='5' r='1.1' fill-opacity='0.62'/%3E%3Ccircle cx='38' cy='102' r='1.2' fill-opacity='0.34'/%3E%3Ccircle cx='353' cy='125' r='1.8' fill-opacity='0.25'/%3E%3Ccircle cx='20' cy='17' r='1.2' fill-opacity='0.70'/%3E%3Ccircle cx='346' cy='9' r='1.5' fill-opacity='0.62'/%3E%3Ccircle cx='56' cy='57' r='1.4' fill-opacity='0.54'/%3E%3Ccircle cx='234' cy='8' r='1.1' fill-opacity='0.56'/%3E%3Ccircle cx='222' cy='43' r='1.6' fill-opacity='0.45'/%3E%3Ccircle cx='168' cy='10' r='1.3' fill-opacity='0.75'/%3E%3Ccircle cx='135' cy='16' r='0.8' fill-opacity='0.63'/%3E%3Ccircle cx='43' cy='54' r='1.4' fill-opacity='0.64'/%3E%3Ccircle cx='180' cy='2' r='1.3' fill-opacity='0.74'/%3E%3Ccircle cx='162' cy='143' r='0.8' fill-opacity='0.18'/%3E%3Ccircle cx='149' cy='41' r='1.0' fill-opacity='0.54'/%3E%3Ccircle cx='85' cy='19' r='0.9' fill-opacity='0.77'/%3E%3Ccircle cx='344' cy='13' r='0.8' fill-opacity='0.59'/%3E%3Ccircle cx='331' cy='2' r='0.9' fill-opacity='0.94'/%3E%3Ccircle cx='121' cy='13' r='1.9' fill-opacity='0.81'/%3E%3Ccircle cx='266' cy='48' r='1.4' fill-opacity='0.58'/%3E%3Ccircle cx='89' cy='41' r='1.0' fill-opacity='0.60'/%3E%3Ccircle cx='106' cy='45' r='0.9' fill-opacity='0.48'/%3E%3Ccircle cx='192' cy='5' r='1.2' fill-opacity='0.65'/%3E%3Ccircle cx='164' cy='15' r='1.4' fill-opacity='0.77'/%3E%3Ccircle cx='292' cy='54' r='1.3' fill-opacity='0.48'/%3E%3Ccircle cx='260' cy='34' r='0.9' fill-opacity='0.65'/%3E%3Ccircle cx='173' cy='96' r='1.2' fill-opacity='0.27'/%3E%3Ccircle cx='283' cy='6' r='0.8' fill-opacity='0.81'/%3E%3Ccircle cx='163' cy='98' r='1.1' fill-opacity='0.39'/%3E%3Ccircle cx='227' cy='133' r='1.0' fill-opacity='0.20'/%3E%3Ccircle cx='186' cy='10' r='0.9' fill-opacity='0.88'/%3E%3Ccircle cx='359' cy='6' r='0.9' fill-opacity='0.58'/%3E%3Ccircle cx='94' cy='0' r='0.9' fill-opacity='0.97'/%3E%3Ccircle cx='132' cy='37' r='1.0' fill-opacity='0.60'/%3E%3Ccircle cx='11' cy='29' r='1.0' fill-opacity='0.74'/%3E%3Ccircle cx='321' cy='77' r='1.3' fill-opacity='0.45'/%3E%3Ccircle cx='118' cy='13' r='0.8' fill-opacity='0.78'/%3E%3Ccircle cx='37' cy='95' r='1.0' fill-opacity='0.39'/%3E%3Ccircle cx='5' cy='19' r='1.4' fill-opacity='0.58'/%3E%3Ccircle cx='226' cy='73' r='1.2' fill-opacity='0.34'/%3E%3Ccircle cx='106' cy='19' r='1.1' fill-opacity='0.82'/%3E%3Ccircle cx='290' cy='20' r='1.3' fill-opacity='0.74'/%3E%3Ccircle cx='154' cy='19' r='1.2' fill-opacity='0.63'/%3E%3Ccircle cx='33' cy='108' r='1.4' fill-opacity='0.29'/%3E%3Ccircle cx='2' cy='59' r='1.4' fill-opacity='0.52'/%3E%3Ccircle cx='135' cy='54' r='1.0' fill-opacity='0.39'/%3E%3Ccircle cx='10' cy='30' r='1.2' fill-opacity='0.79'/%3E%3Ccircle cx='199' cy='45' r='1.4' fill-opacity='0.51'/%3E%3Ccircle cx='296' cy='14' r='1.3' fill-opacity='0.61'/%3E%3Ccircle cx='30' cy='39' r='1.2' fill-opacity='0.58'/%3E%3Ccircle cx='280' cy='19' r='1.1' fill-opacity='0.79'/%3E%3Ccircle cx='22' cy='10' r='1.5' fill-opacity='0.86'/%3E%3Ccircle cx='73' cy='21' r='1.1' fill-opacity='0.80'/%3E%3Ccircle cx='313' cy='7' r='1.2' fill-opacity='0.62'/%3E%3Ccircle cx='341' cy='17' r='1.3' fill-opacity='0.88'/%3E%3C/g%3E%3Cg fill='%23d4a03c'%3E%3Ccircle cx='239' cy='19' r='0.7' fill-opacity='0.74'/%3E%3Ccircle cx='178' cy='28' r='0.9' fill-opacity='0.73'/%3E%3Ccircle cx='311' cy='51' r='0.9' fill-opacity='0.49'/%3E%3Ccircle cx='54' cy='92' r='0.8' fill-opacity='0.29'/%3E%3Ccircle cx='314' cy='18' r='1.5' fill-opacity='0.71'/%3E%3Ccircle cx='344' cy='30' r='1.2' fill-opacity='0.49'/%3E%3Ccircle cx='127' cy='71' r='1.1' fill-opacity='0.55'/%3E%3Ccircle cx='316' cy='52' r='0.8' fill-opacity='0.53'/%3E%3Ccircle cx='20' cy='63' r='1.1' fill-opacity='0.37'/%3E%3Ccircle cx='232' cy='82' r='1.0' fill-opacity='0.31'/%3E%3Ccircle cx='132' cy='3' r='1.0' fill-opacity='0.85'/%3E%3Ccircle cx='295' cy='42' r='1.4' fill-opacity='0.73'/%3E%3Ccircle cx='30' cy='48' r='1.8' fill-opacity='0.67'/%3E%3Ccircle cx='68' cy='24' r='1.1' fill-opacity='0.51'/%3E%3Ccircle cx='123' cy='114' r='1.4' fill-opacity='0.26'/%3E%3Ccircle cx='15' cy='3' r='1.2' fill-opacity='0.71'/%3E%3Ccircle cx='249' cy='31' r='1.2' fill-opacity='0.62'/%3E%3Ccircle cx='337' cy='109' r='0.7' fill-opacity='0.31'/%3E%3Ccircle cx='41' cy='10' r='1.0' fill-opacity='0.89'/%3E%3Ccircle cx='23' cy='9' r='1.0' fill-opacity='0.55'/%3E%3Ccircle cx='96' cy='9' r='1.1' fill-opacity='0.68'/%3E%3Ccircle cx='103' cy='31' r='0.7' fill-opacity='0.49'/%3E%3Ccircle cx='101' cy='16' r='0.9' fill-opacity='0.76'/%3E%3Ccircle cx='311' cy='30' r='0.9' fill-opacity='0.54'/%3E%3Ccircle cx='335' cy='2' r='1.4' fill-opacity='0.75'/%3E%3Ccircle cx='39' cy='9' r='0.8' fill-opacity='0.81'/%3E%3Ccircle cx='333' cy='33' r='1.1' fill-opacity='0.56'/%3E%3Ccircle cx='351' cy='7' r='1.1' fill-opacity='0.55'/%3E%3Ccircle cx='67' cy='12' r='1.4' fill-opacity='0.52'/%3E%3Ccircle cx='89' cy='30' r='1.2' fill-opacity='0.59'/%3E%3Ccircle cx='84' cy='1' r='1.1' fill-opacity='0.97'/%3E%3Ccircle cx='166' cy='58' r='1.3' fill-opacity='0.50'/%3E%3Ccircle cx='179' cy='3' r='1.3' fill-opacity='0.64'/%3E%3Ccircle cx='357' cy='31' r='0.8' fill-opacity='0.74'/%3E%3Ccircle cx='150' cy='33' r='0.7' fill-opacity='0.76'/%3E%3Ccircle cx='311' cy='16' r='1.5' fill-opacity='0.58'/%3E%3Ccircle cx='2' cy='7' r='1.4' fill-opacity='0.88'/%3E%3Ccircle cx='125' cy='6' r='0.8' fill-opacity='0.56'/%3E%3Ccircle cx='355' cy='0' r='1.1' fill-opacity='0.83'/%3E%3Ccircle cx='113' cy='75' r='1.7' fill-opacity='0.49'/%3E%3Ccircle cx='66' cy='1' r='0.8' fill-opacity='0.85'/%3E%3Ccircle cx='269' cy='39' r='0.9' fill-opacity='0.63'/%3E%3Ccircle cx='204' cy='2' r='0.9' fill-opacity='0.78'/%3E%3Ccircle cx='214' cy='66' r='1.2' fill-opacity='0.47'/%3E%3Ccircle cx='111' cy='6' r='1.2' fill-opacity='0.92'/%3E%3Ccircle cx='2' cy='37' r='1.4' fill-opacity='0.59'/%3E%3Ccircle cx='177' cy='0' r='1.1' fill-opacity='0.63'/%3E%3Ccircle cx='83' cy='81' r='0.8' fill-opacity='0.45'/%3E%3Ccircle cx='251' cy='46' r='1.3' fill-opacity='0.51'/%3E%3Ccircle cx='158' cy='6' r='1.3' fill-opacity='0.59'/%3E%3Ccircle cx='71' cy='17' r='1.2' fill-opacity='0.58'/%3E%3Ccircle cx='51' cy='19' r='1.2' fill-opacity='0.78'/%3E%3Ccircle cx='87' cy='66' r='1.0' fill-opacity='0.37'/%3E%3Ccircle cx='20' cy='13' r='0.9' fill-opacity='0.51'/%3E%3Ccircle cx='338' cy='40' r='1.1' fill-opacity='0.69'/%3E%3Ccircle cx='202' cy='19' r='0.9' fill-opacity='0.63'/%3E%3Ccircle cx='90' cy='32' r='0.8' fill-opacity='0.53'/%3E%3Ccircle cx='225' cy='38' r='1.0' fill-opacity='0.55'/%3E%3Ccircle cx='188' cy='21' r='1.4' fill-opacity='0.65'/%3E%3Ccircle cx='44' cy='7' r='1.1' fill-opacity='0.77'/%3E%3Ccircle cx='112' cy='2' r='1.3' fill-opacity='0.92'/%3E%3Ccircle cx='287' cy='5' r='1.0' fill-opacity='0.81'/%3E%3Ccircle cx='351' cy='5' r='1.3' fill-opacity='0.87'/%3E%3Ccircle cx='209' cy='8' r='1.4' fill-opacity='0.75'/%3E%3C/g%3E%3Cg fill='%23fcecb8'%3E%3Ccircle cx='153' cy='3' r='1.4' fill-opacity='0.64'/%3E%3Ccircle cx='206' cy='3' r='1.1' fill-opacity='0.85'/%3E%3Ccircle cx='74' cy='2' r='1.2' fill-opacity='0.68'/%3E%3Ccircle cx='66' cy='53' r='0.9' fill-opacity='0.54'/%3E%3Ccircle cx='40' cy='17' r='1.2' fill-opacity='0.72'/%3E%3Ccircle cx='172' cy='40' r='1.3' fill-opacity='0.49'/%3E%3Ccircle cx='94' cy='35' r='1.0' fill-opacity='0.70'/%3E%3Ccircle cx='356' cy='39' r='1.3' fill-opacity='0.49'/%3E%3Ccircle cx='37' cy='3' r='1.1' fill-opacity='0.76'/%3E%3Ccircle cx='215' cy='28' r='1.1' fill-opacity='0.51'/%3E%3Ccircle cx='219' cy='44' r='1.3' fill-opacity='0.45'/%3E%3Ccircle cx='274' cy='25' r='1.4' fill-opacity='0.70'/%3E%3Ccircle cx='72' cy='28' r='0.9' fill-opacity='0.76'/%3E%3Ccircle cx='252' cy='83' r='1.4' fill-opacity='0.33'/%3E%3Ccircle cx='289' cy='9' r='1.9' fill-opacity='0.53'/%3E%3Ccircle cx='279' cy='9' r='0.8' fill-opacity='0.58'/%3E%3Ccircle cx='8' cy='1' r='0.9' fill-opacity='0.81'/%3E%3Ccircle cx='178' cy='38' r='0.9' fill-opacity='0.47'/%3E%3Ccircle cx='264' cy='29' r='1.3' fill-opacity='0.65'/%3E%3Ccircle cx='25' cy='18' r='1.4' fill-opacity='0.53'/%3E%3Ccircle cx='242' cy='9' r='1.3' fill-opacity='0.64'/%3E%3Ccircle cx='189' cy='5' r='1.5' fill-opacity='0.89'/%3E%3Ccircle cx='292' cy='64' r='1.2' fill-opacity='0.60'/%3E%3Ccircle cx='179' cy='41' r='1.2' fill-opacity='0.64'/%3E%3Ccircle cx='108' cy='3' r='1.5' fill-opacity='0.65'/%3E%3Ccircle cx='89' cy='7' r='0.9' fill-opacity='0.91'/%3E%3Ccircle cx='15' cy='72' r='0.9' fill-opacity='0.36'/%3E%3Ccircle cx='197' cy='47' r='0.8' fill-opacity='0.52'/%3E%3Ccircle cx='328' cy='30' r='0.8' fill-opacity='0.58'/%3E%3Ccircle cx='174' cy='106' r='0.7' fill-opacity='0.26'/%3E%3Ccircle cx='321' cy='35' r='1.2' fill-opacity='0.66'/%3E%3Ccircle cx='299' cy='55' r='0.8' fill-opacity='0.48'/%3E%3Ccircle cx='323' cy='5' r='0.9' fill-opacity='0.60'/%3E%3Ccircle cx='282' cy='61' r='1.0' fill-opacity='0.35'/%3E%3Ccircle cx='72' cy='5' r='1.2' fill-opacity='0.82'/%3E%3Ccircle cx='96' cy='37' r='1.1' fill-opacity='0.70'/%3E%3Ccircle cx='106' cy='102' r='1.4' fill-opacity='0.22'/%3E%3Ccircle cx='140' cy='6' r='1.2' fill-opacity='0.90'/%3E%3Ccircle cx='24' cy='40' r='1.2' fill-opacity='0.70'/%3E%3Ccircle cx='17' cy='19' r='1.2' fill-opacity='0.82'/%3E%3Ccircle cx='251' cy='31' r='1.1' fill-opacity='0.72'/%3E%3Ccircle cx='211' cy='36' r='1.2' fill-opacity='0.67'/%3E%3Ccircle cx='196' cy='1' r='0.8' fill-opacity='0.97'/%3E%3Ccircle cx='66' cy='127' r='1.1' fill-opacity='0.26'/%3E%3Ccircle cx='55' cy='13' r='1.4' fill-opacity='0.58'/%3E%3Ccircle cx='326' cy='20' r='1.3' fill-opacity='0.55'/%3E%3Ccircle cx='298' cy='24' r='0.9' fill-opacity='0.63'/%3E%3Ccircle cx='68' cy='0' r='1.4' fill-opacity='0.85'/%3E%3Ccircle cx='220' cy='71' r='1.2' fill-opacity='0.49'/%3E%3Ccircle cx='19' cy='72' r='0.9' fill-opacity='0.53'/%3E%3Ccircle cx='261' cy='60' r='0.7' fill-opacity='0.59'/%3E%3Ccircle cx='102' cy='49' r='0.7' fill-opacity='0.52'/%3E%3Ccircle cx='275' cy='74' r='1.3' fill-opacity='0.34'/%3E%3Ccircle cx='21' cy='11' r='1.0' fill-opacity='0.90'/%3E%3C/g%3E%3C/svg%3E"); background-size: 360px 150px; background-repeat: repeat-x; background-position: 0 0; -webkit-mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.28) 65%, rgba(0, 0, 0, 0) 100%); mask: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.28) 65%, rgba(0, 0, 0, 0) 100%); } /* -------------------------------------------------------------------------- Scene 1 — The Gate: closed velvet curtains + the medallion on the seam -------------------------------------------------------------------------- */ .gate { display: none; } .js .gate { display: block; position: fixed; inset: 0; z-index: 60; overflow: hidden; touch-action: none; overscroll-behavior: contain; cursor: pointer; --medal: min(58vw, 252px, 34svh); --medal-y: 56%; } .no-gate .gate, .boot-failed .gate { display: none !important; } /* Closed velvet curtains — the gate here, and the finale's curtain-fall (gate.js velvetPair). The seam belongs to the fabric, never a separate line: each panel runs a feather's width past the middle and fades out over it toward the seam (--fe: the feather's current softness, set by gate.js), so the two panels cross-fade instead of meeting in an edge; and each panel paints its own seam shadow, which sinks into the stage maroon, so it always travels with the fabric and a parting gap never shows as a light or dark line. */ .gate, .finale__fall { --feather: max(30px, 5vw); } .vpanel { position: absolute; top: 0; height: 100%; width: calc(50% + var(--feather)); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; --fe: var(--feather); } .motion .vpanel { will-change: transform; } .vpanel--l { left: 0; transform-origin: 0 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--feather) / 2 - var(--fe) / 2), rgba(0, 0, 0, 0) calc(100% - var(--feather) / 2 + var(--fe) / 2)); mask-image: linear-gradient(90deg, #000 calc(100% - var(--feather) / 2 - var(--fe) / 2), rgba(0, 0, 0, 0) calc(100% - var(--feather) / 2 + var(--fe) / 2)); } .vpanel--r { right: 0; transform-origin: 100% 0; -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - var(--feather) / 2 - var(--fe) / 2), rgba(0, 0, 0, 0) calc(100% - var(--feather) / 2 + var(--fe) / 2)); mask-image: linear-gradient(270deg, #000 calc(100% - var(--feather) / 2 - var(--fe) / 2), rgba(0, 0, 0, 0) calc(100% - var(--feather) / 2 + var(--fe) / 2)); } .vpanel > span { position: absolute; inset: 0; } .vpanel--r > span { transform: scaleX(-1); } /* Velvet: the straightened poster fabric, repeated across, aligned at the seam. */ .vpanel__velvet { background: var(--copper-500) url("/assets/img/poster/velvet-tile.webp") repeat-x right var(--feather) top 0; background-size: auto 124%; /* the tile's shadowed foot stays below the hem */ } /* Shading: the top and the hem, the outer edge, one soft highlight — and the seam. --seam: 1 = closed (the two leading pleats touch over a fine crease), 0 = parting (the seam valley deepens into the stage's own maroon over the last ~90px, so the opening gap never reads as a line). The panels stand still while it changes: the gate eases it at the tap, the finale scrubs it once the panels have met. */ .vpanel { --seam: 1; } .vpanel__shade { background: linear-gradient(180deg, rgba(36, 9, 5, 0.6) 0%, rgba(36, 9, 5, 0.12) 13%, rgba(36, 9, 5, 0) 24%, rgba(36, 9, 5, 0) 78%, rgba(36, 9, 5, 0.5) 100%), linear-gradient(90deg, rgba(36, 9, 5, 0.18) 0%, rgba(36, 9, 5, 0) 16%), radial-gradient(55% 42% at 34% 40%, rgba(255, 196, 150, 0.14), rgba(255, 196, 150, 0) 72%); } .vpanel__shade::before, .vpanel__shade::after { content: ""; position: absolute; inset: 0; pointer-events: none; } .vpanel__shade::before { background: linear-gradient(90deg, rgba(52, 16, 12, 0) calc(100% - var(--feather) - 150px), rgba(64, 22, 18, 0.42) calc(100% - var(--feather) - 70px), rgba(86, 33, 28, 0.8) calc(100% - var(--feather) - 22px), rgba(89, 35, 30, 0.86) calc(100% - var(--feather)), rgba(89, 35, 30, 0.86) 100%); opacity: calc(1 - 0.84 * var(--seam)); } /* The crease where the closed panels meet: velvet shadow, not stage maroon. */ .vpanel__shade::after { background: linear-gradient(90deg, rgba(58, 24, 10, 0) calc(100% - var(--feather) - 14px), rgba(58, 24, 10, 0.34) calc(100% - var(--feather) - 6px), rgba(40, 15, 6, 0.72) calc(100% - var(--feather)), rgba(58, 24, 10, 0.34) calc(100% - var(--feather) + 6px), rgba(58, 24, 10, 0) calc(100% - var(--feather) + 14px)); opacity: var(--seam); } .gate .vpanel__shade::before, .gate .vpanel__shade::after { transition: opacity 0.34s ease-in-out; } .gate.is-opening .vpanel { --seam: 0; } /* Extra fold shadows that appear as the fabric gathers. */ .vpanel__gather { opacity: 0; background: repeating-linear-gradient(90deg, rgba(30, 8, 4, 0) 0, rgba(30, 8, 4, 0.34) 13px, rgba(30, 8, 4, 0) 26px, rgba(255, 190, 140, 0.1) 33px, rgba(30, 8, 4, 0) 40px); } /* The warm light behind the curtains: a soft, wide glow that blooms from the gap as the panels part (no core, no edge — it only ever brightens gently). */ .gate__glow { position: absolute; z-index: 1; left: 50%; top: -6%; bottom: -6%; width: max(260px, 40vw); margin-left: calc(max(260px, 40vw) / -2); background: radial-gradient(closest-side, rgba(255, 214, 160, 0.4) 0%, rgba(255, 214, 160, 0.37) 16%, rgba(255, 214, 160, 0.3) 32%, rgba(255, 214, 160, 0.2) 48%, rgba(255, 214, 160, 0.1) 64%, rgba(255, 214, 160, 0.035) 80%, rgba(255, 214, 160, 0) 100%); filter: blur(22px); mix-blend-mode: screen; opacity: 0; pointer-events: none; will-change: transform, opacity; } html:not(.motion) .gate__canopy { height: max(90px, 15%); z-index: 2; } .gate__glitter { position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: max(96px, 17%); pointer-events: none; } .gate__top { position: absolute; left: 0; right: 0; z-index: 2; top: max(84px, 15%); bottom: calc(100% - var(--medal-y) + var(--medal) / 2 + 14px); display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 8px; padding: 0 24px; text-align: center; color: var(--paper-cream); pointer-events: none; isolation: isolate; } .gate__top::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(118vw, 640px); height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(40, 10, 8, 0.62), rgba(40, 10, 8, 0.3) 55%, rgba(40, 10, 8, 0)); } .gate__dear { font-family: var(--font-script); font-size: min(clamp(1.8rem, 8.6vw, 2.8rem), 6.8svh); line-height: 1.08; color: var(--gold-300); max-width: min(100%, 34rem); padding: 0.1em 0.25em 0.16em; overflow-wrap: anywhere; text-shadow: 0 2px 14px rgba(30, 8, 6, 0.7); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .gate__dear.is-long { font-size: min(clamp(1.4rem, 6.6vw, 2.1rem), 5.6svh); } .gate__name { white-space: normal; } .gate__clinic { font-family: var(--font-body); font-weight: 500; font-size: clamp(0.72rem, 3.2vw, 0.86rem); letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; text-shadow: 0 1px 10px rgba(30, 8, 6, 0.8); } .gate__since { display: flex; align-items: center; gap: 10px; font-family: var(--font-poster-serif); font-style: italic; font-size: 0.95rem; color: rgba(246, 238, 227, 0.9); text-shadow: 0 1px 10px rgba(30, 8, 6, 0.8); } .gate__since::before, .gate__since::after { content: ""; width: 24px; height: 1px; background: var(--gold-400); } /* The medallion (the real