/* Silvercrest Management - motion & depth layer
   Loaded after style.css on every page. Progressive enhancement:
   all effects gate on html.has-motion, so with JS off nothing hides. */

/* ---------- Scroll reveal ---------- */
.has-motion .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1),
              transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.has-motion .reveal.reveal-scale { transform: translateY(26px) scale(.965); }
.has-motion .reveal.in-view { opacity: 1; transform: none; }

/* staggered children inside grids */
.has-motion .reveal[data-delay="1"] { transition-delay: .08s; }
.has-motion .reveal[data-delay="2"] { transition-delay: .16s; }
.has-motion .reveal[data-delay="3"] { transition-delay: .24s; }
.has-motion .reveal[data-delay="4"] { transition-delay: .32s; }
.has-motion .reveal[data-delay="5"] { transition-delay: .40s; }

/* ---------- Sticky header shadow on scroll ---------- */
.site-header {
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled {
  box-shadow: 0 10px 30px -12px rgba(18,54,44,.22);
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(1.1) blur(6px);
}

/* ---------- Depth: cards ---------- */
.card {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(18,54,44,.05), 0 10px 26px -10px rgba(18,54,44,.14);
  transition: transform .38s cubic-bezier(.16,.84,.44,1),
              box-shadow .38s cubic-bezier(.16,.84,.44,1),
              border-color .38s ease;
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 8px 16px -6px rgba(18,54,44,.10), 0 26px 54px -18px rgba(18,54,44,.26);
  border-color: #d9d0bd;
}

/* Depth: images */
.split-img img, .feature-img {
  transition: transform .5s cubic-bezier(.16,.84,.44,1),
              box-shadow .5s cubic-bezier(.16,.84,.44,1);
  will-change: transform;
}
.split-img img { box-shadow: 0 18px 44px -16px rgba(27,77,62,.30); }
.split-img:hover img { transform: translateY(-6px) scale(1.012); box-shadow: 0 26px 60px -18px rgba(27,77,62,.40); }
.feature-img { position: relative; }
.feature-img:hover { transform: translateY(-5px); box-shadow: 0 30px 66px -20px rgba(27,77,62,.34); }

/* Depth: contact box + faq */
.contact-box { box-shadow: 0 14px 40px -16px rgba(27,77,62,.20); border-radius: 16px; }
.faq-list details { transition: box-shadow .3s ease, transform .3s ease; }
.faq-list details[open] { box-shadow: 0 12px 30px -14px rgba(27,77,62,.20); }

/* ---------- Hero: parallax + entrance + floating card ---------- */
.hero { will-change: auto; }
.hero img.hero-bg {
  will-change: transform;
  transform: scale(1.08);
  transition: transform .1s linear;
}
/* soft brand glow behind hero copy for depth */
.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 620px; height: 620px;
  left: -160px; top: -180px;
  background: radial-gradient(circle at center, rgba(184,146,90,.28), rgba(184,146,90,0) 62%);
  pointer-events: none;
}
.has-motion .hero-content > * {
  opacity: 0;
  transform: translateY(22px);
}
.hero-content.hero-in > * {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.16,.84,.44,1),
              transform .8s cubic-bezier(.16,.84,.44,1);
}
.hero-content.hero-in > *:nth-child(1) { transition-delay: .05s; }
.hero-content.hero-in > *:nth-child(2) { transition-delay: .16s; }
.hero-content.hero-in > *:nth-child(3) { transition-delay: .28s; }

/* floating stat card overlapping the hero */
.hero-float {
  position: absolute;
  z-index: 3;
  right: max(24px, calc((100% - 1140px) / 2 + 24px));
  bottom: 42px;
  width: 290px;
  background: #ffffff;
  border-radius: 18px;
  padding: 24px 26px;
  box-shadow: 0 26px 60px -18px rgba(18,54,44,.42);
  border: 1px solid #eee5d3;
}
.has-motion .hero-float { opacity: 0; transform: translateY(30px) scale(.96); }
.hero-float.in-view {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.16,.84,.44,1) .5s,
              transform .8s cubic-bezier(.16,.84,.44,1) .5s;
}
.hero-float .hf-badge {
  display: inline-block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: #b8925a; font-weight: 700; margin-bottom: 12px;
}
.hero-float .hf-num {
  display: block; font-family: Georgia, serif; font-size: 3rem; line-height: 1;
  color: #1b4d3e; font-weight: 700; margin-bottom: 10px;
}
.hero-float .hf-cap { display: block; font-size: .9rem; color: #4a5352; line-height: 1.45; }

/* ---------- Stat bar (animated counters) ---------- */
.trust-bar .stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  align-items: start;
}
.trust-bar .stat { text-align: center; }
.trust-bar .stat-num {
  display: block;
  font-family: Georgia, serif;
  font-size: 2.5rem;
  line-height: 1;
  color: #e4c88f;
  font-weight: 700;
  letter-spacing: .01em;
}
.trust-bar .stat-label {
  display: block;
  margin-top: 8px;
  font-size: .86rem;
  color: #c3ccb7;
  letter-spacing: .02em;
}

