/* 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: 'Open Runde', 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;
}
@media (hover: none), (pointer: coarse) {
 .qr-popup { display:none !important; }
}
@media (prefers-reduced-motion: reduce) {
 .qr-popup { transition:none; }
}