/* ============ Product pages — motion layer ============ */
/* Shared by Golf Rhythm Coach, Golf Swing Partner and Remora Recorder, loaded
   after each product.css. Each page sets --pm-accent to its own colour (this
   file never defines it, so the page's value wins).

   Everything that hides, pins or moves something waits for html.pm. Only
   /product-motion.js sets it, and only without reduced motion; the i18n build
   never runs that module. So the page without html.pm — reduced motion, no
   script, the built language copies a crawler reads — is the finished page at
   rest: every section visible, every scene in its final state. */

:root {
  --pm-ease: cubic-bezier(.16, 1, .3, 1);
  --pm-ease-io: cubic-bezier(.65, 0, .35, 1);
}

.pm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- hero: the photograph settles, the copy rises, then both leave ---------- */
html.pm .pr-hero-media {
  animation: pmSettle 2.8s var(--pm-ease) both;
  transform-origin: 62% 46%;
}
@keyframes pmSettle {
  from { transform: scale(1.16); opacity: 0; }
  35% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
.pm-hero-dim {
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}
html.pm .pr-hero-img,
html.pm .pr-hero-inner { will-change: transform, opacity; }
html.pm body.loaded .pr-hero .rise { animation: pmRise 1.15s var(--pm-ease) both; }
html.pm body.loaded .pr-hero .rise:nth-child(1) { animation-delay: .35s; }
html.pm body.loaded .pr-hero .rise:nth-child(2) { animation-delay: .5s; }
html.pm body.loaded .pr-hero .rise:nth-child(3) { animation-delay: .62s; }
html.pm body.loaded .pr-hero .rise:nth-child(4) { animation-delay: .8s; }
html.pm body.loaded .pr-hero .rise:nth-child(5) { animation-delay: .95s; }
html.pm body.loaded .pr-hero .rise:nth-child(6) { animation-delay: 1.1s; }
@keyframes pmRise {
  from { opacity: 0; transform: translate3d(0, 38px, 0); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: none; }
}
/* the app icon lands with a little more weight */
html.pm body.loaded .pr-hero .pr-appicon.rise { animation-name: pmIcon; }
@keyframes pmIcon {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.72) rotate(-8deg); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- sections enter as you reach them ---------- */
/* product.js already adds .on to every .reveal once it is in view; here that
   becomes a rise with a short blur. --pm-i staggers the items of a grid. */
html.pm .reveal {
  transition:
    opacity .95s var(--pm-ease),
    transform 1.15s var(--pm-ease),
    filter .95s var(--pm-ease);
  transition-delay: calc(var(--pm-i, 0) * 95ms);
}
html.pm .reveal:not(.on) {
  opacity: 0;
  transform: translate3d(0, 46px, 0);
  filter: blur(6px);
}
/* line icons draw themselves once their card is in */
html.pm .pm-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s var(--pm-ease-io);
  transition-delay: calc(var(--pm-i, 0) * 95ms + .25s);
}
html.pm .reveal:not(.on) .pm-draw { stroke-dashoffset: 1; }

/* ---------- a statement that lights up word by word as you scroll ---------- */
.pm-w { transition: opacity .45s ease; }
html.pm [data-pm-words] .pm-w { opacity: .14; }
html.pm [data-pm-words] .pm-w.lit { opacity: 1; }

/* ---------- a photograph that opens to the full screen ---------- */
.pm-expand { position: relative; }
.pm-expand-pin {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.pm-expand-media { position: absolute; inset: 0; margin: 0; z-index: -2; }
.pm-expand-media img { width: 100%; height: 100%; object-fit: cover; }
.pm-expand-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 52%, rgba(2, 6, 13, .5), rgba(2, 6, 13, .9)),
    linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%);
  opacity: .82;
}
.pm-expand-copy {
  width: 100%;
  max-width: var(--wrap);
  padding: var(--section-y) var(--gutter);
  text-align: center;
}
.pm-expand-copy .stmt { text-shadow: 0 2px 40px rgba(2, 6, 13, .6); }
.pm-expand-copy .lead { color: rgba(244, 241, 234, .84); text-shadow: 0 1px 24px rgba(2, 6, 13, .8); }
html.pm .pm-expand { height: 270vh; }
html.pm .pm-expand-pin { position: sticky; top: 0; height: 100vh; min-height: 0; }
html.pm .pm-expand-media { clip-path: inset(13% 9% 13% 9% round 28px); }
html.pm .pm-expand-media img { transform: scale(1.22); will-change: transform; }
html.pm .pm-expand-shade { opacity: .25; }
html.pm .pm-expand-copy { opacity: 0; }

/* ---------- a full-width photograph band that drifts ---------- */
.pm-band {
  position: relative;
  margin: 0;
  height: clamp(300px, 52vw, 640px);
  overflow: hidden;
}
.pm-band img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
}
.pm-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 24%, transparent 70%, var(--bg) 100%);
  pointer-events: none;
}
html.pm .pm-band img { will-change: transform; }

