/* ================================================= */
/* ===== VIRALPICS — SECTION HERO ================ */
/* ===== Galerie vortex + vidéo de transition ==== */
/* ================================================= */

.living-hero {
  position: relative;
  height: 520vh;
  min-height: 3600px;
  background: transparent;
}

.living-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.ambient,
.ambient span,
.content-veil,
.scroll-dim,
.edge-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient { z-index: -2; overflow: hidden; }

.ambient__blue {
  inset: -28% 36% -30% -24% !important;
  background: radial-gradient(ellipse, rgba(0, 132, 255, 0.38), transparent 66%);
  filter: blur(55px);
  animation: ambient-drift-left 12s ease-in-out infinite alternate;
}

.ambient__violet {
  inset: -24% -20% -32% 40% !important;
  background: radial-gradient(ellipse, rgba(184, 31, 210, 0.31), transparent 65%);
  filter: blur(64px);
  animation: ambient-drift-right 14s ease-in-out infinite alternate;
}

.ambient__core {
  display: none;
}

.ambient__grain {
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

@keyframes ambient-drift-left {
  to { transform: translate3d(4%, 2%, 0) scale(1.06); }
}

@keyframes ambient-drift-right {
  to { transform: translate3d(-3%, 3%, 0) scale(1.08); }
}

.gallery-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  perspective: 1200px;
  contain: layout paint style;
}

.living-gallery { position: absolute; inset: 0; transform-style: preserve-3d; }

/*
 * PERF — `filter` retiré de `will-change` : le JS n'écrit plus jamais de
 * filtre sur les cartes, et le déclarer ici forçait le navigateur à
 * préparer une couche de filtre pour chacune d'elles.
 */
.gallery-card {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.gallery-card__visual {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(184, 207, 255, 0.25);
  border-radius: clamp(10px, 1.2vw, 18px);
  opacity: 1;
  background: #0a112b;
  box-shadow:
  0 24px 62px rgba(0, 0, 20, 0.55),
  0 0 24px rgba(54, 117, 255, 0.1),
  inset 0 1px 0 rgba(255, 255, 255, 0.15);
  animation: none;
  transform-style: preserve-3d;
}

.gallery-card__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 25%);
}

.gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.015);
}

.gallery-card[data-tier="back"] .gallery-card__visual {
  box-shadow: 0 18px 44px rgba(0,0,20,.5), 0 0 18px rgba(91,76,255,.1), inset 0 1px 0 rgba(255,255,255,.14);
}

.content-veil {
  display: none;
}

.hero-copy {
  position: absolute;
  z-index: 6;
  top: 52%;
  left: 50%;
  width: min(760px, calc(100% - 44px));
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -43%) scale(.29);
  will-change: transform, opacity, filter;
}

.hero-copy h1 {
  margin: 0;
  font-family: "Manrope", sans-serif;
  letter-spacing: -0.06em;
}

.hero-copy h1 {
  color: #fff;
  font-size: clamp(48px, 5.35vw, 78px);
  font-weight: 700;
  line-height: 1.02;
  text-shadow: 0 7px 42px rgba(0, 0, 20, 0.85);
  animation: none;
}

.title-line { display: block; }

