/* TEMPILO — motion design partagé des héros intérieurs */

.page-hero {
  --site-hero-x: 0px;
  --site-hero-y: 0px;
  --site-hero-scroll: 0px;
  isolation: isolate;
}

.page-hero > .site-hero-motion {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  color: var(--hero-ink, #fff);
}

.page-hero .wrap {
  z-index: 2;
}

.site-hero-motion__grid,
.site-hero-motion__orb,
.site-hero-motion__ring,
.site-hero-motion__beam,
.site-hero-motion__side,
.site-hero-motion__mark {
  position: absolute;
  display: block;
  pointer-events: none;
}

.site-hero-motion__grid {
  inset: -18%;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    radial-gradient(circle at 74% 20%, rgba(255,0,92,.3), transparent 36%);
  background-size: 4.5rem 4.5rem, 4.5rem 4.5rem, 34rem 34rem;
  opacity: .2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  transform: translate3d(calc(var(--site-hero-x) * -.22), calc(var(--site-hero-y) * -.22 + var(--site-hero-scroll)), 0) rotate(-4deg);
}

.site-hero-motion__orb {
  top: -44%;
  right: -10%;
  width: clamp(14rem, 31vw, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(255,0,92,.42), rgba(255,0,92,.08) 38%, transparent 70%);
  filter: blur(2px);
  opacity: .75;
  transform: translate3d(calc(var(--site-hero-x) * -.5), calc(var(--site-hero-y) * -.5 + var(--site-hero-scroll)), 0);
}

.site-hero-motion__ring {
  top: -30%;
  right: -17%;
  width: min(52vw, 42rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  opacity: .58;
  transform: translate3d(calc(var(--site-hero-x) * -.34), calc(var(--site-hero-y) * -.34 + var(--site-hero-scroll)), 0) rotate(-12deg);
}

.site-hero-motion__ring::before,
.site-hero-motion__ring::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255,0,92,.46);
  border-radius: inherit;
}

.site-hero-motion__ring::after {
  inset: 28%;
  border-color: rgba(255,255,255,.24);
}

.site-hero-motion__beam {
  top: 73%;
  left: -18%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 18%, rgba(255,0,92,.86) 58%, transparent);
  transform: translate3d(calc(var(--site-hero-x) * .3), calc(var(--site-hero-y) * .3), 0) rotate(-18deg);
  transform-origin: center;
}

.site-hero-motion__side {
  top: -16%;
  bottom: -16%;
  width: 38%;
  opacity: .28;
  filter: blur(.2px);
  background:
    linear-gradient(90deg, transparent 4%, rgba(255,255,255,.04) 52%, rgba(255,0,92,.25) 100%),
    repeating-linear-gradient(112deg, transparent 0 1.2rem, rgba(255,255,255,.1) 1.25rem 1.32rem, transparent 1.38rem 2.4rem);
  will-change: transform, opacity;
}

.site-hero-motion__side--left {
  left: -21%;
  transform-origin: right center;
  clip-path: polygon(0 0, 100% 12%, 82% 88%, 0 100%);
}

.site-hero-motion__side--right {
  right: -21%;
  background:
    linear-gradient(270deg, transparent 4%, rgba(255,255,255,.04) 52%, rgba(255,0,92,.25) 100%),
    repeating-linear-gradient(68deg, transparent 0 1.2rem, rgba(255,255,255,.1) 1.25rem 1.32rem, transparent 1.38rem 2.4rem);
  transform-origin: left center;
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 18% 88%);
}

