/* app.css — intro « le cadran qui se trace », chapitres de narration, orbite. */

:root {
  --intro-bg: #0c1116;
  --intro-stroke: #dee6e9;
  --intro-accent: #38c1f2;
}

/* ---------- intro / loader ---------- */
#intro {
  position: fixed;
  inset: 0;
  z-index: 40;
  background-color: var(--intro-bg);
  transition: opacity 1.4s ease-in-out, background-color 1.6s ease-in-out;
}
#intro.is-transparent { background-color: rgba(0, 0, 0, 0); pointer-events: none; }
#intro.is-hidden { opacity: 0; pointer-events: none; }

/* le SVG couvre l'ecran ; le dessin est place par une matrice (voir loader.js) */
#intro-watch {
  position: absolute;
  inset: 0;
  will-change: opacity;
  transition: opacity 0.9s ease-out;
  pointer-events: none;
}
#intro-watch.is-fading { opacity: 0; transition-duration: 1.8s; }
.intro-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.intro-svg .stroke {
  fill: none;
  stroke: var(--intro-stroke);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.92;
}
.intro-svg .bezel { stroke-width: 1.3; }
.intro-svg .gem { stroke-width: 0.9; opacity: 0.7; }
.intro-svg .index-main { stroke-width: 1.8; }
.intro-svg .hand-hour { stroke-width: 2.4; }
.intro-svg .hand-minute { stroke-width: 1.8; }
.intro-svg .hand-second { stroke: var(--intro-accent); stroke-width: 0.9; }

#intro-caption {
  position: absolute;
  left: 50%;
  bottom: 8vh;
  transform: translateX(-50%);
  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(222, 230, 233, 0.55);
  white-space: nowrap;
  transition: opacity 0.6s ease;
}
#intro-caption b { font-weight: 400; color: rgba(222, 230, 233, 0.9); font-variant-numeric: tabular-nums; }
#intro.is-transparent #intro-caption { opacity: 0; }

/* le scroll ne sert qu'a piloter la narration : pas de barre de defilement (elle retrecissait le canvas
   par rapport a innerWidth et decalait le dessin de l'intro de quelques pixels) */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- canvas ---------- */
#webgi-canvas-container > div:has(> svg), body > div[style*="9999"]:has(> svg) { display: none !important; }   /* filigrane du SDK (voir app.js) */
#webgi-canvas-container {
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
#webgi-canvas-container.is-visible { opacity: 1; }
#webgi-canvas { z-index: 0; touch-action: pan-y; cursor: grab; }
#webgi-canvas:active { cursor: grabbing; }
@media (hover: hover) { #webgi-canvas, #webgi-canvas:active { cursor: none; } }

/* ---------- curseur : sphere + trois fleches courbes (remplace le cercle qui s'etirait) ---------- */
#cursor .cursor__orbit,
#cursor.cursor-hover .cursor__orbit, #cursor.cursor-active .cursor__orbit, #cursor.cursor-link .cursor__orbit,
#cursor.cursor-button .cursor__orbit, #cursor.cursor-clickable .cursor__orbit, #cursor.cursor-pulse-3d .cursor__orbit {
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #e6ecef;
  animation: none;
  transform-origin: 50% 50%;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
#cursor .cursor__orbit svg { display: block; width: 100%; height: 100%; }
#cursor .cursor__arrows { transform-origin: 24px 24px; }
/* sur la 3D : les fleches tournent lentement (sens de la narration) */
#cursor.cursor-pulse-3d .cursor__arrows { animation: ll-orbit-spin 6s linear infinite; }
@keyframes ll-orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
/* sur un lien ou un bouton : l'icone se reduit a un point */
#cursor.cursor-link .cursor__orbit, #cursor.cursor-button .cursor__orbit, #cursor.cursor-clickable .cursor__orbit { transform: scale(0.35); opacity: 0.6; }
#cursor.cursor-link .cursor__arrows, #cursor.cursor-button .cursor__arrows, #cursor.cursor-clickable .cursor__arrows { opacity: 0; }
/* pendant un clic-glisser : legerement reduit */
#cursor.cursor-active .cursor__orbit { transform: scale(0.8); }

/* ---------- chapitres ---------- */
#chapters { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#chapters .chapter {
  position: absolute;
  inset: 0;
  height: 100vh;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.6s;
}
#chapters .chapter.is-active { visibility: visible; transition-delay: 0s; }
#chapters .chapter.is-active .glass-card, #chapters .chapter.is-active .glass-card-expanded,
#chapters .chapter.is-active .discover-btn, #chapters .chapter.is-active .btn-container { pointer-events: auto; }
#chapters .chapter:not(.is-active) * { pointer-events: none !important; }
.section-bg { z-index: 1; }
header { pointer-events: none; }
header a, header button, header nav { pointer-events: auto; }

.chapter-index {
  position: fixed;
  right: 3vw;
  bottom: 4vh;
  z-index: 13;
  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: rgba(222, 230, 233, 0.6);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.orbit-hint {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  z-index: 13;
  font-family: Inter, sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(222, 230, 233, 0.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.orbit-hint.is-visible { opacity: 1; }

/* ---------- titre du chapitre 1 (charte Lore & Lumiere : Cormorant Garamond Light, deux lignes,
   sous-titre italique Lagon sous le titre — plus aucun decalage absolu ni chevauchement) ---------- */
#chapters #view1 h2.title-ll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 0.34em;
  padding: 0;
  font-family: 'Cormorant Garamond', 'Serena Watch', serif;
  font-weight: 300;
  font-size: clamp(56px, 7.2vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: #e6ecef;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  text-align: left;
}
#chapters #view1 h2.title-ll span,
#chapters #view1 h2.title-ll em {
  position: static;
  top: auto;
  left: auto;
  width: auto !important;
  height: auto;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-shadow: inherit;
  background: none !important;
}
#chapters #view1 h2.title-ll .line { display: block; white-space: nowrap; }
#chapters #view1 h2.title-ll .amp { font-style: italic; color: var(--intro-accent); }
#chapters #view1 h2.title-ll .sub {
  display: block;
  margin-top: 0.16em;
  padding-left: 0.05em;
  font-style: italic;
  font-size: 0.31em;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--intro-accent);
}
#chapters #view1 .section-text { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  #intro, #intro-watch, #webgi-canvas-container { transition-duration: 0.01s; }
}
@media (max-width: 900px) {
  .chapter-index { right: 6vw; }
  #chapters #view1 h2.title-ll { font-size: clamp(48px, 15vw, 96px) !important; align-items: center; text-align: center; margin-bottom: 0.4em; }
  #chapters #view1 h2.title-ll .sub { display: block; font-size: 0.34em; top: auto; left: auto; margin: 0.16em auto 0; }
}