/* Affiche — cadre photo qui s’ouvre, typo d’abord. ?gateway=affiche */

@media (prefers-reduced-motion: no-preference) {
  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .hero-bg {
    background: #071422;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .hero-bg-photo--gateway {
    clip-path: inset(22% 30% 34% 30% round 18px);
    filter: saturate(1.05) contrast(1.05);
    animation: afficheWindow 2.1s cubic-bezier(0.77, 0, 0.18, 1) 0.55s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .hero-bg-blend {
    opacity: 0;
    animation: afficheFade 1.2s ease-out 1.7s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .gateway-fx-mat {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 7;
    width: min(40vw, 420px);
    height: min(44vh, 360px);
    transform: translate(-50%, -50%);
    border: 1px solid rgba(243, 230, 196, 0.85);
    box-shadow:
      0 0 0 10px rgba(7, 20, 34, 0.55),
      0 24px 60px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    animation: afficheMat 2.1s cubic-bezier(0.77, 0, 0.18, 1) 0.55s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .gateway-brand-mark {
    opacity: 0;
    animation: afficheStamp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.85s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .gateway-brand-text {
    opacity: 0;
    animation: afficheFade 0.7s ease-out 2.05s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .audience-gateway-eyebrow {
    opacity: 0;
    animation: afficheFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .audience-gateway-intro h1 {
    opacity: 0;
    animation: afficheTitle 1s cubic-bezier(0.16, 1, 0.3, 1) 0.28s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .audience-gateway-intro h1::after {
    transform: scaleX(0);
    transform-origin: left center;
    animation: afficheRule 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .audience-gateway-intro .hero-lead {
    opacity: 0;
    animation: afficheFade 0.8s ease-out 0.95s forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .audience-card {
    opacity: 0;
    animation: afficheCard 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .audience-card:nth-child(1) {
    animation-delay: 2.15s;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .audience-card:nth-child(2) {
    animation-delay: 2.32s;
  }

  body.gateway-fx--affiche.gateway-entrance:not([data-audience]) .audience-card:nth-child(3) {
    animation-delay: 2.49s;
  }

  @keyframes afficheWindow {
    to {
      clip-path: inset(0 round 0);
    }
  }

  @keyframes afficheMat {
    to {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.85);
    }
  }

  @keyframes afficheStamp {
    0% {
      opacity: 0;
      transform: scale(1.35) rotate(-6deg);
    }
    70% {
      opacity: 1;
      transform: scale(0.96) rotate(1deg);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
  }

  @keyframes afficheFromLeft {
    from {
      opacity: 0;
      transform: translateX(-28px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes afficheTitle {
    from {
      opacity: 0;
      transform: translateX(-36px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes afficheRule {
    to {
      transform: scaleX(1);
    }
  }

  @keyframes afficheFade {
    to {
      opacity: 1;
    }
  }

  @keyframes afficheCard {
    from {
      opacity: 0;
      transform: translateY(36px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}