/* Apex site: the animated phones on the home page. GENERATED by scripts/site/build.mjs (scripts/site/phones.mjs); edit there. */

/* the screen inside the site's device frame (site.css .phone); 1 app point = --pt (402 pt wide, like an iPhone 17 Pro) */
.phone .screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 13.2% / 6.4%; background: #F2EBDF; container-type: inline-size; isolation: isolate; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }

/* the pause control: a small round button on the phone's left edge; one press pauses every animation on the page */
.motion { position: absolute; z-index: 3; left: -17px; bottom: 9%; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: var(--ink-2); background: var(--card); transform: rotate(var(--untilt, 0deg));
  box-shadow: 0 0 0 1px rgba(45,37,34,.12), 0 6px 14px -6px rgba(45,37,34,.45); transition: color .15s ease, transform .15s ease; }
.motion[hidden] { display: none; }
.motion i { display: block; width: 11px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.motion-paused .motion i { width: 0; height: 0; margin-left: 3px; border-left: 11px solid currentColor; border-right: 0; border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
.motion:hover { color: var(--ink); }
.motion:focus-visible { outline: none; box-shadow: var(--focus); }
.scene .phone { --untilt: -4deg; }
.scene .motion { left: auto; right: -17px; } /* clear of Sunny's bubble */
.pic .phone { --untilt: -6deg; }

/* real screens: an iOS-style push from the right. Base style = the Reduce Motion still. */
.reel .f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.reel .f.still { visibility: visible; }
@keyframes reel5 {
  0% { transform: translateX(100%); z-index: 2; visibility: visible; filter: none; }
  3.462% { transform: translateX(0); z-index: 2; }
  3.472% { z-index: 1; }
  20% { transform: translateX(0); filter: none; z-index: 1; visibility: visible; }
  23.462% { transform: translateX(-30%); filter: brightness(.82); z-index: 1; visibility: visible; }
  23.472%, 100% { transform: translateX(100%); visibility: hidden; z-index: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .reel.n5 .f { visibility: hidden; animation: reel5 13s linear infinite both; }
  .reel.n5 .f:nth-child(1) { animation-delay: -13.45s; }
  .reel.n5 .f:nth-child(2) { animation-delay: -10.85s; }
  .reel.n5 .f:nth-child(3) { animation-delay: -8.25s; }
  .reel.n5 .f:nth-child(4) { animation-delay: -5.65s; }
  .reel.n5 .f:nth-child(5) { animation-delay: -3.05s; }
}
@keyframes reel3 {
  0% { transform: translateX(100%); z-index: 2; visibility: visible; filter: none; }
  5.769% { transform: translateX(0); z-index: 2; }
  5.779% { z-index: 1; }
  33.333% { transform: translateX(0); filter: none; z-index: 1; visibility: visible; }
  39.103% { transform: translateX(-30%); filter: brightness(.82); z-index: 1; visibility: visible; }
  39.113%, 100% { transform: translateX(100%); visibility: hidden; z-index: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .reel.n3 .f { visibility: hidden; animation: reel3 7.8s linear infinite both; }
  .reel.n3 .f:nth-child(1) { animation-delay: -8.25s; }
  .reel.n3 .f:nth-child(2) { animation-delay: -5.65s; }
  .reel.n3 .f:nth-child(3) { animation-delay: -3.05s; }
}

/* How it works: each card's ring while the phone shows its screens */
.how .step::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 3px var(--rose); opacity: 0; pointer-events: none; }
@keyframes ring1 { 0% { opacity: 0; } 2.308%, 40% { opacity: 1; } 42.308%, 100% { opacity: 0; } }
@keyframes ring2 { 0% { opacity: 0; } 2.308%, 20% { opacity: 1; } 22.308%, 100% { opacity: 0; } }
@keyframes ring3 { 0% { opacity: 0; } 2.308%, 40% { opacity: 1; } 42.308%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .how .step:nth-child(1)::after { animation: ring1 13s linear -13.22s infinite both; }
  .how .step:nth-child(2)::after { animation: ring2 13s linear -8.03s infinite both; }
  .how .step:nth-child(3)::after { animation: ring3 13s linear -5.42s infinite both; }
}

/* screens rebuilt from the app's SwiftUI */
.app { --pt: calc(100cqw / 402); --tx: #2D2522; --tx2: #6E625B; --fill: #ECE3D5; --red: #E04A5F;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.3; color: var(--tx); background: #F4EEE4 url(img/tex/paper.webp) 0 0 / 210px; }
.app img { display: block; }
.sb { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--pt) * 54); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--pt) * 34) 0 calc(var(--pt) * 46); z-index: 3; }
.sb b { font-size: calc(var(--pt) * 17); font-weight: 700; }
.sb i { position: absolute; left: 50%; top: calc(var(--pt) * 11); width: calc(var(--pt) * 124); height: calc(var(--pt) * 36); margin-left: calc(var(--pt) * -62); border-radius: 99px; background: #000; }
.sb span { width: calc(var(--pt) * 26); height: calc(var(--pt) * 12); border-radius: calc(var(--pt) * 4); background: var(--tx); }
.b-red, .b-fill { display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 8); height: calc(var(--pt) * 56); border-radius: 999px; font-weight: 900; font-size: calc(var(--pt) * 18); }
.b-red { background: var(--red) url(img/tex/wax.webp) 0 0 / 160% 100%; color: #fff; }
.b-red img { width: calc(var(--pt) * 18); filter: brightness(0) invert(1); }
.b-fill { background: var(--fill); }

/* Chapter unlocked */
.unlock .close { position: absolute; right: calc(var(--pt) * 16); top: calc(var(--pt) * 62); width: calc(var(--pt) * 38); height: calc(var(--pt) * 38); border-radius: 50%; background: var(--fill); display: grid; place-items: center; z-index: 2; }
.unlock .close img { width: calc(var(--pt) * 13); opacity: .7; }
.u-head { position: absolute; left: 0; right: 0; top: calc(var(--pt) * 98); text-align: center; display: grid; gap: calc(var(--pt) * 4); }
.u-head small { font-size: calc(var(--pt) * 13); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tx2); }
.u-head strong { font-size: calc(var(--pt) * 34); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.u-card { position: absolute; left: calc(var(--pt) * 20); right: calc(var(--pt) * 20); top: calc(var(--pt) * 182); background: #FFFCF6; border-radius: calc(var(--pt) * 30); box-shadow: 0 0 0 1.5px rgba(45,37,34,.08), 0 8px 18px -10px rgba(45,37,34,.3); }
.u-card img { margin: calc(var(--pt) * 8); width: calc(100% - var(--pt) * 16); height: auto; aspect-ratio: 1.6; object-fit: cover; border-radius: calc(var(--pt) * 22); }
.u-txt { display: grid; gap: calc(var(--pt) * 6); padding: calc(var(--pt) * 6) calc(var(--pt) * 14) calc(var(--pt) * 16); }
.u-txt b { font-size: calc(var(--pt) * 20); font-weight: 900; line-height: 1.15; }
.u-txt span { font-size: calc(var(--pt) * 15); font-weight: 600; line-height: 1.3; }
.u-txt .dim { color: var(--tx2); }
.u-btns { position: absolute; left: calc(var(--pt) * 20); right: calc(var(--pt) * 20); top: calc(var(--pt) * 620); display: grid; gap: calc(var(--pt) * 12); }
.confetti { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.confetti i { position: absolute; top: 0; border-radius: 2px; opacity: .7; translate: 0 calc(var(--pt) * var(--y)); }
.unlock .confetti i:nth-child(1) { left: 49.1%; width: calc(var(--pt) * 7.9); height: calc(var(--pt) * 4.3); background: #F7A1B5; transform: rotate(28deg); --r: 28deg; --y: 100; --y0: 44; --fall: 782; --d: 0.79s; }
.unlock .confetti i:nth-child(2) { left: 86.4%; width: calc(var(--pt) * 10.3); height: calc(var(--pt) * 10.3); background: #F9BE2F; transform: rotate(28deg); --r: 28deg; --y: 124; --y0: 199; --fall: 830; --d: 0.83s; border-radius: 50%; }
.unlock .confetti i:nth-child(3) { left: 49.9%; width: calc(var(--pt) * 12.4); height: calc(var(--pt) * 12.4); background: #7CC3F5; transform: rotate(63deg); --r: 63deg; --y: 142; --y0: 98; --fall: 776; --d: 0.33s; border-radius: 50%; }
.unlock .confetti i:nth-child(4) { left: 6.8%; width: calc(var(--pt) * 14.8); height: calc(var(--pt) * 8.1); background: #9C82F0; transform: rotate(68deg); --r: 68deg; --y: 164; --y0: 44; --fall: 926; --d: 1.31s; }
.unlock .confetti i:nth-child(5) { left: 42.2%; width: calc(var(--pt) * 12.4); height: calc(var(--pt) * 12.4); background: #FBB38A; transform: rotate(160deg); --r: 160deg; --y: 193; --y0: -82; --fall: 935; --d: 0.77s; border-radius: 50%; }
.unlock .confetti i:nth-child(6) { left: 24.3%; width: calc(var(--pt) * 9.6); height: calc(var(--pt) * 9.6); background: #4CB866; transform: rotate(126deg); --r: 126deg; --y: 211; --y0: 196; --fall: 733; --d: 0.77s; border-radius: 50%; }
.unlock .confetti i:nth-child(7) { left: 9.6%; width: calc(var(--pt) * 8.9); height: calc(var(--pt) * 4.9); background: #E8445A; transform: rotate(217deg); --r: 217deg; --y: 263; --y0: 57; --fall: 696; --d: 1.30s; }
.unlock .confetti i:nth-child(8) { left: 40.6%; width: calc(var(--pt) * 12.2); height: calc(var(--pt) * 12.2); background: #F7A1B5; transform: rotate(32deg); --r: 32deg; --y: 256; --y0: -57; --fall: 764; --d: 1.06s; border-radius: 50%; }
.unlock .confetti i:nth-child(9) { left: 6.6%; width: calc(var(--pt) * 12.4); height: calc(var(--pt) * 12.4); background: #F9BE2F; transform: rotate(158deg); --r: 158deg; --y: 299; --y0: 279; --fall: 724; --d: 0.58s; border-radius: 50%; }
.unlock .confetti i:nth-child(10) { left: 49.6%; width: calc(var(--pt) * 13.7); height: calc(var(--pt) * 7.5); background: #7CC3F5; transform: rotate(85deg); --r: 85deg; --y: 314; --y0: 42; --fall: 704; --d: 0.61s; }
.unlock .confetti i:nth-child(11) { left: 73.3%; width: calc(var(--pt) * 9.2); height: calc(var(--pt) * 9.2); background: #9C82F0; transform: rotate(334deg); --r: 334deg; --y: 350; --y0: 235; --fall: 930; --d: 0.18s; border-radius: 50%; }
.unlock .confetti i:nth-child(12) { left: 84.6%; width: calc(var(--pt) * 12.1); height: calc(var(--pt) * 12.1); background: #FBB38A; transform: rotate(129deg); --r: 129deg; --y: 365; --y0: -149; --fall: 724; --d: 1.05s; border-radius: 50%; }
.unlock .confetti i:nth-child(13) { left: 22.7%; width: calc(var(--pt) * 12.5); height: calc(var(--pt) * 6.9); background: #4CB866; transform: rotate(3deg); --r: 3deg; --y: 395; --y0: -37; --fall: 926; --d: 0.55s; }
.unlock .confetti i:nth-child(14) { left: 36.5%; width: calc(var(--pt) * 10.5); height: calc(var(--pt) * 10.5); background: #E8445A; transform: rotate(314deg); --r: 314deg; --y: 392; --y0: 296; --fall: 766; --d: 0.82s; border-radius: 50%; }
.unlock .confetti i:nth-child(15) { left: 58.4%; width: calc(var(--pt) * 8.0); height: calc(var(--pt) * 8.0); background: #F7A1B5; transform: rotate(9deg); --r: 9deg; --y: 443; --y0: 252; --fall: 705; --d: 0.66s; border-radius: 50%; }
.unlock .confetti i:nth-child(16) { left: 16.8%; width: calc(var(--pt) * 12.6); height: calc(var(--pt) * 6.9); background: #F9BE2F; transform: rotate(299deg); --r: 299deg; --y: 461; --y0: 240; --fall: 694; --d: 0.99s; }
.unlock .confetti i:nth-child(17) { left: 18.2%; width: calc(var(--pt) * 7.7); height: calc(var(--pt) * 7.7); background: #7CC3F5; transform: rotate(304deg); --r: 304deg; --y: 458; --y0: 87; --fall: 886; --d: 0.05s; border-radius: 50%; }
.unlock .confetti i:nth-child(18) { left: 16.0%; width: calc(var(--pt) * 7.4); height: calc(var(--pt) * 7.4); background: #9C82F0; transform: rotate(128deg); --r: 128deg; --y: 491; --y0: 65; --fall: 641; --d: 0.69s; border-radius: 50%; }
.unlock .confetti i:nth-child(19) { left: 24.1%; width: calc(var(--pt) * 13.3); height: calc(var(--pt) * 7.3); background: #FBB38A; transform: rotate(225deg); --r: 225deg; --y: 508; --y0: -84; --fall: 620; --d: 0.41s; }
.unlock .confetti i:nth-child(20) { left: 10.3%; width: calc(var(--pt) * 7.9); height: calc(var(--pt) * 7.9); background: #4CB866; transform: rotate(272deg); --r: 272deg; --y: 545; --y0: 31; --fall: 623; --d: 0.56s; border-radius: 50%; }
.unlock .confetti i:nth-child(21) { left: 45.3%; width: calc(var(--pt) * 9.7); height: calc(var(--pt) * 9.7); background: #E8445A; transform: rotate(96deg); --r: 96deg; --y: 586; --y0: 170; --fall: 825; --d: 1.03s; border-radius: 50%; }
.unlock .confetti i:nth-child(22) { left: 36.5%; width: calc(var(--pt) * 14.0); height: calc(var(--pt) * 7.7); background: #F7A1B5; transform: rotate(109deg); --r: 109deg; --y: 575; --y0: -129; --fall: 680; --d: 0.11s; }
.unlock .confetti i:nth-child(23) { left: 4.8%; width: calc(var(--pt) * 10.5); height: calc(var(--pt) * 10.5); background: #F9BE2F; transform: rotate(190deg); --r: 190deg; --y: 610; --y0: 88; --fall: 910; --d: 0.84s; border-radius: 50%; }
.unlock .confetti i:nth-child(24) { left: 42.5%; width: calc(var(--pt) * 14.2); height: calc(var(--pt) * 14.2); background: #7CC3F5; transform: rotate(244deg); --r: 244deg; --y: 644; --y0: 69; --fall: 910; --d: 0.17s; border-radius: 50%; }
.unlock .confetti i:nth-child(25) { left: 46.0%; width: calc(var(--pt) * 14.1); height: calc(var(--pt) * 7.8); background: #9C82F0; transform: rotate(283deg); --r: 283deg; --y: 657; --y0: 69; --fall: 845; --d: 1.35s; }
.unlock .confetti i:nth-child(26) { left: 89.8%; width: calc(var(--pt) * 14.9); height: calc(var(--pt) * 14.9); background: #FBB38A; transform: rotate(27deg); --r: 27deg; --y: 689; --y0: 222; --fall: 761; --d: 0.76s; border-radius: 50%; }
.unlock .confetti i:nth-child(27) { left: 95.4%; width: calc(var(--pt) * 12.2); height: calc(var(--pt) * 12.2); background: #4CB866; transform: rotate(181deg); --r: 181deg; --y: 702; --y0: 185; --fall: 870; --d: 0.78s; border-radius: 50%; }
.unlock .confetti i:nth-child(28) { left: 44.6%; width: calc(var(--pt) * 12.8); height: calc(var(--pt) * 7.0); background: #E8445A; transform: rotate(357deg); --r: 357deg; --y: 711; --y0: 10; --fall: 769; --d: 1.24s; }
.unlock .confetti i:nth-child(29) { left: 65.2%; width: calc(var(--pt) * 12.4); height: calc(var(--pt) * 12.4); background: #F7A1B5; transform: rotate(113deg); --r: 113deg; --y: 739; --y0: -68; --fall: 789; --d: 0.22s; border-radius: 50%; }
.unlock .confetti i:nth-child(30) { left: 4.1%; width: calc(var(--pt) * 11.1); height: calc(var(--pt) * 11.1); background: #F9BE2F; transform: rotate(237deg); --r: 237deg; --y: 757; --y0: 19; --fall: 679; --d: 1.34s; border-radius: 50%; }
.unlock .confetti i:nth-child(31) { left: 24.4%; width: calc(var(--pt) * 9.4); height: calc(var(--pt) * 5.2); background: #7CC3F5; transform: rotate(299deg); --r: 299deg; --y: 815; --y0: 116; --fall: 747; --d: 1.04s; }
.unlock .confetti i:nth-child(32) { left: 19.1%; width: calc(var(--pt) * 10.3); height: calc(var(--pt) * 10.3); background: #9C82F0; transform: rotate(59deg); --r: 59deg; --y: 837; --y0: 101; --fall: 647; --d: 0.48s; border-radius: 50%; }
.unlock .confetti i:nth-child(33) { left: 48.5%; width: calc(var(--pt) * 10.2); height: calc(var(--pt) * 10.2); background: #FBB38A; transform: rotate(22deg); --r: 22deg; --y: 845; --y0: -8; --fall: 629; --d: 0.35s; border-radius: 50%; }
.unlock .confetti i:nth-child(34) { left: 73.2%; width: calc(var(--pt) * 11.4); height: calc(var(--pt) * 6.3); background: #4CB866; transform: rotate(80deg); --r: 80deg; --y: 43; --y0: -112; --fall: 750; --d: 0.64s; }
/* Hero: the chapter unlocks when Ava and Leo meet (14 s clock shared with hero.css; ?t= seeks it too) */
@keyframes hp-head {
  0%, 44% { opacity: 1; transform: none; }
  46.6% { opacity: 0; transform: translateY(-6px); }
  46.7%, 50% { opacity: 0; transform: translateY(10px); }
  53%, 100% { opacity: 1; transform: none; }
}
@keyframes hp-card {
  0%, 44% { opacity: 1; transform: none; }
  46.6% { opacity: 0; transform: translateY(4%) scale(.96); }
  46.7%, 51.5% { opacity: 0; transform: scale(.9); }
  54% { opacity: 1; transform: scale(1.02); }
  56%, 100% { opacity: 1; transform: none; }
}
@keyframes hp-btns {
  0%, 44% { opacity: 1; transform: none; }
  46% { opacity: 0; transform: translateY(8px); }
  46.6%, 55% { opacity: 0; transform: translateY(14px); }
  58%, 100% { opacity: 1; transform: none; }
}
@keyframes hp-fall {
  0%, 50.5% { opacity: 0; transform: translateY(calc(var(--pt) * var(--y0))) rotate(0); }
  51% { opacity: 1; }
  88% { opacity: 1; }
  94%, 100% { opacity: 0; transform: translateY(calc(var(--pt) * (var(--y0) + var(--fall)))) rotate(var(--r)); }
}
@media (prefers-reduced-motion: no-preference) {
  .unlock .u-head { animation: hp-head 14s ease var(--t) infinite both; }
  .unlock .u-card { animation: hp-card 14s ease var(--t) infinite both; }
  .unlock .u-btns { animation: hp-btns 14s ease var(--t) infinite both; }
  .unlock .confetti i { translate: none; animation: hp-fall 14s linear calc(var(--t) + var(--d)) infinite both; }
}

/* Joining a club: an 11 s loop. The code types in, Continue, then the confirm sheet. Base style = the confirm sheet. */
.club .c-nav { position: absolute; top: calc(var(--pt) * 62); right: calc(var(--pt) * 20); font-size: calc(var(--pt) * 15); font-weight: 900; color: var(--tx2); }
.c-entry, .c-confirm { position: absolute; left: calc(var(--pt) * 20); right: calc(var(--pt) * 20); top: calc(var(--pt) * 112); display: grid; gap: calc(var(--pt) * 16); }
.c-entry { visibility: hidden; }
.c-entry small { font-size: calc(var(--pt) * 13); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--tx2); margin-bottom: calc(var(--pt) * -12); }
.c-entry strong { font-size: calc(var(--pt) * 32); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.c-entry p { font-size: calc(var(--pt) * 15); font-weight: 600; color: var(--tx2); margin-top: calc(var(--pt) * -10); }
.c-field { position: relative; height: calc(var(--pt) * 62); border-radius: calc(var(--pt) * 22); background: #FFFCF6; box-shadow: inset 0 0 0 1.5px rgba(45,37,34,.12); display: flex; align-items: center; justify-content: center; font: 900 calc(var(--pt) * 28) ui-monospace, "SF Mono", Menlo, monospace; }
.c-field .ph { position: absolute; color: rgba(45,37,34,.25); opacity: 0; }
.c-field .code { overflow: hidden; white-space: nowrap; width: 10ch; }
.c-field .caret { width: 2px; height: calc(var(--pt) * 30); background: var(--red); opacity: 0; }
.c-paste { justify-self: center; padding: calc(var(--pt) * 7) calc(var(--pt) * 16); border-radius: 999px; background: var(--fill); font-size: calc(var(--pt) * 15); font-weight: 700; color: var(--red); }
.c-entry .c-note { margin: 0; text-align: center; font-size: calc(var(--pt) * 13); }
.c-confirm { justify-items: center; text-align: center; gap: calc(var(--pt) * 14); top: calc(var(--pt) * 104); }
.c-confirm .badge { width: calc(var(--pt) * 96); height: calc(var(--pt) * 96); border-radius: calc(var(--pt) * 33); background: rgba(76,184,102,.62); display: grid; place-items: center; }
.c-confirm .badge img { width: calc(var(--pt) * 60); }
.c-confirm strong { font-size: calc(var(--pt) * 28); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
.c-confirm .meta { font-size: calc(var(--pt) * 16); font-weight: 800; color: var(--tx2); }
.c-confirm .desc { font-size: calc(var(--pt) * 15); font-weight: 600; margin-top: calc(var(--pt) * -6); }
.c-confirm ul { list-style: none; margin: 0; padding: calc(var(--pt) * 14); display: grid; gap: calc(var(--pt) * 8); text-align: left; background: #FFFCF6; border-radius: calc(var(--pt) * 22); box-shadow: 0 0 0 1.5px rgba(45,37,34,.08); }
.c-confirm li { display: flex; gap: calc(var(--pt) * 10); font-size: calc(var(--pt) * 14); font-weight: 600; line-height: 1.3; }
.c-confirm li img { width: calc(var(--pt) * 22); height: calc(var(--pt) * 22); flex: none; }
.c-confirm .b-red { width: 100%; }
.c-not { font-size: calc(var(--pt) * 16); font-weight: 900; color: var(--tx2); }
@keyframes c-ph { 0% { opacity: 1; } 9%, 100% { opacity: 0; } }
@keyframes c-type { 0%, 9% { width: 0; } 30%, 100% { width: 10ch; } }
@keyframes c-caret { 0%, 6%, 12%, 18%, 24%, 30% { opacity: 1; } 3%, 9%, 15%, 21%, 27%, 33%, 100% { opacity: 0; } }
@keyframes c-go { 0%, 30% { opacity: .5; transform: none; } 32%, 35% { opacity: 1; transform: none; } 37% { opacity: 1; transform: scale(.96); } 39%, 100% { opacity: 1; transform: none; } }
@keyframes c-entry { 0%, 40% { opacity: 1; transform: none; visibility: visible; } 45% { opacity: 0; transform: translateX(-12%); } 46%, 98% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; transform: none; } }
@keyframes c-confirm { 0%, 41% { opacity: 0; transform: translateX(14%); visibility: hidden; } 47%, 94% { opacity: 1; transform: none; visibility: visible; } 99%, 100% { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: no-preference) {
  .club .ph { animation: c-ph 11s steps(1) infinite both; }
  .club .code { animation: c-type 11s steps(10, end) infinite both; }
  .club .caret { animation: c-caret 11s steps(1) infinite both; }
  .club .c-go { animation: c-go 11s infinite both; }
  .club .c-entry { animation: c-entry 11s infinite both; }
  .club .c-confirm { animation: c-confirm 11s infinite both; }
}

/* pause: off screen (site.js adds .is-off), or the visitor pressed a pause button (html.motion-paused) */
.live.is-off, .live.is-off *, .motion-paused .live, .motion-paused .live *, .motion-paused .hero * { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .motion { display: none; }
}

/* short video clips (scripts/site/clips.mjs) */
.clips-h { text-align: center; font-size: 44px; margin-bottom: 28px; }
.clip-row { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.clip { margin: 0; width: 240px; }
.clip video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 24px; background: var(--ink); box-shadow: var(--shadow); }
.clip figcaption { margin-top: 10px; font-size: 15px; color: var(--ink-2); }