/* ============================================================
   Real app screenshots in device frames.
   Replaces the old CSS-built mockups (mockups.css) — every screen
   on the site is now an actual capture from the shipping app.
   Assets live in /assets/screens/ (iPhone) and are re-captured via
   the sim rig whenever the app UI changes; see the Website Overhaul
   roadmap doc for the sweep recipe.
   ============================================================ */

.screen-frame,
.watch-frame {
  box-sizing: border-box;
}

/* Screens ship as <picture> (WebP + PNG/JPEG fallback). The wrapper must not
   introduce a layout box of its own — every existing rule targets the img. */
.screen-frame picture,
.watch-frame picture,
.watch-device picture,
.rotator-stack picture {
  display: contents;
}

/* Screens carry a real Apple device frame baked into the image, so this is
   just a sizing box — it must not draw a bezel of its own. */
.screen-frame {
  width: 300px;
  max-width: 82vw;
  margin: 0 auto;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55));
}

.screen-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* Bottom-bleed variant: shows the dense top of a screen and fades out,
   cutting BETWEEN UI elements (the App Store slide treatment). The .crop
   div carries an inline aspect-ratio of 810 / <cut-line-px> per asset. */
.screen-frame.bleed {
  filter: none;
}

.screen-frame.bleed .crop {
  overflow: hidden;
  position: relative;
}

.screen-frame.bleed .crop::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(10, 15, 28, 0) 0%, var(--navy) 100%);
}

/* Fade target for sections with the lighter background */
.screen-frame.bleed.to-card .crop::after {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0) 0%, var(--navy-light) 100%);
}

/* Smaller variant for step cards / grids */
.screen-frame.sm {
  width: 262px;
}

/* Apple Watch Ultra, drawn in CSS: natural-titanium case, flat display with
   a raised rim, crown guard, and the orange Action Button on the left. Sized
   entirely from --watch-w so one value scales the device. */
.watch-device {
  --watch-w: 190px;
  position: relative;
  width: var(--watch-w);
  display: flex;
  justify-content: center;
}

/* Crown guard — the rugged shoulder that protects the digital crown */
.watch-device::before {
  content: '';
  position: absolute;
  right: calc(var(--watch-w) * -0.042);
  top: 26%;
  width: calc(var(--watch-w) * 0.115);
  height: calc(var(--watch-w) * 0.36);
  border-radius: calc(var(--watch-w) * 0.055);
  background: linear-gradient(90deg, #5d584f 0%, #a9a396 30%, #cbc5b8 52%, #7a746a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 2;
}

/* Action Button — the Ultra's signature orange key, on the left flank */
.watch-device::after {
  content: '';
  position: absolute;
  left: calc(var(--watch-w) * -0.026);
  top: 41%;
  width: calc(var(--watch-w) * 0.032);
  height: calc(var(--watch-w) * 0.135);
  border-radius: calc(var(--watch-w) * 0.014);
  background: linear-gradient(90deg, #b4400c 0%, #f97316 55%, #c2410c 100%);
  z-index: 2;
}

.watch-frame {
  position: relative;
  z-index: 3;
  width: var(--watch-w);
  padding: calc(var(--watch-w) * 0.105) calc(var(--watch-w) * 0.075);
  /* squarer than a standard Watch — the Ultra's flat-sided case */
  border-radius: calc(var(--watch-w) * 0.20);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(295deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0) 20%),
    linear-gradient(145deg, #cfcabe 0%, #9e988c 16%, #767066 38%, #5f5a52 52%, #b5afa2 72%, #7d776c 88%, #a49e91 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 26px 44px rgba(0, 0, 0, 0.66),
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 46px var(--accent-glow);
}

/* Digital crown, seated inside the guard */
.watch-frame::before {
  content: '';
  position: absolute;
  right: calc(var(--watch-w) * -0.052);
  top: 31%;
  width: calc(var(--watch-w) * 0.055);
  height: calc(var(--watch-w) * 0.155);
  border-radius: calc(var(--watch-w) * 0.022);
  background: linear-gradient(90deg, #5d574e 0%, #cfc8ba 45%, #6e675d 100%);
  z-index: 4;
}

/* Side button below the crown */
.watch-frame::after {
  content: '';
  position: absolute;
  right: calc(var(--watch-w) * -0.02);
  top: 56%;
  width: calc(var(--watch-w) * 0.028);
  height: calc(var(--watch-w) * 0.15);
  border-radius: calc(var(--watch-w) * 0.014);
  background: linear-gradient(90deg, #5a544b 0%, #a9a294 60%, #6b6459 100%);
  z-index: 4;
}

/* Specular sheen across the sapphire — real glass never reads perfectly matte */
.watch-gloss {
  position: absolute;
  inset: calc(var(--watch-w) * 0.095) calc(var(--watch-w) * 0.08);
  border-radius: calc(var(--watch-w) * 0.155);
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    128deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.04) 14%,
    rgba(255, 255, 255, 0) 34%,
    rgba(255, 255, 255, 0) 76%,
    rgba(255, 255, 255, 0.05) 100%
  );
}

.watch-frame img {
  width: 100%;
  height: auto;
  display: block;
  /* flat sapphire sits proud of the case, so the screen corners are tighter */
  border-radius: calc(var(--watch-w) * 0.125);
  background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9);
}

/* ---------------------------------------------------------------------
   Photographic device frame (preferred over the CSS case above).
   Drop an Apple Watch Ultra frame PNG with a TRANSPARENT screen window at
   website/assets/screens/device-watch-ultra.png, then swap the markup to:

     <div class="watch-device framed lineup-watch">
       <picture>...screenshot...</picture>
       <img class="watch-bezel" src="/assets/screens/device-watch-ultra.png" alt="">
     </div>

   The bezel image defines the box; the screenshot is positioned behind it
   with the four custom properties below. Measure the screen window in the
   PNG once (in px), divide by the PNG's width/height, and set them here —
   nothing else needs to change, and the device scales with --watch-w.
   Source: Apple Design Resources (developer.apple.com/design/resources),
   licensed for marketing your own app.
   --------------------------------------------------------------------- */
.watch-device.framed {
  --screen-top: 12%;
  --screen-left: 14%;
  --screen-width: 72%;
  --screen-radius: 13%;
  display: block;
}

.watch-device.framed .watch-bezel {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
}

.watch-device.framed picture {
  display: contents;
}

.watch-device.framed picture img {
  position: absolute;
  top: var(--screen-top);
  left: var(--screen-left);
  width: var(--screen-width);
  height: auto;
  border-radius: var(--screen-radius);
  background: #000;
  z-index: 1;
}

/* The CSS-drawn case and its crown/button are redundant once a real frame
   is in place. */
.watch-device.framed::before,
.watch-device.framed::after,
.watch-device.framed .watch-gloss {
  display: none;
}

/* The hero's light plane. Our app screens are #0c1221 against a #0a0f1c
   page — 1.02:1, so devices dissolve into the background. A light plane
   under the row gives them something to cut against: the phones straddle
   dark and light, which is what makes the reference composition read. */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 130px;
}

