/* Full-screen artist link hub. Content remains in normal document flow. */ .landing{position:relative;isolation:isolate;display:grid;grid-template-rows:1fr auto;min-height:100vh;min-height:100svh;padding:clamp(24px,4vw,64px) 24px max(22px,env(safe-area-inset-bottom));overflow:hidden;background:var(--c-ink);color:#f8f8f8;--icon-cutout:var(--c-ink)}
.landing-scene{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.landing-scene picture{display:block;width:100%;height:100%}.landing-backdrop{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;transform:scale(1.035);animation:landing-drift 28s ease-in-out infinite alternate;animation-play-state:paused}
.landing::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none}
.landing .preview-banner{position:absolute;inset:0 0 auto;z-index:2;min-height:28px;background:color-mix(in srgb,var(--c-ink) 34.9%,transparent);color:color-mix(in srgb,var(--c-cream) 70.2%,transparent);font-size:var(--fs-xs);backdrop-filter:blur(8px)}
.landing-center{display:flex;flex-direction:column;align-items:center;align-self:center;justify-self:center;width:min(100%,560px);padding:100px 0 62px;position:relative;text-align:center}
.landing-logo{width:clamp(280px,29vw,430px);max-width:100%;aspect-ratio:5.1;line-height:1;margin:0 0 29px;filter:drop-shadow(0 3px 13px color-mix(in srgb,var(--c-ink) 33.3%,transparent))}.landing-logo img{display:block;width:100%;height:100%}
.landing-socials{display:flex;justify-content:center;align-items:center;gap:3px;flex-wrap:wrap;max-width:100%}.social-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;color:#f8f8f8;border-radius:50%;transition:color 180ms var(--ease-enter),background-color 180ms var(--ease-enter),transform 180ms var(--ease-enter)}.social-link svg{width:24px;height:24px;overflow:visible;filter:drop-shadow(0 1px 3px color-mix(in srgb,var(--c-ink) 40%,transparent))}a.social-link:hover,a.social-link:focus-visible{color:var(--accent);background:color-mix(in srgb,var(--c-ink) 40%,transparent);transform:translateY(-2px)}a.social-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.is-pending{color:color-mix(in srgb,var(--c-cream) 42%,transparent);cursor:default}.is-pending svg{width:22px;height:22px}
.social-tooltip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);white-space:nowrap;font:var(--fs-xs)/1.4 var(--mono);letter-spacing:.01em;background:color-mix(in srgb,var(--c-ink) 94.9%,transparent);color:var(--paper);padding:7px 10px;border:1px solid color-mix(in srgb,var(--c-cream) 20%,transparent);opacity:0;pointer-events:none;transition:opacity 140ms,transform 140ms}.social-link:hover .social-tooltip,.social-link:focus-visible .social-tooltip{opacity:1;transform:translate(-50%,0)}.landing-contact{margin-top:6px}.landing-sections{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:24px;color:var(--c-cream);font:var(--fs-xs) var(--mono);letter-spacing:.025em}.landing-sections a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;position:relative}.landing-sections a::after{content:'';position:absolute;left:4px;right:4px;bottom:8px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 180ms var(--ease-enter)}.landing-sections a:hover::after,.landing-sections a:focus-visible::after{transform:scaleX(1)}.landing-sections>span{color:color-mix(in srgb,var(--c-cream) 40%,transparent);font-size:var(--fs-xs)}
.landing-bottom{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:104px}.landing-bottom>.motion-toggle{position:absolute;right:0;bottom:4px;color:color-mix(in srgb,var(--c-cream) 78.8%,transparent);font-size:var(--fs-xs);min-width:44px;min-height:44px;padding:12px;gap:12px}
.content-header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--c-ink) 96.1%,transparent);backdrop-filter:blur(12px);height:82px;border-bottom:1px solid var(--line)}html{scroll-padding-top:100px}.section{scroll-margin-top:0}.content-header .header-cta{color:var(--muted)}
@keyframes landing-drift{from{transform:scale(1.035) translate3d(0,0,0)}to{transform:scale(1.075) translate3d(-.5%,.35%,0)}}
[data-motion-ready]:not([data-motion-paused]) .landing-scene:not([data-ambient-paused]) .landing-backdrop{animation-play-state:running}
@media(max-width:650px){.landing{padding:26px 20px max(18px,env(safe-area-inset-bottom))}.landing-backdrop{object-position:48% 50%}.landing-center{padding:100px 0 60px}.landing-socials{gap:0}.social-link{width:44px;min-width:44px;height:44px}.social-link svg{width:23px;height:23px}.is-pending svg{width:21px;height:21px}.landing-sections{margin-top:20px}.landing-bottom{min-height:108px}.landing-bottom>.motion-toggle{right:-4px;bottom:4px;font-size:0;gap:0;padding:12px}.landing-bottom>.motion-toggle span{font-size:13px}.content-header{height:70px}.content-header .menu-button:not([hidden])~nav{top:69px}html{scroll-padding-top:84px}.landing .preview-banner{font-size:var(--fs-xs);row-gap:0}.landing .preview-banner>span:last-child{font-size:var(--fs-xs)}}
@media(max-height:520px){.landing{padding-top:24px;padding-bottom:12px}.landing-center{padding:44px 0 20px}.landing-logo{width:260px;margin-bottom:16px}.landing-sections{margin-top:8px}.landing-bottom{min-height:83px}}
@media(prefers-reduced-motion:reduce){.landing-backdrop{animation:none!important}.social-link,.social-tooltip,.landing-sections a::after{transition:none!important}}

