/* ============================================================
   Claudo Marketing Site — small extras beyond Tailwind utilities.
   Tailwind via CDN handles ~99% of styling; this file is intentionally
   minimal to keep the site easy to lift out and host anywhere.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }

/* Hide the default <details> marker globally */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

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

/* Subtle scrollbar tweaks (modern browsers) — tuned for the light theme */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(15,23,42,0.18) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.18); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.30); }

/* Hide scrollbars on horizontal scroll strips (e.g. mock app rows) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ============================================================
   Admin ribbon transition ("Now step inside the gym admin app")
   Replit-style bands that sweep in from both sides driven by scroll progress.
   JS sets inline transforms + toggles `.is-visible` for the sheen animation.
   ============================================================ */
.ribbon-band {
  will-change: transform, opacity;
  opacity: 0;
}
.ribbon-band--main { transform: translate(-50%, -50%) rotate(3deg) translateX(-62%) scale(1); }
.ribbon-band--back { transform: translate(-50%, -50%) rotate(-6deg) translateX(64%) scale(1); }

.ribbon-text {
  opacity: 0;
  transform: translateX(-26px);
}

.ribbon-cue { display: none; }

/* Moving light sheen across the main ribbon */
.ribbon-sheen {
  background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.4) 50%, transparent 78%);
  transform: translateX(-100%);
}
[data-ribbon].is-visible .ribbon-sheen { animation: ribbon-sheen 2.4s ease-in-out .95s infinite; }
@keyframes ribbon-sheen {
  0%   { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  /* Kill only the transitions — the transforms also handle centering/rotation,
     so `transform: none` would misplace the bands entirely. */
  .ribbon-band, .ribbon-text { transition: none !important; opacity: 1 !important; }
  .ribbon-sheen { display: none; }
}

/* ============================================================
   Premium ambient motion — fluid aurora blobs, gentle device
   float and softly bobbing brand chips. Used behind the admin
   device showcase and trainer app sections.
   ============================================================ */
@keyframes aurora-drift {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1);    }
  33%  { transform: translate3d(6%, 5%, 0)   scale(1.14); }
  66%  { transform: translate3d(-4%, 7%, 0)  scale(1.05); }
  100% { transform: translate3d(-6%, -4%, 0) scale(1);    }
}
.aurora-blob { will-change: transform; animation: aurora-drift 20s ease-in-out infinite; }
.aurora-blob--slow { animation-duration: 28s; animation-direction: reverse; }
.aurora-blob--fast { animation-duration: 15s; }

@keyframes device-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.device-float { will-change: transform; animation: device-float 7.5s ease-in-out infinite; }

@keyframes chip-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.chip-bob { will-change: transform; animation: chip-bob 5s ease-in-out infinite; }

/* Slow conic sheen that rotates behind a spotlighted device */
@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 40s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .aurora-blob, .device-float, .chip-bob, .spin-slow { animation: none !important; }
}

/* ============================================================
   Results section — endless marquee of app modules + revenue
   bars behind the "sales target" card that grow in once on
   reveal and then stay put.
   ============================================================ */
@keyframes marquee-x { to { transform: translateX(-50%); } }
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-x 32s linear infinite;
}
.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

@keyframes bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.bar-pulse { transform-origin: bottom; }
[data-reveal].is-visible .bar-pulse { animation: bar-grow .9s cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; }
  [data-reveal].is-visible .bar-pulse { animation: none !important; }
}

/* ============================================================
   Target sales — one 6s loop showing the whole flow:
   admin taps "Push to app" → the product flies into the member's
   phone → it appears as a recommendation → the member orders →
   the sales bars climb. Every element runs the same 6s timeline
   so the beats stay in sync.
   ============================================================ */
.ts-scene { --ts-dur: 6s; }

/* admin "Push to app" button press */
.ts-push { animation: ts-push var(--ts-dur) ease-in-out infinite; }
@keyframes ts-push { 0%,3%,12%,100% { transform: scale(1); filter: brightness(1); } 7% { transform: scale(.94); filter: brightness(1.12); } }

