/* ============================================================
   previa care — US landing
   Style language: ClipFiT (floating pill nav, white legibility
   cards, elegant framed video, scroll-reveal grids, gradient
   border CTA). Motion + hero treatment: Stellar.ai (riseUp
   staggered entrance, gradient text, glass pill, hero bg video).
   Palette: previa care (forest green + orange).
   ============================================================ */

:root {
  --ink:        #15241C;   /* near-black green, body text */
  --green-900:  #16352A;   /* deepest brand green */
  --green-700:  #234E3A;   /* primary brand green (logo) */
  --green-500:  #2E6A4E;   /* mid green */
  --green-300:  #6FAE8C;   /* soft green */
  --orange:     #E6822E;   /* brand accent (the "ia") */
  --orange-700: #C96A1C;
  --sage:       #7E9A8A;   /* muted captions */
  --sage-100:   #E5ECE7;   /* hairlines / tiles */
  --cream:      #FAF8F3;   /* page background */
  --cream-2:    #F2EEE4;
}

* { font-family: 'Inter', sans-serif; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); }

/* ---- Stellar riseUp: transform-only staggered entrance ----
   Opacity stays 1 on purpose: if the timeline is ever suspended
   (throttled / hidden tab) the element rests at its 20px start
   offset instead of vanishing. delay set inline per element. */
@keyframes riseUp {
  from { transform: translateY(22px); }
  to   { transform: translateY(0); }
}
.rise {
  animation: riseUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: transform;
}

/* ---- Stellar gradient text (green -> orange) ---- */
.grad-text {
  background: linear-gradient(100deg, var(--green-700) 0%, var(--green-500) 42%, var(--orange) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- ClipFiT gradient-border button (orange -> green) ---- */
.grad-border-btn {
  position: relative;
  background: #fff;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.grad-border-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  padding: 1.6px;
  background: linear-gradient(135deg, var(--orange), var(--green-500));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.grad-border-btn:hover { transform: translateY(-1px); }

/* ---- ClipFiT scroll reveal (per-card transition-delay inline) ---- */
.cf-reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, transform;
}
.cf-reveal.in .cf-reveal-item { opacity: 1; transform: none; }

/* ---- Header EN/ES switch ----
   Sits beside the logo inside the floating pill. The visual chip stays
   compact so the nav keeps to one line; ::after extends the pointer
   target to 44px tall without growing the pill (Apple HIG hit-area
   extension). Sibling gap is 6px, so the two targets never overlap. */
.lang-btn {
  position: relative;
  min-width: 44px;
  padding: 7px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  /* not --sage: #7E9A8A on the light pill is 3.05:1, under WCAG AA for
     12px text. #5A6B61 (the page's secondary ink) measures 5.66:1. */
  color: #5A6B61;
  background: transparent;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.lang-btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  bottom: -9px;
}
.lang-btn.is-active {
  color: var(--green-900);
  background: rgba(35, 78, 58, 0.10);
}
.lang-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .lang-btn:hover { color: var(--green-700); }
}

/* ---- Explainer play control ----
   The explainer no longer autoplays and no longer loops: the poster
   holds behind this overlay until the visitor presses play, then the
   overlay fades out and the native controls take over. */
.play-overlay {
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.play-overlay.is-started {
  opacity: 0;
  pointer-events: none;
}
.play-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(14, 27, 20, 0.30) 0%, rgba(14, 27, 20, 0.52) 100%);
}
.play-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 9999px;
  background: rgba(250, 248, 243, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--green-900);
  box-shadow: 0 10px 34px rgba(14, 27, 20, 0.34);
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* optical centering: a triangle reads left-heavy when geometrically centred */
.play-btn svg { transform: translateX(2px); }
.play-overlay:focus-visible { outline: none; }
.play-overlay:focus-visible .play-btn {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}
.play-overlay:active .play-btn { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .play-overlay:hover .play-btn {
    transform: scale(1.06);
    box-shadow: 0 14px 42px rgba(14, 27, 20, 0.42);
  }
}
@media (min-width: 640px) {
  .play-btn { width: 88px; height: 88px; }
}

/* ---- Reduced motion: everything rests in its final state ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none !important; transform: none !important; }
  .cf-reveal-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .play-overlay, .play-btn, .lang-btn { transition: none; }
  .play-overlay:hover .play-btn,
  .play-overlay:active .play-btn { transform: none; }
}