/* ============================================================
   Yvonne Russell Realty — Enhancement layer
   Adds: real 3D pointer tilt · credibility ribbon · count-up
   stats · hero depth parallax · richer hover depth.
   Additive only — extends tokens.css + site.css, never replaces.
   All motion is compositor-only (transform/opacity) + guarded
   for reduced-motion and coarse pointers.
   ============================================================ */

/* ---------- 3D pointer tilt ------------------------------------ */
/* JS sets --rx/--ry (rotation) + --mx/--my (glare origin) per frame.
   Transform is composed here so the resting hover-lift (--tl/--ts)
   and the live rotation coexist without JS clobbering CSS. */
[data-tilt] {
  transform:
    perspective(var(--persp, 1100px))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--tl, 0px), 0)
    scale(var(--ts, 1));
  transform-style: preserve-3d;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  will-change: transform;
}
[data-tilt].is-tilting { transition: box-shadow var(--dur) var(--ease); } /* live: no transform easing */
[data-tilt]:hover { --tl: -8px; --ts: 1.015; }

/* keep the scroll-in reveal working through the composed transform:
   .reveal drives opacity; the slide-up rides on --tl until .in lands */
.reveal[data-tilt]:not(.in) { --tl: 28px; }

/* light sheen that tracks the pointer — injected by enhance.js */
.tilt-sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; opacity: 0;
  background: radial-gradient(
    38% 62% at var(--mx, 50%) var(--my, 0%),
    oklch(99% 0.02 80 / 0.42), transparent 70%);
  transition: opacity var(--dur) var(--ease);
  mix-blend-mode: soft-light;
}
[data-tilt]:hover .tilt-sheen { opacity: 1; }
/* darker cards get a warmer, stronger sheen */
.path-card .tilt-sheen,
.tcard.feature .tilt-sheen {
  background: radial-gradient(
    40% 65% at var(--mx, 50%) var(--my, 0%),
    oklch(86% 0.09 74 / 0.5), transparent 72%);
  mix-blend-mode: screen;
}

/* deepen the resting shadow on the big cards so the lift reads as depth */
[data-tilt].path-card:hover { box-shadow: 0 40px 90px -34px oklch(26% 0.07 40 / 0.62); }
[data-tilt].area-card:hover { box-shadow: var(--shadow-lg); }

/* ---------- Credibility ribbon (under hero) ------------------- */
.trust {
  background:
    radial-gradient(120% 140% at 88% -30%, oklch(86% 0.09 74 / 0.16), transparent 60%),
    var(--bone-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.4rem);
  position: relative; z-index: 1;
}
.trust-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(1.25rem, 3vw, 3rem);
}
.trust-rating { display: flex; align-items: center; gap: 1rem; flex: none; }
.trust-score { display: flex; flex-direction: column; line-height: 1; }
.trust-score b {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.trust-stars { color: var(--amber); letter-spacing: 2px; font-size: 0.95rem; margin-top: 0.35rem; }
.trust-sub { font-size: var(--text-sm); color: var(--text-muted); max-width: 22ch; }
.trust-sub b { color: var(--clay); font-weight: 700; font-variant-numeric: tabular-nums; }

.trust-logos { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.trust-eyebrow {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-soft);
}
.trust-logos ul {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 0.65rem 1.4rem;
}
.trust-logos li {
  font-family: var(--font-display); font-size: var(--text-base); font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em; opacity: 0.62;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
  position: relative;
}
.trust-logos li + li::before {
  content: ""; position: absolute; left: -0.82rem; top: 50%;
  width: 4px; height: 4px; border-radius: 50%; background: var(--sand);
  transform: translateY(-50%);
}
.trust:hover .trust-logos li { opacity: 0.9; }

@media (max-width: 780px) {
  .trust-inner { justify-content: flex-start; }
  .trust-logos { width: 100%; }
}

/* ---------- Hero depth parallax ------------------------------- */
/* JS nudges the hero content on pointer move for layered depth. */
.hero-inner { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero-inner { transform: none !important; }
}

/* count-up numbers shouldn't reflow as they tick */
.hstat b[data-count],
.trust [data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Reduced-motion / touch: flatten to elegant static -- */
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; transition: box-shadow var(--dur) var(--ease); }
  .tilt-sheen { display: none; }
}

/* ---------- Text-Yvonne band (homepage SMS opt-in) ------------ */
/* Closing CTA carries the lead form so the home page can capture
   an SMS-consented lead without a second click. */
.sms-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(120deg, var(--clay), var(--clay-deep) 62%, var(--dusk));
  color: var(--white);
  padding: clamp(2rem, 4.5vw, 4rem);
  display: grid; grid-template-columns: 1fr 0.88fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  box-shadow: var(--shadow-lg);
}
.sms-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 110% at 10% -12%, oklch(74% 0.15 66 / 0.42), transparent 62%);
}
.sms-copy h2 { color: var(--white); font-size: var(--text-2xl); font-weight: 400; text-wrap: balance; margin-top: 0.9rem; }
.sms-copy .eyebrow { color: var(--amber-soft); }
.sms-copy .eyebrow::before { background: var(--amber-soft); }
.sms-copy .lede { color: oklch(97% 0.01 80 / 0.88); margin-top: 1rem; max-width: 46ch; }