/* ---------- numbers at a glance ---------- */
.pm-stats {
  position: relative;
  padding: clamp(80px, 11vw, 140px) 0;
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  background:
    radial-gradient(900px 340px at 50% 0%, color-mix(in srgb, var(--pm-accent, var(--accent)) 9%, transparent), transparent 70%),
    var(--bg);
}
.pm-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(44px, 6vw, 64px) 20px;
}
@media (min-width: 900px) {
  .pm-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pm-stat { text-align: center; }
.pm-stat-num {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-size: clamp(2.9rem, 1.9rem + 4.2vw, 5.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 10%, color-mix(in srgb, var(--pm-accent, var(--accent)) 70%, #ffffff) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pm-stat-pre, .pm-stat-unit { font-size: .44em; letter-spacing: 0; }
.pm-stat-pre { margin-right: .08em; }
.pm-stat-unit { margin-left: .14em; }
.pm-stat-label {
  margin: 16px auto 0;
  max-width: 17em;
  font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}
html[lang="ja"] .pm-stat-label, html[lang="ko"] .pm-stat-label { letter-spacing: 0; line-height: 1.7; }
html[lang="ja"] .pm-stat-label { word-break: auto-phrase; }
html[lang="ko"] .pm-stat-label { word-break: keep-all; }

/* ---------- screenshots tilt up into place ---------- */
html.pm [data-pm-tilt] > :first-child { transform-origin: 50% 100%; will-change: transform; }

/* ---------- local navigation, as on Apple's product pages ---------- */
/* Appears once the hero has gone. The site bar steps out of the way while
   you read down and comes back as soon as you scroll up. */
.product-page .nav {
  transition: background .45s ease, backdrop-filter .45s ease, box-shadow .45s ease, transform .5s var(--pm-ease);
}
body.pm-gnav-hidden .nav { transform: translate3d(0, -100%, 0); }
body.pm-gnav-hidden .nav:focus-within { transform: none; }
.pm-localnav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 49;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -100%, 0);
  transition: transform .5s var(--pm-ease), opacity .3s ease, visibility 0s linear .5s;
  background: rgba(2, 6, 13, .72);
  -webkit-backdrop-filter: saturate(1.6) blur(20px);
  backdrop-filter: saturate(1.6) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.pm-localnav.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, var(--pm-gnav-h, 78px), 0);
  transition: transform .5s var(--pm-ease), opacity .3s ease, visibility 0s;
}
body.pm-gnav-hidden .pm-localnav.is-on { transform: none; }
.pm-localnav-in {
  max-width: calc(var(--wrap) + 2 * 24px);
  min-height: 58px;
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
}
.pm-ln-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
}
.pm-ln-brand img { width: 30px; height: 30px; border-radius: 23%; flex-shrink: 0; }
.pm-ln-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[lang="ja"] .pm-ln-brand, html[lang="ko"] .pm-ln-brand { letter-spacing: 0; }
.pm-ln-links { display: flex; gap: clamp(16px, 2.2vw, 26px); }
.pm-ln-links a {
  color: var(--muted);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) ease;
}
.pm-ln-links a:hover, .pm-ln-links a.is-current { color: var(--ink); }
.pm-ln-links a.is-current { box-shadow: 0 1px 0 var(--pm-accent, var(--accent)); }
.pm-ln-cta { flex-shrink: 0; }
.pm-ln-cta img { display: block; height: 40px; width: auto; }
@media (max-width: 760px) {
  .pm-ln-links { display: none; }
}
@media (max-width: 380px) {
  .pm-ln-brand span { display: none; }
}
html.pm-has-ln :is(section[id], [id="top"]) { scroll-margin-top: 70px; }

/* ---------- pinned story: the device stays, the screens change ---------- */
.pm-steps { padding: var(--section-y) 0; }
.pm-steps-grid { display: grid; }
.pm-steps-visual { display: none; }
@media (min-width: 980px) {
  .pm-steps-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    gap: clamp(48px, 6vw, 96px);
  }
  /* the frames share one grid cell, so the column is as tall as one device;
     each page sizes its device to fit between the bars and the fold */
  .pm-steps-visual {
    display: grid;
    place-items: center;
    align-self: start;
    position: sticky;
    top: calc(50vh - min(360px, (100vh - 190px) / 2));
    order: 2;
  }
  .pm-frame {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    transform: translate3d(0, 48px, 0) scale(.92);
    transition: opacity .7s var(--pm-ease), transform 1s var(--pm-ease);
  }
  .pm-frame.is-active { opacity: 1; transform: none; }
  .pm-step {
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .pm-step-figure { display: none !important; }
  html.pm .pm-step { opacity: .22; transition: opacity .6s ease; }
  html.pm .pm-step.is-active { opacity: 1; }
  .pm-step-dots {
    position: absolute;
    right: -26px;
    top: 50%;
    display: grid;
    gap: 10px;
    transform: translateY(-50%);
  }
  .pm-step-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hairline-strong);
    transition: background .4s ease, transform .4s var(--pm-ease);
  }
  .pm-step-dots i.is-active { background: var(--pm-accent, var(--accent)); transform: scale(1.5); }
}

/* ---------- reduced motion: the layer steps back ---------- */
@media (prefers-reduced-motion: reduce) {
  .pm-localnav, .pm-localnav.is-on, .product-page .nav { transition: opacity .2s ease, visibility 0s; }
  .pm-frame { transition: opacity .2s ease; transform: none; }
}