/*
  Decorative S-shape video mark for the hero section.
  Hidden on mobile; desktop only. Uses CSS mask-image so the shape
  mask animates (via mask-size) independently of the video content.

  Convention: ALL breakpoint overrides live in the single @media block
  at the bottom of this file.
*/

.c-home-hero__shape {
  display: none;
}

/* ============================================================
   BREAKPOINT: desktop (>= 900px)
   ============================================================ */
@media (width >= 900px) {
  .c-home-hero__shape {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    z-index: 1;
    width: 100svw;
    height: 100svh;
    object-fit: cover;
    pointer-events: none;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 347 419'%3E%3Cpath d='M260 79.4998V34.9998C258 5.49982 179 0.999941 168 0.999756C106.482 0.998721 70.997 30.2734 66 68.4998C56 145 120.269 184.5 107 229.5C79.7211 322.011 0.677278 267.013 1.00001 271C9.5 376 106 411 132.5 411C137 411 213.5 419 254.5 359.5C346.464 226.04 110 142.5 179 72.5C202.657 48.5 243.5 68.5 252.5 79.4998C253.007 80.1189 258 84.4998 260 79.4998Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 37.3svh 45svh;
    animation:
      c-home-hero-shape-reveal var(--entrance-shape-reveal-dur) var(--entrance-easing) var(--entrance-stage-2) both,
      c-home-hero-shape-resize var(--entrance-shape-resize-dur) var(--entrance-easing) var(--entrance-stage-2-resize) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-home-hero__shape {
    animation: none;
  }
}

@keyframes c-home-hero-shape-reveal {
  from {
    mask-size: 900svh 900svh;
  }

  to {
    mask-size: 37.3svh 45svh;
  }
}

@keyframes c-home-hero-shape-resize {
  from {
    width: 100svw;
    height: 100svh;
  }

  to {
    width: 37.3svh;
    height: 45svh;
  }
}