/* Donne son apparence à l'intro animée de l'accueil, dans les deux thèmes.

   Deux calques fixes : l'éclipse, derrière tout le contenu, et le mot « ALTAIRA », au-dessus du bandeau. */

/* Le calque de l'éclipse est derrière tout : les fonds opaques de la page deviennent transparents, et le
   halo se fond dans le pied de page. */
body.altaira-eclipse-on .site,
body.altaira-eclipse-on .content-area,
body.altaira-eclipse-on .page-wrapper,
body.altaira-eclipse-on .altaira-chapter,
body.altaira-eclipse-on .footer-widgets,
body.altaira-eclipse-on .site-footer {
  background: transparent !important;
}

.altaira-eclipse-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.altaira-eclipse {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
  will-change: transform, opacity;
}

.altaira-wordmark {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1001;
  pointer-events: none;
  overflow: visible;
  transform-origin: 0 0;
  will-change: transform;
  transition: opacity 0.35s ease;
}

body.altaira-landed .altaira-wordmark {
  opacity: 0;
}

/* Logo du bandeau masqué dès le premier affichage, tant que le mot n'y est pas arrivé. La classe est posée
   dans <head> par js/intro-init.js ; sans JavaScript elle n'existe pas et le logo reste visible. */
html.altaira-intro-on header img.site-logo {
  transition: opacity 0.35s ease;
}

html.altaira-intro-on body:not(.altaira-landed) header img.site-logo {
  opacity: 0;
}

/* Bandeau mobile de Sydney : non collant par défaut ; fixé sur l'accueil pour que le logo puisse y
   atterrir, comme sur ordinateur. */
@media (max-width: 1024px) {
  body.altaira-eclipse-on .mobile-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--sydney-global-color-6);
  }
}

/* Intro sautée (déjà vue pendant la session, ou animations réduites) : la page démarre sur le hero. */
html.altaira-skip-intro .altaira-intro,
html.altaira-skip-intro .altaira-wordmark {
  display: none !important;
}

html.altaira-skip-intro body header img.site-logo {
  opacity: 1 !important;
}

/* Emplacement de l'éclipse : boîte vide et invisible, où le calque fixe vient se poser.
   .altaira-chapter en tête : bat les largeurs maximales des groupes WordPress « constrained ». */
.altaira-chapter .altaira-eclipse-slot {
  aspect-ratio: 1;
  width: 100%;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile : l'emplacement de l'éclipse du hero passe au-dessus du texte, comme dans les autres chapitres. */
@media (max-width: 781px) {
  .altaira-hero-columns {
    flex-direction: column-reverse;
  }

  .altaira-chapter .altaira-eclipse-slot {
    max-width: 150px;
  }
}

.altaira-scroll-hint {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--sydney-global-color-5);
  margin: 0;
}

.altaira-scroll-hint::after {
  content: '\2193';
  display: block;
  margin-top: 8px;
  font-size: var(--wp--preset--font-size--regular);
  letter-spacing: 0;
}

/* ------------------------------------------------------------ Thème clair : éclipse en tracé plein
   Comme le logo clair de la charte : le dégradé ambre suppose un fond sombre (son halo s'éteint vers le
   noir). Position et échelle ne changent pas, seul le rendu des formes change :
   - le halo (bloom, bloomH, chromo) et les lueurs du mot disparaissent ;
   - les deux traits qui relient l'éclipse au mot (dégradés « lkbmL0..7 » et « lkbmR0..7 ») passent à
     l'encre, au lieu d'être cachés ;
   - le soleil devient un anneau REMPLI de la couleur du fond : un vrai trou laisserait voir les traits
     qui passent dessous ;
   - la lune est un aplat d'encre sur le logo (intro, fidèle à la charte) puis passe à la teinte claire
     --altaira-moon quand l'éclipse glisse derrière le texte (un texte à l'encre sur une lune à l'encre
     deviendrait illisible). Le mélange suit --ae-ink (1 = encre), posé à chaque image par js/eclipse.js ;
     sans script, la lune reste à l'encre ;
   - les lettres deviennent des aplats d'encre. */
:root[data-theme='light'] .altaira-eclipse [fill='url(#bloom)'],
:root[data-theme='light'] .altaira-eclipse [fill='url(#bloomH)'],
:root[data-theme='light'] .altaira-eclipse [fill='url(#chromo)'],
:root[data-theme='light'] .altaira-wordmark [filter='url(#wmsoft)'],
:root[data-theme='light'] .altaira-wordmark [filter='url(#wmwide)'] {
  display: none;
}

:root[data-theme='light'] .altaira-eclipse [id^='lkbmL'] stop,
:root[data-theme='light'] .altaira-eclipse [id^='lkbmR'] stop {
  stop-color: var(--altaira-heading);
}

:root[data-theme='light'] .altaira-eclipse [fill='url(#soleil)'] {
  fill: var(--altaira-body-bg);
  stroke: var(--altaira-heading);
  stroke-width: 7;
}

:root[data-theme='light'] .altaira-eclipse .ae-moon {
  fill: color-mix(in srgb, var(--altaira-heading) calc(var(--ae-ink, 1) * 100%), var(--altaira-moon));
}

:root[data-theme='light'] .altaira-wordmark g[fill='#FAEDD9'] {
  fill: var(--altaira-heading) !important;
}