.hero-copy h1 strong {
  color: transparent;
  background: linear-gradient(95deg, #ff0b9e 4%, #c22bd4 48%, #7e69ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 700;
  filter: drop-shadow(0 4px 20px rgba(213, 32, 202, 0.18));
}

.hero-copy > p {
  max-width: 660px;
  margin: 26px auto 0;
  color: rgba(226, 232, 249, 0.82);
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 700;
  line-height: 1.42;
  text-shadow: 0 4px 22px rgba(0, 0, 25, 0.62);
}

.hero-cta {
  position: relative;
  display: inline-flex;
  min-width: min(355px, 86vw);
  min-height: 68px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  padding: 0 34px;
  border: 2px solid rgba(229, 244, 255, 0.9);
  border-radius: 999px;
  background:
  linear-gradient(180deg, rgba(255,255,255,.16), transparent 43%),
  radial-gradient(circle at 12% 28%, rgba(15, 160, 255, .32), transparent 43%),
  radial-gradient(circle at 88% 76%, rgba(239, 40, 199, .3), transparent 46%),
  linear-gradient(110deg, rgba(13, 74, 151, .52), rgba(50, 39, 136, .46) 49%, rgba(117, 24, 122, .48));
  font: 700 clamp(17px, 1.55vw, 22px)/1 "Manrope", sans-serif;
  text-shadow: 0 2px 10px rgba(0,0,30,.45);
  animation: none;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.hero-cta {
  box-shadow:
  var(--liquid-glass-shadow),
  0 0 0 3px rgba(42,139,255,.18),
  0 0 23px rgba(0,177,255,.66),
  0 0 31px rgba(242,25,186,.54),
  inset 0 -9px 21px rgba(75,0,151,.24);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.hero-cta::after {
  content: "";
  position: absolute;
  inset: 4px 12px auto;
  height: 42%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
  pointer-events: none;
}

.hero-cta:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
  var(--liquid-glass-shadow),
  0 0 0 3px rgba(42,139,255,.25),
  0 0 30px rgba(0,177,255,.9),
  0 0 42px rgba(242,25,186,.74),
  inset 0 -9px 21px rgba(75,0,151,.32);
}

.hero-cta:active { transform: translateY(0) scale(.98); }

.scroll-cue {
  position: absolute;
  z-index: 7;
  bottom: 20px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: rgba(211, 220, 248, 0.55);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.scroll-cue i { position: relative; display: block; width: 1px; height: 25px; overflow: hidden; background: rgba(255,255,255,.15); }
.scroll-cue i::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 70%; background: linear-gradient(transparent, #a8c5ff); animation: scroll-line 1.9s ease-in-out infinite; }

@keyframes scroll-line { 0% { transform: translateY(0); } 70%,100% { transform: translateY(245%); } }

.scroll-dim { z-index: 8; opacity: 0; background: rgba(1,4,18,.8); will-change: opacity; }

/*
 * PERF — `opacity` et `filter` retirés de `will-change` : le JS ne les
 * écrit plus (opacity fixée à 1, filter à none une fois pour toutes).
 */
.hero-video-transition {
  position: absolute;
  z-index: 9;
  top: 50%;
  left: 50%;
  width: 96vw;
  height: 100svh;
  aspect-ratio: auto;
  opacity: 1;
  filter: none;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 860px)) scale(.74);
  transform-origin: center;
  will-change: transform;
}

.hero-video-transition__glow {
  position: absolute;
  inset: 10% 6% -8%;
  z-index: -1;
  border-radius: 34px;
  background: linear-gradient(90deg, rgba(18, 147, 255, .34), rgba(127, 77, 255, .24), rgba(244, 35, 190, .32));
  filter: blur(52px);
}

.hero-video-transition__player {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(219, 236, 255, .34);
  border-radius: clamp(20px, 2.2vw, 32px);
  background:
  linear-gradient(135deg, rgba(10, 24, 57, .82), rgba(20, 12, 52, .88)),
  rgba(5, 9, 29, .9);
  box-shadow:
  0 45px 120px rgba(0, 0, 28, .62),
  0 0 44px rgba(74, 114, 255, .22),
  inset 0 1px 0 rgba(255, 255, 255, .22);
}

.hero-video-transition__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  min-height: 52px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: rgba(225, 232, 255, .78);
  font-size: 12px;
  font-weight: 700;
}

.hero-video-transition__screen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.hero-video-transition__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-video-transition__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,5,20,.04), rgba(2,5,20,.1) 54%, rgba(2,5,20,.72));
}

.hero-video-transition__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.95) brightness(.84);
  transform: scale(1.025);
}

.hero-video-transition__caption {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 22px;
  color: #fff;
  font: 700 clamp(15px, 1.45vw, 20px)/1.35 "Manrope", sans-serif;
  text-shadow: 0 5px 22px rgba(0,0,20,.7);
}

.edge-vignette {
  z-index: 4;
  box-shadow: inset 0 0 145px 22px rgba(0, 3, 18, 0.5);
  background: radial-gradient(ellipse, transparent 48%, rgba(0,3,18,.08) 68%, rgba(0,2,14,.56) 112%);
  pointer-events: none;
}

.suite-anchor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.scene-next-content {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: min(1480px, calc(100% - 64px));
  opacity: var(--next-opacity, 0);
  pointer-events: none;
  transform: translate3d(-50%, calc(-50% + var(--next-y, 72px)), 0) scale(var(--next-scale, .985));
  will-change: opacity, transform;
}

.scene-next-content h2 {
  margin: 0 auto;
  font-family: "Manrope", sans-serif;
  font-size: clamp(54px, 6.6vw, 112px);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.065em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 10px 48px rgba(0, 0, 24, .5);
}

.marketing-line {
  display: block;
  white-space: nowrap;
}

.marketing-line--accent {
  margin-top: .1em;
}

[data-reveal-text] {
  display: inline-flex;
  white-space: pre;
}