.landing-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 500ms ease}.landing-video[data-playing]{opacity:1}
.landing::after{background:linear-gradient(0deg,color-mix(in srgb,var(--c-ink) 72.2%,transparent) 0%,color-mix(in srgb,var(--c-ink) 7.1%,transparent) 25%,color-mix(in srgb,var(--c-ink) 3.1%,transparent) 65%,color-mix(in srgb,var(--c-ink) 14.1%,transparent) 100%),radial-gradient(ellipse 320px 200px at 50% 48%,color-mix(in srgb,var(--c-ink) 40%,transparent),transparent 90%)}
@media(min-height:650px){.landing-center{top:3svh}}
@media(prefers-reduced-motion:reduce){.landing-video{display:none!important;transition:none}}

/* Earbud-Y Cycles render (logo-earbud-v3). A still image; the glint is a masked CSS sweep. */ .landing-center{width:min(100%,680px)}.landing-logo{position:relative;width:clamp(340px,46vw,680px);aspect-ratio:6.21;margin-bottom:24px}
.landing-logo img{object-fit:contain}
.landing-logo::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--c-cream) 70%,transparent) 50%,transparent 62%) -125% 0/55% 100% no-repeat;mix-blend-mode:plus-lighter;-webkit-mask:url('/assets/img/y2shane-earbud.webp') center/contain no-repeat;mask:url('/assets/img/y2shane-earbud.webp') center/contain no-repeat;opacity:0}
[data-motion-ready]:not([data-motion-paused]):not([data-intro]) .landing-logo::after{animation:logo-glint 7s 2.4s ease-in-out infinite}
[data-intro-done][data-motion-ready]:not([data-motion-paused]) .landing-logo::after{animation-delay:.3s}
@keyframes logo-glint{0%{background-position:-125% 0;opacity:1}22%{background-position:225% 0;opacity:1}23%,100%{background-position:225% 0;opacity:0}}
@media(max-width:650px){.landing-logo{width:100%;margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.landing-logo::after{animation:none!important;opacity:0}}
/* Local exposure control isolates the mark without boxing in the link hub. */ .landing-logo{isolation:isolate;filter:drop-shadow(0 2px 1px #020403e6) drop-shadow(0 10px 18px #020403cc)}
.landing-logo::before{content:'';position:absolute;inset:-45px -55px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,#050807d9 0%,#05080791 35%,#05080700 72%);filter:blur(10px)}

/* Round-dot typography: a quiet optical display against the chrome wordmark. */ @font-face{font-family:Doto;src:url('/assets/fonts/doto-round-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{--dot:Doto,ui-monospace,monospace}
.ui-arrow,.menu-plus{width:17px;height:17px;flex:none;vertical-align:middle;display:inline-block}
.social-tooltip .ui-arrow{width:12px;height:12px;margin-left:4px}

.landing-logo{margin-bottom:12px}
.landing-manifesto{display:flex;align-items:center;justify-content:center;gap:.4em;position:relative;margin:0 0 24px;font:700 15px/1.5 var(--dot);letter-spacing:.025em;color:var(--paper);text-shadow:0 1px 5px #000,0 0 16px #000}
.landing-manifesto strong{color:var(--accent)}
.landing-manifesto::before,.landing-manifesto::after{content:'';width:20px;height:2px;margin:0 8px;background:radial-gradient(circle,var(--accent) .8px,transparent 1px) 0 0/5px 2px;opacity:.7}
.header nav a,.menu-button:not([hidden]),.header-cta,.landing-sections,.footer-brand,.footer-links,.footer-bottom{font-family:var(--dot);font-weight:750;letter-spacing:.015em}
.header nav a{font-size:17px}
.menu-button:not([hidden]){gap:14px}
.menu-plus{width:19px;height:19px;transition:transform 220ms var(--ease-enter)}
.menu-button[aria-expanded=true] .menu-plus{transform:rotate(45deg)}
.header-cta{font-size:14px;gap:16px}
.landing-sections{font-size:14px}
.footer{border-top:0;padding-top:64px;gap:32px;background:linear-gradient(var(--c-ink),#090b0a)}
.footer-brand{font-size:clamp(38px,5vw,66px);line-height:1.15;gap:18px;font-weight:800}
.footer-brand .ui-arrow{width:24px;height:24px;color:var(--accent)}
.footer-links{gap:24px}
.footer-links a{gap:8px}
.footer-bottom{color:#c5c0b9;border-top:1px solid color-mix(in srgb,var(--c-cream) 12.5%,transparent);padding-top:23px}
.footer-bottom>span:last-child{color:var(--accent)}
.empty-state{border:0;padding:26px 0 18px;text-align:left;max-width:510px}
.empty-state h3{font-size:clamp(23px,2.5vw,31px);letter-spacing:-.025em}
.empty-state p{max-width:350px}
.empty-symbol{display:block;width:48px;height:48px;margin-bottom:22px;fill:none;stroke:var(--accent);stroke-width:1.2}
/* Reserve label width; the changing code layer is never part of its accessible name. */ .decode-label{position:relative;display:inline-block;white-space:nowrap;isolation:isolate}
.decode-original{display:block}
.decode-noise{position:absolute;inset:0;pointer-events:none;color:var(--accent);opacity:0}
.decode-label[data-decoding] .decode-original{opacity:.25}
.decode-label[data-decoding] .decode-noise{opacity:1}
@media(max-width:650px){.landing-manifesto{margin-bottom:22px;gap:.35em}.landing-manifesto::before,.landing-manifesto::after{width:12px;margin:0 3px}.landing-sections{gap:13px}.content-header .menu-button:not([hidden])~nav{border:0;background:linear-gradient(180deg,color-mix(in srgb,var(--c-ink) 100%,transparent) 0%,color-mix(in srgb,var(--c-ink) 98.8%,transparent) 78%,color-mix(in srgb,var(--c-ink) 0%,transparent) 100%);padding:15px var(--pad) 38px;gap:4px;align-items:flex-start}.header nav a{font:750 27px/1.45 var(--dot);min-height:50px;width:max-content;letter-spacing:.025em}.header nav a::before{content:'';width:4px;height:4px;border-radius:50%;margin-right:13px;background:var(--accent);opacity:.6}.footer{padding-top:44px;gap:26px}.footer-brand{font-size:42px}.footer-links{display:grid;grid-template-columns:max-content max-content;justify-content:start;column-gap:24px;row-gap:0}.footer-links a:last-child{grid-column:1/-1}.footer-bottom{gap:12px}.empty-state{padding:18px 0 10px}}
@media(max-height:600px){.landing-manifesto{margin-bottom:12px}}
@media(prefers-reduced-motion:reduce){.decode-noise{display:none!important}.decode-original{opacity:1!important}.menu-plus{transition:none!important}}
html[data-motion-paused] .decode-noise{display:none}
html[data-motion-paused] .decode-original{opacity:1}
/* Small dot-matrix labels need stronger weight and more pixels than solid type. */ .landing-manifesto{font-size:17px;font-weight:850}
.landing-manifesto strong{font-weight:900}
.header nav a,.menu-button:not([hidden]),.header-cta,.landing-sections,.footer-links,.footer-bottom{font-weight:850}
.menu-button:not([hidden]){font-size:18px}
.footer-links{font-size:17px}
.footer-bottom{font-size:14px;font-weight:900}
.landing-center{isolation:isolate}
.landing-center::before{content:'';position:absolute;inset:50px -30px 25px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,color-mix(in srgb,var(--c-ink) 50.2%,transparent),transparent 72%);filter:blur(12px)}
@media(max-width:650px){.landing-manifesto{font-size:16px}.footer-links{font-size:17px}.footer-bottom{font-size:14px}.landing-sections{font-size:14px}.header nav a{font-weight:850}}
@media(max-height:600px){.landing-manifesto{font-size:13px}}
/* Scroll cue: a hairline with a teal dot trail dropping down it, in the site's
   dot-matrix language. The label only appears on hover/focus; the cue fades once
   the visitor scrolls (site.js adds .is-past). */
.landing-scroll{display:grid;justify-items:center;align-content:end;gap:10px;min-height:76px;padding:10px 24px 6px;color:var(--c-cream);opacity:.9;transition:opacity 500ms ease}
.landing-scroll.is-past{opacity:0;pointer-events:none}
.scroll-cue{position:relative;display:block;width:1px;height:46px;background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--c-cream) 32%,transparent) 30%,color-mix(in srgb,var(--c-cream) 32%,transparent) 70%,transparent)}
.scroll-cue i{position:absolute;left:50%;top:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--c-teal);box-shadow:0 0 6px var(--c-teal);opacity:0;animation:scroll-drop 2.4s cubic-bezier(.45,0,.55,1) infinite}
.scroll-cue i:nth-child(2){animation-delay:.14s;width:3px;height:3px;margin-left:-1.5px;box-shadow:none;background:color-mix(in srgb,var(--c-teal) 70%,transparent)}
.scroll-cue i:nth-child(3){animation-delay:.28s;width:2px;height:2px;margin-left:-1px;box-shadow:none;background:color-mix(in srgb,var(--c-teal) 45%,transparent)}
@keyframes scroll-drop{0%{transform:translateY(0);opacity:0}18%{opacity:1}72%{opacity:1}100%{transform:translateY(42px);opacity:0}}
.scroll-hint{font:800 var(--fs-xs)/1 var(--dot,ui-monospace,monospace);letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateY(-3px);transition:opacity 220ms ease,transform 220ms var(--ease-enter,ease)}
.landing-scroll:hover .scroll-hint,.landing-scroll:focus-visible .scroll-hint{opacity:.85;transform:none}
.landing-scroll:hover .scroll-cue i,.landing-scroll:focus-visible .scroll-cue i{animation-duration:1.6s}
/* Without motion: a single steady dot mid-line still reads as "there's more below". */
@media(prefers-reduced-motion:reduce){.scroll-cue i{animation:none;opacity:0}.scroll-cue i:first-child{opacity:1;top:21px}.landing-scroll{transition:none}}
[data-motion-paused] .scroll-cue i{animation:none;opacity:0}
[data-motion-paused] .scroll-cue i:first-child{opacity:1;top:21px}
/* First-visit intro (intro.js): opaque ink layer over the page; the clip is placed by CSSOM. A CSS-only net clears it at 6 s. */ .intro{display:none}
[data-intro] .intro{position:fixed;inset:0;z-index:10001;display:block;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#25231e 0%,#101010 52%,#0b0b0a 85%);isolation:isolate;transition:opacity 300ms ease;animation:intro-net 300ms linear 5.7s forwards}
[data-intro-leaving] .intro{opacity:0;pointer-events:none}
[data-intro-leaving=skip] .intro{transition-duration:150ms}
@keyframes intro-net{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}}
/* Home-page section paging. section-pager.js pages one section per wheel flick, swipe or paging key and sets html[data-pager] while motion is allowed; CSS snapping is then off so the browser cannot fight its animation. Without JS, under reduced motion or with motion paused, a gentle proximity snap stays as the fallback (mandatory snap only resolves after the gesture ends, which felt delayed). Only the home document contains .landing (event pages also carry .artist-site). The scroll-padding and scroll-margins below are also the stops the pager measures. */
html:has(.landing){scroll-snap-type:y proximity;scroll-padding-top:82px}
body:has(.landing) .landing,body:has(.landing) .section,body:has(.landing) .footer{scroll-snap-align:start}
body:has(.landing) .music-section{scroll-margin-top:36px;min-height:calc(100svh - 118px)}
body:has(.landing) .events-section{min-height:calc(100svh - 82px)}
@media(max-width:650px){html:has(.landing){scroll-padding-top:0}body:has(.landing) .music-section{scroll-margin-top:106px;min-height:calc(100svh - 106px)}body:has(.landing) .events-section{scroll-margin-top:70px;min-height:calc(100svh - 70px)}}
@media(prefers-reduced-motion:reduce){html:has(.landing){scroll-behavior:auto}}
/* The pager animates frame by frame, so the page's smooth scroll-behavior must not ease each step again. */
html[data-pager]:has(.landing){scroll-snap-type:none;scroll-behavior:auto}
/* Player open: the page is scroll-locked, so nothing may snap underneath. Keep last. */
html[data-player-open]:has(.landing){scroll-snap-type:none}
/* Touch screens: the header is 96% opaque ink, so its backdrop blur barely shows but re-runs on every scroll frame. */ @media (hover:none) and (pointer:coarse){.content-header{backdrop-filter:none}}

/* Keep content inside notches and rounded display edges in either orientation. */
.landing{padding-top:max(26px,env(safe-area-inset-top));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.content-header,.section,.footer,.event-page-header,.event-page-main{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}

@media(min-width:651px){.landing{padding-top:max(clamp(24px,4vw,64px),env(safe-area-inset-top));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}}

/* Let the silent intro settle into the listening corner's warm darkness. */
.landing::after{background:linear-gradient(0deg,#1a1815 0%,#1a1815c9 8%,#0b0b0a12 34%,#0b0b0a08 65%,#0b0b0a24 100%),radial-gradient(ellipse 320px 200px at 50% 48%,#0b0b0a66,transparent 90%)}
.content-header{background:#1a1815f5;border-bottom-color:#41382d}


/* One live wordmark across the hero, header and footer; earbuds belong to the entrance. */
.dot-wordmark{display:block;color:var(--c-cream);font-family:var(--dot);font-weight:800;letter-spacing:-.065em;line-height:1.15;white-space:nowrap}
.landing-logo{width:auto;max-width:100%;aspect-ratio:auto;font-size:clamp(54px,10vw,104px);margin-bottom:18px;filter:none;text-shadow:0 2px 12px #0b0b0acc}
.landing-logo::before,.landing-logo::after{display:none}
.brand{width:auto;letter-spacing:normal;font-size:32px}
.brand .dot-wordmark{width:auto}
.music-section #music-title{font:900 clamp(30px,5vw,48px)/1.1 var(--dot);letter-spacing:-.04em}
/* Screen only the encoded video; the cover always remains opaque. */
/* Keep the video atmospheric and interaction feedback playful; remove competing idle decoration. */
.landing-manifesto::before,.landing-manifesto::after{display:none}
@media(max-height:600px){.landing-logo{font-size:54px;margin-bottom:10px}}

/* Soft depth, crisp letter faces; the glow is still, not another animation loop. */
.landing-logo{text-shadow:0 1px 2px #0b0b0a,0 0 18px #fff3e642,0 0 42px #88d5cd26}
.footer-links .contact-bookings{color:var(--accent)}
.footer-links .contact-bookings:hover,.footer-links .contact-bookings:focus-visible,.contact-bookings .decode-label[data-decoding]{color:var(--c-cream)}
.contact-bookings .decode-noise{color:var(--c-cream)}
/* A tiny framing flourish, echoed by the waveform's dotted construction. */
.landing-manifesto::before,.landing-manifesto::after{display:block;width:12px;height:2px;opacity:.45}
.music-wave{display:flex;align-items:center;gap:3px;height:46px;width:132px;color:var(--accent);opacity:.8;flex-shrink:0;align-self:center}
.wave-bar{display:block;width:2px;height:32px;border-radius:1px;background:radial-gradient(circle,currentColor 1px,transparent 1.2px) center/2px 4px;transform:scaleY(.35);animation:music-wave 2200ms ease-in-out infinite;animation-play-state:paused}
.wave-1{height:18px;animation-delay:-700ms}.wave-2{height:38px;animation-delay:-1200ms}.wave-3{height:24px;animation-delay:-400ms}.wave-4{height:42px;animation-delay:-1500ms}.wave-5{height:28px;animation-delay:-1000ms}.wave-6{height:16px;animation-delay:-1800ms}
[data-music-visible]:not([data-motion-paused]) .wave-bar{animation-play-state:running}
@keyframes music-wave{0%,100%{transform:scaleY(.35);opacity:.5}45%{transform:scaleY(1);opacity:1}75%{transform:scaleY(.6);opacity:.7}}
@media(prefers-reduced-motion:reduce){.wave-bar{animation:none!important;transform:scaleY(.7)}}
@media(max-width:650px){.music-wave{width:105px;gap:2px}.footer-links{grid-template-columns:repeat(2,minmax(0,max-content))}.footer-links .contact-bookings{grid-column:1/-1}.footer-links a:last-child{grid-column:auto}.contact-bookings{font-size:16px}}

/* Only the shared CD player is composited alongside the original unwind film. */
.intro-player{position:absolute;inset:0;opacity:0;pointer-events:none}
.intro-player canvas{display:block;width:100%;height:100%}

/* Original unwind footage and the player share the same opaque composition. */
.intro-video{position:absolute;left:0;top:0;z-index:1;display:block;max-width:none;transform-origin:0 0;filter:contrast(1.1);mix-blend-mode:screen}
.intro-player{z-index:2}
/* A quiet confirmation beat after the physical plug seats. */
.intro-connected{position:absolute;z-index:3;left:50%;top:calc(55% + 65px);transform:translate(-50%,6px);opacity:0;color:var(--c-cream);font:800 clamp(16px,2.4vw,22px)/1.2 var(--dot);letter-spacing:.08em;text-shadow:0 0 14px #a7d4d355;transition:opacity 140ms ease,transform 180ms ease}
[data-intro-connecting] .intro-connected{opacity:1;transform:translate(-50%,0)}
[data-intro-connecting] .intro-connected-dots{animation:connected-dots 600ms steps(3,end) 1}
@keyframes connected-dots{from{opacity:.2}to{opacity:1}}

/* Continuous ASCII signal drift sit above the film and beneath the live identity. */
.landing-ascii{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;pointer-events:none;mix-blend-mode:screen;filter:drop-shadow(0 0 2px #c9e7d333);mask-image:radial-gradient(ellipse 25% 16% at 50% 44%,#0008,#000 90%)}
.landing-logo{position:relative;isolation:isolate}
.landing-logo.is-signal-glitch{animation:identity-tick 220ms steps(1,end) 1}
.landing-logo.is-signal-glitch::before,.landing-logo.is-signal-glitch::after{content:attr(data-signal-label);opacity:0;position:absolute;inset:0;pointer-events:none;font:inherit;letter-spacing:inherit;text-shadow:none;color:var(--c-teal);clip-path:inset(20% 0 55%);transform:translateX(-3px);animation:identity-slice 220ms steps(1,end) 1}
.landing-logo.is-signal-glitch::after{color:#fff0d7;clip-path:inset(67% 0 12%);transform:translateX(3px);animation-direction:reverse}
@keyframes identity-tick{0%,100%{transform:none}25%{transform:translateX(1px)}48%{transform:translateX(-1px)}72%{transform:none}}
@keyframes identity-slice{0%,100%{opacity:0}20%,55%{opacity:.85}40%{opacity:.3;transform:translateX(4px)}80%{opacity:.5;transform:translateX(-2px)}}
[data-motion-paused] .landing-logo.is-signal-glitch{animation:none}
[data-motion-paused] .landing-logo.is-signal-glitch::before,[data-motion-paused] .landing-logo.is-signal-glitch::after{display:none}
@media(prefers-reduced-motion:reduce){.landing-ascii{display:none}.landing-logo.is-signal-glitch{animation:none}.landing-logo.is-signal-glitch::before,.landing-logo.is-signal-glitch::after{display:none}}

.landing-center,.landing-bottom{z-index:1}

[data-ascii-active] .landing-ascii{opacity:.42}

/* Blue data points travel inside the real dotted letterforms, never over them. */
.landing-logo .dot-wordmark{position:relative}
.landing-logo .dot-wordmark::after{content:attr(data-signal-label);position:absolute;inset:0;pointer-events:none;opacity:0;color:transparent;-webkit-text-fill-color:transparent;background:radial-gradient(circle at 15px 11px,#71caff 0 5px,transparent 6px),radial-gradient(circle at 43px 26px,#71caff 0 5px,transparent 6px);background-size:79px 43px,113px 57px;background-clip:text;-webkit-background-clip:text;text-shadow:none}
.is-signal-glitch .dot-wordmark::after{animation:blue-dot-flow 540ms ease-in-out 1}
@keyframes blue-dot-flow{0%{opacity:0;background-position:-140px 12px,-80px -5px}18%,78%{opacity:1}100%{opacity:0;background-position:180px -8px,240px 15px}}
[data-motion-paused] .landing-logo .dot-wordmark::after{display:none}
@media(prefers-reduced-motion:reduce){.landing-logo .dot-wordmark::after{display:none}}

/* Every live letter-dot becomes its own blue/ivory flip face; semantic text stays. */
.flipdot-logo{position:absolute;z-index:2;display:block;pointer-events:none;filter:drop-shadow(0 1px 1px #0008) drop-shadow(0 0 9px color-mix(in srgb,var(--c-teal) 13%,transparent))}
[data-flipdot]>.dot-wordmark{color:transparent;text-shadow:none}
[data-flipdot]>.dot-wordmark::after{display:none}

[data-flipdot].is-signal-glitch::before,[data-flipdot].is-signal-glitch::after{display:none}

/* Section faces retain live Doto lettering and contrast with their surfaces. */
[data-flipdot-heading]{position:relative;width:max-content;max-width:100%;--flipdot-accent:var(--c-teal)}
[data-flipdot-heading="events"]{--flipdot-accent:#e8ae54}
.flipdot-label{display:inline-block}
[data-flipdot-heading][data-flipdot]>.flipdot-label{color:transparent}
[data-flipdot-heading]>.flipdot-logo{filter:none}