/**
 * Splash boot — Sylice (anti-FOUL i18n, esthétique « griffée »).
 *
 * Overlay plein écran translucide affiché dès le premier paint. Le cloak CSS
 * masque les chaînes `[data-fr][data-en]` tant que `applyLang()` n'a pas
 * réécrit les textes. Sylice est posée au **second plan** : bords dissous via
 * `mask-image` radial (aucun rectangle franc, la vidéo « fond » dans le
 * template), opacité maîtrisée (~0.9) pour garder l'effet de filigrane sans
 * jamais devenir invisible — y compris sur écrans verticaux HD/4K, tablettes
 * et smartphones (émulateurs inclus). Aux quatre coins du slot, quatre petits
 * clous d'accent (`radial-gradient` multi-fond sur `::after`) « épinglent »
 * Sylice dans la peau du template. Desktop + tablette : coin bas-droit (LTR)
 * / bas-gauche (RTL). Smartphone (≤ 767 px) : slot centré. Le noeud est
 * retiré du DOM par `engine/js/splashboot.js` sur l'event `dp-lang-applied`.
 *
 * Règles non négociables (PRD § Mode performance) :
 * - zéro animation infinie, zéro `backdrop-filter`, zéro `filter` animé
 * - transitions composées uniquement sur `opacity` (GPU)
 * - `mask-image` statique, compositée GPU une fois
 * - `pointer-events: none` pour laisser la coque réactive en arrière-plan
 * - `prefers-reduced-motion: reduce` : transition raccourcie, vidéo figée sur
 *   une frame aléatoire (pause JS) ; l'image reste visible, aucun mouvement
 * - tous les tokens viennent de `engine/css/style.css` (`--bg`, `--accent`, …)
 *
 * Loaded by : `engine/mm/tpl___header___head.php` (en-tête de `stylesheets`).
 */

html.dp-lang-boot [data-fr][data-en] {
  visibility: hidden;
}

/*
 * Méga menu — lien « Voir tous les projets » : le libellé porte les attributs i18n
 * comme le reste du site ; sous cloak, visibility:hidden sur un span inline peut
 * effondrer la largeur utile (~ quelques px). Le texte SSR reste déjà en EN via
 * dp_mm_visible_html ; on force la visibilité pour garder une cible lisible.
 */
html.dp-lang-boot .projects-mega-menu__all-projects-cta span[data-fr][data-en] {
  visibility: visible;
}

html.dp-lang-boot .dp-splash-boot,
html.dp-lang-boot .dp-splash-boot * {
  visibility: visible;
}

