/* =========================================================
   ERYX — introduction : les deux pièces du symbole s'attirent et s'emboîtent (CLACK),
   le nom apparaît, puis le logo rejoint sa place dans l'en-tête.
   Jouée une fois par session, jamais en mouvement réduit ni sur un lien profond (#orma…).
   Classe html.intro posée dans <head> (avant tout rendu) ; retirée par js/intro.js à la fin.
   Tout ce qui bouge ne bouge que par transform / opacity : animations tenues par le compositeur.
   ========================================================= */

.ix { display: none; }
html.intro .ix {
  display: block; position: fixed; inset: 0; z-index: 100; overflow: hidden;
  pointer-events: auto; cursor: default;
}
html.intro, html.intro body { overflow: hidden; }

/* voile noir : se retire à la fin pour révéler la page */
.ix__veil { position: absolute; inset: 0; background: var(--bg, #090808); will-change: opacity; }

/* halo rouge et onde fine, au moment de l'impact */
.ix__glow, .ix__ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.ix__glow {
  width: 560px; height: 560px; margin: -280px 0 0 -280px;
  background: radial-gradient(closest-side, rgba(193, 38, 61, 0.42), rgba(166, 28, 50, 0.16) 45%, rgba(166, 28, 50, 0) 100%);
}
.ix__ring { width: 200px; height: 200px; margin: -100px 0 0 -100px; border: 1px solid rgba(251, 248, 246, 0.5); }

/* calque du vol vers l'en-tête */
.ix__fly { position: absolute; inset: 0; will-change: transform; }

/* logo de l'intro : mêmes proportions que .hdr__logo (svg 40 · écart 12 · texte 22), multipliées par --s.
   Au repos, c'est le symbole qui est centré ; le nom pend à sa droite, encore invisible. */
.ix__logo {
  --s: 3.1;
  position: absolute; left: 50%; top: 50%; display: flex; align-items: center;
  gap: calc(12px * var(--s));
  translate: calc(-20px * var(--s)) -50%;
  will-change: transform;
}
.ix__mark { position: relative; flex: none; width: calc(40px * var(--s)); height: calc(40px * var(--s)); opacity: 0; will-change: opacity; }
/* le carré de la grille 24 tourné à -45° (comme le symbole : 70,71 % du cadre) */
.ix__rot {
  position: absolute; left: 14.645%; top: 14.645%; width: 70.711%; height: 70.711%;
  transform: rotate(-34deg) scale(.9); will-change: transform;
}
.ix__sq, .ix__pc, .ix__pc svg, .ix__shine { position: absolute; inset: 0; }
.ix__sq { will-change: transform; }
.ix__pc { will-change: transform; }
.ix__pc svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* reflet : une bande claire qui traverse, découpée à la forme exacte des deux pièces */
.ix__shine {
  overflow: hidden; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0H24V16H18V6H6V16H0Z'/%3E%3Cpath d='M8 8H16V18H24V24H0V18H8Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0H24V16H18V6H6V16H0Z'/%3E%3Cpath d='M8 8H16V18H24V24H0V18H8Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.ix__shine i {
  position: absolute; left: -10%; right: -10%; top: 0; height: 38%; opacity: 0; will-change: transform, opacity;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0));
}

.ix__word {
  display: flex; font-family: Mulish, sans-serif; font-size: calc(22px * var(--s)); font-weight: 400;
  letter-spacing: 0.26em; color: var(--text, #FBF8F6); line-height: normal; white-space: nowrap;
}
.ix__word i { font-style: normal; display: inline-block; opacity: 0; will-change: transform, opacity, filter; }

/* porte d'entrée : « Entrer » au centre, avant l'intro (js/intro.js) */
.ix__gate {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  cursor: pointer; opacity: 0; transition: opacity .9s cubic-bezier(.22, .9, .24, 1);
}
.ix__gate.is-on { opacity: 1; }
.ix__gate.is-out { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
/* un simple mot, sans cadre : il s'éclaire au survol */
.ix__enter {
  border: 0; background: none; padding: 16px 24px 16px 30px; cursor: pointer; color: rgba(251, 248, 246, 0.82);
  font: 300 15px/1 Mulish, sans-serif; letter-spacing: 0.5em; text-transform: uppercase;
  transition: color .4s ease, text-shadow .5s ease;
}
.ix__enter:hover, .ix__enter:focus-visible { outline: none; color: #FBF8F6; text-shadow: 0 0 22px rgba(193, 38, 61, 0.6); }

/* lien discret pour passer */
.ix__skip {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  border: 0; background: none; padding: 10px 14px; cursor: pointer;
  font: 400 10px/1 Mulish, sans-serif; letter-spacing: 0.42em; text-transform: uppercase; color: #6F6A68;
  opacity: 0; transition: opacity .8s ease 1.2s, color .3s;
}
html.intro .ix.is-on .ix__skip { opacity: 1; }
.ix__skip:hover { color: #B9B2AE; }
html.intro .ix.is-out .ix__skip { opacity: 0; transition: opacity .3s ease; pointer-events: none; }

@media (max-width: 699px) {
  /* proportions mobiles de .hdr__logo : svg 30 · écart 7 · texte 16 */
  .ix__logo { --s: 1.9; gap: calc(7px * var(--s) * 4 / 3); }
  .ix__word { font-size: calc(16px * var(--s) * 4 / 3); }
  .ix__glow { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
}

/* ---------- la page pendant l'intro, puis son arrivée ---------- */
html.intro .hdr__logo { opacity: 0; }
html.intro .hdr__tag, html.intro .hdr__menu, html.intro .hdr__son,
html.intro .home .hero > * {
  opacity: 0; translate: 0 14px; filter: blur(6px);
}
html.intro .home .arc--h1 { opacity: 0; }
html.intro.ix-reveal .hdr__tag, html.intro.ix-reveal .hdr__menu, html.intro.ix-reveal .hdr__son,
html.intro.ix-reveal .home .hero > * {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity 1.1s cubic-bezier(.22, .9, .24, 1), translate 1.3s cubic-bezier(.22, .9, .24, 1), filter 1.1s cubic-bezier(.22, .9, .24, 1);
}
html.intro.ix-reveal .home .hero__title { transition-delay: .05s; }
html.intro.ix-reveal .home .hero__rule { transition-delay: .25s; }
html.intro.ix-reveal .home .hero__base { transition-delay: .35s; }
html.intro.ix-reveal .hdr__tag, html.intro.ix-reveal .hdr__menu, html.intro.ix-reveal .hdr__son { transition-delay: .45s; }
html.intro.ix-reveal .home .arc--h1 { opacity: 1; transition: opacity 1.8s ease .15s; }