/* =====================================================
   SYNA — COUCHE "WOW"
   Effets immersifs ajoutés en surcouche du design system.
   Retirer ce fichier + js/wow.js (et le petit script inline
   d'index.html) suffit à revenir exactement à l'état d'origine.
   ===================================================== */

:root {
  --wow-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wow-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --wow-night: #1d1511;
}

/* Le grain d'origine (SVG feTurbulence) est recalculé à chaque re-rastérisation de la page.
   js/wow.js le rastérise une seule fois dans ce canvas fixe, à l'identique (même image, même
   géométrie), puis masque le pseudo-élément d'origine. */
.wow-grain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.045;
  pointer-events: none;
}

.wow-grain-on body::before {
  display: none;
}

.wow-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   INTRO "SYNAPSE" — première visite de la session
   ===================================================== */

.wow-intro-pending body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  background:
    radial-gradient(circle at 50% 50%, rgba(219, 98, 18, 0.14), transparent 38%),
    radial-gradient(circle at 50% 50%, #33251d, var(--dark) 70%);
}

.wow-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
}

.wow-intro.is-open {
  pointer-events: none;
}

/* Le fond CSS couvre la page jusqu'à l'ouverture ; ensuite le canvas dessine
   lui-même le fond et l'iris (bien moins coûteux qu'un masque CSS animé). */
.wow-intro__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(219, 98, 18, 0.14), transparent 38%),
    radial-gradient(circle at 50% 50%, #33251d, var(--dark) 70%);
}

.wow-intro.is-open .wow-intro__backdrop {
  background: none;
  opacity: 0;
  transition: opacity 0.3s ease 0.7s;
}

.wow-intro__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wow-intro__core {
  position: relative;
  width: clamp(84px, 10vw, 128px);
  aspect-ratio: 1;
  transform: scale(0.94);
  transition:
    transform 1s var(--wow-ease),
    opacity 0.6s ease;
}

.wow-intro.is-on .wow-intro__core {
  transform: scale(1);
}

.wow-intro.is-flash .wow-intro__core {
  transform: scale(1.06);
}

.wow-intro.is-open .wow-intro__core {
  opacity: 0;
  transform: scale(2.2);
  transition-duration: 0.8s, 0.3s;
}

/* Halo : dessiné à sa taille maximale et animé par une échelle ≤ 1 (une seule rastérisation). */
.wow-intro__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 140, 0.5), rgba(245, 156, 73, 0.16) 36%, rgba(245, 156, 73, 0) 66%);
  opacity: 0.001;
  transform: scale(0.18);
  transition: opacity 0.4s ease, transform 0.8s var(--wow-ease);
  will-change: transform, opacity;
  pointer-events: none;
}

.wow-intro.is-flash .wow-intro__halo {
  opacity: 1;
  transform: scale(0.5);
}

.wow-intro.is-open .wow-intro__halo {
  opacity: 0;
  transform: scale(1);
}

.wow-intro__mark {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../assets/images/syna-logo-mark-cream.png") center / contain no-repeat;
  mask: url("../assets/images/syna-logo-mark-cream.png") center / contain no-repeat;
  background: linear-gradient(
      100deg,
      rgba(255, 250, 243, 0.12) 0%,
      rgba(255, 250, 243, 0.12) 40%,
      #fff3e2 47%,
      #f59c49 50%,
      #fff3e2 53%,
      rgba(255, 250, 243, 0.12) 60%,
      rgba(255, 250, 243, 0.12) 100%
    )
    120% 0 / 320% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wow-intro.is-on .wow-intro__mark {
  opacity: 1;
  animation: wow-intro-sweep 0.62s cubic-bezier(0.45, 0, 0.2, 1) 0.04s both;
}

.wow-intro__mark--lit {
  background: linear-gradient(135deg, #fffaf3, #ffe2c2);
  opacity: 0.001 !important;
  animation: none !important;
  transition: opacity 0.25s ease;
}

.wow-intro.is-flash .wow-intro__mark--lit {
  opacity: 1 !important;
}

@keyframes wow-intro-sweep {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}

/* Anneaux de choc : l'anneau lumineux est « cuit » dans un dégradé radial à la taille finale,
   puis animé de 0.045 à 1 (au lieu d'un petit cercle à ombre floue agrandi ×9). */
.wow-intro__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 540px;
  height: 540px;
  margin: -270px 0 0 -270px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(245, 156, 73, 0) 60%,
    rgba(245, 156, 73, 0.22) 66%,
    rgba(255, 214, 170, 0.95) 69.4%,
    rgba(245, 156, 73, 0.3) 71%,
    rgba(245, 156, 73, 0) 76%
  );
  /* Opacité quasi nulle plutôt que 0 : l'anneau est rastérisé dès l'écran sombre. */
  opacity: 0.001;
  pointer-events: none;
}

.wow-intro.is-flash .wow-intro__ring {
  animation: wow-intro-ring 0.9s var(--wow-ease) forwards;
}