.reveal-letter {
  display: inline-block;
  color: #fff;
  opacity: clamp(.08, calc(var(--marketing-phase, 0) - var(--letter-start, 0)), 1);
  filter: none;
  transform: none;
  text-shadow:
  0 0 18px rgba(132, 155, 255, .1),
  0 8px 36px rgba(0, 0, 20, .48);
}

.reveal-letter--space { opacity: 1; }

.marketing-gradient .reveal-letter {
  color: var(--letter-color, #be4cff);
}

.platform-marquee {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(104px, 13vh, 138px);
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: var(--marquee-opacity, 0);
  border: 0;
  border-radius: 0;
  background:
  radial-gradient(circle at 4% 0%, rgba(30, 144, 255, .2), transparent 31%),
  radial-gradient(circle at 96% 100%, rgba(235, 42, 207, .22), transparent 32%),
  linear-gradient(118deg, rgba(18, 39, 84, .58), rgba(24, 15, 70, .58) 50%, rgba(61, 12, 78, .62)),
  rgba(8, 13, 46, .58);
  box-shadow:
  var(--liquid-glass-shadow),
  0 22px 58px rgba(0, 0, 30, .34),
  0 0 34px rgba(67, 109, 255, .12),
  0 0 42px rgba(226, 48, 220, .1);
  transform: translate3d(0, var(--marquee-y, 30px), 0);
  backdrop-filter: blur(16px) saturate(140%) brightness(1.03);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.03);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  contain: layout paint style;
  will-change: opacity, transform;
}

.platform-marquee::before,
.platform-marquee::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: min(10vw, 150px);
  pointer-events: none;
}

.platform-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(8, 20, 59, .96), transparent);
}

.platform-marquee::after {
  right: 0;
  background: linear-gradient(-90deg, rgba(50, 10, 68, .96), transparent);
}

.platform-marquee__track {
  display: flex;
  width: max-content;
  animation: platform-marquee 42s linear infinite;
  will-change: transform;
}

/*
 * PERF — le défilement du bandeau est mis en pause tant qu'il est invisible.
 * L'attribut `data-live` est piloté par hero.js (renderScrollTransition).
 */
.platform-marquee[data-live="0"] .platform-marquee__track {
  animation-play-state: paused;
}

.platform-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(16px, 1.7vw, 28px);
  padding-right: clamp(16px, 1.7vw, 28px);
}

.platform-logo {
  position: relative;
  display: inline-flex;
  flex: none;
  min-height: clamp(65px, 7.7vh, 78px);
  align-items: center;
  gap: 10px;
  padding: 11px clamp(15px, 1.35vw, 22px);
  overflow: hidden;
  border: 1px solid rgba(218, 231, 255, .43);
  border-radius: clamp(17px, 1.5vw, 23px);
  background:
  linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.035) 48%, rgba(118,63,255,.08)),
  rgba(7, 15, 48, .48);
  box-shadow:
  var(--liquid-glass-shadow-compact),
  0 12px 28px rgba(0,0,27,.28),
  0 0 18px rgba(86,117,255,.08);
  color: rgba(246, 248, 255, .94);
  font: 700 clamp(19px, 1.65vw, 28px)/1 "Manrope", sans-serif;
  letter-spacing: -.045em;
  white-space: nowrap;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.platform-logo::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 12%;
  left: 12%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  opacity: .72;
  pointer-events: none;
}

.platform-logo i {
  display: grid;
  min-width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  color: #11152d;
  font-style: normal;
  font-size: 22px;
  letter-spacing: 0;
}