/* ---------- Tinted band + floating shapes (CTA) ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(10px); pointer-events: none; z-index: 1;
}
.cta-band::before {
  width: 340px; height: 340px; right: -90px; top: -120px;
  background: radial-gradient(circle at center, rgba(184,146,90,.34), rgba(184,146,90,0) 68%);
}
.cta-band::after {
  width: 300px; height: 300px; left: -80px; bottom: -140px;
  background: radial-gradient(circle at center, rgba(228,200,143,.18), rgba(228,200,143,0) 66%);
}

/* soft radial tint on alt sections for dimension */
.section.alt { position: relative; }

/* ---------- App section ---------- */
.app-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0 110px;
  background:
    radial-gradient(1100px 520px at 82% 8%, rgba(47,107,86,.55), rgba(47,107,86,0) 60%),
    linear-gradient(160deg, #12362c 0%, #1b4d3e 58%, #174234 100%);
  color: #f1ede2;
}
.app-section .app-bg-shapes span {
  position: absolute; border-radius: 50%; filter: blur(14px); pointer-events: none;
}
.app-section .blob.b1 {
  width: 420px; height: 420px; left: -120px; bottom: -140px;
  background: radial-gradient(circle at center, rgba(184,146,90,.30), rgba(184,146,90,0) 66%);
}
.app-section .blob.b2 {
  width: 320px; height: 320px; right: 30%; top: -120px;
  background: radial-gradient(circle at center, rgba(228,200,143,.16), rgba(228,200,143,0) 68%);
}
.app-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.app-copy .kicker { color: #e4c88f; }
.app-copy h2 { color: #ffffff; font-size: 2.2rem; }
.app-copy p { color: #d9e3dc; font-size: 1.08rem; max-width: 520px; }
.app-points { list-style: none; margin: 18px 0 26px; padding: 0; }
.app-points li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  color: #eaf1ec; font-size: 1rem;
}
.app-points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #b8925a;
  box-shadow: 0 0 0 5px rgba(184,146,90,.18);
}
.app-points li::after {
  content: ""; position: absolute; left: 5px; top: 11px;
  width: 5px; height: 8px; border: solid #12362c; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.app-install {
  font-size: .92rem; color: #bcc9c0; margin-top: 18px;
}
.app-install strong { color: #e4c88f; }

/* phone stage */
.phone-stage {
  position: relative;
  min-height: 560px;
  display: flex; align-items: center; justify-content: center;
}
.phone {
  position: absolute;
  width: 244px;
  aspect-ratio: 9 / 19.2;
  background: #0e2620;
  border-radius: 40px;
  padding: 11px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.30),
    0 40px 80px -24px rgba(0,0,0,.55),
    inset 0 0 0 2px rgba(255,255,255,.04);
  border: 1px solid #0a1b16;
}
.phone::before { /* notch */
  content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 7px; border-radius: 6px; background: #05100c; z-index: 3;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 30px; overflow: hidden; background: #faf7f0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.phone-front { transform: translateY(6px) translateY(var(--py,0px)) rotate(-2deg); z-index: 3; }
.phone-back  { transform: translate(-178px, -54px) translateY(var(--py,0px)) rotate(-10deg) scale(.82); z-index: 1; opacity: .97; }
.phone-side  { transform: translate(178px, 62px) translateY(var(--py,0px)) rotate(8deg) scale(.82); z-index: 2; opacity: .98; }

.phone:hover { z-index: 5; }
/* opacity-only reveal so each phone keeps its own rotate/translate/scale */
.has-motion .phone-anim { opacity: 0; }
.has-motion .phone-anim.in-view { opacity: 1; }
.phone-anim { transition: opacity .9s cubic-bezier(.16,.84,.44,1); }
.phone-back.in-view  { transition-delay: .12s; }
.phone-side.in-view  { transition-delay: .24s; }

/* ---------- Fallback: if JS never inits, force-reveal all content ---------- */
.has-motion.motion-fallback .reveal,
.has-motion.motion-fallback .hero-content > *,
.has-motion.motion-fallback .hero-float,
.has-motion.motion-fallback .phone-anim {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Reduced motion: disable everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .has-motion .reveal,
  .has-motion .hero-content > *,
  .has-motion .hero-float,
  .has-motion .phone-anim {
    opacity: 1 !important;
    transition: none !important;
  }
  .has-motion .reveal,
  .has-motion .hero-content > *,
  .has-motion .hero-float { transform: none !important; }
  .hero img.hero-bg { transform: none !important; }
  .card:hover, .split-img:hover img, .feature-img:hover, .phone:hover { transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .app-inner { grid-template-columns: 1fr; gap: 30px; }
  .phone-stage { min-height: 520px; margin-top: 8px; }
  .app-copy h2 { font-size: 1.9rem; }
}
@media (max-width: 900px) {
  .trust-bar .stat-row { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .hero-float { display: none; }
}
@media (max-width: 620px) {
  /* one clean phone on small screens */
  .phone-back, .phone-side { display: none; }
  .phone-front { transform: translateY(var(--py,0px)) rotate(-1.5deg); }
  .phone { width: 230px; }
  .phone-stage { min-height: 500px; }
  .trust-bar .stat-num { font-size: 2.05rem; }
  .app-section { padding: 68px 0 80px; }
}
@media (max-width: 400px) {
  .phone { width: 200px; }
  .phone-stage { min-height: 460px; }
}