.wow-intro.is-flash .wow-intro__ring--late {
  animation-delay: 0.1s;
  animation-duration: 1.1s;
}

@keyframes wow-intro-ring {
  0% { opacity: 0.95; transform: scale(0.045); }
  100% { opacity: 0; transform: scale(1); }
}

.wow-intro-play .site-header--home {
  animation: syna-header-in 0.7s var(--wow-ease) 0.95s both;
}

.wow-intro-reveal .hero-home__backdrop > * {
  animation: wow-hero-settle 1.5s var(--wow-ease) both;
}

/* Image de repli : échelle de rastérisation figée (pas de re-rastérisation pendant les zooms),
   puis retirée du rendu dès que la vidéo joue, puisqu'elle est alors entièrement recouverte. */
.hero-home__fallback {
  will-change: transform;
}

.hero-home__backdrop:has(.hero-home__video.is-ready) .hero-home__fallback {
  visibility: hidden;
}

@keyframes wow-hero-settle {
  from { transform: scale(1.16); }
  to { transform: scale(1); }
}

/* =====================================================
   HERO — eau vivante (WebGL) + typographie
   ===================================================== */

.wow-water {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.wow-water.is-live {
  opacity: 1;
}

.wow-js:not(.wow-hero-ready) .hero-home__content {
  opacity: 0;
}

/* Préchauffage : les calques du texte du hero existent dès le départ et sont rastérisés
   pendant la phase sombre de l'intro (opacité quasi nulle, invisible). Leur apparition ne
   sollicite alors plus que le compositeur. */
.wow-char,
.wow-fade-word,
.hero-home__actions > .btn {
  will-change: transform, opacity;
}

/* Uniquement opacité + transform : animé par le compositeur, sans re-rastérisation.
   (Un filtre de flou sur des glyphes géants ombrés saturait le GPU à l'ouverture.) */
.wow-char {
  position: relative;
  display: inline-block;
  opacity: 0.002;
  transform: translate3d(0, 0.32em, 0) rotate(7deg) scale(0.96);
  transform-origin: 50% 100%;
  transition:
    opacity 0.7s var(--wow-ease),
    transform 0.9s var(--wow-ease);
  transition-delay: calc(var(--ci, 0) * 60ms);
}

.wow-hero-in .wow-char {
  opacity: 1;
  transform: none;
}

/* Le « signal » qui traverse le titre : un calque lumineux pré-rendu dont seule l'opacité varie. */
.wow-char::after {
  content: attr(data-char);
  position: absolute;
  left: 0;
  top: 0;
  color: inherit;
  text-shadow:
    0 0 26px rgba(255, 190, 130, 0.85),
    0 0 3px rgba(255, 240, 222, 0.95);
  opacity: 0;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--ci, 0) * 130ms);
  pointer-events: none;
}

.hero-home__title.is-signal .wow-char::after {
  opacity: 1;
}

.wow-fade-word {
  display: inline-block;
  opacity: 0.002;
  transform: translate3d(0, 0.55em, 0);
  transition:
    opacity 0.6s var(--wow-ease),
    transform 0.75s var(--wow-ease);
  transition-delay: calc(0.28s + var(--wi, 0) * 45ms);
}

.wow-hero-in .wow-fade-word {
  opacity: 1;
  transform: none;
}

.wow-js .hero-home__actions > .btn {
  opacity: 0.002;
}

.wow-hero-in .hero-home__actions > .btn {
  opacity: 1;
  animation: wow-rise 0.8s var(--wow-ease) backwards;
  transition:
    opacity 0.5s ease 0.5s,
    translate 0.7s var(--wow-ease),
    transform var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

.wow-hero-in .hero-home__actions > .btn:nth-child(1) { animation-delay: 0.5s; }
.wow-hero-in .hero-home__actions > .btn:nth-child(2) { animation-delay: 0.58s; }

@keyframes wow-rise {
  from { translate: 0 22px; }
  to { translate: 0 0; }
}

.wow-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vh, 2rem);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  translate: -50% 0;
  color: rgba(255, 250, 243, 0.82);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-shadow: 0 1px 14px rgba(34, 25, 21, 0.45);
  opacity: 0;
  transition: opacity 0.6s ease 0.9s;
  pointer-events: none;
}

.wow-hero-in .wow-scroll-cue {
  opacity: 1;
}

.wow-scroll-cue__inner {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
}

.wow-scroll-cue__line {
  position: relative;
  width: 1px;
  height: 2.6rem;
  overflow: hidden;
  background: rgba(255, 250, 243, 0.28);
}

.wow-scroll-cue__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 45%;
  background: linear-gradient(180deg, transparent, #fffaf3);
  animation: wow-cue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes wow-cue {
  from { transform: translateY(-100%); }
  to { transform: translateY(230%); }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-home__content {
      animation: wow-hero-lift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 85vh;
    }

    .hero-home__backdrop > * {
      animation: wow-hero-zoom linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    .wow-intro-reveal .hero-home__backdrop > * {
      animation:
        wow-hero-settle 1.5s var(--wow-ease) both,
        wow-hero-zoom linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }

    .hero-home__veil::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(34, 25, 21, 0.42);
      opacity: 0;
      animation: wow-hero-veil linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }

    .wow-scroll-cue__inner,
    .wow-daylight-label__inner {
      animation: wow-cue-out linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 22vh;
    }
  }
}