.platform-logo--shopify { color: #a7d958; }
.platform-logo--shopify i { background: #83be48; color: #fff; }
.platform-logo--etsy { color: #ff7a35; font-family: Georgia, serif; font-weight: 600; }
.platform-logo--tiktok i { background: #080a13; color: #fff; text-shadow: -2px 0 #20e6e6, 2px 0 #ff335f; }
.platform-logo--google i { color: #4285f4; }
.platform-logo--meta i { color: #1674ea; font-size: 32px; }
.platform-logo--amazon { color: #fff; text-transform: lowercase; }
.platform-logo--youtube i { min-width: 54px; background: #ff1434; color: #fff; }
.platform-logo--wix { font-size: clamp(24px, 2vw, 32px); }
.platform-logo--wordpress i { color: #77aacd;}
.platform-logo--ebay { color: #e53238; }

@keyframes platform-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #526080; }
.window-dots i:nth-child(1) { background: #ff5b8e; }
.window-dots i:nth-child(2) { background: #a777ff; }
.window-dots i:nth-child(3) { background: #3fbeff; }

.video-status { justify-self: end; display: flex; align-items: center; gap: 7px; }
.video-status i { width: 6px; height: 6px; border-radius: 50%; background: #65e0b1; box-shadow: 0 0 10px #65e0b1; }

/* ============================== */
/* ===== RESPONSIVE — VIDÉO ===== */
/* ============================== */
/*
 * Sur mobile / tablette, la vidéo de transition ne suit plus le gabarit
 * desktop (96vw / 100svh) : elle prend 92% de la largeur du sticky, garde
 * son ratio 16:9 via `aspect-ratio` et conserve ses coins arrondis.
 *
 * `width: 92%` (et non 100vw) : le parent `.living-sticky` fait déjà la
 * largeur de la fenêtre, et 100vw inclurait une éventuelle scrollbar. Les
 * 8% restants donnent la marge latérale — la vidéo n'est plus collée aux
 * bords de l'écran.
 */
@media (max-width: 768px) {
  .hero-video-transition {
    width: 92%;
    max-width: 92%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .hero-video-transition__player {
    border-radius: 18px;
  }

  .hero-video-transition__screen {
    border-radius: 17px;
  }

  .hero-video-transition__video {
    background: #04081e;
    object-fit: cover;
  }

  /* PERF — les blurs de 52/55/64px sont les effets les plus coûteux du hero. */
  .hero-video-transition__glow {
    inset: 12% 2% -8%;
    border-radius: 24px;
    filter: blur(30px);
  }

  .ambient__blue { filter: blur(34px); }
  .ambient__violet { filter: blur(38px); }

  /*
   * PERF — `backdrop-filter` combiné à `mask-image` sur un élément qui anime
   * simultanément `opacity` et `transform` force le navigateur à
   * ré-échantillonner le fond flouté à chaque frame. On retire le flou et on
   * compense avec un fond plus opaque : le rendu est quasi identique.
   */
  .platform-marquee {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background:
    linear-gradient(118deg, rgba(18, 39, 84, .82), rgba(24, 15, 70, .82) 50%, rgba(61, 12, 78, .86)),
    rgba(8, 13, 46, .88);
  }

  .hero-cta {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
  }
}

/* ============================== */
/* ===== RESPONSIVE — HERO ====== */
/* ============================== */
/*
 * La timeline mobile n'a que 3 étapes (vortex → vidéo → texte marketing).
 * 520vh imposait ~5 glissements pour les traverser. 300vh en impose 2, ce
 * qui correspond à la chorégraphie voulue : 1er scroll = le vortex se
 * déploie, 2e scroll = la vidéo monte, puis le texte marketing.
 * Les seuils correspondants sont dans hero.js (renderScrollTransition).
 */
@media (max-width: 600px) {
  .living-hero {
    height: 300vh;
    min-height: 2000px;
  }

  .hero-copy {
    width: min(760px, calc(100% - 24px));
  }

  /*
   * Le bloc titre est rendu à scale(1) sur mobile (cf. hero.js), là où le
   * desktop le rend à scale(0.62). Les tailles de police sont donc revues
   * ici pour que « Des visuels produits » tienne sur une seule ligne.
   */
  .hero-copy h1 {
    font-size: clamp(30px, 8.2vw, 44px);
    letter-spacing: -0.05em;
  }

  .hero-copy > p {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.38;
  }

  .hero-cta {
    min-width: min(340px, 88vw);
    min-height: 58px;
    margin-top: 24px;
    font-size: 17px;
  }

  /*
   * `top: 66%` : la vidéo remonte de 20% de la hauteur d'écran une fois
   * calée (cf. `videoLiftTop` dans hero.js). Le texte marketing se place
   * donc en dessous, sans recouvrement.
   */
  .scene-next-content {
    top: 66%;
    width: calc(100% - 20px);
  }

  /*
   * `.marketing-line` est en `white-space: nowrap` et chaque mot est un
   * `inline-flex` de lettres : le texte ne PEUT pas se replier, il déborde
   * donc silencieusement. La seule variable est la taille de police.
   * 5.4vw sur 390px ≈ 21px → « Transformez vos produits » ≈ 250px, large
   * marge sous les 370px disponibles.
   */
  .scene-next-content h2 {
    font-size: clamp(18px, 5.4vw, 34px);
    letter-spacing: -0.045em;
  }

  /*
   * Le vortex ne doit jamais générer de débordement horizontal.
   * NB : on ne met surtout PAS `overflow: hidden` sur `.living-gallery`,
   * qui est en `transform-style: preserve-3d` — ça aplatirait la scène.
   */
  .gallery-stage {
    max-width: 100%;
    overflow: hidden;
  }
}