/* VitalDemo templates · motion layer (pairs with app.js) */

/* fit the fixed-width layouts (1440 desktop / 390 mobile) to any screen; --z is set in <head> */
body { zoom: var(--z, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* reveal on scroll */
  .rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
  }
  .rv.rv-in { opacity: 1; transform: none; }
  .rv.rv-done { transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }

  /* hover: buttons and cards lift */
  .pill, .ar, .ctrls span, .go { transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease; }
  .pill:hover, .ar:hover, .ctrls span:hover { transform: translateY(-2px); }
  .pill.dark:hover, .pill.ember:hover { box-shadow: 0 10px 24px rgba(17, 17, 17, .18); }
  .pcard.rv-done:hover, .pc.rv-done:hover, .gcard.rv-done:hover, .goal.rv-done:hover, .cat.rv-done:hover,
  .qcard.rv-done:hover, .addon.rv-done:hover, .three > .card.rv-done:hover, .doc.rv-done:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(30, 24, 18, .13);
  }
  .goal .v, .pc .well, .pcard .well { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
  .goal:hover .v { transform: translateY(-6px) rotate(-3deg); }

  /* hero: slow settle-in of the photo */
  .hero { animation: heroIn 1.6s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes heroIn { from { opacity: .001; filter: saturate(.7) brightness(1.08); } to { opacity: 1; filter: none; } }

  /* T8 data band: lines draw, bars and dots grow */
  .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s ease .35s; }
  .panel.rv-in .draw { stroke-dashoffset: 0; }
  .grow { transform: scale(1, 0); transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .45s; }
  circle.grow { transform: scale(0); transform-origin: 50% 50%; }
  .panel.rv-in .grow { transform: none; }

  /* small live dot on eyebrows */
  .eyebrow:before, .hero .eyebrow i { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(232, 98, 44, .45); } 50% { box-shadow: 0 0 0 5px rgba(232, 98, 44, 0); } }
}

/* T8 before/after slider */
.ba { cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ba .before { width: var(--pos, 50%) !important; }
.ba .div { left: var(--pos, 50%) !important; outline: none; }
.ba .div i { cursor: grab; transition: transform .2s ease; }
.ba.dragging .div i, .ba .div:focus-visible i { transform: scale(1.15); cursor: grabbing; }
.ba .div:focus-visible i { box-shadow: 0 0 0 3px rgba(232, 98, 44, .6); }

/* carousels: keyboard focus */
.ar:focus-visible, .ctrls span:focus-visible { outline: 2px solid #e8622c; outline-offset: 3px; }

/* Horizontal scrollers clip on both axes (overflow-x:auto), which cut the hover lift + shadow
   (lift 5px, shadow 0 16px 32px -> needs ~24 above, ~48 below, ~32 at the sides).
   Pad the scroll area so shadows have room, and pull it back with negative margins so cards stay put. */
@media (min-width: 821px) {
  /* T8 product carousels: track 1280 at x=80 -> 1344 at x=48 */
  .ctrack { width: 1344px; padding: 24px 32px 56px; margin: -24px -32px -56px; scroll-padding-left: 32px; }
  /* T7 longevity carousel (dark band, section padding-left 56) */
  .lon .track { padding: 24px 56px 56px 32px; margin: -24px 0 -56px -32px; scroll-padding-left: 32px; }
}
@media (max-width: 820px) {
  /* right edge stays at the page edge (no page overflow); room on the left, top and bottom */
  .ctrack { width: 390px; padding: 24px 20px 52px; margin: -24px 0 -52px -20px; scroll-padding-left: 20px; }
  .lon .track { padding: 24px 16px 52px; margin: -24px 0 -52px -16px; scroll-padding-left: 16px; }
  .cats, .docs, .row4 { padding-top: 24px; padding-bottom: 52px; padding-left: 20px; margin-top: -24px; margin-bottom: -52px; margin-left: -20px; scroll-padding-left: 20px; }
  .wl .cards3 { padding-top: 24px !important; padding-bottom: 52px !important; margin-top: -24px; margin-bottom: -52px; }
  .wl { padding-bottom: 48px !important; }
}

/* whole product cards are clickable: the CTA link stretches over the card */
.pcard, .pc, .gcard, .goal, .kcard, .addon { position: relative; }
:where(.card-link) { color: inherit; text-decoration: none; }
.card-link { position: absolute; inset: 0; z-index: 4; border-radius: inherit; }
.card-link:focus-visible { outline: 2px solid #e8622c; outline-offset: 3px; }
.pcard:has(.card-link), .pc:has(.card-link), .gcard:has(.card-link), .goal:has(.card-link), .cat:has(.card-link), .kcard:has(.card-link), .addon:has(.card-link) { cursor: pointer; }
footer a, .legal a { color: inherit; text-decoration: none; transition: color .2s; }
footer a:hover, .legal a:hover { color: #e8622c; }
a.pill { text-decoration: none; }

/* card buttons are real links, layered above the full-card click area */
.cta-link { z-index: 5; cursor: pointer; }
.cta-link:not(.go) { position: relative; }
/* tile text sits in its own stacking context: lift it above the click area, let clicks pass except on the button */
.cat .tx { z-index: 5; pointer-events: none; }
.cat .tx .cta-link { pointer-events: auto; }