@keyframes wow-hero-lift {
  to {
    translate: 0 -16vh;
    opacity: 0;
  }
}

@keyframes wow-hero-zoom {
  to { scale: 1.1; }
}

@keyframes wow-hero-veil {
  to { opacity: 1; }
}

@keyframes wow-cue-out {
  to { translate: 0 1.5rem; opacity: 0; }
}

/* =====================================================
   HERO — la lumière de Frontignan en temps réel
   ===================================================== */

/* Calques frères de la vidéo (et de l'eau) : leurs modes de fusion agissent sur l'image. */
.wow-daylight {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
}

.wow-daylight--shade {
  background: rgb(var(--dl-shade));
  mix-blend-mode: multiply;
}

/* Soleil sur l'horizon (à l'est le matin, à l'ouest le soir), lune et étoiles : un seul calque
   « screen », dessiné par js/wow.js (lightBackground) et dosé par variables. */
.wow-daylight--light {
  mix-blend-mode: screen;
}

/* Quand l'eau WebGL tourne, son shader applique la même lumière : les calques CSS s'effacent
   (fondu synchronisé avec le shader) et ne coûtent plus rien au compositeur. */
.is-water-graded > .wow-daylight {
  visibility: hidden;
  opacity: 0 !important;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.wow-daylight-label {
  position: absolute;
  left: clamp(1.2rem, 3vw, 2.6rem);
  bottom: clamp(1.1rem, 3vh, 2rem);
  z-index: 3;
  display: inline-flex;
  margin: 0;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 250, 243, 0.8);
  text-shadow: 0 1px 12px rgba(34, 25, 21, 0.5);
  transition: opacity 0.6s ease 1s;
  pointer-events: none;
}

.wow-js:not(.wow-hero-in) .wow-daylight-label {
  opacity: 0;
}

.wow-daylight-label__inner {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.wow-daylight-label__dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: rgb(var(--dl-dot, 255, 214, 150));
  box-shadow: 0 0 10px rgba(var(--dl-dot, 255, 214, 150), 0.9);
}

/* =====================================================
   OMBRES D'OLIVIER — lumière tamisée en mouvement
   ===================================================== */

.wow-dapple-host {
  position: relative;
}

.wow-dapple-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.wow-dapple {
  position: absolute;
  top: -4%;
  right: -3%;
  display: block;
  width: min(78vw, 1080px);
  height: auto;
  aspect-ratio: 11 / 8;
  transform-origin: 88% 0%;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.wow-dapple.is-on {
  opacity: var(--wow-dapple-alpha, 0.15);
  animation: wow-sway 4.2s ease-in-out infinite alternate;
}

.wow-dapple--far {
  top: 8%;
  right: 10%;
  width: min(62vw, 860px);
  transform-origin: 50% 0%;
  scale: -1 1;
  --wow-dapple-alpha: 0.07;
}

.wow-dapple--far.is-on {
  animation-duration: 5.6s;
  animation-direction: alternate-reverse;
}

.wow-dapple-host--left .wow-dapple {
  right: auto;
  left: -4%;
  transform-origin: 50% 0%;
  scale: -1 1;
}

.wow-dapple-host--left .wow-dapple--far {
  left: 12%;
  scale: 1 1;
}

@keyframes wow-sway {
  0% { rotate: -2.4deg; translate: -1.2% 0; }
  45% { rotate: 1deg; translate: 0.8% 0.6%; }
  100% { rotate: 2.6deg; translate: 0 -0.8%; }
}

/* =====================================================
   CARTES — inclinaison 3D + lumière qui suit le curseur
   ===================================================== */

.wow-tilt.is-tilting {
  transform:
    perspective(1100px)
    translate3d(0, -4px, 0)
    rotateX(var(--wow-rx, 0deg))
    rotateY(var(--wow-ry, 0deg));
  transition:
    transform 0.18s ease-out,
    box-shadow var(--transition),
    border-color var(--transition),
    background-color var(--transition);
}

.wow-tilt > .wow-glare,
.wow-tilt > .wow-edge {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--wow-ease);
}

.wow-tilt > .wow-glare {
  background: radial-gradient(
    480px circle at var(--wow-mx, 50%) var(--wow-my, 0%),
    rgba(255, 246, 232, 0.62),
    rgba(255, 246, 232, 0) 58%
  );
  mix-blend-mode: soft-light;
}