/* the connector arrow travels toward the phone */
.ts-arrow { left: 6%; opacity: 0; animation: ts-arrow var(--ts-dur) ease-in-out infinite; }
@keyframes ts-arrow { 0%,8% { left: 6%; opacity: 0; } 14% { opacity: 1; } 34% { left: 88%; opacity: 1; } 40%,100% { left: 88%; opacity: 0; } }

/* the product token flies from the admin card into the phone */
.ts-fly { left: 30%; top: 82px; opacity: 0; animation: ts-fly var(--ts-dur) cubic-bezier(.5,0,.4,1) infinite; }
@keyframes ts-fly {
  0%,7% { left: 30%; top: 82px; opacity: 0; transform: scale(.6); }
  13% { opacity: 1; transform: scale(1.05); }
  36% { left: 70%; top: 40px; opacity: 1; transform: scale(.7); }
  42%,100% { left: 70%; top: 40px; opacity: 0; transform: scale(.45); }
}

/* recommendation card drops into the shop */
.ts-reco { opacity: 0; transform: translateY(-8px) scale(.96); animation: ts-reco var(--ts-dur) cubic-bezier(.16,1,.3,1) infinite; }
@keyframes ts-reco { 0%,33% { opacity: 0; transform: translateY(-8px) scale(.96); } 40%,100% { opacity: 1; transform: translateY(0) scale(1); } }

