/* House of Anons v3 — shell.css The three-column shell (left rail / centre panel / right rail) + the public menu, top bar, quick actions, bottle/note components, the story slider, and the mobile stack (D5). References tokens.css roles only. */ *{box-sizing:border-box; margin:0; padding:0} html{scroll-behavior:smooth} body{ background:var(--surface-bg); color:var(--text-primary); font:17px/1.55 var(--k3-sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; /* belt, not the fix — see the MOBILE STACK section for the source-level fix (the topbar/hero-text budget at 390px, fix cycle 2, defect 1) */ /* mobile-adaptive (operator ruling 2026-09-10): no tap flash on iOS/Android, safe-area gutters now that viewport-fit=cover lets content run edge-to-edge under a notch/rounded corner. */ -webkit-tap-highlight-color:transparent; padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} } button{font:inherit; cursor:pointer; border:none; background:none; color:inherit; touch-action:manipulation} a{color:inherit; text-decoration:none} img{max-width:100%} [hidden]{display:none !important} .hoa-page-footer{display:flex;flex-wrap:wrap;gap:8px 18px;padding:20px 0 8px;margin-top:24px;border-top:1px solid var(--border-cool);font-size:13px;color:var(--text-muted)} .hoa-page-footer a{text-decoration:underline;text-underline-offset:3px} .hoa-page-footer a:hover,.hoa-page-footer a:focus-visible{color:var(--accent-live)} /* ============ APP GRID ============ No min-height:100vh here (fix cycle 1, defect 5): the empty tail below the last panel was this floor plus .hoa-sidebar's height:100vh forcing the grid row taller than the real content — the rails now end where the content ends. */ .hoa-app{display:grid; grid-template-columns:250px minmax(0,1fr) 330px} @media(max-width:1240px){ .hoa-app{grid-template-columns:232px minmax(0,1fr)} .hoa-rail{grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0 22px 22px} } /* .hoa-sidebar's own base rule (below) sets display:flex with no media guard and is declared AFTER this block in the file — same specificity, later source order, so it silently WON even under this max-width:900px condition (the sidebar filled the mobile screen, defect 4's root cause). Its override now lives in the MOBILE STACK section instead, positioned after the base rule where source order actually gives it the last word. */ @media(max-width:900px){ .hoa-app{grid-template-columns:1fr} .hoa-rail{grid-template-columns:1fr; padding:0 14px 90px} } /* ============ LEFT RAIL — the public menu ============ */ .hoa-sidebar{ background:var(--surface-panel-alt); border-right:1px solid var(--border-cool); padding:22px 16px; display:flex; flex-direction:column; gap:4px; /* max-height (not height): fix cycle 1, defect 5 — height:100vh forced the sidebar (and so the whole grid row) to a fixed viewport-height floor even when its own nav-item content was shorter, which is exactly what created the empty tail on a full-page capture taller than one screen. max-height keeps the sticky-while-scrolling behaviour and caps it at one screen without ever padding it out past its real content. */ position:sticky; top:0; max-height:100vh; max-height:100dvh; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .hoa-logo{display:flex; align-items:center; gap:10px; padding:2px 8px 4px} .hoa-logo-mark{height:34px; width:auto; flex:none; display:block} .hoa-wordmark{font-weight:800; letter-spacing:.14em; font-size:14px} .hoa-tagline{color:var(--text-muted); font-size:12px; padding:0 8px 16px} .hoa-topbar-logo{height:28px; width:auto; flex:none; margin-right:2px} .hoa-nav-item{display:flex; align-items:center; gap:11px; padding:10px 10px; border-radius:10px; color:var(--text-muted); font-size:16px; width:100%; text-align:left} .hoa-nav-item .ic{width:20px; text-align:center} .hoa-nav-item:hover{background:rgba(120,150,220,.07); color:var(--text-primary)} .hoa-nav-item.active{background:linear-gradient(90deg,rgba(55,213,224,.16),rgba(55,213,224,.04)); color:var(--accent-live); box-shadow:inset 2px 0 0 var(--accent-live)} .hoa-nav-item:focus-visible{outline:2px solid var(--accent-live); outline-offset:-2px} .hoa-sidebar-signin{margin:10px 8px 2px; display:flex; gap:8px} .hoa-sidebar-signin button{flex:1; padding:9px 6px; border-radius:10px; font-size:11.5px; font-weight:700; text-align:center} .hoa-sidebar-signin .ghost{border:1px solid var(--border-cool-strong); color:var(--text-primary)} .hoa-sidebar-signin .fill{background:linear-gradient(135deg,var(--k3-coral-light),var(--k3-coral-deep)); color:var(--text-on-accent)} .hoa-crisis-link{margin:8px 8px 0; padding:9px 10px; border-radius:10px; font-size:12px; color:var(--accent-price); border:1px dashed rgba(255,176,84,.35); text-align:left} .hoa-crisis-link:hover{background:rgba(255,176,84,.08)} .hoa-side-foot{margin-top:auto; padding:16px 8px 0; border-top:1px solid var(--border-cool); color:var(--text-muted); font-size:11.5px} /* ============ MAIN (centre panel) ============ ≥901px: app-like layout — sidebar/rail stay fixed, .hoa-main is its own scroll container (operator ruling: the centre column no longer scrolls the whole page). Topbar height budgeted at ~64px; the calc below matches .hoa-main's own padding-top (20px) + topbar's typical height. */ .hoa-main{padding:20px 22px 30px; display:flex; flex-direction:column; gap:18px; min-width:0} @media(min-width:901px){ .hoa-main{ max-height:100vh; max-height:100dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--border-cool-strong) transparent; } .hoa-main::-webkit-scrollbar{width:9px} .hoa-main::-webkit-scrollbar-track{background:transparent} .hoa-main::-webkit-scrollbar-thumb{background:var(--border-cool-strong); border-radius:6px} .hoa-main::-webkit-scrollbar-thumb:hover{background:var(--border-cool)} .hoa-topbar{position:sticky; top:0; z-index:5; background:var(--surface-bg); padding-bottom:6px} } .hoa-topbar{display:flex; align-items:center; gap:16px; flex-wrap:wrap} .hoa-topbar .word{display:flex; flex-direction:column; gap:1px} /* operator ruling 2026-09-09: the logo appeared twice (sidebar + topbar) at desktop widths — the sidebar already carries it (.hoa-logo), so hide the topbar's own brand block (mark + wordmark); it comes back at <=900px where the sidebar itself is hidden (MOBILE STACK block below). Placed HERE, after the unconditional base rules above, on purpose — same lesson as the sidebar's own mobile hide further down this file: equal specificity, later source order wins, so this hide placed inside the earlier @media(min-width:901px) block above lost to these unconditional .hoa-topbar-logo/.word rules (measured: display came back "flex" at 1280px until moved here). app.html shares this same markup + this shell.css link, so one rule covers both pages — it has no brand block of its own to fix in app.css. */ @media(min-width:901px){ .hoa-topbar-logo, .hoa-topbar .word{display:none} } .hoa-topbar .word b{font-size:15px; letter-spacing:.1em} .hoa-topbar .word span{color:var(--text-muted); font-size:12.5px} .hoa-topbar-actions{margin-left:auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; min-width:0} .hoa-topbar-actions button{padding:10px 17px; border-radius:12px; font-size:13.5px; font-weight:700} .hoa-topbar-actions .ghost{border:1px solid var(--border-cool-strong)} .hoa-topbar-actions .fill{background:linear-gradient(135deg,var(--k3-coral-light),var(--k3-coral-deep)); color:var(--text-on-accent); box-shadow:var(--k3-coral-glow)} .hoa-burger{display:none; font-size:19px} @media(max-width:900px){ .hoa-burger{display:grid; place-items:center; width:44px; height:44px; border-radius:10px; background:var(--surface-panel); border:1px solid var(--border-cool)} } /* ---- panel swap: every menu destination other than The Shore renders here (lane B fills content) ---- */ .hoa-panel{display:none} .hoa-panel.active{display:block} .hoa-panel-placeholder{background:var(--surface-panel); border:1px solid var(--border-cool); border-radius:var(--radius-lg); padding:40px 28px; margin-top:8px} .hoa-panel-placeholder h1{font-size:26px; margin-bottom:10px} .hoa-panel-placeholder p{color:var(--text-muted); font-size:16px; max-width:520px} .hoa-panel-placeholder .tag{display:inline-block; margin-top:16px; font-size:10.5px; letter-spacing:.14em; color:var(--accent-live); border:1px solid rgba(55,213,224,.35); border-radius:8px; padding:4px 9px} /* ============ HERO / THE SHORE ============ ONE composed scene (fix cycle 2): night water, cottage lights, twinkle + ripple (K3's art, ported), bottles floating across the whole scene, the hero text overlaid top-left over its own small scrim, the opened note as the top layer. z-index budget — the source of the correctness, not the band split fix cycle 1 used: water/lights/particles 1-9 < bottles ~40-96 (Math.round(b.y), dynamic) < .hoa-hero-text 100 < .hoa-note-card 500. A bottle can never cover the hero text or the note; the scrim (z:25) sits BELOW bottles on purpose — bottles are allowed to peek through it, exactly as they do in the K3 reference. At ≤900px the MOBILE STACK block below reverts to a flex-column, non-overlapping layout — fix cycle 1's mobile fixes (defect 4/5) are untouched by this section. */ .hoa-hero{position:relative} .hoa-scene{ position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--border-cool); height:clamp(560px,40vw,760px); background:linear-gradient(#040816 0%, #0a1530 30%, #16294f 50.5%, #0a1230 52%, #0d1a3c 70%, #1b3060 100%); } .hoa-scene::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:24; box-shadow:inset 0 0 120px rgba(0,0,0,.55); border-radius:var(--radius-lg)} /* scene height at medium desktop widths (fix cycle 3 — raised 440 -> 520px: at 440 the note's bottom-anchored top edge (bottom:5%, its own height) landed only ~12px below the slider controls row, close enough to read as an overlap in the round-3 screenshot; the note's top is fixed relative to the scene's BOTTOM while the controls are fixed relative to the scene's TOP, so raising the scene height pushes the note's top down without moving the controls at all — the same +80px becomes clearance between them. 1720 unchanged, already clear) */ /* operator revision 2026-09-09: "make the sky bigger" — +120px at every desktop width, horizon at 52% */ @media(min-width:901px) and (max-width:1500px){ .hoa-scene{height:640px} } @media(min-width:1501px){ .hoa-scene{height:720px} } /* ---- the water: sea texture, horizon glow, cottage lights, reflections, drifting sparkle pools and particles — all CSS keyframes on nested wrappers (D9), no JS per-frame loop ---- */ .hoa-sea-tex{position:absolute; left:0; right:0; top:52%; bottom:0; z-index:1; background:repeating-linear-gradient(180deg, rgba(200,220,255,.028) 0 1px, transparent 1px 9px)} /* revision 2 (operator: "check the water in the original design"): two sheets of soft wave crests sliding across the surface at different speeds, plus a moonlit band just under the horizon — the reference art's rippled, lit water; keyframes only, no JS per frame */ .hoa-swell{position:absolute; left:0; right:0; top:52%; bottom:0; z-index:2; pointer-events:none; opacity:.35; background:repeating-linear-gradient(180deg, rgba(190,215,255,.16) 0 2px, rgba(190,215,255,.04) 2px 6px, transparent 6px 30px); animation:hoa-swell calc(6s*var(--motion-scale,1)) linear infinite; -webkit-mask-image:linear-gradient(rgba(0,0,0,.25), #000 40%); mask-image:linear-gradient(rgba(0,0,0,.25), #000 40%)} @keyframes hoa-swell{from{background-position:0 0}to{background-position:0 30px}} .hoa-scene.paused .hoa-swell{animation-play-state:paused} .hoa-waves-old{position:absolute; left:-10%; right:-10%; top:52%; bottom:0; z-index:2; pointer-events:none; opacity:.95; background: repeating-radial-gradient(ellipse 140px 26px at 50% 50%, rgba(170,205,255,.0) 0 18px, rgba(190,220,255,.34) 19px 21px, rgba(170,205,255,0) 22px 60px), repeating-linear-gradient(178deg, rgba(190,220,255,.05) 0 2px, transparent 2px 14px); background-size:420px 90px, 100% 100%; animation:hoa-wave1 calc(26s*var(--motion-scale,1)) linear infinite} .hoa-waves-old.b{opacity:.6; background-size:300px 70px, 100% 100%; animation:hoa-wave2 calc(19s*var(--motion-scale,1)) linear infinite} /* revision 5 (operator: "the waves don't look natural"): no tiled rings. Two soft moonlight patches drift slowly across the surface; a fine, slightly skewed ripple grain slides sideways; the swell bands stay, dimmer. */ .hoa-waves{position:absolute; left:-20%; right:-20%; top:52%; bottom:0; z-index:2; pointer-events:none; opacity:.9; background: radial-gradient(42% 34% at 24% 38%, rgba(175,205,255,.16), transparent 70%), radial-gradient(36% 30% at 68% 66%, rgba(175,205,255,.12), transparent 70%), radial-gradient(28% 22% at 50% 88%, rgba(175,205,255,.10), transparent 70%); filter:blur(6px); animation:hoa-glide calc(38s*var(--motion-scale,1)) ease-in-out infinite alternate} @keyframes hoa-glide{from{transform:translate3d(-4%,0,0) scaleY(1)}to{transform:translate3d(4%,-2%,0) scaleY(1.06)}} .hoa-waves.b{opacity:.75; filter:blur(1.5px); background: repeating-linear-gradient(171deg, rgba(150,185,240,.10) 0 3px, rgba(150,185,240,.02) 3px 9px, transparent 9px 74px), repeating-linear-gradient(188deg, rgba(150,185,240,.07) 0 2px, transparent 2px 116px); background-size:100% 100%, 100% 100%; animation:hoa-grain calc(22s*var(--motion-scale,1)) linear infinite} @keyframes hoa-grain{from{background-position:0 0, 0 0}to{background-position:-60px 74px, 40px 116px}} @keyframes hoa-wave1{from{background-position:0 0, 0 0}to{background-position:420px 12px, 0 0}} @keyframes hoa-wave2{from{background-position:0 0, 0 0}to{background-position:-300px -8px, 0 0}} .hoa-moonband{position:absolute; left:0; right:0; top:52%; height:22%; z-index:2; pointer-events:none; background:linear-gradient(rgba(150,190,255,.16), rgba(150,190,255,.04) 45%, transparent)} .hoa-scene.paused .hoa-waves{animation-play-state:paused} .hoa-hglow{position:absolute; right:0; bottom:43%; width:52%; height:16%; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 82% 100%, rgba(255,170,80,.2), transparent 70%)} .hoa-stars{position:absolute; inset:0 0 46% 0; z-index:2} .hoa-stars span{position:absolute; border-radius:50%; background:#e4eeff; box-shadow:0 0 4px rgba(200,220,255,.8); animation:hoa-tw calc(3.4s*var(--motion-scale,1)) ease-in-out infinite} @keyframes hoa-tw{0%,100%{opacity:.2}50%{opacity:.95}} .hoa-shoreline{position:absolute; right:-2px; bottom:48%; width:46%; height:24%; z-index:3; pointer-events:none; -webkit-mask-image:linear-gradient(90deg, transparent, #000 22%); mask-image:linear-gradient(90deg, transparent, #000 22%)} .hoa-shoreline svg{width:100%; height:100%; display:block} .hoa-streak{position:absolute; top:53%; height:34%; width:86px; z-index:2; filter:blur(11px); transform:skewX(-14deg); background:linear-gradient(rgba(150,200,255,.15), transparent 82%); animation:hoa-flick calc(5s*var(--motion-scale,1)) ease-in-out infinite alternate} @keyframes hoa-flick{from{opacity:.45}to{opacity:1}} .hoa-aref{position:absolute; top:53.5%; z-index:2; width:10px; filter:blur(5px); transform:skewX(-6deg); background:linear-gradient(rgba(255,176,84,.55), rgba(255,176,84,.06) 75%, transparent); animation:hoa-flick calc(3.2s*var(--motion-scale,1)) ease-in-out infinite alternate} .hoa-pool{position:absolute; z-index:2; border-radius:50%; filter:blur(16px); pointer-events:none; background:radial-gradient(closest-side, rgba(120,180,255,.16), transparent); animation:hoa-poolmove calc(17s*var(--motion-scale,1)) ease-in-out infinite alternate} @keyframes hoa-poolmove{from{transform:translate3d(0,0,0)}to{transform:translate3d(46px,-8px,0)}} .hoa-sp{position:absolute; z-index:5; width:3px; height:2px; border-radius:50%; background:#fff6e6; pointer-events:none; box-shadow:0 0 8px 2px rgba(255,230,180,.75); animation:hoa-drift calc(9s*var(--motion-scale,1)) ease-in-out infinite alternate, hoa-tw calc(3.2s*var(--motion-scale,1)) ease-in-out infinite} @keyframes hoa-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(15px,-11px,0)}} .hoa-scene.paused .hoa-stars span, .hoa-scene.paused .hoa-pool, .hoa-scene.paused .hoa-streak, .hoa-scene.paused .hoa-aref, .hoa-scene.paused .hoa-sp{animation-play-state:paused} /* ---- hero text: overlaid top-left over the scene, above every bottle (z:100) ---- */ .hoa-scrim{position:absolute; z-index:25; left:0; top:0; width:58%; height:50%; pointer-events:none; border-radius:var(--radius-lg) 0 0 0; background:linear-gradient(100deg, rgba(5,9,20,.92) 0%, rgba(5,9,20,.6) 55%, transparent 90%)} .hoa-hero-text{position:absolute; z-index:100; left:30px; top:30px; width:min(420px,52%); text-shadow:0 2px 14px rgba(0,0,0,.85); -webkit-font-smoothing:antialiased} /* ---- bottles: the full scene is their coordinate space (D2/§3 — floating on the water); a bottle's dynamic z-index (Math.round(b.y), set in shore.js) never exceeds ~96, well under the hero text's 100 and the note's 500 ---- */ #hoaBottles{position:absolute; inset:0; z-index:30} /* revision 3: above the vignette (24) and the scrim (25) — a sailing bottle is never shaded */ /* ---- story slider (three slides, auto-rotate 8s, arrows + dots, pause under reduced motion §3) ---- */ .hoa-slider{position:relative; z-index:1; width:100%; text-shadow:0 2px 14px rgba(0,0,0,.7)} .hoa-slide{display:none} .hoa-slide.active{display:block; animation:hoa-fade calc(.5s*var(--motion-scale,1)) ease} @keyframes hoa-fade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:translateY(0)}} .hoa-slide .eyebrow{font-size:12px; letter-spacing:.32em; color:var(--accent-live); font-weight:800; margin-bottom:8px} .hoa-slide h1{font-size:34px; line-height:1.16; font-weight:800} .hoa-slide p{color:#c3cfee; font-size:16px; line-height:1.5; margin:12px 0 16px} .hoa-slide .cta{padding:13px 22px; border-radius:12px; background:linear-gradient(135deg,#3fdbe6,#1fb4c6); color:#04222a; font-weight:800; font-size:13.5px; letter-spacing:.08em; box-shadow:0 8px 26px rgba(55,213,224,.3); transition:transform var(--motion-fast)} .hoa-slide .cta:hover{transform:translateY(-2px)} /* operator revision: the slide bar (dots) and the PAUSE control are gone — arrows only */ .hoa-slider-controls{display:flex; align-items:center; gap:10px; margin-top:18px} .hoa-slider-arrow{width:36px; height:36px; border-radius:50%; background:rgba(6,11,24,.6); border:1px solid var(--border-cool-strong); display:grid; place-items:center; font-size:18px; color:#e8eefc; transition:background var(--motion-fast)} .hoa-slider-arrow:hover{background:rgba(63,219,230,.25)} /* ---- crisis line: the only thing left under the CTA in the hero (§0.3 — "a permanent, quiet entry under the hero"); the full pseudonymity paragraph moved to How the House works, Rule One, which already carries this wording verbatim (fix cycle 1, defect 2) ---- */ .hoa-crisis-line{position:relative; z-index:1; margin-top:14px} .hoa-crisis-line a{font-size:11.5px; color:var(--accent-price); text-decoration:underline; text-underline-offset:2px} /* ---- bottles: CSS-only ambient motion on nested wrappers (D9); rAF only for the open moment ---- */ /* operator revision 2026-09-09: bottles SAIL from the left edge to the right edge and wrap — one linear keyframe on the outer wrapper (duration per bottle: bigger/closer = faster, set once in shore.js as --sail-dur; a negative --sail-delay scatters them across the width on arrival); the bob + a gentle sway stay on the nested .bob wrapper. --sw is the scene's width in px, written by shore.js at load and on resize only (never per frame). Hover and open PAUSE that bottle's sailing so it can be clicked and read; the lift uses the individual `translate` property so it composes with the keyframe transform instead of fighting it. */ .hoa-bottle{position:absolute; left:0; z-index:6; cursor:pointer; will-change:transform; animation:hoa-sail var(--sail-dur,90s) linear infinite; animation-delay:var(--sail-delay,0s)} /* revision 2: a bottle SURFACES — rises from under the water with its glow — on arrival and each time it wraps (shore.js re-arms the class on the sail keyframe's iteration event, one event per ~90 s per bottle, never per frame). The clicked bottle sinks away while its horizontal twin appears in the note panel. */ .hoa-bottle .rise{animation:hoa-surface calc(1.6s*var(--motion-scale,1)) cubic-bezier(.2,.8,.2,1) both; animation-delay:var(--rise-delay,0s)} @keyframes hoa-surface{from{transform:translateY(56px) scale(.92); opacity:0; filter:blur(2px)}60%{opacity:1}to{transform:translateY(0) scale(1); opacity:1; filter:blur(0)}} .hoa-bottle.opening .rise{animation:hoa-sink calc(.9s*var(--motion-scale,1)) .55s ease-in both} @keyframes hoa-sink{from{transform:translateY(0); opacity:1}to{transform:translateY(64px); opacity:0}} /* fix cycle (operator screenshot 2026-09-16): a bottle in lane 0 (nearest the sidebar) spent ~half its multi-second entry crossing overflow-clipped by .hoa-scene while its full bounding-box centre (used for hit-testing/automation) still sat inside ASIDE.hoa-sidebar's own 0-250px column — elementFromPoint there correctly returns the sidebar, so a click landing exactly at that centre does nothing. Linear timing gave the bw-px entry/exit crossing the same px/s as the slow open-water cruise (~9s to fully enter at 1720px bottle sizes). Front/back-loading the keyframe (8%/92% stops) speeds the invisible-to-visible crossing ~1.8x while leaving the visible mid-lap drift untouched — halves the dwell where the centre is still off-scene, with no rAF/JS (D9) and no bounce. */ @keyframes hoa-sail{ 0%{transform:translateX(calc(-1.2 * var(--bw,140px)))} 8%{transform:translateX(calc(0.2 * var(--bw,140px)))} 92%{transform:translateX(calc(var(--sw,1200px) * var(--lap,1.7) - 0.2 * var(--bw,140px)))} 100%{transform:translateX(calc(var(--sw,1200px) * var(--lap,1.7) + .2 * var(--bw,140px)))} } .hoa-bottle:hover{z-index:300 !important} /* revision 6: the hovered bottle is the one that opens */ .hoa-bottle .bob{width:var(--bottle-w); will-change:transform; position:relative; z-index:2; transition:translate var(--motion-fast); animation:hoa-bob var(--bob-dur,7s) ease-in-out infinite alternate; animation-delay:var(--bob-delay,0s)} @keyframes hoa-bob{from{transform:translate3d(0,0,0) rotate(calc(var(--bottle-rot,0deg) - 3deg))}to{transform:translate3d(0,var(--bob-amp,-5px),0) rotate(calc(var(--bottle-rot,0deg) + 3deg))}} .hoa-scene.paused .hoa-bottle, .hoa-scene.paused .hoa-bottle .bob{animation-play-state:paused} .hoa-bottle.opening{animation-play-state:paused} .hoa-bottle:hover .bob{translate:0 -6px} .hoa-bottle.opening .bob{translate:0 -48px; transition:translate var(--motion-slow) cubic-bezier(.2,.8,.2,1)} .hoa-bsvg{display:block; width:100%; height:auto; filter:drop-shadow(0 0 1.2em var(--glow,rgba(120,180,255,.5)))} /* operator (2026-09-17): "clicking the bottle must POP THE CORK" — the old build only ran a slow .45s-delayed linear drift-and-fade, which never read as a pop. hoa-cork-pop instead shoots the cork up fast in its first ~20% (the pressurised release), keeps it tumbling as it arcs back down under gravity, then lets it fall past its start point while fading — CSS keyframes only (D9), the JS still just toggles .opening 60ms after click. */ .hoa-cork{transform-origin:center; opacity:1} .hoa-bottle.opening .hoa-cork{animation:hoa-cork-pop .62s cubic-bezier(.22,.9,.3,1) both} @keyframes hoa-cork-pop{ 0%{transform:translate(0,0) rotate(0deg) scale(1); opacity:1} 22%{transform:translate(-7px,-46px) rotate(-95deg) scale(1.08); opacity:1} 60%{transform:translate(-13px,-30px) rotate(-190deg) scale(.95); opacity:1} 100%{transform:translate(-16px,4px) rotate(-260deg) scale(.7); opacity:0} } /* the painted PNG bottle (bottleArt in shore.js) bakes its cork into one flat raster image — no element there to pop. .hoa-art-wrap carries a generic, asset-agnostic cork + flash at the neck, invisible at rest, so a click reads as a pop for painted bottles the same way the SVG fallback's own vector .hoa-cork already did. */ .hoa-art-wrap{display:block; position:relative} .hoa-pop-cork{position:absolute; left:50%; top:13%; width:15%; height:8%; margin-left:-7.5%; z-index:5; border-radius:30% 30% 40% 40%; background:linear-gradient(170deg,#f0c98a,#c99e64 60%,#a67c47); box-shadow:inset 0 -2px 3px rgba(120,80,30,.35); opacity:0; pointer-events:none} .hoa-pop-burst{position:absolute; left:50%; top:14%; width:28%; height:13%; margin-left:-14%; z-index:4; border-radius:50%; transform:scale(.3); opacity:0; pointer-events:none; background:radial-gradient(closest-side, rgba(255,250,230,.9), rgba(255,225,165,.35) 55%, transparent 76%)} .hoa-bottle.opening .hoa-pop-cork{animation:hoa-cork-pop .62s cubic-bezier(.22,.9,.3,1) both} .hoa-bottle.opening .hoa-pop-burst{animation:hoa-pop-burst .34s ease-out both} @keyframes hoa-pop-burst{ 0%{transform:scale(.3); opacity:0} 32%{transform:scale(1); opacity:.9} 100%{transform:scale(1.9); opacity:0} } .hoa-reflection{position:absolute; z-index:1; top:78%; left:50%; width:3.4em; height:4.6em; transform:translateX(-50%); background:linear-gradient(var(--glow,rgba(120,180,255,.5)), transparent 85%); filter:blur(.5em); border-radius:50%; opacity:.4; animation:hoa-pulse calc(5s*var(--motion-scale,1)) ease-in-out infinite} @keyframes hoa-pulse{0%,100%{opacity:.55}50%{opacity:1}} .hoa-scene.paused .hoa-reflection{animation-play-state:paused} .hoa-waterline{display:none} /* revision 5: the black slab under the bottle, retired with the painted art */ .hoa-waterline-old{position:absolute; z-index:3; left:-22%; width:144%; bottom:-1px; height:1.7em; pointer-events:none; background:linear-gradient(rgba(11,19,42,0), rgba(10,17,40,.92) 62%)} .hoa-rings{position:absolute; z-index:4; left:50%; top:calc(100% - .9em); width:0; height:0; pointer-events:none} .hoa-rings i{position:absolute; left:50%; top:50%; width:7em; height:2.1em; margin:-1.05em 0 0 -3.5em; border:1.5px solid var(--glow,rgba(120,180,255,.5)); border-radius:50%; opacity:0; animation:hoa-ripple calc(3.6s*var(--motion-scale,1)) linear infinite} .hoa-rings i:nth-child(2){animation-delay:1.2s} .hoa-rings i:nth-child(3){animation-delay:2.4s} @keyframes hoa-ripple{0%{transform:scale(.35); opacity:0}12%{opacity:.8}100%{transform:scale(1.55); opacity:0}} .hoa-scene.paused .hoa-rings i{animation-play-state:paused} .hoa-peek{position:absolute; z-index:9; bottom:calc(100% + 8px); left:50%; transform:translate(-50%,8px); opacity:0; pointer-events:none; background:rgba(8,14,34,.92); border:1px solid var(--border-cool); border-radius:10px; padding:7px 11px; text-align:center; white-space:nowrap; font-family:var(--k3-hand); font-size:13px; color:#ffe9c9; transition:opacity var(--motion-med) cubic-bezier(.2,.8,.2,1), transform var(--motion-med) cubic-bezier(.2,.8,.2,1)} .hoa-peek em{display:block; font-style:normal; font-family:var(--k3-sans); font-size:9px; letter-spacing:.14em; color:var(--accent-live); margin-top:2px} .hoa-bottle:hover .hoa-peek{opacity:1; transform:translate(-50%,0)} /* moved off the cottage-light shoreline art (fix cycle 3): the shoreline SVG occupies roughly x:54%-100%, y:17%-44% of the scene, and the old left:50%/top:33% put this hand-written cue right on top of it. A first attempt at left:10%/top:52% cleared the shoreline but landed on the hero-text column instead (it runs to ~55% width, ~64% height) and overlapped the crisis line. Open water: right of the hero-text column, below the shoreline's y-range. */ .hoa-tip{position:absolute; z-index:26; left:50%; bottom:20px; transform:translateX(-50%); max-width:calc(100% - 140px); text-align:center; font-family:var(--k3-hand); color:#ffe9c9; font-size:15px; text-shadow:0 2px 8px rgba(0,0,0,.8); pointer-events:none} .hoa-tip.gone{display:none} .hoa-tip-old{position:absolute; z-index:26; left:40%; top:56%; font-family:var(--k3-hand); color:#ffe9c9; font-size:15px; text-shadow:0 2px 8px rgba(0,0,0,.8); pointer-events:none; transform:rotate(-3deg)} /* ---- opened note (desktop: in-scene parchment; §3 "unfurls", 300ms) — the TOP LAYER of the whole scene: z-index 500 clears every bottle (dynamic z-index up to ~96 by y-position) and the hero text (100), and sits bottom-anchored, well clear of the slider/pause/arrows/dots controls up in the top-left (fix cycle 1, defect 1's ordering fix, carried forward) ---- */ /* operator revision 2026-09-09: "when clicked the bottle message should show in a bottle shaped place holder" — a glass bottle (cork, neck, body) standing on the right of the scene, the parchment note inside its body; the note scrolls inside the glass when the text is long. */ /* revision 2 (operator): after the cork pops the bottle appears HORIZONTAL with the message over it — the reference art's lying bottle + unrolled note. The panel sits on the water at the foot of the scene, clear of the hero text and arrows up top; the lying bottle surfaces from below. */ /* revision 4 — the operator's click design: a torn parchment note lying on the water, the opened bottle tucked at its lower-left corner (in front of the paper's edge), soft pills. Rises from the water; the paper unfurls from the left. */ .hoa-note-card{position:absolute; left:52%; bottom:5%; transform:translateX(-50%) translateY(40px) rotate(-1.2deg); z-index:500; width:min(700px,92%); height:auto; display:block; opacity:0; visibility:hidden; transition:opacity var(--motion-med), visibility var(--motion-med), transform calc(.7s*var(--motion-scale,1)) cubic-bezier(.2,.8,.2,1); pointer-events:none} .hoa-note-card.show{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) rotate(-1.2deg)} .hoa-note-bottle{position:absolute; left:-64px; bottom:-34px; width:160px; height:160px; z-index:3; pointer-events:none; transform:rotate(-36deg); transform-origin:60% 70%} .hoa-note-bottle .art{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; filter:drop-shadow(0 0 1.1em var(--glow,rgba(120,180,255,.5)))} .hoa-note-bottle .art img, .hoa-note-bottle .art svg{display:block; width:100%; height:auto} .hoa-note-bottle .hoa-rings{left:56%; top:88%; transform:rotate(36deg)} .hoa-note-bottle .hoa-rings i{width:9em; height:2.6em; margin:-1.3em 0 0 -4.5em; border-color:rgba(190,220,255,.7)} .hoa-note-card.show .hoa-note-bottle{animation:hoa-tilt-in calc(.9s*var(--motion-scale,1)) cubic-bezier(.2,.8,.2,1) both} @keyframes hoa-tilt-in{from{transform:rotate(-70deg) translateY(30px); opacity:0}to{transform:rotate(-36deg) translateY(0); opacity:1}} .hoa-paper{position:relative; z-index:2; color:#2b2418; padding:28px 30px 22px 100px; width:100%; max-height:min(280px,40vh); overflow-y:auto; scrollbar-width:thin; display:flex; flex-direction:column; transform-origin:left center; background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.35), transparent 60%), radial-gradient(90% 70% at 90% 100%, rgba(120,90,40,.16), transparent 60%), linear-gradient(170deg, #f1e6cc, #e7d9b8 60%, #e1d1ad); box-shadow:0 26px 50px rgba(0,0,0,.55), inset 0 0 40px rgba(120,90,40,.12); clip-path:polygon(0.6% 2%, 4% 0.2%, 9% 1.6%, 15% 0.4%, 22% 1.8%, 30% 0.6%, 38% 1.4%, 47% 0.3%, 55% 1.7%, 63% 0.5%, 71% 1.5%, 80% 0.4%, 88% 1.8%, 95% 0.6%, 99.5% 2.2%, 99.2% 12%, 100% 22%, 99.1% 35%, 99.8% 48%, 99% 61%, 99.7% 74%, 99.1% 87%, 99.6% 97%, 95% 99.4%, 88% 98.2%, 80% 99.6%, 71% 98.4%, 62% 99.5%, 53% 98.3%, 45% 99.6%, 36% 98.5%, 28% 99.4%, 19% 98.3%, 11% 99.5%, 4% 98.6%, 0.4% 96%, 1% 84%, 0.2% 70%, 1.1% 56%, 0.3% 42%, 1% 28%, 0.2% 14%)} /* the unfurl's hidden start state belongs to the in-scene bottle only — the mobile sheet reuses .hoa-paper and must render its text immediately */ .hoa-note-card .hoa-paper{transform:scaleX(.08); transform-origin:left center; opacity:0} .hoa-note-card.show .hoa-paper{animation:hoa-unfurl var(--motion-med) cubic-bezier(.2,.9,.25,1.08) forwards} @keyframes hoa-unfurl{0%{transform:scaleX(.08); opacity:0}35%{opacity:1}100%{transform:scaleX(1); opacity:1}} .hoa-paper .q{font-family:var(--k3-serif); font-size:19px; line-height:1.5; font-style:normal; padding-right:48px} /* clear of the close pill */ /* operator (09-16 screenshot): "the paper flies out of the bottle and becomes the message" — a folded scrap sliding out of the neck, unfolding (scale+rotate) while it travels to the card, fading only in its last third so it reads as handing off into the card's own hoa-unfurl rather than two disconnected animations. transform-origin:bottom centre so the rotate reads as the paper pivoting out of the cork, not spinning in place. --fly-ms is set once per open by JS (D9: no rAF loop, one rAF frame to commit the end transform after the start transform has painted). */ .hoa-fly{position:absolute; z-index:600; width:16px; height:38px; border-radius:2px 2px 5px 5px; transform-origin:50% 100%; pointer-events:none; opacity:1; background:linear-gradient(170deg,#f6ecd4,#e7d6ad 55%,#dcc796), repeating-linear-gradient(180deg, rgba(107,90,62,.4) 0 1px, transparent 1px 6px); box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(120,90,40,.3); transition:transform var(--fly-ms,.76s) cubic-bezier(.16,1,.3,1), opacity calc(var(--fly-ms,.76s) * .32) ease-in; transition-delay:0s, calc(var(--fly-ms,.76s) * .68)} .hoa-paper .from{margin-top:12px; font-family:var(--k3-serif); font-size:14.5px; color:#6b5a3e} .hoa-paper .hrt{color:var(--parchment-accent); font-size:15px; cursor:pointer} .hoa-note-actions{display:flex; gap:9px; margin-top:18px; flex-wrap:nowrap; align-items:center} .hoa-note-actions .report{margin-left:auto; font-size:10.5px; color:var(--parchment-rule); text-decoration:underline; align-self:center} .hoa-btn{padding:10px 16px; border-radius:10px; font-size:13px; font-weight:800; letter-spacing:.07em; transition:transform var(--motion-fast)} .hoa-btn:hover{transform:translateY(-1px)} .hoa-btn.coral{background:var(--accent-primary-fill); color:var(--text-on-accent)} .hoa-btn.ghost{border:1.5px solid #8a7648; color:#5a4a28} .hoa-btn.cyan{color:#0e7d8c; border:1.5px solid #57c6d2} .hoa-btn.felt{background:var(--parchment-accent) !important; color:#fff !important} .hoa-btn.gated{opacity:.92} /* ============ QUICK ACTIONS (permanently in the first viewport, under the hero — §0.4) ============ */ .hoa-qa{border:1px solid var(--border-cool); border-radius:var(--radius-lg); padding:16px} .hoa-qa h3{font-size:11px; letter-spacing:.26em; color:var(--text-muted); margin-bottom:12px} .hoa-qa-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px} .hoa-tile{background:var(--qa-tile-bg); border:1px solid var(--border-cool); border-radius:var(--qa-tile-radius); padding:18px 16px; display:flex; flex-direction:column; gap:10px; transition:transform var(--motion-fast), border-color var(--motion-fast); text-align:left} .hoa-tile:hover{transform:translateY(-3px); border-color:rgba(55,213,224,.4)} .hoa-tile .ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:17px} .hoa-tile b{font-size:18px} .hoa-tile span{color:var(--text-muted); font-size:13px} @media(max-width:640px){.hoa-qa-grid{grid-template-columns:repeat(2,1fr)}} /* ============ BELOW THE FOLD — placeholder blocks (lane B fills; §3) ============ */ .hoa-fold{display:flex; flex-direction:column; gap:14px; margin-top:6px} .hoa-fold-block{border:1px solid var(--border-cool); border-radius:var(--radius-lg); padding:24px} .hoa-fold-block h2{font-size:19px; margin-bottom:8px} .hoa-fold-block p{color:var(--text-muted); font-size:16px; max-width:640px} .hoa-fold-block .lane-b{display:inline-block; margin-top:10px; font-size:10px; letter-spacing:.12em; color:var(--accent-community); border:1px dashed rgba(139,108,240,.4); border-radius:8px; padding:3px 8px} /* ============ RIGHT RAIL ============ */ .hoa-rail{padding:20px 22px 30px 0; display:flex; flex-direction:column; gap:22px} .hoa-rail section{display:flex; flex-direction:column} .hoa-rail h3{font-size:12px; letter-spacing:.26em; color:var(--text-muted); margin-bottom:12px} .hoa-card{background:var(--rail-card-bg); border:1px solid var(--rail-card-border); border-radius:var(--rail-card-radius); padding:14px; margin-bottom:10px} .hoa-ev{display:flex; align-items:center; gap:12px} .hoa-ev .date{width:48px; flex:none; text-align:center; background:var(--chip-date-bg); color:var(--chip-date-fg); border-radius:10px; padding:6px 0} .hoa-ev .date b{display:block; font-size:15px} .hoa-ev .date span{font-size:10px; letter-spacing:.14em; opacity:.75} .hoa-ev b{font-size:15px} .hoa-ev p{color:var(--text-muted); font-size:12.5px} .hoa-ev .hoa-btn{margin-left:auto; flex:none} .hoa-ev[role="button"]{cursor:pointer; min-height:44px; -webkit-tap-highlight-color:transparent} .hoa-ev[role="button"]:hover{background:var(--surface-hover)} .hoa-ev[role="button"]:focus-visible{outline:2px solid var(--accent-price); outline-offset:2px} .hoa-event-card.is-highlighted{animation:hoaEventRing 2s ease-out 1} @keyframes hoaEventRing{ 0%{box-shadow:0 0 0 3px var(--accent-price)} 80%{box-shadow:0 0 0 3px var(--accent-price)} 100%{box-shadow:0 0 0 0 transparent} } .hoa-btn.outline{border:1px solid var(--border-cool); color:var(--text-muted)} .hoa-btn.fill-c{background:var(--badge-count-bg); color:var(--badge-count-fg)} .hoa-membership-card{display:none} .hoa-membership-card.show{display:block} /* ============ MOBILE BOTTOM SHEET (D5) ============ */ /* phones (iOS/Android): the opened note is the reference card, centred over a dimmed shore; dvh + safe-area so the home indicator never covers the pills; the sheet scrolls inside if a note is long */ .hoa-sheet{position:fixed; inset:0; z-index:100; background:rgba(3,6,15,.72); backdrop-filter:blur(6px); display:flex; justify-content:center; align-items:flex-end; overscroll-behavior:contain} .hoa-sheet[hidden]{display:none} .hoa-sheet-inner{width:100%; max-height:88vh; max-height:88dvh; overflow:visible; padding:0 14px calc(22px + env(safe-area-inset-bottom)) 14px} .hoa-sheet-card{position:relative; margin-top:70px; animation:hoa-sheet-in calc(.45s*var(--motion-scale,1)) cubic-bezier(.2,.8,.2,1) both} @keyframes hoa-sheet-in{from{transform:translateY(40px); opacity:0}to{transform:translateY(0); opacity:1}} .hoa-sheet-card .hoa-note-bottle{left:-26px; bottom:-28px; width:118px; height:118px; z-index:3} .hoa-sheet-card .hoa-paper{padding:26px 22px 20px 22px; max-height:min(62vh,62dvh); overflow-y:auto; -webkit-overflow-scrolling:touch; transform:none; opacity:1} .hoa-sheet-card .hoa-paper .q{font-size:17px; margin-right:34px} .hoa-sheet-actions{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; padding-left:64px} .hoa-sheet-actions .hoa-pill{min-height:44px; flex:1 1 auto; justify-content:center} .hoa-sheet-card .hoa-pill.close{min-height:36px} /* ============ SIGN-IN SHEET (gated actions) ============ */ .hoa-signin-sheet{position:fixed; inset:0; z-index:110; background:var(--overlay-backdrop); backdrop-filter:blur(6px); display:grid; place-items:center} .hoa-signin-sheet[hidden]{display:none} .hoa-signin-card{width:min(360px,92%); background:var(--surface-panel); border:1px solid var(--border-cool); border-radius:var(--radius-lg); padding:24px; text-align:center} .hoa-signin-card h4{font-size:18px; margin-bottom:8px} .hoa-signin-card p{color:var(--text-muted); font-size:15px; margin-bottom:16px} .hoa-signin-card .row{display:flex; gap:8px} .hoa-signin-card .row button{flex:1; padding:11px; border-radius:12px; font-size:12px; font-weight:700; min-height:44px} .hoa-signin-card .row .fill{background:linear-gradient(135deg,var(--k3-coral-light),var(--k3-coral-deep)); color:var(--text-on-accent)} .hoa-signin-card .row .ghost{border:1px solid var(--border-cool-strong)} /* ============ DRAWER (mobile menu) ============ */ .hoa-drawer{position:fixed; inset:0 auto 0 0; width:262px; background:var(--surface-panel-alt); z-index:120; transform:translateX(-105%); transition:transform var(--motion-slow) cubic-bezier(.2,.8,.2,1); padding:calc(20px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)) 14px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; border-right:1px solid var(--border-cool)} .hoa-drawer.open{transform:translateX(0)} .hoa-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:110; opacity:0; visibility:hidden; transition:opacity var(--motion-fast), visibility var(--motion-fast)} .hoa-backdrop.show{opacity:1; visibility:visible} /* ============ TOAST ============ */ .hoa-toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,80px); z-index:200; background:var(--toast-bg); border:1px solid var(--toast-border); color:var(--text-primary); padding:11px 18px; border-radius:var(--radius-pill); font-size:12.5px; transition:transform var(--motion-slow) cubic-bezier(.2,.9,.3,1.2); box-shadow:var(--note-card-shadow)} .hoa-toast.show{transform:translate(-50%,0)} /* ============ MOBILE STACK (D5, ≤900px covers the task's ≤720px mobile requirement) ============ .hoa-sidebar's display:none lives HERE, after its base rule (fix cycle 1, defect 4's root cause) — the identical override used to sit in the APP GRID media query above, which is earlier in the file than .hoa-sidebar's own unconditional base rule; same specificity, later source order, so display:flex silently won at every width and the rail filled the mobile screen instead of collapsing to the drawer. */ @media(max-width:900px){ .hoa-sidebar{display:none} .hoa-main{padding:14px 14px 88px} /* bottom padding clears the sticky Join bar */ /* ---- topbar budget at 390px (fix cycle 2, defect 1): the desktop sizing (44px burger + full "HOUSE OF ANONS" wordmark + 16px-padded Sign-in/Join buttons) needed ~447px and only had ~2-3px of slack at 390 after the browser's own flex-wrap/shrink pass — a font-metric rounding difference of a few px was enough to clip "Join the House". Real margin, not a rename: smaller gaps, smaller buttons, and topbar-actions itself allowed to wrap onto a second line as a last-resort safety net (see the base rule's flex-wrap above) so NO combination of metrics can push a button past the viewport edge again. ---- */ .hoa-topbar{gap:8px; padding-top:env(safe-area-inset-top)} .hoa-topbar .word span{display:none} .hoa-topbar .word b{font-size:11.5px} .hoa-topbar-actions{gap:6px} .hoa-topbar-actions button{min-height:44px; padding:8px 10px; font-size:11px} .hoa-slider{width:auto; padding:14px 0} .hoa-scrim{display:none} .hoa-stars{display:none} .hoa-shoreline,.hoa-streak,.hoa-aref,.hoa-pool,#hoaSparkles,.hoa-moonband{display:none} .hoa-waves{opacity:.35} /* mobile reverts to the flex-stacked, non-overlapping layout fix cycle 1 fixed (defect 4/5) — the desktop absolute-overlay composition above (fix cycle 2) is a >900px-only change */ .hoa-scene{height:auto; display:flex; flex-direction:column} .hoa-hero-text{position:static; z-index:auto; left:auto; top:auto; width:auto; padding:16px 14px} /* fix cycle 3: was min-height:340px with bottles still using their desktop y:43-77% range, so the top ~43% of the band (~145px) was empty water and every bottle clustered in the bottom third. shore.js now remaps each bottle's y to an 8-92% band on mobile (JS, ≤900px only) so they spread across the container's full height; height cut from 340 to 300px to match that tighter, filled spread rather than leaving new slack at the edges. */ #hoaBottles{position:relative; flex:1 1 auto; min-height:340px} .hoa-note-card{display:none} /* desktop in-scene note is replaced by the bottom sheet on mobile */ .hoa-drawer .hoa-nav-item{min-height:44px} } @media(max-width:430px){ /* narrowest phones (390px and below): the wordmark text is the lowest-priority element in the topbar (the drawer and sidebar both already carry "HOUSE OF ANONS" in full) — dropping it here is real margin, not a rename, and removes the last source of budget pressure at this width without shrinking the Sign-in/Join buttons any further (fix cycle 2, defect 1). */ .hoa-topbar .word{display:none} } /* ---- sticky "Join the House" bar (D5/§3 mobile — public lane; fix cycle 1, defect 4) ---- */ .hoa-mobile-cta{display:none} @media(max-width:900px){ .hoa-mobile-cta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:90; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, rgba(6,11,24,0), rgba(6,11,24,.94) 35%); } .hoa-mobile-cta .hoa-btn{width:100%; min-height:44px; font-size:12.5px; display:flex; align-items:center; justify-content:center} } /* ============ REDUCED MOTION — explicit, not just the duration*0 trick tokens.css leaves in place for anything this misses (D9: ambient motion off; the slider's JS also checks the query and stops auto-rotating) ============ */ @media(prefers-reduced-motion: reduce){ .hoa-bottle, .hoa-bottle .bob, .hoa-bottle .rise, .hoa-waves, .hoa-stars span, .hoa-reflection, .hoa-rings i, .hoa-slide.active{ animation:none !important } .hoa-bottle:hover{ transition:none } } /* revision 4 — the note's pills (operator's reference: pink feel, mint reply, white next, round close) */ .hoa-pill{display:inline-flex; flex:none; align-items:center; gap:6px; padding:10px 14px; border-radius:12px; font-size:12px; white-space:nowrap; font-weight:800; letter-spacing:.06em; color:#2b2418; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform var(--motion-fast)} .hoa-pill:hover{transform:translateY(-1px)} .hoa-pill .ic{font-size:14px; font-weight:400} .hoa-pill.feel{background:#f4bcb8; color:#5a2626} .hoa-pill.feel.felt{background:#e88f88; color:#3d1414} .hoa-pill.reply{background:#bfe4d6; color:#1e4a3f} .hoa-pill.next{background:#fbf7ee; color:#2b2418; border:1px solid #d9cdb2} .hoa-pill.close{position:absolute; top:12px; right:14px; z-index:3; flex:none; width:36px; height:36px; padding:0; justify-content:center; border-radius:50%; background:#fbf7ee; border:1px solid #d9cdb2; color:#2b2418; font-size:13px} .hoa-note-actions .report{margin-left:auto; font-size:11px; color:#8a7654; text-decoration:underline; white-space:nowrap} @media(max-width:1240px){ .hoa-note-actions{flex-wrap:wrap} } /* painted bottle artwork in the sailing animation (assets/bottles/.png; SVG fallback) */ .hoa-bimg{display:block; width:100%; height:auto; filter:brightness(1.22) saturate(1.4) contrast(1.06) drop-shadow(0 0 1.3em var(--glow,rgba(120,180,255,.5))) hue-rotate(var(--hue,0deg))} /* revision 6: brighter, as in the reference */ .hoa-bottle.lying .bob{width:calc(var(--bottle-w) * 1.35)} /* M1 links: controls that became real keep the look of the