.wow-tilt > .wow-edge {
  padding: 1px;
  background: radial-gradient(
    260px circle at var(--wow-mx, 50%) var(--wow-my, 0%),
    rgba(219, 98, 18, 0.95),
    rgba(245, 156, 73, 0.32) 42%,
    rgba(245, 156, 73, 0) 72%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.wow-tilt:hover > .wow-glare,
.wow-tilt:hover > .wow-edge {
  opacity: 1;
}

.wow-glow-only > .wow-glare {
  mix-blend-mode: normal;
  background: radial-gradient(
    620px circle at var(--wow-mx, 50%) var(--wow-my, 0%),
    rgba(245, 156, 73, 0.1),
    rgba(245, 156, 73, 0) 60%
  );
}

.wow-card-link {
  cursor: pointer;
}

.service-card__number {
  transition: box-shadow 0.6s var(--wow-ease), background-color 0.6s var(--wow-ease), color 0.6s var(--wow-ease);
}

.service-card:hover .service-card__number {
  background: rgba(245, 156, 73, 0.2);
  color: var(--accent);
  box-shadow: 0 0 0 0.45rem rgba(245, 156, 73, 0.08), 0 0 26px rgba(245, 156, 73, 0.42);
}

/* =====================================================
   TITRES — révélation mot à mot
   ===================================================== */

.wow-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.16em 0.07em 0.15em;
  margin: -0.16em -0.07em -0.15em;
}

.wow-w__i {
  display: inline-block;
  transform: translate3d(0, 112%, 0) rotate(5deg);
  transform-origin: 0% 100%;
  transition: transform 0.7s var(--wow-ease);
  transition-delay: calc(var(--reveal-delay, 0s) + var(--wi, 0) * 0.03s);
}

.is-visible .wow-w__i {
  transform: none;
}

/* =====================================================
   IMAGES — rideau de révélation + parallaxe au scroll
   ===================================================== */

.reveal-enabled :is(.split-highlight__image, .story-grid__media, .page-hero__media) > :is(img, video),
.reveal-enabled .about-story-media > img {
  clip-path: inset(100% 0 0 0);
  scale: 1.3;
  transition:
    clip-path 0.8s var(--wow-ease-in-out) var(--reveal-delay, 0s),
    scale 1.2s var(--wow-ease) var(--reveal-delay, 0s),
    transform 0.8s var(--wow-ease),
    filter 0.8s var(--wow-ease);
}

.reveal-enabled .is-visible :is(.split-highlight__image, .story-grid__media, .page-hero__media) > :is(img, video),
.reveal-enabled :is(.split-highlight__image, .story-grid__media, .page-hero__media).is-visible > :is(img, video),
.reveal-enabled .about-story-media.is-visible > img {
  clip-path: inset(0 0 0 0);
  scale: 1.08;
}

.reveal-enabled .split-highlight--behind .split-highlight__image.is-visible > img {
  scale: 1;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.split-highlight__image, .story-grid__media, .page-hero__media, .about-story-media) {
      view-timeline: --wow-media block;
    }

    :is(.split-highlight__image, .story-grid__media, .page-hero__media) > :is(img, video),
    .about-story-media > img {
      animation: wow-parallax linear both;
      animation-timeline: --wow-media;
      animation-range: cover 0% cover 100%;
    }

    .split-highlight--behind .split-highlight__image > img {
      animation: none;
    }
  }
}

@keyframes wow-parallax {
  from { translate: 0 -3.4%; }
  to { translate: 0 3.4%; }
}

/* Les animations décoratives en boucle ne tournent que lorsque leur bloc est à l'écran
   (classe .wow-inview posée par js/wow.js) : zéro travail pour ce qui n'est pas vu. */
@media (prefers-reduced-motion: no-preference) {
  .mini-carousel__slide img {
    animation: wow-kenburns 15s ease-in-out infinite alternate;
    animation-play-state: paused;
  }

  .mini-carousel.wow-inview .mini-carousel__slide img,
  .service-spotlight.wow-inview .service-spotlight__pills span::after {
    animation-play-state: running;
  }

  .mini-carousel__slide:nth-child(2n) img {
    animation-duration: 18s;
    animation-direction: alternate-reverse;
  }

  /* Un signal parcourt les situations : halo pré-rendu animé en opacité/échelle (compositeur). */
  .service-spotlight__pills span::after {
    content: "";
    position: absolute;
    left: -0.4rem;
    top: 0.32rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 241, 222, 0.95) 0 18%, rgba(245, 156, 73, 0.55) 34%, rgba(245, 156, 73, 0) 70%);
    opacity: 0;
    transform: scale(0.4);
    animation: wow-pill-signal 5.4s ease-in-out infinite;
    animation-play-state: paused;
    pointer-events: none;
  }

  .service-spotlight__pills span:nth-child(2)::after { animation-delay: 0.45s; }
  .service-spotlight__pills span:nth-child(3)::after { animation-delay: 0.9s; }
  .service-spotlight__pills span:nth-child(4)::after { animation-delay: 1.35s; }
  .service-spotlight__pills span:nth-child(5)::after { animation-delay: 1.8s; }
  .service-spotlight__pills span:nth-child(6)::after { animation-delay: 2.25s; }
}

