/* ============================================================
   SPARK Sky Residence — design-engineering refinements
   Spring motion · scroll reveals · CTA micro-interactions
   Loads AFTER ssr.css so later, equal-specificity rules win.
   ============================================================ */

:root{
  /* Emil-Kowalski-style spring: decelerates and *settles* with a
     hair of overshoot (→1.012) rather than a flat ease. */
  --ease-spring: linear(
    0, 0.006, 0.025 2.8%, 0.101 6.5%, 0.539 21.4%, 0.721 30%,
    0.849, 0.937 43.5%, 0.968, 0.991, 1.006, 1.013, 1.012, 1.006, 1.002, 1
  );
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
}

/* ── Hero entrance: weight settling, not a flat fade ──────── */
.ssr-hero__crumbs,
.ssr-hero__h1,
.ssr-hero__sub,
.ssr-hero__proof,
.ssr-hero__ctas,
.ssr-hero__broch-link,
.ssr-hero__micro{
  animation-timing-function: var(--ease-spring);
}
/* Tighter optical measure on the hero lede (45–75ch ideal) */
.ssr-hero__sub{ max-width: 56ch; }

/* ── CTA micro-interactions ───────────────────────────────── */
.ssr-btn{
  position: relative;
  overflow: hidden;
  transition:
    background-color .38s var(--ease-out-soft),
    background-position .7s var(--ease-out-soft),
    background-size .42s var(--ease-out-soft),
    color .3s var(--ease-out-soft),
    border-color .3s var(--ease-out-soft),
    box-shadow .4s var(--ease-out-soft),
    transform .14s ease;
}
.ssr-btn:active{ transform: translateY(1px) scale(.99); }

/* Primary — bronze fill with a light band that sweeps across on hover */
.ssr-btn--primary{
  background-color: var(--bronze);
  background-image: linear-gradient(120deg, transparent 32%, rgba(255,255,255,.36) 50%, transparent 68%);
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position: 160% 0;
}
.ssr-btn--primary:hover{
  background-color: var(--bronze-soft);
  background-position: -60% 0;
  color: var(--charcoal);
  box-shadow: 0 10px 28px -10px rgba(156,125,76,.65);
}

/* Ghost — white fill rises from the baseline; text settles to charcoal */
.ssr-btn--ghost{
  background-color: transparent;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
}
.ssr-btn--ghost:hover{
  background-size: 100% 100%;
  border-color: #fff;
  color: var(--charcoal);
}
/* keep the 3D glyph aligned with the colour shift */
.ssr-btn--ghost:hover .ssr-btn--3d__icon{ color: var(--charcoal); }

/* Dark variant — bronze wash sweeps up */
.ssr-btn--dark{
  background-color: var(--charcoal);
  background-image: linear-gradient(var(--bronze), var(--bronze));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0%;
}
.ssr-btn--dark:hover{ background-size: 100% 100%; color: #fff; }

/* ── Hero brochure micro-link (secondary, below the CTAs) ──── */
.ssr-hero__broch-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  transition: color .3s var(--ease-out-soft);
}
.ssr-hero__broch-link u{
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.32);
  padding-bottom: 2px;
  transition: border-color .3s var(--ease-out-soft);
}
.ssr-hero__broch-link .arr{
  display: inline-block;
  transition: transform .35s var(--ease-spring);
}
.ssr-hero__broch-link:hover{ color: #fff; }
.ssr-hero__broch-link:hover u{ border-color: var(--bronze-soft); }
.ssr-hero__broch-link:hover .arr{ transform: translateY(3px); }

/* ── Scroll-triggered reveals (spring) ────────────────────── */
/* Hidden state applies ONLY when JS has run + motion is allowed,
   so no-JS / reduced-motion visitors always see content.
   Uses a private hook (data-sr-reveal) so it never collides with
   site-v2's own [data-reveal] on-load animation system. */
.js-reveal [data-sr-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .8s var(--ease-spring),
    transform .8s var(--ease-spring);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-sr-reveal].is-in{
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce){
  .js-reveal [data-sr-reveal]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ssr-btn{ transition: background-color .2s, color .2s, border-color .2s; }
}