/* Original hover is owned by styles.css and main.js, both unchanged. */
.scene-card-box { width: 255px; height: 125px; }
.scene-card { width: 200px; height: 98px; transform: scale(1.275); transform-origin: left top; }
.scene-piece-inner { display: block; width: 100%; height: 100%; }
.scene-card img { display: block; object-fit: contain; }
.scene-card > .scene-piece-inner {
  border-radius: 12px; background: #f7f7f7; padding: 1.2px;
  font-family: 'Interface Sans', sans-serif; font-weight: 600; color: #585858;
  text-align: left; font-size: 7.16px; line-height: 9.55px;
}
.scene-card-top { background: white; border-radius: 11px; padding: 6px 9px; }
.scene-card-heading { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; }
.scene-sport { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #f0f5fe; flex-shrink: 0; }
.scene-event { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 8.36px; line-height: 11.94px; }
.scene-event strong { color: #171717; font-weight: 600; }
.scene-event > span { color: #c2c2c2; white-space: nowrap; }
.scene-joined { display: flex; gap: 1px; align-items: center; align-self: flex-start; background: #f7f7f7; padding: 1px 3px; border-radius: 6px; font-size: 5.97px; color: #c2c2c2; margin-left: auto; }
.scene-card-people { display: flex; align-items: center; gap: 9px; height: 24px; }
.scene-card-people > img, .scene-verified { margin-left: auto; }
.scene-avatars { display: flex; gap: 1px; }
.scene-avatars img { border-radius: 50%; width: 19px; height: 19px; }
.scene-gauge { position: relative; width: 24px; height: 24px; }
.scene-gauge > img { position: absolute; }
.scene-gauge .gauge-base { width: 24px; height: 17.5px; left: 0; top: 0; }
.scene-gauge .gauge-fill { width: 6.1px; height: 14px; left: 0; top: 3.3px; }
.scene-windsurfing .gauge-fill { width: 17.49px; height: 17.254px; top: 0; }
.scene-gauge .gauge-marker { width: 2.4px; height: 2.4px; top: 1px; left: 7px; }
.scene-gauge > span { position: absolute; bottom: 0; font-size: 4.78px; line-height: 6px; color: #c2c2c2; }
.scene-gauge > span:last-child { right: 0; }
.scene-verified { display: flex; align-items: center; gap: 3px; border-radius: 8px; padding: 2px 4px; background: #f0f5fe; color: #5183eb; font-size: 5.5px; line-height: 5.5px; font-weight: 700; }
.scene-card-info { display: flex; align-items: center; gap: 9px; padding: 5px 9px 0; }
.scene-date { width: 24px; flex-shrink: 0; border-radius: 5px; background: white; color: #5183eb; text-align: center; display: flex; flex-direction: column; }
.scene-date span { font-size: 5.97px; line-height: 8px; }
.scene-date strong { font-size: 8.36px; line-height: 10px; }
.scene-location { display: flex; flex-direction: column; gap: 1px; }
.scene-location > span { color: #bbb; }
.scene-doodling > .scene-piece-inner { background: #f0f5fe; outline: .6px dashed #c3d8fa; }
.scene-doodling .scene-location > span { color: #6a9ff0; }

/* Preserve native Figma glyph dimensions inside the original card animation. */
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card img { width: auto; height: auto; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-sport img { width:15px; height:15px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-avatars img { width:19px; height:19px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-gauge .gauge-base { width:24px; height:17.5px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-gauge .gauge-fill { width:6.1px; height:14px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card.scene-windsurfing .scene-gauge .gauge-fill { width:17.49px; height:17.254px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-gauge .gauge-marker { width:2.4px; height:2.4px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-card-people > img { width:14px; height:14px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-joined img { width:8px; height:8px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-verified img { width:11px; height:11px; }
:is(#card-left-up, #card-right-up, #card-left-down, #card-right-down) .scene-card .scene-card-info > img { width:12px; height:12px; margin-left:auto; }
.scene-burst { display:block; }
.scene-trigger { appearance:none; border:0; padding:0; background:transparent; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; border-radius:43px; }
.scene-trigger:focus-visible { outline:3px solid #5183eb; outline-offset:9px; }
.scene-phone-shell { position:absolute; inset:0; display:block; background:#dce6f8; border:3.5px solid #dce6f8; border-radius:43px; }
#container .scene-trigger { height:503.571px; }
.scene-phone-shell { bottom:3.48px; }
.scene-phone-viewport { position:absolute; inset:0; display:block; overflow:hidden; border-radius:39px; background:#5183eb; isolation:isolate; }
.scene-phone-shell::before, .scene-phone-shell::after { content:''; position:absolute; width:2px; background:#c3d8fa; border-radius:1px; }
.scene-phone-shell::before { height:35px; left:-5px; top:123px; box-shadow:0 41px #c3d8fa, 0 -34px #c3d8fa; }
.scene-phone-shell::after { height:55px; right:-5px; top:145px; }
.scene-screen, .scene-cover { display:block; position:absolute; inset:0; overflow:hidden; border-radius:39px; background:#fcfcfc; }
.scene-screen { border:5px solid #fcfcfc; }
.scene-screen .scene-screen-image { position:absolute; width:248.155px; height:493.395px; max-width:none; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover; }
.scene-cover { background:#3d82f1; }
.scene-cover img { object-fit:cover; }
.scene-celebration { position:absolute; inset:0; pointer-events:none; z-index:21; visibility:hidden; }
.figma-phone.is-celebrating .scene-celebration { visibility:visible; }
.scene-celebration .scene-piece { position:absolute; opacity:0; }
.scene-celebration .scene-piece-inner { display:block; width:100%; height:100%; }
.scene-celebration :is(.scene-ribbon, .scene-trail) path { stroke-dasharray:24 108; stroke-dashoffset:32; }
.scene-spark { width: 21px; height: 21px; z-index: 1; }
.scene-spark .scene-piece-inner { background: #fecd7b; clip-path: polygon(50% 0, 63% 34%, 100% 50%, 65% 64%, 50% 100%, 36% 65%, 0 50%, 35% 35%); }
.scene-spark-1 { left: 38px; top: 63px; --turn: 14deg; }
.scene-spark-2 { left: 552px; top: 214px; width: 15px; height: 15px; --turn: -12deg; }
.scene-spark-3 { left: 70px; top: 476px; width: 27px; height: 27px; --turn: 12deg; }
.scene-spark-4 { left: 408px; top: 480px; width: 24px; height: 24px; --turn: -15deg; }
.scene-spark-5 { left: 42px; top: 219px; width: 12px; height: 12px; }
.scene-spark-6 { left: 535px; top: 50px; width: 12px; height: 12px; }
.scene-spark-4 .scene-piece-inner, .scene-spark-5 .scene-piece-inner { background: #98dcca; }
.scene-ribbon { z-index: 1; width: 72px; height: 144px; }
.scene-ribbon-blue { left: 24px; top: 192px; }
.scene-ribbon-gold { left: 464px; top: 240px; }
.scene-ribbon-mint { left:8px; top:90px; width:60px; height:90px; }
.scene-ribbon-lilac { left:488px; top:368px; width:60px; height:90px; }
.scene-ribbon-sky-top { left:185px; top:-27px; width:165px; height:48px; }
.scene-ribbon-gold-bottom { left:200px; top:521px; width:150px; height:44px; }
.scene-trail { z-index: 0; opacity: .8; }
.scene-trail-one { left: 20px; top: 448px; width: 156px; height: 78px; }
.scene-trail-two { left: 454px; top: 118px; width: 65px; height: 78px; }

.scene-celebration .scene-spark-2 { left:510px; }
.scene-celebration .scene-spark-6 { left:500px; }
@media (prefers-reduced-motion: reduce) {
 .figma-phone .scene-celebration { display:none; }
}
.phone-animation-container.figma-phone.is-offscreen .element { animation-play-state: paused; }

/* Match the supplied Figma card weights and keep badges clear of card details. */
.scene-gauge > span, .scene-date { font-weight:700; }
.phone-animation-container.figma-phone.hovered #icon-bestie { left:55px; top:12px; }
.phone-animation-container.figma-phone.hovered #icon-angel { left:410px; top:16px; }

/* Original Figma fillGeometry preserves its actual corner smoothing in every
   engine with SVG masks, rather than approximating it with circular radii. */
.scene-phone-shell {
 border-color:transparent; border-radius:0; background-color:transparent;
 background-image:url('../images/hero-figma/smooth-phone-body.svg');
 background-origin:border-box; background-size:100% 100%; background-repeat:no-repeat;
}
.scene-phone-viewport, .scene-screen, .scene-cover {
 --scene-corner-mask:url('../images/hero-figma/smooth-phone-screen.svg');
}
.scene-card > .scene-piece-inner { --scene-corner-mask:url('../images/hero-figma/smooth-card.svg'); }
.scene-card-top { --scene-corner-mask:url('../images/hero-figma/smooth-card-top.svg'); }
.scene-sport { --scene-corner-mask:url('../images/hero-figma/smooth-sport.svg'); }
.scene-date { --scene-corner-mask:url('../images/hero-figma/smooth-date.svg'); }
.scene-joined { --scene-corner-mask:url('../images/hero-figma/smooth-joined.svg'); }
.scene-verified { --scene-corner-mask:url('../images/hero-figma/smooth-verified.svg'); }
.scene-phone-viewport, .scene-screen, .scene-cover,
.scene-card > .scene-piece-inner, .scene-card-top,
.scene-sport, .scene-date, .scene-joined, .scene-verified {
 border-radius:0;
 -webkit-mask-image:var(--scene-corner-mask); mask-image:var(--scene-corner-mask);
 -webkit-mask-size:100% 100%; mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.scene-doodling > .scene-piece-inner { position:relative; outline:0; }
.scene-doodling > .scene-piece-inner::after {
 content:''; position:absolute; inset:0; pointer-events:none;
 background:url('../images/hero-figma/smooth-card-outline.svg') center / 100% 100% no-repeat;
}

/* The pages pass through a soft blur while the blue cover scales at the center. */
#container .phone-white {
 z-index:1; opacity:1; visibility:visible; transform:none; filter:blur(16px); pointer-events:none;
 transition:filter 420ms cubic-bezier(.77, 0, .175, 1);
}
#container.hovered .phone-white { filter:blur(0); }
#container .phone-blue {
 z-index:2; opacity:1; visibility:visible; transform:scale(1); transform-origin:50% 50%; filter:blur(0); pointer-events:none;
 transition:transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 320ms ease, filter 420ms cubic-bezier(.77, 0, .175, 1);
}
#container.hovered .phone-blue { transform:scale(.78); opacity:0; filter:blur(16px); }
@media (prefers-reduced-motion: reduce) {
 #container .phone-blue, #container.hovered .phone-blue { transform:none; filter:none; transition:opacity 160ms ease; }
 #container .phone-white, #container.hovered .phone-white { filter:none; transition:none; }
}

/* In the fixed touch layout, fit the scene into the space left by the text,
   safe-area header and footer. The legacy 300px minimum can exceed that space. */
@media (hover: none) and (pointer: coarse) {
 body:not(.support-page):not(.error-page):not(.allow-scroll) .hero-phone {
  min-height:0;
 }
}
/* Release download action and a small increase to the original QR popup. */
.button-wrapper .download-btn:focus-visible {
 outline:2px solid #5183eb; outline-offset:4px;
}
.hero .qr-popup { padding:6px; }
.qr-popup .qr-image { width:120px; height:120px; }
.platform-note {
 margin:12px 0 0; color:#64748b; font-size:13px; font-weight:600; line-height:20px;
}
/* Wide screens: the note joins the download row beside the button, split by a
   thin divider, instead of floating alone underneath it. margin-inline keeps
   it on the correct side in both LTR and RTL. Stacked layouts keep the note
   under the button. */
@media (min-width: 901px) {
 .hero-content .button-wrapper { vertical-align:middle; }
 .platform-note {
  display:inline-flex; align-items:center; gap:16px; vertical-align:middle;
  margin:0; margin-inline-start:16px;
  animation:heroReveal 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
 }
 .platform-note::before {
  content:""; width:1px; height:20px; background:#e2e8f0; flex-shrink:0;
 }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
 .platform-note { animation:none; }
}
@media (hover: none), (pointer: coarse) {
 .qr-popup { display:none !important; }
}
@media (prefers-reduced-motion: reduce) {
 .qr-popup { transition:none; }
}

/* ── Swipe-to-join deck (stacked and touch layouts; built by hero-scene.js) ──
   All sizes are scene units: the 560 x 550 artwork is scaled by main.js. */
.figma-phone.deck-mode .element.card { display:none; }
.scene-deck {
 position:absolute; inset:0; z-index:30; pointer-events:none;
 -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.deck-card {
 /* Centred on (280, 429), the CENTER constant in hero-scene.js. */
 position:absolute; left:152.5px; top:366.5px; width:255px; height:125px;
 pointer-events:auto; touch-action:pan-y; cursor:grab; -webkit-tap-highlight-color:transparent;
 transform-origin:50% 50%; will-change:transform;
 filter:drop-shadow(0 10px 16px rgba(15, 23, 42, .12));
 transition:transform .55s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.deck-card .scene-card-box { pointer-events:none; }
.deck-card .scene-card img { -webkit-user-drag:none; }
.deck-card .scene-card-info > img { margin-left:auto; }
/* Crisp stroke gauge drawn by hero-scene.js in place of the masked SVGs. */
.deck-gauge { position:absolute; left:0; top:0; width:23.88px; height:17.46px; overflow:visible; }
.deck-gauge path { fill:none; stroke-width:3.58; stroke-linecap:round; }
.deck-gauge-fill { transition:stroke-dasharray .45s cubic-bezier(.22, 1, .36, 1), stroke .3s ease; }
.deck-card.is-held .deck-gauge-fill { transition:none; }
.deck-card.is-held, .deck-card.is-flying { transition:none; }
.deck-card.is-held { cursor:grabbing; }
.deck-card.is-flying { z-index:50 !important; pointer-events:none; }
.deck-count {
 position:absolute; left:372px; top:18px; z-index:55; width:40px; height:40px;
 display:grid; place-items:center; border-radius:50%;
 background:#5183eb; color:#fff; box-shadow:0 0 0 4px #fff, 0 6px 14px rgba(81, 131, 235, .35);
 font:800 19px/1 'Interface Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 transform:scale(0); transition:transform .45s cubic-bezier(.34, 1.56, .64, 1); pointer-events:none;
}
.deck-count.is-visible { transform:scale(1); }
.deck-plus {
 position:absolute; left:392px; top:-6px; z-index:56; color:#27cf83; opacity:0; pointer-events:none;
 font:800 22px/1 'Interface Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
.deck-hint {
 position:absolute; left:350px; top:440px; z-index:60; width:46px; height:46px;
 border-radius:50%; background:rgba(255, 255, 255, .92); border:2px solid rgba(81, 131, 235, .5);
 box-shadow:0 6px 16px rgba(15, 23, 42, .18); opacity:0; pointer-events:none;
 transform:translate(-50%, -50%);
}
/* Badges wait behind the phone and come out one per joined event, in a layout
   that keeps them clear of the deck. */
.phone-animation-container.figma-phone.deck-mode :is(#icon-bestie, #icon-angel, #icon-still-trying, #icon-buddy, #icon-reliable, #icon-buddy-sm, #icon-still-trying-sm):not(.deck-revealed) {
 left:222px; top:215px; opacity:0;
}
.phone-animation-container.figma-phone.deck-mode.hovered #icon-reliable { left:88px; top:128px; }
.phone-animation-container.figma-phone.deck-mode.hovered #icon-buddy-sm { left:495px; top:178px; }
/* Deck layout (body.deck-layout, set by main.js on stacked screens): the
   artwork fills the first screen and the page scrolls on to the footer.
   Cards may leave the artwork box while dragged or flying, so the box does not
   clip them; .main clips sideways instead, so the page never scrolls sideways. */
body.deck-layout .main { align-items:flex-start; overflow-x:clip; }
/* flex:none so the height main.js sets is used; flex:1 would collapse it to 0. */
body.deck-layout .hero-phone { flex:none; overflow:visible; position:relative; z-index:2; }
/* The footer sits above the page (z-index 11) on a white background, which
   cut the deck card's shadow with a straight line. The page is white anyway. */
body.deck-layout .footer { background-color:transparent; }
/* Shy Android (hero-scene.js): the head sits in a clip just above the word
   and rises from behind its letters. */
.platform-note { -webkit-tap-highlight-color:transparent; }
.android-word { position:relative; display:inline-block; isolation:isolate; }
.android-peek {
 position:absolute; left:50%; bottom:calc(100% - 6px); z-index:-1;
 width:26px; height:24px; margin-left:-13px; overflow:hidden; pointer-events:none;
}
.android-bot {
 display:block; width:26px; height:22px; margin-top:2px; transform-origin:50% 100%;
 transform:translateY(110%); transition:transform .3s cubic-bezier(.5, 0, .9, .4);
}
.platform-note.is-peeking .android-bot { animation:androidPeek 1.1s cubic-bezier(.34, 1.3, .64, 1) forwards; }
.platform-note.is-peeking .android-eye { animation:androidBlink 2.6s ease-in-out .9s infinite; transform-box:fill-box; transform-origin:center; }
@keyframes androidPeek {
 0% { transform:translateY(110%); }
 30% { transform:translateY(62%); }            /* just the eyes, checking */
 45% { transform:translateY(62%) rotate(-7deg); }
 60% { transform:translateY(62%) rotate(6deg); }
 100% { transform:translateY(14%) rotate(0deg); }
}
@keyframes androidBlink { 0%, 90%, 100% { transform:scaleY(1); } 95% { transform:scaleY(.15); } }
@media (prefers-reduced-motion: reduce) {
 .android-bot { transition:opacity .2s ease; opacity:0; transform:translateY(14%); }
 .platform-note.is-peeking .android-bot { animation:none; opacity:1; }
 .platform-note.is-peeking .android-eye { animation:none; }
}
/* Desktop click to join (hero-scene.js, .join-mode). Hovering a card that has
   come out shows its Join button on the card's outer corner. A joined card
   keeps a check there, which becomes a leave cross on the next hover. */
.figma-phone.join-mode { -webkit-user-select:none; user-select:none; }
.join-chip {
 position:absolute; bottom:-8px; z-index:2;
 display:flex; align-items:center; justify-content:center; height:22px; min-width:22px; padding:0 9px 0 7px;
 border:0; border-radius:11px; background:#5183eb; color:#fff; cursor:pointer;
 font:700 9.5px/1 'Interface Sans', -apple-system, BlinkMacSystemFont, 'SF Arabic', 'Noto Sans Arabic', sans-serif;
 letter-spacing:0; white-space:nowrap;
 box-shadow:0 0 0 2px #fff, 0 6px 14px rgba(81, 131, 235, .35);
 opacity:0; transform:scale(.6); pointer-events:none;
 transition:opacity .18s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, color .2s ease;
}
/* The outer corner is the one the phone does not cover. */
#card-left-up .join-chip, #card-left-down .join-chip { left:-6px; }
#card-right-up .join-chip, #card-right-down .join-chip { right:-6px; }
.join-chip-add { display:flex; align-items:center; gap:3px; }
.join-chip-done, .join-chip-leave { display:none; }
.join-chip svg { display:block; width:9px; height:9px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.figma-phone.join-mode.hovered .element.card:hover .join-chip,
.figma-phone.join-mode.hovered .element.card.is-hinting .join-chip,
.figma-phone.join-mode.hovered .element.card.is-joined .join-chip { opacity:1; transform:scale(1); pointer-events:auto; }
.element.card.is-joined .join-chip { padding:0; background:#27cf83; box-shadow:0 0 0 2px #fff, 0 6px 14px rgba(39, 207, 131, .35); }
.element.card.is-joined .join-chip-add { display:none; }
.element.card.is-joined .join-chip-done { display:flex; }
.figma-phone.join-mode .element.card.is-joined:not(.just-joined):hover .join-chip {
 background:#fff; color:#94a3b8; box-shadow:0 0 0 1.5px #e2e8f0, 0 6px 14px rgba(15, 23, 42, .1);
}
.figma-phone.join-mode .element.card.is-joined:not(.just-joined):hover .join-chip-done { display:none; }
.figma-phone.join-mode .element.card.is-joined:not(.just-joined):hover .join-chip-leave { display:flex; }
/* "You" joins the end of the card's avatar row, which opens up to make room. */
.join-you {
 position:relative; flex:none; width:0; height:19px; margin-inline-start:-1px;
 transition:width .35s cubic-bezier(.22, 1, .36, 1), margin .35s cubic-bezier(.22, 1, .36, 1);
}
.join-you-face {
 position:absolute; inset-inline-start:0; top:0; width:19px; height:19px; border-radius:50%; overflow:hidden;
 background:#5183eb; box-shadow:0 0 0 1.2px #fff;
 opacity:0; transform:translateY(-12px) scale(.4);
 transition:opacity .2s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.join-you-face svg { display:block; width:100%; height:100%; fill:#fff; }
.is-joined .join-you { width:19px; margin-inline-start:0; }
.is-joined .join-you-face { opacity:1; transform:none; transition-delay:.08s; }
/* The copy that flies into the phone, above everything in the scene. */
.join-ghost {
 position:absolute; z-index:45; width:255px; height:125px; pointer-events:none; transform-origin:50% 50%;
 filter:drop-shadow(0 12px 18px rgba(15, 23, 42, .16));
}
/* Layers over the phone screen's tiles (screen image units). Each number
   patch uses its tile's colour and covers the printed number; --accent is
   the tile's colour as RGB, set by hero-scene.js. */
.screen-tile-glow, .screen-count, .screen-plus { position:absolute; pointer-events:none; }
.screen-tile-glow {
 z-index:1; border-radius:12px; opacity:0;
 background:rgba(var(--accent), .08); box-shadow:0 0 0 1.5px rgba(var(--accent), .65), 0 0 16px rgba(var(--accent), .45);
}
.screen-count { z-index:2; overflow:hidden; }
/* The screen's printed digits are the Apple system font; this one matches
   them in size and position, measured against the printed "2". */
.screen-count-value {
 position:absolute; left:.45px; top:-.4px; color:#000;
 font:700 15.4px/17px -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Interface Sans', sans-serif; letter-spacing:0;
}
.screen-plus { z-index:3; color:rgb(var(--accent)); opacity:0; font:800 11px/1 'Interface Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
@media (prefers-reduced-motion: reduce) {
 .join-chip, .join-you, .join-you-face { transition:none; }
}