/* =====================================================================
   BEAUTY: the Beauty and the Beast screening page (2.11.2026), a walk through the castle.
   Loaded only when the page skin has "beauty" (build.py stylesheets); event.css stays the base.
   Colour order: winter night is the ground, gold is the light, the rose is the one hot colour.
   The art is portrait, so wide screens set it beside the text and fade its edge into the night; phones stack it.
   ===================================================================== */
body.beauty {
  --b-night: #0b0a22; --b-violet: #2a1450; --b-gold: #efc56f; --b-gold-deep: #c98f2e; --b-rose: #ff4d7d; --b-wine: #6d1238;
  --b-cream: #fbefd5; --b-ice: #dbe6ff; --b-ink: #2b1626;
  background: var(--b-night); color: var(--b-ice);
}
body.beauty .sky { background: var(--b-night); }
body.beauty .doodles { display: none; }
body.beauty h2 { color: var(--b-gold); font-family: var(--font-hand); font-weight: 700; line-height: 1.15; text-wrap: balance; text-shadow: 0 3px 18px #000; }
body.beauty .eyebrow { color: #ff9db7; }
body.beauty .btn-ghost { background: rgba(11, 10, 34, 0.55); }

.bb-art, .bb-blur { position: absolute; pointer-events: none; }
.bb-art { inset: 0; overflow: hidden; }
.bb-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-blur { inset: -6%; z-index: 0; background: var(--img) center / cover no-repeat; filter: blur(34px) brightness(0.72) saturate(1.15); }
.bb-glow { filter: brightness(1.5) saturate(1.3); opacity: 0;
  -webkit-mask-image: radial-gradient(circle at var(--gx) var(--gy), #000, transparent var(--gr)); mask-image: radial-gradient(circle at var(--gx) var(--gy), #000, transparent var(--gr));
  animation: bb-breathe 6s ease-in-out infinite alternate; }
@keyframes bb-breathe { from { opacity: 0.1; } to { opacity: 0.85; } }
.bb-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* ---------- the castle: the whole picture on one side, the name on the other ---------- */
.bb-hero { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; display: flex; }
.bb-hero .bb-art { z-index: 1; inset-inline-start: auto; inset-inline-end: 0; width: 60%;
  -webkit-mask-image: linear-gradient(to right, #000 52%, rgba(0,0,0,.82) 64%, rgba(0,0,0,.5) 77%, rgba(0,0,0,.2) 88%, rgba(0,0,0,.05) 96%, transparent); mask-image: linear-gradient(to right, #000 52%, rgba(0,0,0,.82) 64%, rgba(0,0,0,.5) 77%, rgba(0,0,0,.2) 88%, rgba(0,0,0,.05) 96%, transparent); }
.bb-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 18%; z-index: 2; background: linear-gradient(transparent, var(--b-night)); }
.bb-hero-in { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.2vh, 36px); padding-block: calc(var(--header-h, 80px) + 24px) 56px; }
.bb-hero-in > * { max-width: min(46%, 640px); }
.bb-kicker { margin: 0 0 10px; font-family: var(--font-hand); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--b-cream); text-shadow: 0 2px 10px #000; }
.bb-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 22px #000); animation: bb-rise 1.3s var(--ease-out) both; }
@keyframes bb-rise { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.bb-line { margin: 14px 0 0; font-family: var(--font-hand); font-size: clamp(1.15rem, 1.8vw, 1.55rem); color: var(--b-cream); text-wrap: balance; text-shadow: 0 2px 12px #000; }
.bb-soon { margin: 0; display: grid; gap: 2px; padding-block: 12px; border-block: 1px solid rgba(239, 197, 111, 0.45); }
.bb-soon small { font-family: var(--font-hand); font-weight: 600; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--b-cream); }
.bb-soon b { font-family: var(--font-hand); font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.1; color: var(--b-gold); text-shadow: 0 3px 16px #000; }
.bb-soon span { color: var(--b-ice); font-size: clamp(1rem, 1.3vw, 1.14rem); text-wrap: pretty; }
.bb-hero-btns .btn-row, .bb-room-btns .btn-row { justify-content: flex-start; margin: 0; }

/* ---------- the gate: one sentence in the dark of the arch ---------- */
.bb-gate { position: relative; isolation: isolate; overflow: hidden; height: 100svh; min-height: 620px; display: grid; place-items: center; }
.bb-gate .bb-art { z-index: 1; inset-inline: calc(50% - 50vh * 1.12); width: calc(100vh * 1.12); max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.2) 7%, rgba(0,0,0,.55) 14%, #000 26%, #000 74%, rgba(0,0,0,.55) 86%, rgba(0,0,0,.2) 93%, transparent); mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.2) 7%, rgba(0,0,0,.55) 14%, #000 26%, #000 74%, rgba(0,0,0,.55) 86%, rgba(0,0,0,.2) 93%, transparent); }
.bb-gate::before, .bb-gate::after { content: ''; position: absolute; inset-inline: 0; height: 16%; z-index: 2; }
.bb-gate::before { top: 0; background: linear-gradient(var(--b-night), transparent); }
.bb-gate::after { bottom: 0; background: linear-gradient(transparent, var(--b-night)); }
.bb-gate-in { position: relative; z-index: 3; width: min(62vh, 88vw); margin-top: -13vh; padding-inline: 16px; text-align: center; }
.bb-gate h2 { margin: 0; font-size: clamp(1.7rem, 4.2vh, 2.7rem); color: var(--b-cream); }

/* ---------- a room: the art on one side, the words on the other ---------- */
.bb-room { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 1000px); display: flex; align-items: center; }
.bb-room .bb-art { z-index: 0; inset-inline-start: auto; inset-inline-end: -10%; width: 70%;
  -webkit-mask-image: linear-gradient(to right, #000 66%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.2) 92%, rgba(0,0,0,.05) 97%, transparent), linear-gradient(transparent, rgba(0,0,0,.45) 7%, #000 16%, #000 84%, rgba(0,0,0,.45) 93%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, #000 66%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.2) 92%, rgba(0,0,0,.05) 97%, transparent), linear-gradient(transparent, rgba(0,0,0,.45) 7%, #000 16%, #000 84%, rgba(0,0,0,.45) 93%, transparent); mask-composite: intersect; }
.bb-room.flip .bb-art { inset-inline-end: auto; inset-inline-start: -10%;
  -webkit-mask-image: linear-gradient(to left, #000 66%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.2) 92%, rgba(0,0,0,.05) 97%, transparent), linear-gradient(transparent, rgba(0,0,0,.45) 7%, #000 16%, #000 84%, rgba(0,0,0,.45) 93%, transparent);
  mask-image: linear-gradient(to left, #000 66%, rgba(0,0,0,.82) 74%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.2) 92%, rgba(0,0,0,.05) 97%, transparent), linear-gradient(transparent, rgba(0,0,0,.45) 7%, #000 16%, #000 84%, rgba(0,0,0,.45) 93%, transparent); }
.bb-room-in { position: relative; z-index: 3; display: flex; padding-block: clamp(50px, 8vh, 90px); }
.bb-room.flip .bb-room-in { justify-content: flex-end; }
.bb-room-text { width: min(44%, 620px); }
.bb-room h2, .bb-library h2 { margin: 6px 0 16px; font-size: clamp(2rem, 3.5vw, 3rem); }
.bb-room-body { font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.7; color: var(--b-ice); text-wrap: pretty; }
.bb-room-body p { margin: 0 0 0.75em; }
.bb-rules { list-style: none; margin: 18px 0 0; padding: 0; }
.bb-rules li { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: baseline; padding-block: 12px; border-top: 1px solid rgba(239, 197, 111, 0.32); }
.bb-rules li:last-child { border-bottom: 1px solid rgba(239, 197, 111, 0.32); }
.bb-rules strong { font-family: var(--font-hand); color: var(--b-gold); font-size: 1.28rem; }
.bb-room-btns { margin-top: 22px; }

.bb-room.rose .bb-art { inset-inline-end: 0; width: 62%; }

/* ---------- the library: every screening so far is a book on the shelf ---------- */
.bb-library { position: relative; isolation: isolate; overflow: hidden; }
.bb-library .bb-art { z-index: -2; }
.bb-library::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--b-night), rgba(20, 10, 22, 0.4) 18%, rgba(20, 10, 22, 0.56) 60%, var(--b-night)); }
.bb-library-in { max-width: min(100%, 1400px); padding-block: clamp(70px, 11vh, 120px); text-align: center; }
.bb-library .eyebrow { justify-content: center; }
.bb-library .bb-room-body { max-width: 640px; margin-inline: auto; }
.bb-shelf { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 30px clamp(12px, 1.3vw, 26px); margin-top: 30px; padding-bottom: 12px; }
.bb-book { position: relative; display: block; width: clamp(104px, 9.6vw, 150px); color: inherit; text-decoration: none; transition: transform 0.45s var(--ease-spring); }
.bb-book img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: 0 16px 26px -8px #000; border-inline-start: 7px solid var(--c, var(--b-gold)); }
.bb-book small { display: block; margin-top: 10px; font-family: var(--font-hand); font-size: 0.9rem; color: var(--b-cream); line-height: 1.25; text-wrap: balance; }
a.bb-book:hover { transform: translateY(-10px) rotate(-1.5deg); }
.bb-book.next { display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 5 / 7; padding: 14px; border-radius: 3px 8px 8px 3px;
  background: var(--img) center / cover no-repeat; box-shadow: 0 0 34px -4px rgba(255, 77, 125, 0.75), 0 16px 26px -8px #000; animation: bb-book 3.6s ease-in-out infinite alternate; }
.bb-book.next img { aspect-ratio: auto; object-fit: contain; border: 0; box-shadow: none; }
.bb-book.next em { font-style: normal; font-family: var(--font-hand); font-weight: 700; color: var(--b-gold); }
@keyframes bb-book { to { box-shadow: 0 0 58px 4px rgba(255, 77, 125, 0.75), 0 16px 26px -8px #000; } }

/* ---------- the ballroom: the evening, as Lumiere would serve it ---------- */
.bb-ball { position: relative; isolation: isolate; overflow: hidden; min-height: min(100svh, 1040px); display: flex; align-items: center; }
.bb-ball .bb-art { z-index: -2; }
.bb-ball::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--b-night), transparent 18%, transparent 80%, var(--b-night)); }
.bb-ball-in { padding-block: clamp(56px, 9vh, 96px); display: flex; justify-content: center; }
.bb-menu { width: min(100%, 560px); padding: clamp(26px, 3.4vw, 42px) clamp(22px, 3vw, 44px) 26px; text-align: center; color: var(--b-ink); background: radial-gradient(120% 90% at 50% 0%, #fff8e6, var(--b-cream) 55%, #ecd6a8);
  border-radius: 6px; box-shadow: inset 0 0 0 5px var(--b-cream), inset 0 0 0 6px var(--b-gold-deep), 0 30px 60px -14px #000; rotate: -1.2deg; }
.bb-menu-top { margin: 0; font-family: var(--font-hand); font-weight: 600; color: var(--b-wine); }
body.beauty .bb-menu h2 { margin: 2px 0 2px; font-size: clamp(2.3rem, 4.4vw, 3.4rem); color: var(--b-wine); text-shadow: none; }
.bb-menu-sub { margin: 0 0 14px; font-weight: 600; }
.bb-menu ol { list-style: none; margin: 0; padding: 0; }
.bb-menu li { padding-block: 13px; border-top: 1px dotted var(--b-gold-deep); display: grid; gap: 1px; }
.bb-menu small { font-family: var(--font-hand); font-size: 0.92rem; color: var(--b-wine); }
.bb-menu strong { font-size: 1.28rem; font-weight: 800; }
.bb-menu li span { font-size: 1.02rem; line-height: 1.45; text-wrap: balance; }
.bb-menu-note { margin: 0; padding-top: 12px; border-top: 1px dotted var(--b-gold-deep); font-family: var(--font-hand); font-size: 0.95rem; text-wrap: balance; }

.bb-props { position: absolute; inset: auto 0 24px; display: flex; justify-content: space-between; align-items: flex-end; padding-inline: max(12px, calc(50vw - 640px)); pointer-events: none; }
.bb-props source { display: none; }
.bb-pedestal { width: min(calc(50vw - 330px), 322px); height: auto; filter: drop-shadow(0 18px 22px #000); }
.bb-cand { position: relative; display: block; width: min(calc(50vw - 370px), 270px); aspect-ratio: 1190 / 1750; }
.bb-cand img { width: 100%; height: auto; filter: drop-shadow(0 16px 20px #000); }
.bb-cand::after { content: ''; position: absolute; inset: -14% -14% 40%; background: radial-gradient(11% 15% at 15% 22%, rgba(255, 196, 110, 0.7), transparent), radial-gradient(11% 15% at 50% 16%, rgba(255, 196, 110, 0.75), transparent), radial-gradient(11% 15% at 85% 22%, rgba(255, 196, 110, 0.7), transparent); animation: bb-flicker 2.3s ease-in-out infinite alternate; }
@keyframes bb-flicker { 0% { opacity: 0.55; } 40% { opacity: 1; } 70% { opacity: 0.7; } 100% { opacity: 0.95; } }
.bb-menu { position: relative; }
.bb-cup { position: absolute; inset-inline-end: -46px; bottom: -26px; width: 136px; height: auto; rotate: 4deg; filter: drop-shadow(0 10px 12px #000); }
.bb-div { display: block; width: min(300px, 80%); height: auto; margin-bottom: 12px; filter: drop-shadow(0 2px 6px #000); }
.bb-library .bb-div { margin-inline: auto; }
.bb-menu .bb-div { margin: 6px auto 12px; filter: none; }

/* ---------- the doors: pinned, the ballroom pushes in and the terrace opens ---------- */
.bb-finale { position: relative; }
.bb-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--b-night); }
.bb-run { height: 130vh; }
.bb-layer { position: absolute; inset: 0; will-change: transform, opacity; }
.bb-layer img { width: 100%; height: 100%; object-fit: cover; }
.bb-layer .wide { display: none; }
@media (min-aspect-ratio: 1 / 1) { .bb-layer .wide { display: block; } .bb-layer .tall { display: none; } }
.bb-layer.doors { transform-origin: 50% 54%; }
.bb-layer.terrace::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 28%, rgba(11, 10, 34, 0.72) 68%, var(--b-night)); }
.bb-layer.terrace::after { background: linear-gradient(rgba(11, 10, 34, 0.25), rgba(11, 10, 34, 0.55)); }
.bb-finale-in { position: relative; z-index: 2; text-align: center; padding-bottom: 80px; }
.bb-finale h2 { margin: 26px auto 10px; max-width: 760px; font-size: clamp(2.3rem, 4.6vw, 4rem); }
.bb-finale .bb-room-body { max-width: 620px; margin-inline: auto; }
.bb-finale .btn-row { justify-content: center; }
.bb-finale.still .bb-run, .bb-finale.still .doors { display: none; }

/* ---------- the flyer, alive: its 1080x1350 grid scales with the box (--u = one flyer pixel) ---------- */
@font-face { font-family: 'Daniel Letters'; src: url('/fonts/daniel-letters.ttf'); font-display: swap; }
.bbf { container-type: inline-size; width: min(100%, 640px, 64svh); margin-inline: auto; filter: drop-shadow(0 26px 44px #000); }
.bbf-in { --u: calc(100cqw / 1080); position: relative; aspect-ratio: 1080 / 1350; overflow: hidden; color: #fff; clip-path: inset(calc(42 * var(--u)) calc(33 * var(--u)) calc(33 * var(--u)) calc(31 * var(--u)) round calc(26 * var(--u))); }
.bbf-in picture, .bb-props picture, .bb-cand picture, .f-nagish picture, .f-rose picture { display: contents; }
.bbf-in > picture > img { position: absolute; margin: 0; }
.bbf-in img:not(.f-bg) { height: auto; }
.bbf-in > * { position: absolute; margin: 0; --d: 0s; }
.bbf-in img { display: block; }
.f-bg { left: calc(31 * var(--u)); top: calc(42 * var(--u)); width: calc(1016 * var(--u)); height: calc(1275 * var(--u)); object-fit: cover; object-position: 50% 28%; }
.f-shade { left: calc(31 * var(--u)); top: calc(42 * var(--u)); width: calc(1016 * var(--u)); height: calc(1275 * var(--u)); background: linear-gradient(180deg, rgba(8,4,24,.4) 0, rgba(8,4,24,.1) 25%, rgba(8,4,24,.25) 42%, rgba(8,4,24,.5) 62%, rgba(8,4,24,.62) 82%, rgba(8,4,24,.35) 100%); }
.f-fw { inset: 0; mix-blend-mode: screen; background: radial-gradient(16% 16% at 28% 46%, rgba(80, 230, 255, 0.55), transparent), radial-gradient(16% 16% at 72% 46%, rgba(255, 90, 220, 0.55), transparent); }
.f-dtc { left: calc(380 * var(--u)); top: calc(108 * var(--u)); width: calc(320 * var(--u)); filter: drop-shadow(0 4px 10px #000); }
.f-cin { left: calc(68 * var(--u)); top: calc(84 * var(--u)); width: calc(300 * var(--u)); }
.f-dev { left: calc(872 * var(--u)); top: calc(70 * var(--u)); width: calc(136 * var(--u)); }
.f-title { left: calc(54 * var(--u)); top: calc(408 * var(--u)); width: calc(972 * var(--u)); filter: drop-shadow(0 6px 10px #000) drop-shadow(0 0 26px rgba(0,0,0,.75)); }
.f-t { left: 0; right: 0; text-align: center; font-family: var(--font-hand); font-weight: 800; text-shadow: 0 calc(3 * var(--u)) 0 #000, 0 0 calc(14 * var(--u)) #000; }
.f-h0 { top: calc(340 * var(--u)); font-size: calc(38 * var(--u)); line-height: 1.4; }
.f-h1 { top: calc(604 * var(--u)); font-size: calc(52 * var(--u)); line-height: calc(66 * var(--u)); }
.f-h2, .f-h3 { top: calc(850 * var(--u)); font-family: var(--font); color: #ffd983; font-size: calc(74 * var(--u)); line-height: calc(84 * var(--u)); }
.f-h2 { left: calc(690 * var(--u)); right: calc(74 * var(--u)); }
.f-h3 { left: calc(74 * var(--u)); right: calc(690 * var(--u)); }
.f-h2 small, .f-h3 small { display: block; font-size: calc(37 * var(--u)); line-height: calc(48 * var(--u)); color: #fff; }
.f-rose { left: calc(363 * var(--u)); top: calc(769 * var(--u)); width: calc(358 * var(--u)); }
.f-rose-img { width: 100%; height: auto; }
.f-sparks { position: absolute; inset: 0; }
.f-sparks i { position: absolute; left: var(--x); top: calc(var(--y) * 0.5); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: radial-gradient(#ffd6e6, rgba(255, 77, 125, 0)); opacity: 0; animation: bbf-spark 4.4s ease-in-out var(--d) infinite; }
@keyframes bbf-spark { 0% { opacity: 0; translate: 0 0; } 25% { opacity: 1; } 100% { opacity: 0; translate: calc(8 * var(--u)) calc(-110 * var(--u)); } }
.f-seats { left: 0; top: calc(1140 * var(--u)); width: 100%; }
.f-nagish { left: calc(52 * var(--u)); top: calc(1092 * var(--u)); width: calc(186 * var(--u)); height: calc(186 * var(--u)); border-radius: 50%; background: radial-gradient(#4a0d22, #23040f); display: grid; place-items: center; box-shadow: 0 0 0 calc(3 * var(--u)) #e8b04a, 0 calc(6 * var(--u)) calc(16 * var(--u)) #000; }
.f-nagish-img { width: calc(164 * var(--u)); }
.f-soc { left: calc(64 * var(--u)); right: 0; top: calc(1234 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(13 * var(--u)); direction: ltr; font-family: 'Daniel Letters', var(--font-hand); font-size: calc(42 * var(--u)); text-shadow: 0 2px 6px #000; }
.f-soc svg { display: block; width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
.f-soc span { margin-left: calc(14 * var(--u)); }
.f-frame { inset: 0; width: 100%; height: 100%; pointer-events: none; }

@keyframes bbf-in { from { opacity: 0; translate: 0 calc(26 * var(--u)); } }
@keyframes bbf-pop { from { opacity: 0; scale: 0.8; } }
@keyframes bbf-soft { from { opacity: 0.74; } to { opacity: 1; } }
@keyframes bbf-fw { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes bbf-title { from { filter: drop-shadow(0 6px 10px #000) drop-shadow(0 0 26px rgba(0,0,0,.75)); } to { filter: drop-shadow(0 6px 10px #000) drop-shadow(0 0 26px rgba(255, 196, 96, .6)); } }
@keyframes bbf-glow { from { color: #ffd983; } to { color: #fff0c4; } }
.bbf:not(.on) .bbf-in > :not(picture, .f-shade), .bbf:not(.on) .bbf-in > picture > img:not(.f-bg) { opacity: 0; }
.bbf.on .f-bg { animation: bb-drift 22s ease-in-out infinite alternate; }
.bbf.on .f-fw { animation: bbf-fw 3.6s ease-in-out infinite alternate; }
.bbf.on .f-cin, .bbf.on .f-dev { --d: 0.1s; animation: bbf-in 0.8s var(--ease-out) 0.1s backwards, bbf-soft 4.6s ease-in-out 1s infinite alternate; }
.bbf.on .f-dev { animation-delay: 0.2s, 2s; }
.bbf.on .f-dtc { animation: bbf-pop 0.9s var(--ease-spring) 0.3s backwards, bb-float 5s ease-in-out 1.2s infinite alternate; }
.bbf.on .f-h0 { animation: bbf-in 0.8s var(--ease-out) 0.6s backwards, bb-lift 6s ease-in-out 1.4s infinite alternate; }
.bbf.on .f-title { animation: bbf-pop 1.1s var(--ease-spring) 0.8s backwards, bb-float 6.8s ease-in-out 1.9s infinite alternate, bbf-title 4.2s ease-in-out 1.9s infinite alternate; }
.bbf.on .f-h1 { animation: bbf-in 0.8s var(--ease-out) 1.2s backwards, bb-lift 7.4s ease-in-out 2s infinite alternate; }
.bbf.on .f-rose { transform-origin: 50% 100%; animation: bbf-in 1s var(--ease-out) 1.4s backwards, bb-puff 6s ease-in-out 2.4s infinite alternate; }
.bbf.on .f-rose-img { animation: bb-rose 3.8s ease-in-out infinite alternate; }
.bbf.on .f-h2 { animation: bbf-in 0.8s var(--ease-out) 1.7s backwards, bb-lift 5.2s ease-in-out 2.5s infinite alternate, bbf-glow 3.4s ease-in-out 2.5s infinite alternate; }
.bbf.on .f-h3 { animation: bbf-in 0.8s var(--ease-out) 1.85s backwards, bb-lift 5.8s ease-in-out 3.5s infinite alternate, bbf-glow 3.4s ease-in-out 4.2s infinite alternate; }
.bbf.on .f-seats { animation: bbf-in 0.9s var(--ease-out) 1s backwards; }
.bbf.on .f-nagish { animation: bbf-pop 0.8s var(--ease-spring) 2s backwards, bb-puff 4.8s ease-in-out 2.8s infinite alternate; }
.bbf.on .f-soc { animation: bbf-in 0.8s var(--ease-out) 2.1s backwards; }
.f-soc b { display: block; font-weight: inherit; animation: bb-lift 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.7s); }
@media (prefers-reduced-motion: reduce) { .bbf .bbf-in > *, .bbf .bbf-in * { animation: none !important; opacity: 1 !important; } .f-sparks { display: none; } }

@media (max-width: 1259px) {
  .bb-ball-in { flex-direction: column; align-items: center; gap: 18px; }
  .bb-props { position: static; width: 100%; justify-content: center; gap: 22px; padding: 0; }
  .bb-pedestal { width: auto; height: 250px; }
  .bb-cand { width: auto; height: 170px; }
}

/* ---------- phones: the art comes first and is shown whole, the words sit under it ---------- */
@media (max-width: 899px) {
  .bb-hero .bb-art { inset: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .bb-hero::before { content: ''; position: absolute; inset: 58% 0 0; z-index: 2; background: linear-gradient(transparent, rgba(11, 10, 34, 0.85) 42%); }
  .bb-hero-in { justify-content: space-between; padding-block: calc(var(--header-h, 70px) + 21vh) 84px; }
  .bb-hero-in > * { max-width: none; }
  .bb-hero-top { text-align: center; }
  .bb-kicker { position: absolute; top: calc(var(--header-h, 70px) + 8px); inset-inline: 16px; margin: 0; }
  .bb-logo { max-width: 340px; margin-inline: auto; }
  .bb-line { max-width: 300px; margin-inline: auto; margin-top: 8px; font-size: 1.08rem; }
  .bb-soon { text-align: center; }
  .bb-hero-btns .btn-row { justify-content: center; }
  .bb-gate .bb-art { inset: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .bb-gate-in { width: 76vw; margin-top: -16svh; }
  .bb-gate h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
  .bb-room { display: block; min-height: 0; }
  .bb-room .bb-art, .bb-room.flip .bb-art, .bb-room.rose .bb-art { position: relative; inset: auto; width: 100%; aspect-ratio: 3 / 4; max-height: 86svh;
    -webkit-mask-image: linear-gradient(#000 62%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.2) 91%, transparent); mask-image: linear-gradient(#000 62%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.2) 91%, transparent); -webkit-mask-composite: source-over; mask-composite: add; }
  .bb-room-in { margin-top: -38px; padding-block: 0 44px; }
  .bb-room-text { width: 100%; }
  .bb-rules li { grid-template-columns: 76px 1fr; }
  .bb-book small { font-size: 0.8rem; white-space: nowrap; }
  .bb-menu { rotate: 0deg; }
  .bb-cup { inset-inline-end: -8px; bottom: -18px; width: 92px; }
  body.beauty main { padding-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) { .bb-glow, .bb-logo, .bb-book.next, .bb-cand::after { animation: none; } .bb-glow { opacity: 0.4; } }


/* ---------- everything breathes: small, slow, each element on its own clock.
   Uses the separate scale/translate/rotate properties so it never fights the reveal animations or the hover transforms. ---------- */
@keyframes bb-drift { from { scale: 1; } to { scale: 1.055; } }
@keyframes bb-float { from { translate: 0 0; } to { translate: 0 -7px; } }
@keyframes bb-lift { from { translate: 0 3px; } to { translate: 0 -4px; } }
@keyframes bb-puff { from { scale: 1; } to { scale: 1.028; } }
@keyframes bb-sway { from { rotate: -1.3deg; translate: 0 2px; } to { rotate: -0.5deg; translate: 0 -5px; } }
@keyframes bb-rock { from { rotate: 2deg; } to { rotate: 6deg; } }
@keyframes bb-shine { from { opacity: 0.72; scale: 0.975 1; } to { opacity: 1; scale: 1 1; } }
@keyframes bb-gold { from { text-shadow: 0 3px 18px #000; } to { text-shadow: 0 3px 18px #000, 0 0 26px rgba(239, 197, 111, 0.5); } }
@keyframes bb-rose { from { filter: drop-shadow(0 18px 22px #000) drop-shadow(0 0 10px rgba(255, 77, 125, 0.25)); } to { filter: drop-shadow(0 18px 22px #000) drop-shadow(0 0 34px rgba(255, 77, 125, 0.75)); } }

.bb-art img { transform-origin: 50% 62%; animation: bb-drift 26s ease-in-out infinite alternate; }
.bb-art img.bb-glow { animation: bb-breathe 6s ease-in-out infinite alternate, bb-drift 26s ease-in-out infinite alternate; }
.bb-room.flip .bb-art img, .bb-library .bb-art img { transform-origin: 40% 40%; }
.bb-layer img { animation: bb-drift 30s ease-in-out infinite alternate; }
.bb-blur { animation: bb-drift 34s ease-in-out infinite alternate-reverse; }

.bb-logo { animation: bb-rise 1.3s var(--ease-out) both, bb-float 6.5s ease-in-out 1.3s infinite alternate; }
body.beauty .bb-gate h2 { animation: bb-lift 7s ease-in-out infinite alternate; }
body.beauty h2, .bb-soon b { animation: bb-gold 5.5s ease-in-out infinite alternate; }
body.beauty h2.in { animation: rv-up var(--t-enter) var(--ease-out) both, bb-gold 5.5s ease-in-out infinite alternate; }
.bb-div { animation: bb-shine 5s ease-in-out infinite alternate; }
.bb-hero-btns .btn:first-child, .bb-room-btns .btn:first-child { animation: bb-puff 3.4s ease-in-out infinite alternate; }

body.beauty .bb-book.in { animation: rv-pop var(--t-enter) var(--ease-spring) both, bb-float 5.2s ease-in-out infinite alternate; animation-delay: calc(min(var(--i, 0), 5) * 60ms), calc(var(--i, 0) * -0.85s); }
body.beauty .bb-book.next.in { animation: rv-pop var(--t-enter) var(--ease-spring) both, bb-float 5.2s ease-in-out infinite alternate, bb-book 3.6s ease-in-out infinite alternate; }
body.beauty .bb-menu.in { animation: rv-zoom var(--t-enter) var(--ease-out) both, bb-sway 9s ease-in-out infinite alternate; }
.bb-cup { animation: bb-rock 6s ease-in-out infinite alternate; }
.bb-pedestal { transform-origin: 50% 100%; animation: bb-rose 4.2s ease-in-out infinite alternate, bb-puff 7s ease-in-out infinite alternate; }
.bb-cand { transform-origin: 50% 100%; animation: bb-puff 8s ease-in-out infinite alternate; }
body.beauty .bb-menu h2 { animation: none; text-shadow: none; }
.bb-rules li { animation: none; }
.bb-rules strong { display: inline-block; animation: bb-lift 5.5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.6s); }

@media (prefers-reduced-motion: reduce) {
  .bb-art img, .bb-art img.bb-glow, .bb-layer img, .bb-blur, .bb-logo, body.beauty h2, body.beauty h2.in, .bb-soon b, .bb-div, .bb-hero-btns .btn, .bb-room-btns .btn, body.beauty .bb-book.in, body.beauty .bb-menu.in, .bb-cup, .bb-pedestal, .bb-cand, .bb-rules strong { animation: none !important; }
}