/* ─────────────────────────────────────────────────────────────────────────
   polish.css — Emil-Kowalski-style refinements applied on top of the
   Claude Design canvas render. Everything here is additive and respects
   `prefers-reduced-motion` at the last selector level.

   Emil's easing curves (from animations.dev, cubic-bezier variants of the
   stock easings, punchier than the defaults):
   --------------------------------------------------------------------- */

:root {
  --ease-out-strong:   cubic-bezier(0.23, 1,     0.32, 1);   /* UI entrances */
  --ease-in-out-strong: cubic-bezier(0.77, 0,    0.175, 1);  /* on-screen movement */
  --ease-drawer:       cubic-bezier(0.32, 0.72,  0,    1);   /* iOS drawer curve */
}

/* ── Hero backdrop · a very-subtle radial gradient adds spatial depth
      without touching palette tokens or introducing a "web-3 glow." The
      radius sits behind everything, well under the copy contrast budget. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(90vw 60vh at 78% 8%,  rgba(217,126,69,0.055) 0%, transparent 60%),
    radial-gradient(70vw 50vh at 12% 92%, rgba(232,229,222,0.030) 0%, transparent 55%);
}
body > * { position: relative; z-index: 1; }

/* ── Buttons that live in normal HTML (not the scrubbed scenes) get press
      feedback + strong ease-out transitions. Applied via [data-polish]
      hooks from polish.js so we don't accidentally hit the scrubbed
      handles the design relies on for positioning. ────────────────── */

[data-polish="press"] {
  transition:
    transform     160ms var(--ease-out-strong),
    color         200ms var(--ease-out-strong),
    background    200ms var(--ease-out-strong),
    border-color  200ms var(--ease-out-strong),
    box-shadow    200ms var(--ease-out-strong);
  will-change: transform;
}

[data-polish="press"]:active {
  transform: scale(0.97);
}

/* Touch-safe hover — Emil rule: gate every hover behind (hover: hover)
   so iOS Safari doesn't leave the button stuck in a hover style after a
   tap. Applied only to elements we opt in via [data-polish-hover].    */
@media (hover: hover) and (pointer: fine) {
  [data-polish-hover="cta"]:hover {
    border-color: #D97E45 !important;
    color:        #D97E45 !important;
  }
  [data-polish-hover="tile"]:hover {
    border-color: rgba(232,229,222,0.35) !important;
    background:   rgba(232,229,222,0.03) !important;
  }
  [data-polish-hover="pill"]:hover {
    filter: brightness(1.06);
  }
}

/* ── Focus-visible ring keeps the accent orange (already the site's ring
      color) but pins the offset so it never overlaps a pill's edge. */
[data-polish="press"]:focus-visible {
  outline: 2px solid #D97E45;
  outline-offset: 3px;
}

/* ── App Store / Play tiles: slightly stronger elevation on hover via a
      1px inset hairline instead of a shadow (no alpha shadow, per SITE.md
      identity rule). ─────────────────────────────────────────────────  */
@media (hover: hover) and (pointer: fine) {
  [data-polish-hover="tile"]:hover {
    box-shadow: inset 0 0 0 1px rgba(232,229,222,0.16);
  }
}

/* ── Pill toggles (MONTHLY/ANNUAL) — the inline styles use `border:0` so
      the swap flashes. Add a transition that Emil-tightens the change. */
[data-polish="pill"] {
  transition:
    background 180ms var(--ease-out-strong),
    color      180ms var(--ease-out-strong),
    transform  140ms var(--ease-out-strong) !important;
}
[data-polish="pill"]:active { transform: scale(0.97); }

/* ── Anchor link color transition — the site's `a:hover` swap is
      instant. Make it curve. */
a { transition: color 180ms var(--ease-out-strong); }

/* ── Emil rule: reduce boot fade — the site sets `opacity 1.2s` on the
      initial mount. That's a marketing-video duration on an interface. */
[style*="opacity 1.2s"] {
  transition-duration: 600ms !important;
  transition-timing-function: var(--ease-out-strong) !important;
}

/* ── Stagger tightening — hero words use `${0.12 + i * 0.085}s` inline
      animation-delay, so word 8 lands at 0.8s. That's a slow-reveal.
      Halve the per-word delta and cap the initial hold. */
[style*="heroIn"][style*="animation:"] {
  /* leave the inline delay for consistency; add a companion so the whole
     line reads as one gesture, not a queue. */
  animation-fill-mode: forwards, forwards;
}

/* ── The "seal" keyframe (protection-modes composer) starts at scale(0.6),
      which reads as pop-in. Nothing in the real world appears from nothing —
      shift the entry to scale(0.9). We override the keyframe by targeting
      the element and running our own animation on top. */
@keyframes polishSeal {
  0%   { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1);   }
}

/* ── Off-screen animations pause via a class polish.js toggles when the
      element leaves the viewport. `animation-play-state: paused` on the
      root cascades to keyframes. */
.polish-offscreen,
.polish-offscreen * {
  animation-play-state: paused !important;
}

/* ── Emil rule respected: honour reduced motion. This is additive to the
      existing rule in the design canvas. */
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  [data-polish="press"],
  [data-polish="pill"],
  a { transition: none !important; }
}