@keyframes wow-kenburns {
  from { scale: 1; translate: 0 0; }
  to { scale: 1.09; translate: -1.4% -1%; }
}

@keyframes wow-pill-signal {
  0%, 30%, 100% { opacity: 0; transform: scale(0.4); }
  12% { opacity: 1; transform: scale(1); }
}

/* =====================================================
   SCROLLYTELLING — l'olivier et la lumière du Sud
   ===================================================== */

.olive-show {
  position: relative;
  padding: var(--section-gap) 0;
}

.olive-show__sticky {
  position: relative;
}

/* Fond CSS aux couleurs de l'aube : il assure le relais avant que le canvas ne s'allume. */
.olive-show__stage {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(80vh, 760px);
  margin-inline: var(--shell-gutter);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-xl);
  color: var(--surface);
  background:
    radial-gradient(ellipse 42% 30% at 78% 64%, rgba(255, 168, 128, 0.32), transparent 72%),
    linear-gradient(180deg, #211f33 0%, #4c3b5e 36%, #cc857a 63%, #4d405e 63.1%, #15131f 100%);
  box-shadow: var(--shadow-deep);
}

.olive-show__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.olive-show__canvas.is-live {
  opacity: 1;
}

/* Le texte occupe le haut du ciel, bien au-dessus de l'horizon et du cap. */
.olive-show__content {
  position: relative;
  z-index: 2;
  display: grid;
  align-self: start;
  justify-items: start;
  align-content: start;
  gap: clamp(0.8rem, 1.8vh, 1.3rem);
  width: min(100%, 48rem);
  padding: clamp(3.5rem, 15vh, 9rem) clamp(1.6rem, 6vw, 6.5rem) clamp(3rem, 8vh, 5rem);
  text-align: left;
  text-shadow: 0 0.06em 0.9em rgba(34, 22, 32, 0.32);
  pointer-events: none;
}

.olive-show__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #ffd2a6;
}

.olive-show__eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.olive-show__title {
  display: grid;
  margin: 0;
  font-size: clamp(3.2rem, 7.6vw, 8.6rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fffaf3;
}

.olive-show__words {
  display: grid;
}

.olive-show__word {
  grid-area: 1 / 1;
  display: block;
  padding: 0.06em 0.12em 0.14em 0;
}

.olive-show__word:nth-child(3) {
  color: #ffe6c8;
}

.olive-show__captions {
  display: grid;
  min-height: 1.6em;
}

.olive-show__caption {
  grid-area: 1 / 1;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.1rem, 1.1vw + 0.85rem, 1.6rem);
  line-height: 1.35;
  color: rgba(255, 250, 243, 0.9);
}

.olive-show__steps {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 4vh, 2.4rem);
  z-index: 2;
  display: none;
  grid-template-columns: repeat(3, auto);
  gap: 0.6rem clamp(1.2rem, 3vw, 2.6rem);
  translate: -50% 0;
  pointer-events: none;
}

.olive-show__step {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 250, 243, 0.4);
  transition: color 0.4s ease;
}

.olive-show__step b {
  font-weight: 800;
  color: rgba(245, 156, 73, 0.55);
  transition: color 0.4s ease;
}

.olive-show__step.is-active,
.olive-show__step.is-past {
  color: rgba(255, 250, 243, 0.92);
}

.olive-show__step.is-active b,
.olive-show__step.is-past b {
  color: var(--accent-soft);
}

.olive-show__bar {
  grid-column: 1 / -1;
  height: 1px;
  overflow: hidden;
  background: rgba(255, 250, 243, 0.16);
}

.olive-show__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  transform: scaleX(var(--olive-p, 0));
  transform-origin: 0 50%;
}

.olive-show__hint {
  position: absolute;
  top: clamp(1.2rem, 3.5vh, 2rem);
  right: clamp(1.2rem, 3vw, 2.2rem);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 250, 243, 0.7);
  text-shadow: 0 1px 12px rgba(34, 22, 32, 0.4);
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.olive-show__hint::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-soft);
  box-shadow: 0 0 0 0.3rem rgba(245, 156, 73, 0.14), 0 0 14px rgba(245, 156, 73, 0.9);
  animation: wow-hint 1.8s ease-in-out infinite;
}

.olive-show__hint.is-done {
  opacity: 0;
}