.hero::after {
  content: '';
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -40px;
  height: 430px;
  background: linear-gradient(180deg, #eef1f6 0%, #ffffff 100%);
  transform: skewY(-3.5deg);
  transform-origin: left bottom;
  z-index: 0;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .hero {
    padding-bottom: 90px;
  }

  .hero::after {
    height: 300px;
    bottom: -30px;
  }
}

/* Hero devices ship as ONE pre-composited transparent image (real Apple
   device frames + our captures + baked shadows), built by
   scripts/social/build_hero_composite.py. Re-run that after any re-capture. */
.hero-devices {
  margin: 44px auto -30px;
  max-width: 1180px;
}

.hero-devices img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 760px) {
  .hero-devices {
    margin-top: 28px;
    margin-bottom: -12px;
  }
}

/* Rotating screen stack (crossfades via js/main.js) */
.rotator-stack {
  position: relative;
  aspect-ratio: 1350 / 2760;
  overflow: hidden;
}

.rotator-stack img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.rotator-stack img.active {
  opacity: 1;
}

.rotator-points {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.rotator-points .feature-card {
  padding: 18px 20px;
}

/* Watch overlay: rides in front of the phone on the Watch & Strava slide,
   echoing the hero's phone+watch pairing. Framed composite, shadow baked in. */
.screen-frame.rotator {
  position: relative;
}

.rotator-watch {
  position: absolute;
  width: 64%;
  right: -30%;
  bottom: -4%;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.rotator-watch picture {
  display: contents;
}

.rotator-watch img {
  width: 100%;
  height: auto;
  display: block;
}

[data-rotator].watch-active .rotator-watch {
  opacity: 1;
}

@media (max-width: 760px) {
  .rotator-watch {
    width: 58%;
    right: -12%;
    bottom: -6%;
  }

  /* The watch hangs past the phone; never let it cause sideways scroll */
  .features {
    overflow-x: clip;
  }
}

/* Tiles are buttons that select the screen shown in the phone */
button.rotator-tile {
  font: inherit;
  color: inherit;
  text-align: left;
  display: block;
  width: 100%;
  cursor: pointer;
}

.rotator-tile.active {
  border-color: var(--accent);
  background: rgba(59, 130, 246, 0.08);
}

/* Risk-reversal microcopy under CTAs */
.cta-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--gray-500);
  text-align: center;
}