/* ════════════════════════════════════════════════════════════════════════════
   SEUIL - LA TRAVERSEE (styles dedies a la refonte SOTY de la page d'entree)
   TOUT est scope a #preloader.bonsai-on : les replis (mobile, reduced-motion,
   echec WebGL) gardent l'ancien sas CSS valide, pixel pour pixel.
   Ce fichier ne touche a AUCUN style du site principal.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── le bloc d'accueil : editorial, tiers bas-gauche - le tableau respire a droite ── */
#preloader.bonsai-on .pre-welcome {
  left: max(6vw, 44px);
  right: auto;
  top: auto;
  bottom: 9vh;
  transform: none;
  margin-left: 0;
  align-items: flex-start;
  text-align: left;
  gap: 14px;
  width: min(88vw, 640px);
}

/* ── l'oeil de la marque : lockup de film ── */
#preloader.bonsai-on .pre-eyebrow {
  font-size: 11px;
  letter-spacing: 0.55em;
  color: rgba(215, 227, 255, 0.78);
  text-shadow: 0 1px 14px rgba(4, 8, 18, 0.95), 0 0 22px rgba(6, 10, 22, 0.8);
}
#preloader.bonsai-on .pre-brand {
  font-size: clamp(40px, 5.6vw, 76px);
  letter-spacing: -0.018em;
  line-height: 0.96;
  color: #f4f0e6;
  text-shadow:
    0 2px 42px rgba(6, 10, 22, 0.85),
    0 0 26px rgba(170, 195, 255, 0.16),
    0 0 90px rgba(150, 176, 255, 0.10);
}
#preloader.bonsai-on .pre-accroche {
  font-size: clamp(13px, 1.35vw, 16px);
  max-width: 52ch;
  color: rgba(226, 230, 240, 0.66);
  text-shadow: 0 1px 22px rgba(6, 10, 22, 0.95), 0 0 12px rgba(6, 10, 22, 0.8);
}

/* ── reflet de la marque dans l'eau (clone JS .ps-refl, discret, ondule) ── */
#preloader.bonsai-on .ps-refl {
  margin-top: -10px;
  align-self: flex-start;
  transform: scaleY(-1);
  opacity: 0.10;
  filter: blur(2.5px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent 78%);
  mask-image: linear-gradient(to top, rgba(0,0,0,0.9), transparent 78%);
  animation: ps-refl-wobble 7s ease-in-out infinite alternate;
  pointer-events: none;
  user-select: none;
  font-family: var(--f-display); font-weight: 900;
  font-size: clamp(40px, 5.6vw, 76px);
  letter-spacing: -0.018em; line-height: 0.96;
  color: #dfe6f5;
}
@keyframes ps-refl-wobble {
  from { transform: scaleY(-1) skewX(0.4deg) scaleX(1.002); opacity: 0.085; }
  to   { transform: scaleY(-1) skewX(-0.6deg) scaleX(0.998); opacity: 0.115; }
}

/* ── le bouton ENTRER : la lanterne qu'on met a l'eau ──
   La jauge conic (--pre-p) reste ; a l'eclosion le bouton passe a l'OR des
   lanternes flottantes : entrer = poser la sienne sur l'eau. */
#preloader.bonsai-on .pre-enter {
  margin-top: 16px;
  font-size: 12.5px;
  letter-spacing: 0.42em;
  padding: 16px 52px;
  will-change: transform;
}
#preloader.bonsai-on.is-ready .pre-enter {
  color: #f6ead8;
  border-color: rgba(255, 201, 142, 0.34);
  animation: ps-enter-eclot 1.2s var(--ease-soft) 0.15s 1;
}
@keyframes ps-enter-eclot {
  0%   { box-shadow: 0 0 0 0 rgba(255, 190, 120, 0); }
  40%  { box-shadow: 0 0 0 1px rgba(255, 205, 150, 0.22), 0 0 38px rgba(255, 178, 122, 0.30), inset 0 0 20px rgba(255, 178, 122, 0.10); }
  100% { box-shadow: 0 0 0 0 rgba(255, 190, 120, 0); }
}
#preloader.bonsai-on .pre-enter:hover,
#preloader.bonsai-on .pre-enter:focus-visible {
  border-color: rgba(255, 201, 142, 0.65);
  background: rgba(255, 178, 122, 0.09);
  color: #fff8ec;
  box-shadow:
    0 0 0 1px rgba(255, 205, 150, 0.16),
    0 0 30px rgba(255, 178, 122, 0.24),
    inset 0 0 24px rgba(255, 178, 122, 0.09);
}
/* respiration du bouton pret (tres lente, comme la flamme des lanternes) */
#preloader.bonsai-on.is-ready .pre-enter:not(:hover) {
  animation: ps-enter-eclot 1.2s var(--ease-soft) 0.15s 1, ps-breathe 4.6s ease-in-out 1.6s infinite;
}
@keyframes ps-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 190, 120, 0.0); }
  50%      { box-shadow: 0 0 22px rgba(255, 178, 122, 0.13), inset 0 0 14px rgba(255, 178, 122, 0.05); }
}

/* ── l'invitation : on entre de PARTOUT (clic, molette, swipe, clavier) ──
   Le bouton reste la cible évidente, la ligne dessous lève le doute. */
.pre-hint {
  margin: 14px 0 0;
  font-family: var(--f-mono, 'JetBrains Mono', monospace);
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(242, 237, 227, 0.6);
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease .3s, transform .6s ease .3s;
}
#preloader.is-ready { cursor: pointer; }
#preloader.is-ready .pre-hint {
  opacity: 1; transform: none;
  animation: ps-hint-pulse 3.2s ease-in-out 1s infinite;
}
@keyframes ps-hint-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ── franchissement : le monde avance, le bloc d'accueil s'efface en s'elevant ── */
#preloader.bonsai-on.is-entering .pre-welcome {
  transition: opacity 0.5s ease, transform 0.9s var(--ease-cross, ease);
  opacity: 0;
  transform: translateY(-26px);
}

/* reduced-motion : ce fichier ne s'applique qu'en bonsai-on (3D active),
   mais on neutralise quand meme les respirations par securite */
@media (prefers-reduced-motion: reduce) {
  #preloader.bonsai-on .ps-refl { animation: none; }
  #preloader.bonsai-on.is-ready .pre-enter:not(:hover) { animation: none; }
  #preloader.is-ready .pre-hint { animation: none; }
}