@keyframes wow-hint {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* État statique (sans JS ou mouvement réduit) : les trois temps sont lisibles d'un coup */
.olive-show:not(.is-enhanced) .olive-show__words,
.olive-show:not(.is-enhanced) .olive-show__captions {
  gap: 0.3rem;
}

.olive-show:not(.is-enhanced) .olive-show__word,
.olive-show:not(.is-enhanced) .olive-show__caption {
  grid-area: auto;
}

.olive-show:not(.is-enhanced) .olive-show__title {
  font-size: clamp(2.8rem, 7vw, 6rem);
}

/* État enrichi : section épinglée pilotée par le scroll */
.olive-show.is-enhanced {
  height: 300vh;
  padding: 0;
}

.olive-show.is-enhanced .olive-show__sticky {
  position: sticky;
  top: 0;
  display: grid;
  height: 100vh;
  height: 100svh;
  padding: var(--shell-gutter) 0;
}

.olive-show.is-enhanced .olive-show__stage {
  min-height: 0;
  height: 100%;
  transform: scale(calc(0.92 + var(--olive-enter, 1) * 0.08));
  will-change: transform;
}

.olive-show.is-enhanced .olive-show__steps {
  display: grid;
}

.olive-show.is-enhanced .olive-show__hint {
  display: inline-flex;
}

.olive-show.is-enhanced .olive-show__word {
  opacity: 0;
  transform: translate3d(0, 0.26em, 0) scale(0.96);
  transform-origin: 0 100%;
  transition:
    opacity 0.55s var(--wow-ease),
    transform 0.8s var(--wow-ease);
}

.olive-show.is-enhanced .olive-show__word.is-active {
  opacity: 1;
  transform: none;
}

.olive-show.is-enhanced .olive-show__word.is-past {
  opacity: 0;
  transform: translate3d(0, -0.3em, 0) scale(1.04);
}

.olive-show.is-enhanced .olive-show__caption {
  opacity: 0;
  transform: translate3d(0, 0.6em, 0);
  transition: opacity 0.45s ease, transform 0.6s var(--wow-ease);
}

.olive-show.is-enhanced .olive-show__caption.is-active {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

/* Variante fixe (page 404) : l'olivier pousse au chargement puis reste à l'heure dorée. */
.olive-show--still {
  padding: clamp(0.8rem, 2vw, 1.6rem) 0 var(--section-gap);
}

.olive-show--still .olive-show__stage {
  min-height: min(82vh, 780px);
  background:
    radial-gradient(ellipse 40% 30% at 62% 62%, rgba(255, 190, 110, 0.55), transparent 72%),
    linear-gradient(180deg, #382345 0%, #a8503b 40%, #f59c49 63%, #8c5452 63.1%, #1f1524 100%);
}

.olive-show--still .olive-show__content {
  padding-top: clamp(3rem, 10vh, 6rem);
}

.olive-show.olive-show--still .olive-show__title--page {
  display: block;
  max-width: 13ch;
  font-size: clamp(2.4rem, 4.5vw, 4.7rem);
  line-height: 1.02;
}

.olive-show__lead {
  max-width: 32rem;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.05rem, 0.8vw + 0.85rem, 1.4rem);
  line-height: 1.4;
  color: rgba(255, 250, 243, 0.9);
}

.olive-show__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 0.6rem;
  text-shadow: none;
  pointer-events: auto;
}

.olive-show__actions .btn--light {
  background: rgba(34, 22, 32, 0.3);
}

.olive-show.is-still .olive-show__hint {
  display: inline-flex;
}

/* =====================================================
   CURSEUR SIGNATURE + ÉLÉMENTS MAGNÉTIQUES
   ===================================================== */

.wow-cursor-on,
.wow-cursor-on * {
  cursor: none !important;
}

.wow-cursor-on :is(input, textarea, select, [contenteditable="true"]) {
  cursor: auto !important;
}

.wow-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.wow-cursor.is-visible {
  opacity: 1;
}

.wow-cursor.is-hidden {
  opacity: 0;
}

.wow-cursor__dot,
.wow-cursor__ring,
.wow-cursor__label {
  position: fixed;
  left: 0;
  top: 0;
  will-change: transform;
}

.wow-cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
}

.wow-cursor__dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  transition: scale 0.35s var(--wow-ease);
}

.wow-cursor__ring {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
}

.wow-cursor__ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(219, 98, 18, 0.55);
  transition:
    scale 0.5s var(--wow-ease),
    background-color 0.45s var(--wow-ease),
    border-color 0.45s var(--wow-ease);
}

.wow-cursor__label {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--surface);
}

.wow-cursor__label span {
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.3s ease, scale 0.45s var(--wow-ease);
}

.wow-cursor.is-link .wow-cursor__ring::before {
  scale: 1.55;
  background: rgba(219, 98, 18, 0.1);
  border-color: rgba(219, 98, 18, 0.85);
}

.wow-cursor.is-link .wow-cursor__dot::before {
  scale: 0.5;
}

.wow-cursor.is-label .wow-cursor__ring::before {
  scale: 2.4;
  background: rgba(219, 98, 18, 0.9);
  border-color: rgba(219, 98, 18, 0);
}

.wow-cursor.is-label .wow-cursor__dot::before {
  scale: 0;
}

.wow-cursor.is-label .wow-cursor__label span {
  opacity: 1;
  scale: 1;
}

.wow-cursor.is-down .wow-cursor__ring::before {
  scale: 0.82;
}

.wow-cursor.is-link.is-down .wow-cursor__ring::before {
  scale: 1.3;
}