.dp-splash-boot {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 50%,
      color-mix(in srgb, var(--bg, #1e2026) 8%, transparent) 0%,
      color-mix(in srgb, var(--bg, #1e2026) 26%, transparent) 65%,
      color-mix(in srgb, var(--bg, #1e2026) 42%, transparent) 100%
    );
  opacity: 1;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity;
  contain: layout paint;
}

.dp-splash-boot.is-leaving {
  opacity: 0;
}

.dp-splash-boot__frame {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

.dp-splash-boot__frame::before {
  content: "";
  position: absolute;
  right: -8vw;
  bottom: -10vh;
  left: auto;
  top: auto;
  width: min(54vw, 580px);
  height: min(68vh, 640px);
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    ellipse 58% 70% at 62% 65%,
    color-mix(in srgb, var(--accent, #ff6a00) 14%, transparent) 0%,
    color-mix(in srgb, var(--accent-2, #5dd4c8) 8%, transparent) 45%,
    transparent 78%
  );
  opacity: 0.6;
}

html[dir="rtl"] .dp-splash-boot__frame::before {
  right: auto;
  left: -8vw;
  background: radial-gradient(
    ellipse 58% 70% at 38% 65%,
    color-mix(in srgb, var(--accent, #ff6a00) 14%, transparent) 0%,
    color-mix(in srgb, var(--accent-2, #5dd4c8) 8%, transparent) 45%,
    transparent 78%
  );
}

.dp-splash-boot__slot {
  position: absolute;
  right: clamp(1rem, 3vw, 2.4rem);
  bottom: clamp(1rem, 3vh, 2.2rem);
  left: auto;
  top: auto;
  width: auto;
  height: clamp(240px, 42vh, 440px);
  aspect-ratio: 9 / 16;
  max-width: min(38vw, 280px);
  pointer-events: none;
}

html[dir="rtl"] .dp-splash-boot__slot {
  right: auto;
  left: clamp(1rem, 3vw, 2.4rem);
}

.dp-splash-boot__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
  --dp-sb-mask: radial-gradient(
    ellipse 68% 74% at 50% 50%,
    #000 40%,
    rgba(0, 0, 0, 0.78) 70%,
    rgba(0, 0, 0, 0.32) 88%,
    transparent 100%
  );
  mask-image: var(--dp-sb-mask);
  -webkit-mask-image: var(--dp-sb-mask);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

.dp-splash-boot__slot::after {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  background:
    radial-gradient(
      circle 3.5px at 0% 0%,
      color-mix(in srgb, var(--accent, #ff6a00) 88%, transparent) 58%,
      transparent 62%
    ) no-repeat,
    radial-gradient(
      circle 3.5px at 100% 0%,
      color-mix(in srgb, var(--accent-2, #5dd4c8) 88%, transparent) 58%,
      transparent 62%
    ) no-repeat,
    radial-gradient(
      circle 3.5px at 0% 100%,
      color-mix(in srgb, var(--accent-2, #5dd4c8) 88%, transparent) 58%,
      transparent 62%
    ) no-repeat,
    radial-gradient(
      circle 3.5px at 100% 100%,
      color-mix(in srgb, var(--accent, #ff6a00) 88%, transparent) 58%,
      transparent 62%
    ) no-repeat;
}

.dp-splash-boot__brand {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 4vh, 2.2rem);
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-matrix-display, "Audiowide", "Orbitron", sans-serif);
  font-weight: 400;
  font-size: clamp(0.74rem, 1vw, 0.92rem);
  letter-spacing: 0.22em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent, #ff6a00) 85%, transparent) 0%,
    color-mix(in srgb, var(--accent-2, #5dd4c8) 85%, transparent) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.72;
}

/* Viewports portrait (écran vertical HD/4K, tablette portrait) : largeur > 767 mais
   le slot peut sembler modeste dans un canvas très haut. On agrandit légèrement la
   zone vidéo pour que Sylice reste franchement perceptible sans dominer. */
@media (orientation: portrait) and (min-width: 768px) {
  .dp-splash-boot__slot {
    height: clamp(300px, 34vh, 520px);
    max-width: min(36vw, 340px);
  }
}

@media (max-width: 767px) {
  .dp-splash-boot__slot,
  html[dir="rtl"] .dp-splash-boot__slot {
    right: auto;
    bottom: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: clamp(320px, 64vh, 540px);
    max-width: min(72vw, 340px);
    aspect-ratio: 9 / 16;
  }

  .dp-splash-boot__frame::before,
  html[dir="rtl"] .dp-splash-boot__frame::before {
    right: auto;
    left: 50%;
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(95vw, 520px);
    height: min(82vh, 620px);
    background: radial-gradient(
      ellipse 58% 62% at 50% 50%,
      color-mix(in srgb, var(--accent, #ff6a00) 14%, transparent) 0%,
      color-mix(in srgb, var(--accent-2, #5dd4c8) 8%, transparent) 45%,
      transparent 78%
    );
  }
}

/* prefers-reduced-motion : on garde Sylice visible (impératif UX : voir Sylice
   tout le temps) mais la vidéo est mise en pause sur une frame aléatoire par
   l'inline JS de `tpl___splash_boot.php`. Seule la transition de sortie est
   raccourcie ; aucune animation infinie n'existe par ailleurs. */
@media (prefers-reduced-motion: reduce) {
  .dp-splash-boot {
    transition-duration: 0.14s;
  }
}