/* Jessie's web chat, built to the reference recording (a DM-style link-in-bio chat):
   deep navy-black, grey bubbles for her and electric blue for you, a pill composer with camera
   and gallery, and photos that open once. Dark only, like the reference.
   One column, centred: a phone fills it; a laptop gets the same column with quiet edges. */

:root{
  color-scheme: dark;
  /* chatme: near-black warmed toward the pink, grey bubbles for her, blush pink for him and the brand. */
  --page:#060407;
  --bg:#0c090d;
  --bar:#110d11;
  --line:#221a20;
  --card:#161016;
  --card-line:#2a1f27;
  --in:#221c21;
  --in-hi:#2b242a;
  --out:#f3a9bb;        /* blush pink */
  --out-hi:#f7bccb;
  --on-out:#3b1422;     /* text on blush */
  --text:#f3eef0;
  --text-2:#9a8f95;
  --text-3:#6b6066;
  --blue:#f3a9bb;       /* the accent (was blue; the name stays so every rule follows) */
  --blue-ink:#ffc9d6;   /* accent text on dark */
  --green:#22c55e;
  --danger:#ff6b6b;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display:"Bricolage Grotesque", ui-rounded, "SF Pro Rounded", var(--font);
  --ease:cubic-bezier(.23,1,.32,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --app-h:100dvh;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{ background:var(--page); color:var(--text); font-family:var(--font); font-size:16px; line-height:1.35; -webkit-font-smoothing:antialiased;
  overflow:hidden; overscroll-behavior:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:8px; }
svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
svg .f{ fill:currentColor; stroke:none; }
#moreBtn svg circle{ fill:currentColor; stroke:none; }

/* ------------------------------------------------------------------ frame */
.app{ height:var(--app-h); max-width:640px; margin:0 auto; display:flex; flex-direction:column; background:var(--bg); position:relative; overflow:hidden; }
@media (min-width:700px){ .app{ border-left:1px solid var(--line); border-right:1px solid var(--line); box-shadow:0 0 120px rgba(243,169,187,.05); } }

.top{ flex:none; display:flex; align-items:center; gap:4px; padding:calc(10px + env(safe-area-inset-top)) 10px 10px 14px; background:var(--bar);
  border-bottom:1px solid var(--line); position:relative; z-index:5; }
.who{ flex:1; min-width:0; display:flex; align-items:center; gap:12px; text-align:left; border-radius:12px; padding:2px; }
.who-text{ display:flex; flex-direction:column; min-width:0; }
.who-name{ display:flex; align-items:center; gap:5px; font-weight:700; font-size:17px; letter-spacing:-.01em; }
.who-sub{ font-size:14px; color:var(--text-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.who-sub.typing{ color:var(--text); }
.tick{ width:18px; height:18px; flex:none; }
.tick path:first-child{ fill:var(--blue); stroke:none; }
.tick .tick-mark{ stroke:var(--on-out); stroke-width:2.2; fill:none; }
.ico{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:var(--text); flex:none;
  transition:transform .16s var(--ease), background-color .15s ease; }
.ico:active{ transform:scale(.92); }
@media (hover:hover) and (pointer:fine){ .ico:hover{ background:rgba(255,255,255,.06); } }

.avatar{ display:grid; place-items:center; border-radius:50%; overflow:hidden; flex:none; background:linear-gradient(160deg,#f3a9bb,#a85a74); color:#fff; font-weight:700; }
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar.sm{ width:28px; height:28px; font-size:12px; }
.avatar.md{ width:48px; height:48px; font-size:19px; }
.avatar.lg{ width:104px; height:104px; font-size:40px; }
.avatar.xl{ width:112px; height:112px; font-size:44px; }
.av-wrap{ position:relative; flex:none; display:inline-block; line-height:0; }
.av-wrap .dot{ position:absolute; right:0; bottom:0; width:13px; height:13px; border-radius:50%; background:var(--green); box-shadow:0 0 0 2.5px var(--bar); }
.av-wrap.big .dot{ width:22px; height:22px; right:4px; bottom:4px; box-shadow:0 0 0 4px var(--card); }

.menu{ position:absolute; right:10px; top:calc(100% - 4px); z-index:20; min-width:220px; padding:6px; border-radius:14px; background:#1a1419;
  border:1px solid var(--card-line); box-shadow:0 18px 50px rgba(0,0,0,.55); transform-origin:top right; animation:pop .18s var(--ease); }
.menu button{ display:block; width:100%; text-align:left; padding:11px 12px; border-radius:9px; font-size:15px; font-weight:500; }
.menu button.danger{ color:var(--danger); }
@media (hover:hover) and (pointer:fine){ .menu button:hover{ background:rgba(255,255,255,.06); } }
@keyframes pop{ from{ opacity:0; transform:scale(.95); } }

/* ----------------------------------------------------------------- thread */
.scroller{ position:relative; z-index:1; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.thread{ min-height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 14px 10px; }

.stamp{ align-self:center; margin:18px 0 10px; font-size:12.5px; color:var(--text-2); font-weight:500; }

/* Intro cards: joining, waiting, joined. */
.card{ align-self:center; width:100%; max-width:440px; margin:auto 0; padding:26px 22px 24px; border-radius:16px; background:var(--card);
  border:1px solid var(--card-line); text-align:center; position:relative; animation:card-in .42s var(--ease) both; }
.card.glow{ box-shadow:0 0 0 1px rgba(243,169,187,.08), 0 20px 60px rgba(0,0,0,.4); }
@property --sweep{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.card.glow{ border-color:transparent; }
.card.glow::before{ content:""; position:absolute; inset:-1px; border-radius:17px; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--sweep), transparent 0 60%, rgba(255,201,214,.95) 74%, transparent 88%), var(--card-line);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:sweep 4s linear infinite; }
@keyframes sweep{ to{ --sweep:360deg; } }
@keyframes card-in{ from{ opacity:0; transform:translateY(10px) scale(.985); } }
.card h2{ margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em; }
.card .av-wrap{ margin:20px auto 14px; }
.card .av-wrap .dot{ box-shadow:0 0 0 4px var(--card); width:22px; height:22px; right:4px; bottom:4px; }
.card .muted{ color:var(--text-2); font-size:15px; margin:0; }
.card .bio{ margin:8px auto 0; max-width:32ch; font-size:15px; line-height:1.45; color:var(--text); white-space:pre-wrap; }
.pill{ display:inline-flex; align-items:center; margin-top:16px; padding:8px 18px; border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--blue-ink); background:rgba(243,169,187,.1); border:1px solid rgba(243,169,187,.35); }
.join-form{ margin-top:20px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.join-form input{ width:100%; height:52px; border-radius:14px; border:1px solid var(--card-line); background:#100c10; color:var(--text);
  padding:0 16px; font:inherit; font-size:16px; outline:none; transition:border-color .15s ease, box-shadow .15s ease; }
.join-form input::placeholder{ color:var(--text-3); }
.join-form input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(243,169,187,.18); }
.btn{ height:50px; border-radius:14px; background:var(--out); color:var(--on-out); font-weight:650; font-size:16px; transition:transform .16s var(--ease), background-color .15s ease, opacity .15s ease; }
.btn:active{ transform:scale(.97); }
.btn:disabled{ opacity:.6; }
@media (hover:hover) and (pointer:fine){ .btn:hover{ background:var(--out-hi); } }
.err{ color:var(--danger); font-size:14px; margin:0 2px; }

.card.joined{ display:flex; gap:16px; text-align:left; align-items:flex-start; padding:22px 20px; }
.joined-ico{ width:44px; height:44px; flex:none; border-radius:10px; display:grid; place-items:center; background:rgba(243,169,187,.12); color:var(--blue-ink); }
.card.joined h2{ font-size:18px; margin-bottom:6px; }
.card.joined p{ margin:0; color:var(--text-2); font-size:15px; line-height:1.5; }

/* Messages */
.row{ display:flex; align-items:flex-end; gap:8px; margin-top:3px; }
.row.first{ margin-top:10px; }
.row.out{ justify-content:flex-end; }
.row .slot{ width:28px; flex:none; }
.b{ max-width:min(76%, 420px); padding:10px 14px; border-radius:22px; background:var(--in); color:var(--text); white-space:pre-wrap;
  overflow-wrap:anywhere; font-size:15.5px; line-height:1.36; position:relative; }
.row.out .b{ background:var(--out); color:var(--on-out); }
.row.in:not(.first) .b{ border-top-left-radius:6px; }
.row.in:not(.last) .b{ border-bottom-left-radius:6px; }
.row.out:not(.first) .b{ border-top-right-radius:6px; }
.row.out:not(.last) .b{ border-bottom-right-radius:6px; }
.b.jumbo{ background:none !important; font-size:44px; line-height:1.1; padding:0 2px; }
.react{ position:absolute; bottom:-12px; right:8px; padding:1px 5px; border-radius:12px; background:#2e262c; border:2px solid var(--bg); font-size:13px; line-height:18px; }
.row.has-react{ margin-bottom:12px; }
.row.new .b, .row.new .photo-pill, .row.new .photo{ animation:rise .26s var(--ease); }
.row.new.out .b{ transform-origin:bottom right; } .row.new.in .b{ transform-origin:bottom left; }
@keyframes rise{ from{ opacity:0; transform:translateY(8px) scale(.96); } }
.row.pending .b{ opacity:.7; }
.seen{ align-self:flex-end; margin:4px 4px 0 0; font-size:12.5px; color:var(--text-2); }
.service{ align-self:center; max-width:88%; margin:12px 0; padding:10px 14px; border-radius:14px; background:var(--card); border:1px solid var(--card-line);
  font-size:14px; color:var(--text-2); text-align:center; white-space:pre-wrap; }
.service b{ display:block; color:var(--text); margin-bottom:3px; }

/* Photos: a pill for view once and timers (filled play = not opened yet), the picture itself for normal ones. */
.photo-pill{ display:inline-flex; align-items:center; gap:9px; padding:11px 16px 11px 14px; border-radius:22px; font-weight:650; font-size:15.5px;
  background:var(--in); color:var(--text); transition:transform .16s var(--ease); }
.photo-pill:active{ transform:scale(.97); }
.photo-pill svg{ width:17px; height:17px; }
.photo-pill .play{ fill:var(--blue); stroke:none; }
.photo-pill.opened{ color:var(--text-2); font-weight:500; cursor:default; }
.photo-pill.opened .play{ fill:none; stroke:var(--text-2); stroke-width:2; }
.row.out .photo-pill{ background:var(--out); color:var(--on-out); }
.row.out .photo-pill .play{ fill:none; stroke:var(--on-out); stroke-width:2; }
.photo-pill small{ font-weight:500; color:var(--text-2); }
.row.out .photo-pill small{ color:rgba(59,20,34,.7); }
.photo{ display:block; max-width:min(64%, 280px); border-radius:18px; overflow:hidden; background:var(--in); position:relative; line-height:0; }
.photo img{ width:100%; height:auto; max-height:340px; object-fit:cover; display:block; transition:filter .3s ease; }
.photo.blurred img{ filter:blur(18px) saturate(1.2); transform:scale(1.08); }
.photo.blurred::after{ content:"Tap to see"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:600; color:#fff;
  line-height:1.2; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.photo.loading{ width:200px; height:240px; display:grid; place-items:center; color:var(--text-3); }

.typing{ display:inline-flex; gap:4px; align-items:center; padding:13px 15px; border-radius:22px; background:var(--in); }
.typing i{ width:7px; height:7px; border-radius:50%; background:#9aa0ab; animation:bounce 1.2s infinite var(--ease); }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,60%,100%{ transform:none; opacity:.55; } 30%{ transform:translateY(-3px); opacity:1; } }
.waiting-cam{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--in); color:var(--text-2); }
.waiting-cam svg{ width:20px; height:20px; }

/* --------------------------------------------------------------- composer */
.composer{ flex:none; padding:8px 12px calc(10px + env(safe-area-inset-bottom)); background:var(--bg); position:relative; z-index:5; }
.bar{ display:flex; align-items:flex-end; gap:2px; min-height:56px; padding:6px 6px 6px 8px; border-radius:28px; background:#141015; border:1px solid var(--line);
  transition:border-color .15s ease; }
.bar:focus-within{ border-color:#33262e; }
.bar .ico{ width:42px; height:42px; color:var(--text); }
.bar .cam{ color:var(--text); }
#input{ flex:1; min-width:0; resize:none; border:0; outline:0; background:transparent; color:var(--text); font:inherit; font-size:16px; line-height:1.35;
  padding:10px 6px; max-height:140px; overflow-y:auto; align-self:center; }
#input::placeholder{ color:var(--text-3); }
.send{ align-self:center; padding:0 14px; height:40px; color:var(--blue-ink); font-weight:700; font-size:16px; border-radius:20px; transition:transform .16s var(--ease); }
.send:active{ transform:scale(.94); }
.composer.disabled .bar{ opacity:.45; pointer-events:none; }
.emoji{ position:absolute; left:12px; right:12px; bottom:calc(100% - 2px); max-width:380px; margin-left:auto; padding:8px; border-radius:18px; background:#1a1419;
  border:1px solid var(--card-line); box-shadow:0 18px 50px rgba(0,0,0,.55); display:grid; grid-template-columns:repeat(8,1fr); gap:2px;
  transform-origin:bottom right; animation:pop .18s var(--ease); }
.emoji button{ height:42px; font-size:26px; border-radius:10px; transition:transform .12s var(--ease); }
.emoji button:active{ transform:scale(.86); }
@media (hover:hover) and (pointer:fine){ .emoji button:hover{ background:rgba(255,255,255,.06); } }

/* ----------------------------------------------------------------- layers */
.layer{ position:fixed; inset:0; z-index:50; }
.glass{ background:rgba(0,0,0,.35); color:#fff; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }

.camera{ background:#000; display:flex; flex-direction:column; align-items:center; padding:calc(14px + env(safe-area-inset-top)) 14px calc(26px + env(safe-area-inset-bottom));
  animation:fade .2s ease; }
@keyframes fade{ from{ opacity:0; } }
.cam-frame{ position:relative; flex:1; width:100%; max-width:520px; border-radius:22px; overflow:hidden; background:#111; }
.cam-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.cam-frame video.mirror{ transform:scaleX(-1); }
.cam-frame .close{ position:absolute; top:12px; left:12px; }
.cam-frame .flip{ position:absolute; top:12px; right:12px; }
.shutter{ margin-top:22px; width:76px; height:76px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px #000, 0 0 0 7px #fff; flex:none;
  transition:transform .14s var(--ease); }
.shutter:active{ transform:scale(.9); }

.preview{ background:#000; display:flex; flex-direction:column; animation:fade .2s ease; }
.pv-top{ padding:calc(12px + env(safe-area-inset-top)) 12px 8px; }
.pv-img{ flex:1; min-height:0; display:grid; place-items:center; padding:0 12px; }
.pv-img img{ max-width:100%; max-height:100%; border-radius:18px; object-fit:contain; }
.pv-bottom{ padding:14px 14px calc(16px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; align-items:center; }
.modes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.modes button{ display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:999px; background:rgba(255,255,255,.1); color:#fff; font-size:14.5px; font-weight:600;
  transition:background-color .15s ease, transform .16s var(--ease); }
.modes button:active{ transform:scale(.95); }
.modes button[aria-checked="true"]{ background:#fff; color:#000; }
.once-ico{ display:grid; place-items:center; width:19px; height:19px; border-radius:50%; border:1.8px dashed currentColor; font-size:11px; font-weight:800; }
.pv-send{ display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 22px; border-radius:25px; background:var(--out); color:var(--on-out); font-weight:700; font-size:16px;
  transition:transform .16s var(--ease); }
.pv-send:active{ transform:scale(.96); }
.pv-send svg{ width:20px; height:20px; stroke-width:2.2; }

.viewer{ background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center; animation:fade .18s ease; }
.viewer img{ max-width:100%; max-height:100%; object-fit:contain; }
.vw-bar{ position:absolute; top:calc(8px + env(safe-area-inset-top)); left:12px; right:12px; height:3px; border-radius:2px; background:rgba(255,255,255,.25); overflow:hidden; }
.vw-bar i{ display:block; height:100%; width:100%; background:#fff; transform-origin:left; }
.vw-top{ position:absolute; top:calc(18px + env(safe-area-inset-top)); left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; z-index:2; }
.vw-who{ display:flex; align-items:center; gap:9px; font-size:15px; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.vw-who span:last-child{ color:rgba(255,255,255,.75); }

.sheet-wrap{ background:rgba(0,0,0,.55); display:flex; align-items:flex-end; justify-content:center; animation:fade .2s ease; }
@media (min-width:700px){ .sheet-wrap{ align-items:center; } }
.sheet{ width:100%; max-width:440px; background:var(--card); border:1px solid var(--card-line); border-radius:24px 24px 0 0; padding:12px 24px calc(26px + env(safe-area-inset-bottom));
  text-align:center; animation:up .32s var(--ease-drawer); }
@media (min-width:700px){ .sheet{ border-radius:24px; } .grab{ display:none !important; } }
@keyframes up{ from{ transform:translateY(40px); opacity:0; } }
.grab{ display:block; width:40px; height:5px; border-radius:3px; background:#3a2c34; margin:0 auto 18px; }
.sheet .av-wrap{ margin:4px auto 14px; }
.p-name{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:22px; font-weight:700; }
.p-name .tick{ width:20px; height:20px; }
.p-handle{ color:var(--text-2); margin-top:2px; }
.p-bio{ margin:14px auto 0; max-width:34ch; white-space:pre-wrap; line-height:1.5; }
.p-btn{ margin-top:22px; width:100%; height:48px; border-radius:14px; background:rgba(255,255,255,.08); font-weight:650; transition:transform .16s var(--ease); }
.p-btn:active{ transform:scale(.97); }

.toast{ position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:80; max-width:calc(100% - 32px);
  padding:11px 16px; border-radius:14px; background:#1f181d; border:1px solid var(--card-line); color:var(--text); font-size:14.5px; animation:toast-in .22s var(--ease); }
@keyframes toast-in{ from{ opacity:0; transform:translate(-50%, 8px); } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ------------------------------------------------------------ loader (B1) */
/* On open: the pink "me" bubble pops in, "chat" slides out from behind it, double tick, "Delivered",
   then the whole thing lifts away into the chat. About 2.4 seconds; a tap skips it. */
.loader{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:var(--bg); cursor:pointer;
  transition:opacity .45s ease, filter .45s ease, transform .55s var(--ease); }
.loader.out{ opacity:0; filter:blur(6px); transform:scale(1.04); pointer-events:none; }
.logo{ position:relative; display:inline-flex; align-items:center; gap:3px; font-family:var(--display); font-weight:780; font-size:48px; letter-spacing:-.045em; line-height:1; color:var(--text); }
.logo .me{ position:relative; display:inline-flex; align-items:center; height:60px; padding:0 16px 4px; border-radius:30px 30px 8px 30px; background:var(--out); color:var(--on-out);
  animation:lg-pop .6s var(--spring) .15s both; }
.logo .chat{ display:inline-block; animation:lg-slide .65s var(--ease) .55s both; }
.logo .ticks{ position:absolute; right:-4px; bottom:-20px; width:28px; height:16px; }
.logo .ticks path{ fill:none; stroke:var(--blue-ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:30; stroke-dashoffset:30;
  animation:lg-draw .4s var(--ease) 1.25s forwards; }
.logo .ticks path:nth-child(2){ animation-delay:1.4s; }
.logo-cap{ position:absolute; right:-6px; top:calc(100% + 24px); font:500 12.5px var(--font); letter-spacing:0; color:var(--text-2); animation:lg-fade .4s var(--ease) 1.55s both; }
@keyframes lg-pop{ from{ transform:scale(.4) translateY(14px); opacity:0; } }
@keyframes lg-slide{ from{ transform:translateX(30px); opacity:0; clip-path:inset(0 0 0 100%); } to{ transform:none; opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes lg-draw{ to{ stroke-dashoffset:0; } }
@keyframes lg-fade{ from{ opacity:0; transform:translateY(4px); } }

/* --------------------------------------------- the request page, animated */
.brand{ align-self:center; display:inline-flex; align-items:center; gap:2px; margin:auto 0 14px; font-family:var(--display); font-weight:780; font-size:21px; letter-spacing:-.04em; }
.brand .me{ background:var(--out); color:var(--on-out); border-radius:13px 13px 4px 13px; padding:1px 7px 3px; }
.brand + .card{ margin-top:0; }
.ambient{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ambient i{ position:absolute; width:70%; aspect-ratio:1; border-radius:50%; filter:blur(50px); opacity:.5; }
.ambient i:nth-child(1){ background:radial-gradient(circle, rgba(243,169,187,.32), transparent 65%); left:-10%; top:5%; animation:drift1 10s ease-in-out infinite alternate; }
.ambient i:nth-child(2){ background:radial-gradient(circle, rgba(255,201,214,.18), transparent 65%); right:-15%; bottom:10%; animation:drift2 12s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform:translate(35%, 25%); } }
@keyframes drift2{ to{ transform:translate(-30%, -25%); } }
.thread{ position:relative; z-index:1; }
.card.enter > *{ animation:lg-fade .5s var(--ease) both; }
.card.enter > :nth-child(1){ animation-delay:.05s } .card.enter > :nth-child(2){ animation-delay:.12s } .card.enter > :nth-child(3){ animation-delay:.19s }
.card.enter > :nth-child(4){ animation-delay:.26s } .card.enter > :nth-child(5){ animation-delay:.33s }
.card .av-wrap::before{ content:""; position:absolute; inset:-6px; border-radius:50%; border:2px solid rgba(34,197,94,.55); animation:breathe 2.4s ease-in-out infinite; }
.card .av-wrap.off::before{ display:none; }
@keyframes breathe{ 0%,100%{ transform:scale(.96); opacity:.15; } 50%{ transform:scale(1.04); opacity:.8; } }
.join-form .btn{ position:relative; overflow:hidden; }
.join-form .btn::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-120%); animation:shine 2.8s ease-in-out 1s infinite; pointer-events:none; }
@keyframes shine{ 0%{ transform:translateX(-120%); } 45%,100%{ transform:translateX(120%); } }
.pill{ animation:pill-glow 2.2s ease-in-out infinite; }
@keyframes pill-glow{ 50%{ box-shadow:0 0 0 6px rgba(243,169,187,.08); } }