.btn.wow-magnetic {
  transition:
    translate 0.5s var(--wow-ease),
    transform var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    color var(--transition),
    box-shadow var(--transition);
}

.site-header__link.wow-magnetic,
.site-header__toggle.wow-magnetic,
.project-carousel__button.wow-magnetic {
  transition:
    translate 0.6s var(--wow-ease),
    color var(--transition),
    transform var(--transition),
    background var(--transition);
}

/* =====================================================
   PROGRESSION DE LECTURE
   ===================================================== */

.wow-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1001;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  box-shadow: 0 0 12px rgba(219, 98, 18, 0.45);
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .wow-progress {
      animation: wow-progress linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes wow-progress {
  to { transform: scaleX(1); }
}

/* =====================================================
   SIGNATURE DU FOOTER
   ===================================================== */

.wow-signature {
  position: relative;
  padding: clamp(0.4rem, 1.4vw, 1.2rem) clamp(2rem, 4vw, 3rem) clamp(1.6rem, 3vw, 2.6rem);
  overflow: hidden;
}

.wow-signature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 40% 90% at var(--wow-sig-x, 30%) 60%, rgba(219, 98, 18, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.wow-signature.is-in::before {
  opacity: 1;
}

.wow-signature__line {
  position: relative;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.3rem, 7.2vw, 7.6rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: rgba(255, 250, 243, 0.92);
  text-wrap: balance;
}

.wow-sw {
  display: inline-block;
  white-space: nowrap;
}

.wow-sw--accent {
  color: var(--accent-soft);
}

.wow-c {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.5em, 0) rotate(9deg);
  transition:
    opacity 0.55s var(--wow-ease),
    transform 0.75s var(--wow-ease);
  transition-delay: calc(var(--ci, 0) * 14ms);
}

.wow-signature.is-in .wow-c {
  opacity: 1;
  transform: none;
}

/* =====================================================
   CONTACT — le message part en bouteille à la mer
   ===================================================== */

.wow-bottle-host {
  position: relative;
}

.wow-bottle-host .contact-form {
  transition: opacity 0.4s ease;
}

.wow-bottle-host.is-sending .contact-form {
  opacity: 0.08;
}

.wow-bottle {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: inherit;
  visibility: hidden;
  pointer-events: none;
}

.is-sending > .wow-bottle {
  visibility: visible;
}

/* La mer monte du bas de la carte, puis se retire. */
.wow-bottle__sea {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  opacity: 0;
  background: linear-gradient(180deg, #5c9fb8 0%, #2f7494 45%, #1c5877);
}

.wow-bottle__waves {
  position: absolute;
  left: 0;
  top: -22px;
  width: 200%;
  height: 30px;
  fill: #5c9fb8;
}

.wow-bottle__waves--back {
  top: -30px;
  fill: rgba(141, 196, 212, 0.75);
}

.is-sending .wow-bottle__sea {
  animation: wow-bottle-sea 3.35s ease 1s both;
}

.is-sending .wow-bottle__waves {
  animation: wow-bottle-waves 2.6s linear infinite;
}

.is-sending .wow-bottle__waves--back {
  animation-duration: 3.8s;
  animation-direction: reverse;
}

/* La lettre apparaît, s'enroule puis glisse dans la bouteille. */
.wow-bottle__letter {
  position: absolute;
  left: calc(50% - 125px);
  top: calc(32% - 65px);
  display: grid;
  align-content: center;
  gap: 12px;
  width: 190px;
  height: 130px;
  padding: 0 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fffaf1, #f1e3cc);
  box-shadow: 0 18px 40px rgba(58, 39, 27, 0.18);
  opacity: 0;
}

.wow-bottle__letter i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(34, 25, 21, 0.16);
}

.wow-bottle__letter i:nth-child(2) { width: 84%; }
.wow-bottle__letter i:nth-child(3) { width: 92%; }
.wow-bottle__letter i:nth-child(4) { width: 58%; }

.is-sending .wow-bottle__letter {
  animation: wow-bottle-letter 1.25s var(--wow-ease-in-out) both;
}

/* La bouteille : apparition, chute à l'eau, puis dérive vers l'horizon en rapetissant. */
.wow-bottle__float {
  position: absolute;
  left: calc(50% + 80px);
  top: calc(32% - 57px);
  width: 46px;
  height: 115px;
  opacity: 0;
}

.is-sending .wow-bottle__float {
  animation: wow-bottle-journey 3.55s linear 0.55s both;
}

.is-sending .wow-bottle__tilt {
  animation: wow-bottle-tilt 0.4s cubic-bezier(0.55, 0, 0.9, 0.45) 1.45s both;
}

.is-sending .wow-bottle__glass {
  animation: wow-bottle-bob 0.9s ease-in-out 1.85s infinite alternate;
}

.wow-bottle__tilt,
.wow-bottle__glass,
.wow-bottle__glass svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wow-bottle__glass svg {
  overflow: visible;
}

.wow-bottle__body {
  fill: rgba(170, 214, 205, 0.34);
  stroke: rgba(34, 25, 21, 0.55);
  stroke-width: 2;
}

.wow-bottle__scroll {
  fill: #fbf3e4;
  stroke: rgba(34, 25, 21, 0.25);
  stroke-width: 1;
  opacity: 0;
}

.wow-bottle__ribbon {
  fill: var(--accent);
  opacity: 0;
}

.wow-bottle__shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 3;
  stroke-linecap: round;
}