.sms-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.7rem; }
.sms-number {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500;
  color: var(--white); background: oklch(99% 0.004 80 / 0.14);
  border: 1.5px solid oklch(99% 0.004 80 / 0.38); border-radius: var(--r-pill);
  padding: 0.7rem 1.5rem;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.sms-number:hover { background: oklch(99% 0.004 80 / 0.24); transform: translateY(-2px); color: var(--white); }
.sms-band .btn-quiet {
  border: 1.5px solid oklch(99% 0.004 80 / 0.45); color: var(--white);
  background: transparent; box-shadow: none;
}
.sms-band .btn-quiet:hover { background: oklch(99% 0.004 80 / 0.14); transform: translateY(-2px); }

.sms-points { list-style: none; margin-top: 1.8rem; display: grid; gap: 0.6rem; font-size: var(--text-sm); color: oklch(97% 0.01 80 / 0.82); }
.sms-points li { display: flex; gap: 0.65rem; align-items: flex-start; }
.sms-points li::before { content: "✓"; color: var(--amber-soft); font-weight: 800; line-height: 1.4; }

/* the band paints text white — the form card sits back on light */
.sms-form { color: var(--text); }
.sms-form h3 { font-size: var(--text-lg); color: var(--ink); }
.sms-form .field label { color: var(--ink); }
.sms-form .form-intro { font-size: var(--text-sm); color: var(--text-muted); margin: 0.4rem 0 1.5rem; }

.consent { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.1rem 0 1.2rem; font-size: var(--text-xs); line-height: 1.6; color: var(--text-muted); cursor: pointer; }
.consent input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; accent-color: var(--clay); cursor: pointer; }
.consent a { color: var(--clay-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.consent.err { color: oklch(50% 0.19 28); }
.consent.err input[type="checkbox"] { outline: 2px solid oklch(55% 0.19 28); outline-offset: 2px; }

@media (max-width: 900px) {
  .sms-band { grid-template-columns: 1fr; }
  .sms-copy .lede { max-width: none; }
}

/* ---------- Hero: copy + review + SMS capture ------------------ */
/* Above-the-fold lead capture. Glass card so the Franklin Mtn
   photo still reads through instead of being blocked by a slab. */
@media (min-width: 1080px) {
  .hero { align-items: center; padding-block: calc(var(--space-6) + 4rem) var(--space-6); }
  .hero-inner { max-width: var(--maxw); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  /* the form shares the fold now — dial the display type back so
     copy + review + form all land above it */
  .hero-copy h1 { font-size: clamp(2.6rem, 1.1rem + 3.5vw, 4.4rem); }
  .hero-copy .lede { max-width: 36ch; font-size: var(--text-base); }
  .hero-copy .hero-badges { margin-top: var(--space-4); gap: 1rem 2rem; }
}
.hero-side { display: grid; gap: 1rem; }
@media (max-width: 1079px) { .hero-side { margin-top: var(--space-4); max-width: 32rem; } }

.hero-review {
  margin: 0; padding: 1.1rem 1.35rem; border-radius: var(--r-md);
  background: oklch(22% 0.04 320 / 0.42);
  border: 1px solid oklch(99% 0.004 80 / 0.18);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.hero-review .stars { color: var(--amber); font-size: 1rem; letter-spacing: 0.18em; line-height: 1; }
.hero-review blockquote { margin: 0.6rem 0 0; font-family: var(--font-display); font-size: var(--text-base); font-style: italic; line-height: 1.45; color: var(--white); }
.hero-review figcaption { margin-top: 0.6rem; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: oklch(97% 0.01 80 / 0.62); }

.hero-form {
  padding: clamp(1.3rem, 2vw, 1.9rem); border-radius: var(--r-lg);
  background: oklch(20% 0.045 320 / 0.58);
  border: 1px solid oklch(99% 0.004 80 / 0.2);
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: var(--shadow-lg);
  color: var(--white);
}
.hero-form-h { font-size: var(--text-lg); font-weight: 500; color: var(--white); }
.hero-form-sub { font-size: var(--text-sm); color: oklch(97% 0.01 80 / 0.7); margin: 0.3rem 0 1.2rem; }
.hero-form .field { margin-bottom: 0.85rem; }
.hero-form .field label { color: oklch(97% 0.01 80 / 0.82); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.hero-form .field input {
  background: oklch(99% 0.004 80 / 0.1); border-color: oklch(99% 0.004 80 / 0.28); color: var(--white);
}
.hero-form .field input::placeholder { color: oklch(97% 0.01 80 / 0.45); }
.hero-form .field input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px oklch(74% 0.15 66 / 0.22); }
.hero-form .consent { color: oklch(97% 0.01 80 / 0.62); }
.hero-form .consent a { color: var(--amber-soft); }
.hero-form .consent.err { color: oklch(85% 0.12 30); }
.hero-form .btn { width: 100%; }
.hero-form .form-status.ok { color: var(--amber-soft); }
.hero-form .form-status.err { color: oklch(85% 0.13 28); }

/* 5-star row under the hero rating (replaces the single-★ suffix) */
.hstat-stars {
  color: var(--amber) !important; letter-spacing: 0.14em;
  font-size: 0.82rem !important; line-height: 1; margin-top: 0.35rem !important;
  text-transform: none !important;
}
.hstat-stars + span { margin-top: 0.3rem; }