/* FINN site — supplemental styles on top of Tailwind CDN */

html { scroll-behavior: smooth; }

/* Thai script gets a touch more line-height for readability */
html[lang="th"] body { line-height: 1.7; }

/* Smooth, hardware-accelerated hover lifts */
.transition-all { will-change: transform; }

/* Hide scroll-cue once user scrolls (progressive enhancement) */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* Video hero: ensure it always covers without letterboxing */
section video { pointer-events: none; }

/* ===== Concrete studio "stage" behind product bikes (transparent cutouts) =====
   Flat wall + floor backdrop (no perspective podium) so it fits EVERY photo
   ratio. The floor is anchored to the bottom in all sizes; a soft top spotlight
   adds focus. */
.bike-stage {
  position: relative;
  background-color: #2f3236;                          /* fallback before image loads */
  background-image:
    radial-gradient(62% 45% at 50% 26%, rgba(255,255,255,0.05) 0%, transparent 60%),
    url('/static/img/stage-studio.webp');
  background-size: cover, cover;
  background-position: center, center;                 /* floor seam sits ~62% down */
  background-repeat: no-repeat, no-repeat;
}
/* Soft ground contact shadow on the floor under the wheels. */
.bike-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 56%;
  height: 6%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.28) 48%, transparent 72%);
  filter: blur(5px);
  pointer-events: none;
  z-index: 0;
}
/* Seat the bike so its wheel axles meet the floor seam (~62%).
   Lower the percentage to lift the bike, raise it to push it down. */
.bike-stage img {
  position: relative;
  z-index: 1;
  object-position: center 52%;
  filter: drop-shadow(0 9px 9px rgba(0,0,0,0.40));
}

/* Hide Alpine elements until initialised (e.g. the product zoom lightbox) */
[x-cloak] { display: none !important; }