.wow-bottle__cork {
  fill: #b98552;
  stroke: rgba(34, 25, 21, 0.35);
  stroke-width: 1;
  opacity: 0;
}

.is-sending .wow-bottle__scroll,
.is-sending .wow-bottle__ribbon {
  animation: wow-bottle-show 0.25s ease 1.05s both;
}

.is-sending .wow-bottle__cork {
  animation: wow-bottle-cork 0.3s var(--wow-ease) 1.18s both;
}

.wow-bottle__splash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 18px;
  margin: -9px 0 0 -45px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
}

.is-sending .wow-bottle__splash {
  animation: wow-bottle-splash 0.6s ease-out 1.84s both;
}

@keyframes wow-bottle-sea {
  0% { opacity: 0; transform: translateY(40%); }
  12%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(24%); }
}

@keyframes wow-bottle-waves {
  to { transform: translateX(-50%); }
}

@keyframes wow-bottle-letter {
  0% { opacity: 0; transform: translateY(14px) scale(0.92); }
  22%, 52% { opacity: 1; transform: none; }
  80% { opacity: 1; transform: translateX(28%) scale(0.46, 0.08); }
  100% { opacity: 0; transform: translateX(70%) scale(0.16, 0.05); }
}

@keyframes wow-bottle-journey {
  0% { opacity: 0; translate: 0 12px; scale: 1; }
  12.7% { opacity: 1; translate: 0 0; }
  25% { opacity: 1; translate: 0 0; animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.45); }
  36% { opacity: 1; translate: 0 var(--wow-drop, 220px); scale: 1; animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  82% { opacity: 1; }
  100% { opacity: 0; translate: var(--wow-drift, 120px) calc(var(--wow-drop, 220px) - 26px); scale: 0.3; }
}

@keyframes wow-bottle-tilt {
  from { rotate: 0deg; }
  to { rotate: 78deg; }
}

@keyframes wow-bottle-bob {
  from { translate: 0 -3px; rotate: -6deg; }
  to { translate: 0 3px; rotate: 6deg; }
}

@keyframes wow-bottle-show {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wow-bottle-cork {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

@keyframes wow-bottle-splash {
  0% { opacity: 0.9; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* =====================================================
   TRANSITIONS ENTRE PAGES (View Transitions API)
   ===================================================== */

@view-transition {
  navigation: auto;
}

body:not(:has(.hero-home)) .site-header {
  view-transition-name: syna-header;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition {
    background: var(--dark);
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
  }

  ::view-transition-old(root) {
    animation: wow-vt-out 0.36s cubic-bezier(0.65, 0, 0.35, 1) both;
  }

  ::view-transition-new(root) {
    animation: wow-vt-in 0.52s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
  }
}

@keyframes wow-vt-out {
  from {
    clip-path: inset(0 round 0);
  }
  to {
    opacity: 0.3;
    transform: translateY(-2.5%) scale(0.92);
    clip-path: inset(0 round 2.5rem);
  }
}

@keyframes wow-vt-in {
  from {
    transform: translateY(100%);
    clip-path: inset(0 round 2.5rem);
  }
  to {
    transform: none;
    clip-path: inset(0 round 0);
  }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 860px) {
  .olive-show.is-enhanced {
    height: 270vh;
  }

  /* Écran vertical : le texte dans le ciel, l'olivier en bas. */
  .olive-show__content {
    align-content: start;
    align-self: start;
    padding-top: clamp(3.2rem, 9vh, 5rem);
  }

  .olive-show__title {
    font-size: clamp(2.7rem, 12.5vw, 5.4rem);
  }

  .olive-show__steps {
    gap: 0.5rem 1rem;
  }

  .olive-show__step {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  .olive-show__hint {
    top: auto;
    right: auto;
    bottom: calc(clamp(1.2rem, 4vh, 2.4rem) + 3.4rem);
    left: 50%;
    translate: -50% 0;
    white-space: nowrap;
  }

  .wow-dapple {
    width: 120vw;
  }
}

@media (max-width: 620px) {
  /* Sur téléphone, l'heure se place au-dessus de l'invitation à défiler. */
  .wow-daylight-label {
    left: 0;
    right: 0;
    bottom: calc(clamp(1.1rem, 3vh, 2rem) + 4.6rem);
    justify-content: center;
  }

  .olive-show__step {
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }

  .wow-signature {
    padding-inline: 1.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wow-dapple.is-on {
    animation: none;
  }

  .wow-bottle {
    display: none;
  }

  .wow-scroll-cue__line::after {
    animation: none;
  }
}