/* member taps "Add to cart" */
.ts-buy { animation: ts-buy var(--ts-dur) ease-in-out infinite; }
@keyframes ts-buy { 0%,55%,66%,100% { background: #2563eb; transform: scale(1); } 60% { background: #1e40af; transform: scale(.95); } }

/* "Ordered" confirmation flashes over the shop */
.ts-ordered { opacity: 0; animation: ts-ordered var(--ts-dur) ease-in-out infinite; }
@keyframes ts-ordered { 0%,63% { opacity: 0; } 69%,90% { opacity: 1; } 96%,100% { opacity: 0; } }
.ts-ordered-ic { animation: ts-ordered-pop var(--ts-dur) cubic-bezier(.16,1,.3,1) infinite; }
@keyframes ts-ordered-pop { 0%,64% { transform: scale(.4); } 70% { transform: scale(1.15); } 74%,100% { transform: scale(1); } }

/* the sales bars climb once — then hold (no looping back down) */
.ts-bar { transform-origin: bottom; transform: scaleY(.2); }
[data-reveal].is-visible .ts-bar { animation: ts-bar-grow 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes ts-bar-grow { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

/* revenue chip pops in with the climb, then holds */
.ts-rev { opacity: 0; }
[data-reveal].is-visible .ts-rev { animation: ts-rev 1s cubic-bezier(.16,1,.3,1) 1.1s both; }
@keyframes ts-rev {
  0%   { opacity: 0; transform: translateY(10px) scale(.8); }
  60%  { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ts-push, .ts-arrow, .ts-fly, .ts-reco, .ts-buy, .ts-ordered, .ts-ordered-ic, .ts-bar, .ts-rev { animation: none !important; }
  .ts-fly { display: none; }
  .ts-reco { opacity: 1; transform: none; }
  .ts-ordered { opacity: 0; }
  .ts-bar { transform: scaleY(1); }
  .ts-rev { opacity: 1; }
}

/* ============================================================
   Check-in — a reader that cycles through every method.
   A JS state machine (initCheckin) advances data-method
   (qr → face → finger → rfid) and flips data-phase to
   "granted" mid-cycle. Each method shows its real gesture,
   the matching pill lights up, and the check-in lands in the
   live attendance feed — all driven off the two data-* attrs.
   ============================================================ */
.ci-scene { --ci: #2563eb; }

/* rotating instruction caption */
.ci-cap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; opacity: 0; transition: opacity .3s ease; }
[data-checkin][data-method="qr"]     .ci-cap-qr,
[data-checkin][data-method="face"]   .ci-cap-face,
[data-checkin][data-method="finger"] .ci-cap-finger,
[data-checkin][data-method="rfid"]   .ci-cap-rfid { opacity: 1; }

/* method layers inside the reader screen */
.ci-layer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .3s ease; }
[data-checkin][data-method="qr"]     .ci-qr,
[data-checkin][data-method="face"]   .ci-face,
[data-checkin][data-method="finger"] .ci-finger,
[data-checkin][data-method="rfid"]   .ci-rfid { opacity: 1; }

/* sweeping scan line */
.ci-scanline { position: absolute; left: 10%; right: 10%; top: 16px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, transparent, #60a5fa, transparent); box-shadow: 0 0 14px 2px rgba(59,130,246,.7); opacity: 0; }
.ci-scanline-violet { background: linear-gradient(90deg, transparent, #c4b5fd, transparent); box-shadow: 0 0 14px 2px rgba(167,139,250,.7); }
[data-checkin][data-method="qr"]   .ci-qr   .ci-scanline,
[data-checkin][data-method="face"] .ci-face .ci-scanline { animation: ci-scan 1.6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes ci-scan { 0% { transform: translateY(-6px); opacity: 0; } 12%,88% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }

/* scan-framing corner brackets */
.ci-corner { position: absolute; height: 16px; width: 16px; border: 0 solid #60a5fa; }
.ci-corner-violet { border-color: #c4b5fd; }
.ci-corner-tl { top: 14px; left: 14px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 6px; }
.ci-corner-tr { top: 14px; right: 14px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 6px; }
.ci-corner-bl { bottom: 14px; left: 14px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 6px; }
.ci-corner-br { bottom: 14px; right: 14px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 6px; }

/* QR: member's phone rises into frame holding its code */
.ci-rise { opacity: 0; transform: translateY(30px); }
[data-checkin][data-method="qr"] .ci-qr .ci-rise { animation: ci-rise 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes ci-rise { 0% { transform: translateY(34px); opacity: 0; } 22%,100% { transform: translateY(0); opacity: 1; } }

/* Face ID: the scan-face icon pulses as it maps the face */
.ci-facepulse { animation: ci-facepulse 1.6s ease-in-out infinite; }
@keyframes ci-facepulse { 0%,100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.02); opacity: 1; } }

/* Fingerprint: a finger presses up onto the sensor, the print glows + ripples */
.ci-press { transform: translate(-50%, 90%); opacity: 0; }
[data-checkin][data-method="finger"] .ci-press { animation: ci-press 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes ci-press { 0% { transform: translate(-50%, 90%); opacity: 0; } 35%,70% { transform: translate(-50%, -4%); opacity: 1; } 100% { transform: translate(-50%, 70%); opacity: .4; } }
.ci-ripple { position: absolute; inset: 0; border-radius: 9999px; }
[data-checkin][data-method="finger"] .ci-ripple { animation: ci-ripple 1.6s ease-out infinite; }
@keyframes ci-ripple { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 100% { box-shadow: 0 0 0 22px rgba(16,185,129,0); } }
[data-checkin][data-method="finger"] .ci-printglow { animation: ci-facepulse 1.2s ease-in-out infinite; }

/* RFID: a card taps in from the side, radio waves ripple out */
.ci-tap { transform: translate(60px, -50%); opacity: 0; }
[data-checkin][data-method="rfid"] .ci-tap { animation: ci-tap 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes ci-tap { 0% { transform: translate(60px, -50%); opacity: 0; } 35%,70% { transform: translate(-6px, -50%); opacity: 1; } 100% { transform: translate(46px, -50%); opacity: 0; } }
.ci-wave { position: absolute; left: 50%; top: 50%; height: 44px; width: 44px; margin: -22px 0 0 -22px; border-radius: 9999px; border: 2px solid rgba(251,191,36,.6); opacity: 0; }
[data-checkin][data-method="rfid"] .ci-wave { animation: ci-wave 1.6s ease-out infinite; }
[data-checkin][data-method="rfid"] .ci-wave-2 { animation-delay: .55s; }
@keyframes ci-wave { 0% { transform: scale(.4); opacity: .85; } 100% { transform: scale(2.4); opacity: 0; } }

/* "Checked in" confirmation flashes over the reader on match */
.ci-granted { opacity: 0; transition: opacity .3s ease; }
[data-checkin][data-phase="granted"] .ci-granted { opacity: 1; }
[data-checkin][data-phase="granted"] .ci-check { animation: ci-pop .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes ci-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); } }

/* method pills — active one lights up in its own colour */
.ci-pill { border-radius: .75rem; padding: .55rem .25rem; color: #94a3b8; background: #f8fafc; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); transition: color .3s, background .3s, box-shadow .3s, transform .3s; }
.ci-pill-ic { margin: 0 auto; display: grid; height: 2.25rem; width: 2.25rem; place-items: center; border-radius: .6rem; background: rgba(148,163,184,.14); transition: background .3s, color .3s; }
[data-checkin][data-method="qr"]     .ci-pill[data-m="qr"],
[data-checkin][data-method="face"]   .ci-pill[data-m="face"],
[data-checkin][data-method="finger"] .ci-pill[data-m="finger"],
[data-checkin][data-method="rfid"]   .ci-pill[data-m="rfid"] { transform: translateY(-2px); }
[data-checkin][data-method="qr"]     .ci-pill[data-m="qr"]     { color: #1d4ed8; background: #eff6ff; box-shadow: inset 0 0 0 1.5px rgba(37,99,235,.55), 0 8px 18px -8px rgba(37,99,235,.5); }
[data-checkin][data-method="qr"]     .ci-pill[data-m="qr"]     .ci-pill-ic { background: rgba(37,99,235,.14); color: #2563eb; }
[data-checkin][data-method="face"]   .ci-pill[data-m="face"]   { color: #6d28d9; background: #f5f3ff; box-shadow: inset 0 0 0 1.5px rgba(124,58,237,.55), 0 8px 18px -8px rgba(124,58,237,.5); }
[data-checkin][data-method="face"]   .ci-pill[data-m="face"]   .ci-pill-ic { background: rgba(124,58,237,.14); color: #7c3aed; }
[data-checkin][data-method="finger"] .ci-pill[data-m="finger"] { color: #047857; background: #ecfdf5; box-shadow: inset 0 0 0 1.5px rgba(5,150,105,.55), 0 8px 18px -8px rgba(5,150,105,.5); }
[data-checkin][data-method="finger"] .ci-pill[data-m="finger"] .ci-pill-ic { background: rgba(5,150,105,.14); color: #059669; }
[data-checkin][data-method="rfid"]   .ci-pill[data-m="rfid"]   { color: #b45309; background: #fffbeb; box-shadow: inset 0 0 0 1.5px rgba(217,119,6,.55), 0 8px 18px -8px rgba(217,119,6,.5); }
[data-checkin][data-method="rfid"]   .ci-pill[data-m="rfid"]   .ci-pill-ic { background: rgba(217,119,6,.14); color: #d97706; }

/* live attendance — the row for the active method slides in */
.ci-fr { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
[data-checkin][data-method="qr"]     .ci-fr-qr,
[data-checkin][data-method="face"]   .ci-fr-face,
[data-checkin][data-method="finger"] .ci-fr-finger,
[data-checkin][data-method="rfid"]   .ci-fr-rfid { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ci-scanline, .ci-facepulse, .ci-printglow, .ci-ripple, .ci-wave,
  .ci-rise, .ci-press, .ci-tap, .ci-check { animation: none !important; }
  .ci-rise, .ci-press, .ci-tap { opacity: 1; transform: none; }
}

/* ============================================================
   Mobile: kill the soft "smudge" behind device mockups.
   The large blue shadow-phone glow reads as a blurry smudge on
   small screens, so swap it for a tight, crisp shadow there.
   ============================================================ */
@media (max-width: 640px) {
  .shadow-phone { box-shadow: 0 6px 16px -10px rgba(15,23,42,.30) !important; }
}