.site-hero-motion__mark {
  right: clamp(1.3rem, 4vw, 4rem);
  bottom: clamp(1.4rem, 4vw, 3.2rem);
  width: .58rem;
  height: .58rem;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: var(--accent, #ff005c);
  box-shadow: 0 0 0 .28rem rgba(255,0,92,.12), 0 0 .9rem rgba(255,0,92,.55);
  transform: translate3d(calc(var(--site-hero-x) * .34), calc(var(--site-hero-y) * .34), 0);
}

@keyframes siteHeroOrb {
  0%, 100% { opacity: .58; transform: translate3d(calc(var(--site-hero-x) * -.5), calc(var(--site-hero-y) * -.5 + var(--site-hero-scroll)), 0) scale(.96); }
  50% { opacity: .86; transform: translate3d(calc(var(--site-hero-x) * -.5 + 10px), calc(var(--site-hero-y) * -.5 + var(--site-hero-scroll) - 8px), 0) scale(1.04); }
}

@keyframes siteHeroRing {
  0%, 100% { transform: translate3d(calc(var(--site-hero-x) * -.34), calc(var(--site-hero-y) * -.34 + var(--site-hero-scroll)), 0) rotate(-12deg); }
  50% { transform: translate3d(calc(var(--site-hero-x) * -.34 + 8px), calc(var(--site-hero-y) * -.34 + var(--site-hero-scroll) - 6px), 0) rotate(4deg); }
}

@keyframes siteHeroBeam {
  0%, 100% { opacity: .18; transform: translate3d(calc(var(--site-hero-x) * .3 - 10%), calc(var(--site-hero-y) * .3), 0) rotate(-18deg); }
  50% { opacity: .82; transform: translate3d(calc(var(--site-hero-x) * .3 + 10%), calc(var(--site-hero-y) * .3), 0) rotate(-18deg); }
}

@keyframes siteHeroSideZoomLeft {
  0%, 100% {
    opacity: .16;
    transform: perspective(900px) translate3d(calc(var(--site-hero-x) * .35 + 5%), calc(var(--site-hero-y) * .16 + var(--site-hero-scroll)), 0) scaleX(.84) scaleY(.94) rotateY(9deg);
  }
  46% {
    opacity: .48;
    transform: perspective(900px) translate3d(calc(var(--site-hero-x) * .35 - 2%), calc(var(--site-hero-y) * .16 + var(--site-hero-scroll) - 1%), 0) scaleX(1.16) scaleY(1.04) rotateY(-2deg);
  }
}

@keyframes siteHeroSideZoomRight {
  0%, 100% {
    opacity: .14;
    transform: perspective(900px) translate3d(calc(var(--site-hero-x) * -.35 - 5%), calc(var(--site-hero-y) * .16 + var(--site-hero-scroll)), 0) scaleX(.84) scaleY(.94) rotateY(-9deg);
  }
  54% {
    opacity: .46;
    transform: perspective(900px) translate3d(calc(var(--site-hero-x) * -.35 + 2%), calc(var(--site-hero-y) * .16 + var(--site-hero-scroll) - 1%), 0) scaleX(1.16) scaleY(1.04) rotateY(2deg);
  }
}

@keyframes siteHeroMark {
  0%, 100% { opacity: .42; transform: translate3d(calc(var(--site-hero-x) * .34), calc(var(--site-hero-y) * .34), 0) scale(.8); }
  50% { opacity: 1; transform: translate3d(calc(var(--site-hero-x) * .34), calc(var(--site-hero-y) * .34), 0) scale(1.18); }
}

@keyframes siteHeroRise {
  from { opacity: 0; transform: translateY(1rem); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .site-hero-motion-ready .site-hero-motion__orb { animation: siteHeroOrb 8s ease-in-out infinite; }
  .site-hero-motion-ready .site-hero-motion__ring { animation: siteHeroRing 12s ease-in-out infinite; }
  .site-hero-motion-ready .site-hero-motion__beam { animation: siteHeroBeam 6s ease-in-out infinite; }
  .site-hero-motion-ready .site-hero-motion__side--left { animation: siteHeroSideZoomLeft 5.2s cubic-bezier(.45,.05,.55,.95) infinite; }
  .site-hero-motion-ready .site-hero-motion__side--right { animation: siteHeroSideZoomRight 5.8s cubic-bezier(.45,.05,.55,.95) -.9s infinite; }
  .site-hero-motion-ready .site-hero-motion__mark { animation: siteHeroMark 2.8s ease-in-out infinite; }

  .page-hero.site-hero-motion-ready .crumbs {
    animation: siteHeroRise .55s cubic-bezier(.2,.7,.2,1) both;
  }

  .page-hero.site-hero-motion-ready .page-hero__title {
    animation: siteHeroRise .72s .08s cubic-bezier(.2,.7,.2,1) both;
  }

  .page-hero.site-hero-motion-ready .page-hero__lead,
  .page-hero.site-hero-motion-ready .page-hero__meta,
  .page-hero.site-hero-motion-ready .g-blog-meta,
  .page-hero.site-hero-motion-ready .btn-row {
    animation: siteHeroRise .62s .18s cubic-bezier(.2,.7,.2,1) both;
  }
}

@media (max-width: 760px) {
  .site-hero-motion__grid { opacity: .13; }
  .site-hero-motion__orb { right: -30%; width: 18rem; }
  .site-hero-motion__ring { right: -38%; width: 25rem; opacity: .42; }
  .site-hero-motion__side { width: 52%; opacity: .2; }
  .site-hero-motion__side--left { left: -34%; }
  .site-hero-motion__side--right { right: -34%; }
  .site-hero-motion__beam { left: -42%; width: 120%; }
  .site-hero-motion__mark { right: 1.25rem; bottom: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-hero-motion__orb,
  .site-hero-motion__ring,
  .site-hero-motion__beam,
  .site-hero-motion__side,
  .site-hero-motion__mark,
  .page-hero.site-hero-motion-ready .crumbs,
  .page-hero.site-hero-motion-ready .page-hero__title,
  .page-hero.site-hero-motion-ready .page-hero__lead,
  .page-hero.site-hero-motion-ready .page-hero__meta,
  .page-hero.site-hero-motion-ready .g-blog-meta,
  .page-hero.site-hero-motion-ready .btn-row {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}

@media print {
  .site-hero-motion { display: none !important; }
}

/* ---------- Caméra cinéma : zoom, travelling, flare et grain ---------- */
.page-hero.site-hero-motion-ready::before {
  transform-origin: 52% 48%;
  transform: translate3d(
    calc(var(--site-hero-x) * -.08),
    calc(var(--site-hero-y) * -.05 + var(--site-hero-scroll) * -.12),
    0
  ) scale(calc(1.075 + var(--site-hero-camera-zoom, 0) + var(--site-hero-film-zoom, 0)));
  will-change: transform, filter;
}

.site-hero-motion__film,
.site-hero-motion__flare,
.site-hero-motion__vignette,
.site-hero-motion__grain,
.site-hero-motion__letterbox {
  position: absolute;
  display: block;
  pointer-events: none;
}

.site-hero-motion__film {
  inset: -12%;
  z-index: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.08) 42.2% 42.35%, transparent 42.55% 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(7,12,15,.2), transparent 42%, rgba(255,0,92,.1) 72%, rgba(7,12,15,.28));
  opacity: .56;
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--site-hero-x) * -.08), calc(var(--site-hero-y) * -.06), 0) scale(1.04);
  will-change: transform, opacity;
}

