/* styles/sections/video-hero.css
 * The full-bleed demo video under a landing hero (/bens-bites/): the still with a play button
 * over it; js/main.js loads the YouTube embed on click, shows a spinner while it loads
 * (.is-loading) and crossfades to the player (.is-video-active), placed over the app window
 * in the still. Moved from css/components.css and css/sections.css onto tokens. */
@layer sections {
  .hero-image-wrapper {
    position: relative;
    left: 50%;
    width: 100vw;
    margin: var(--space-48) 0 0 -50vw;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: 16 / 9;
  }

  .hero-image-wrapper img {
    width: 100%;
    background: var(--paper);
    object-fit: cover;
    aspect-ratio: 16 / 9;
  }

  .hero-static-image,
  .hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 320ms ease-in-out, visibility 320ms linear, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .hero-static-image {
    object-fit: cover;
  }

  .hero-video {
    z-index: 5;
    border: 0;
    background: var(--white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .hero-image-wrapper:hover :is(.hero-static-image, .hero-video) {
    transform: scale(1.02);
  }

  .hero-image-wrapper.is-video-active .hero-video {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* The player sits over the app window in the still (inset 14% left and right, 7.5% top). */
  .hero-image-wrapper.is-video-active iframe.hero-video {
    top: 7.5%;
    left: 14%;
    width: 72%;
    height: 85%;
  }

  .hero-image-wrapper.is-video-active .hero-static-image {
    pointer-events: none;
  }

  .hero-image-wrapper.is-video-active .play-button-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .hero-image-wrapper.is-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 15;
    background: var(--ink-15);
    pointer-events: none;
  }

  .hero-image-wrapper.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 16;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--white-50);
    border-top-color: var(--white-90);
    border-radius: 50%;
    pointer-events: none;
    animation: hero-spinner 0.8s linear infinite;
  }

  @keyframes hero-spinner {
    to {
      transform: rotate(360deg);
    }
  }

  /* The whole still is the play target. Its site focus ring falls outside the clipped still,
     so focus also draws a 104px ring round the icon. */
  .hero-image-wrapper > .play-button-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transform-origin: center;
    transition: transform 150ms ease-in-out, filter 150ms ease-in-out, opacity 320ms ease-in-out;
  }

  .play-button-overlay .play-icon {
    width: 72px;
    height: 72px;
    transform-origin: center;
    transform-box: fill-box;
    transition: transform 100ms ease-in-out;
  }

  .hero-image-wrapper > .play-button-overlay:focus-visible::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 12;
    width: 104px;
    height: 104px;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus-ring);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .hero-image-wrapper > .play-button-overlay:is(:hover, :focus-visible) {
    filter: drop-shadow(var(--elevation-floating));
    transform: scale(1.02);
  }

  .play-button-overlay:is(:hover, :focus-visible) .play-icon {
    transform: scale(1.12);
  }

  .play-button-overlay:is(:hover, :focus-visible) .play-icon circle {
    fill: var(--white);
  }
}