/* Home page hero: a looping video over its own first frame, bigger type, a pause button.
   Loaded by index.html on top of styles.css, which already styles .hero-card.

   The poster image is the loop's first frame, so the video fades in without a scene
   change. The video is only started by site.js, and not at all when the visitor prefers
   reduced motion or is on a slow or data-saving connection. In those cases they see the
   still poster, which carries the same message. */

.hero-card .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media-img, .hero-media-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero-media-video { opacity: 0; transition: opacity .8s ease; }
.hero-media-video.is-ready { opacity: 1; }

/* Bigger, friendlier headline. */
.hero-card h1 { font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.06; }
.hero-card-content { width: clamp(28rem, 58%, 46rem); }
.hero-card .hero-cta .btn { padding: .9rem 1.8rem; font-size: 1rem; }

/* Desktop: the card runs from under the header to the bottom of the window. */
@media (min-width: 1080px) {
  .hero-card { min-height: clamp(30rem, calc(100svh - 7.25rem), 64rem); }
  .hero-card .lede { margin-top: 1rem; }
  .hero-card .hero-cta, .hero-card .hero-meta { margin-top: 1.4rem; }
}

/* Second line of the home headline: the vet-focused half, smaller so the first line leads. */
.hero-card h1 .h1-sub { display: block; margin-top: .55rem; font-size: .5em; line-height: 1.2; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.92); }

/* Pause control: the video loops for longer than five seconds, so it must be stoppable. */
.hero-pause { position: absolute; top: 5.75rem; right: 1rem; z-index: 2; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 9999px; background: rgba(29, 32, 54, .55); color: #fff; cursor: pointer; backdrop-filter: blur(4px); transition: background-color .2s ease, border-color .2s ease; }
.hero-pause:hover { background: rgba(29, 32, 54, .85); border-color: #fff; }
.hero-pause[hidden] { display: none; }
.hero-pause .material-symbols-outlined { font-size: 24px; }

@media (max-width: 1079px) {
  .hero-pause { top: 1rem; }
  /* Stacked layout: the media block takes the place of the old photo. */
  .hero-card .hero-media { position: relative; inset: auto; z-index: 0; flex: 1 1 18rem; min-height: 18rem; }
  .hero-media-img, .hero-media-video { object-position: 62% 40%; }
  .hero-card-content { width: auto; }
}

/* One-time entrance: the media settles, then the copy rises in order. */
@media (prefers-reduced-motion: no-preference) {
  .hero-card .hero-media { animation: hero-settle 1.6s var(--ease-out) both; }
  .hero-card-content > * { animation: hero-rise .6s var(--ease-out) both; }
  .hero-card-content > :nth-child(1) { animation-delay: .1s; }
  .hero-card-content > :nth-child(2) { animation-delay: .18s; }
  .hero-card-content > :nth-child(3) { animation-delay: .26s; }
  .hero-card-content > :nth-child(4) { animation-delay: .34s; }
  @keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }
}

/* Full-bleed hero: the header floats over the hero on wide screens and turns solid once the page scrolls. */
@media (min-width: 1080px) {
    header.site { position: fixed; left: 0; right: 0; top: 0; background: linear-gradient(180deg, rgba(20,22,38,.55), rgba(20,22,38,0)); backdrop-filter: none; box-shadow: none; transition: background-color .3s ease, box-shadow .3s ease; }
  header.site:not(.is-scrolled) nav.primary { background: rgba(255,255,255,.14); backdrop-filter: blur(8px); }
  header.site:not(.is-scrolled) nav.primary a { color: rgba(255,255,255,.92); }
  header.site:not(.is-scrolled) nav.primary a[aria-current="page"] { background: rgba(255,255,255,.22); color: #fff; }
  header.site:not(.is-scrolled) nav.primary.has-glide a:not([aria-current="page"]):hover { color: #fff; }
  header.site:not(.is-scrolled) .nav-glide { background: rgba(255,255,255,.2); }
  header.site.is-scrolled { background: rgba(252,250,248,.94); backdrop-filter: blur(10px); box-shadow: 0 6px 24px -10px rgba(46,50,80,.25); }
  .hero-card-wrap { padding: 0; }
  .hero-card-wrap > .container { max-width: none; padding: 0; }
  .hero-card { border-radius: 0; box-shadow: none; min-height: 100svh; align-items: center; }
  .hero-card-content { width: min(46rem, 58%); padding: 7rem 0 3rem max(1.5rem, calc((100vw - 1200px) / 2)); }
}
/* Over the full-bleed hero the real paw and wordmark are tinted white, so the hover wiggle and glow still work. */
@media (min-width: 1080px) {
  header.site:not(.is-scrolled) .brand-paw, header.site:not(.is-scrolled) .brand-word { filter: brightness(0) invert(1); }
  header.site:not(.is-scrolled) .brand:focus-visible .brand-paw, header.site:not(.is-scrolled) .brand:focus-visible .brand-word { filter: brightness(0) invert(1) drop-shadow(0 3px 8px rgba(255,255,255,.55)); }
}
@media (min-width: 1080px) and (hover: hover) {
  header.site:not(.is-scrolled) .brand:hover .brand-paw, header.site:not(.is-scrolled) .brand:hover .brand-word { filter: brightness(0) invert(1) drop-shadow(0 3px 8px rgba(255,255,255,.55)); }
  header.site:not(.is-scrolled) .brand:hover .brand-lockup { background: rgba(255,255,255,.14); box-shadow: 0 0 0 8px rgba(255,255,255,.14); }
}
/* Breathing room between the full-bleed hero and the ownership strip. */
@media (min-width: 1080px) { .owned-strip { margin-top: 2.5rem; padding: 2.25rem 0; } }

/* A readable disclosure over the hero at the compact-header breakpoint. */
@media (min-width: 1080px) and (max-width: 1219px) {
  header.site:not(.is-scrolled) .nav-toggle { background: rgba(29,32,54,.7); border-color: rgba(255,255,255,.75); color: #fff; }
  header.site:not(.is-scrolled) nav.primary.is-open { background: #2E3250; padding: .75rem; border-radius: 1rem; }
}