.site-hero-motion__flare {
  top: -30%;
  bottom: -30%;
  left: -28%;
  width: 17%;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), rgba(255,0,92,.24), transparent);
  filter: blur(7px);
  opacity: 0;
  transform: skewX(-18deg) translateX(-140%);
  will-change: transform, opacity;
}

.site-hero-motion__vignette {
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(2,7,10,.2) 72%, rgba(2,7,10,.62) 100%);
  opacity: .78;
  mix-blend-mode: multiply;
}

.site-hero-motion__grain {
  inset: -30%;
  z-index: 3;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 80%, rgba(255,0,92,.13) 0 1px, transparent 1.5px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
  opacity: .1;
  mix-blend-mode: soft-light;
  transform: translate3d(calc(var(--site-hero-x) * .12), calc(var(--site-hero-y) * .12), 0);
}

.site-hero-motion__letterbox {
  inset: 0;
  z-index: 4;
  border-block: clamp(1.1rem, 3.2vw, 3.4rem) solid rgba(0,0,0,.16);
  opacity: .64;
}

@keyframes siteHeroFilm {
  0%, 100% { opacity: .38; transform: translate3d(calc(var(--site-hero-x) * -.08), calc(var(--site-hero-y) * -.06), 0) scale(1.02) rotate(-.2deg); }
  50% { opacity: .72; transform: translate3d(calc(var(--site-hero-x) * -.12 + 1.5%), calc(var(--site-hero-y) * -.08 - 1%), 0) scale(1.08) rotate(.2deg); }
}

@keyframes siteHeroFlare {
  0%, 54% { opacity: 0; transform: skewX(-18deg) translateX(-140%); }
  64% { opacity: .72; }
  78%, 100% { opacity: 0; transform: skewX(-18deg) translateX(880%); }
}

@keyframes siteHeroGrain {
  0%, 100% { opacity: .06; transform: translate3d(calc(var(--site-hero-x) * .12), calc(var(--site-hero-y) * .12), 0); }
  50% { opacity: .14; transform: translate3d(calc(var(--site-hero-x) * .12 - 1%), calc(var(--site-hero-y) * .12 + 1%), 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero.site-hero-motion-ready::before { animation: siteHeroCinematicZoom 13s ease-in-out infinite; }
  .site-hero-motion-ready .site-hero-motion__film { animation: siteHeroFilm 11s ease-in-out infinite; }
  .site-hero-motion-ready .site-hero-motion__flare { animation: siteHeroFlare 8.5s 1.4s ease-in-out infinite; }
  .site-hero-motion-ready .site-hero-motion__grain { animation: siteHeroGrain .42s steps(2, end) infinite; }
  .site-hero-motion-ready .site-hero-motion__letterbox { animation: siteHeroLetterbox 7s ease-in-out infinite; }
}

@keyframes siteHeroLetterbox {
  0%, 100% { opacity: .48; }
  50% { opacity: .76; }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero.site-hero-motion-ready::before,
  .site-hero-motion__film,
  .site-hero-motion__flare,
  .site-hero-motion__grain,
  .site-hero-motion__letterbox {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
  .site-hero-motion__film { opacity: .28; }
  .site-hero-motion__flare { opacity: 0; }
  .site-hero-motion__grain { opacity: .06; }
}

/* Boucle caméra explicite : le zoom et le travelling sont interpolés sur
   transform lui-même, puis reviennent à leur point de départ sans arrêt. */
@keyframes siteHeroCinematicZoom {
  0%, 100% {
    transform: translate3d(
      calc(var(--site-hero-x) * -.08),
      calc(var(--site-hero-y) * -.05 + var(--site-hero-scroll) * -.12),
      0
    ) scale(calc(1.075 + var(--site-hero-camera-zoom, 0)));
    filter: saturate(1) contrast(1.02);
  }
  50% {
    transform: translate3d(
      calc(var(--site-hero-x) * -.08 + 1.8%),
      calc(var(--site-hero-y) * -.05 + var(--site-hero-scroll) * -.12 - 1%),
      0
    ) scale(calc(1.15 + var(--site-hero-camera-zoom, 0)));
    filter: saturate(1.12) contrast(1.08);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero.site-hero-motion-ready::before {
    animation: siteHeroCinematicZoom 11s cubic-bezier(.37,0,.63,1) infinite;
    animation-iteration-count: infinite;
  }
}