/* Site v2 — global styles, custom cursor, page transitions */

html, body { margin: 0; padding: 0; overflow-x: hidden; cursor: none; }
body { background: #02050C; min-height: 100vh; }

/* Custom cursor — HUD circle */
.cursor-ring {
  position: fixed; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--azure-glow);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease-out), height .25s var(--ease-out),
              background .25s, border-color .25s;
  box-shadow: 0 0 18px rgba(0,200,255,0.45), inset 0 0 8px rgba(0,200,255,0.25);
  mix-blend-mode: screen;
}
.cursor-dot {
  position: fixed; width: 4px; height: 4px; border-radius: 50%;
  background: var(--lotus-cyan);
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--lotus-cyan);
}
.cursor-ring.hover { width: 56px; height: 56px; border-color: var(--lotus-cyan);
  background: rgba(127,231,255,0.06); }
@media (hover: none) {
  html, body { cursor: auto; }
  .cursor-ring, .cursor-dot { display: none; }
}

/* Cosmic background — fixed, layered */
.cosmic-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0,150,255,0.35) 0%, rgba(0,40,120,0.12) 40%, transparent 75%),
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(40,80,180,0.18) 0%, transparent 65%),
    linear-gradient(180deg, #000509 0%, #02060F 55%, #03102A 100%);
}

/* Subtle CRT scanlines */
.cosmic-bg::after {
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, rgba(0,200,255,0.025) 0 1px, transparent 1px 4px);
  opacity: 0.5; mix-blend-mode: overlay;
}

/* HUD viewport corners */
.hud-vp { position: fixed; width: 32px; height: 32px; border-color: var(--azure-glow);
          border-style: solid; z-index: 60; opacity: 0.45; pointer-events: none; }
.hud-vp.tl { top:14px; left:14px; border-width:1px 0 0 1px; }
.hud-vp.tr { top:14px; right:14px; border-width:1px 1px 0 0; }
.hud-vp.bl { bottom:14px; left:14px; border-width:0 0 1px 1px; }
.hud-vp.br { bottom:14px; right:14px; border-width:0 1px 1px 0; }

/* Page transition: portal sweep */
@keyframes routeIn {
  from { opacity: 0; transform: translateY(20px) scale(0.99); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.route { animation: routeIn calc(var(--motion-speed, 1) * 0.7s) var(--ease-out) both; }

@keyframes portalSweep {
  0% { opacity: 0; clip-path: circle(0% at 50% 50%); }
  100% { opacity: 1; clip-path: circle(120% at 50% 50%); }
}
.route--portal { animation: portalSweep calc(var(--motion-speed, 1) * 0.9s) var(--ease-out) both; }

/* HUD chrome elements */
.hud-bracket { color: var(--azure-glow); position: absolute; pointer-events: none; }
.hud-bracket.tl { top:0; left:0; border-top:1px solid; border-left:1px solid; width:14px; height:14px; }
.hud-bracket.tr { top:0; right:0; border-top:1px solid; border-right:1px solid; width:14px; height:14px; }
.hud-bracket.bl { bottom:0; left:0; border-bottom:1px solid; border-left:1px solid; width:14px; height:14px; }
.hud-bracket.br { bottom:0; right:0; border-bottom:1px solid; border-right:1px solid; width:14px; height:14px; }

a, button { cursor: none; }
button { font-family: inherit; }

/* Selection */
::selection { background: rgba(0, 200, 255, 0.32); color: #fff; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Body class for typography mode */
body.typo-script .typo-flex-title { font-family: var(--font-script); font-style: normal; }
body.typo-serif .typo-flex-title { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* Letter-by-letter reveal */
@keyframes letterIn { from { opacity: 0; transform: translateY(0.3em); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
.letter-reveal > span { display: inline-block; opacity: 0; animation: letterIn calc(var(--motion-speed, 1) * 0.8s) var(--ease-out) both; }

/* Sacred line drawing */
@keyframes drawLine { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.draw-on { stroke-dasharray: 1000; stroke-dashoffset: 1000;
           animation: drawLine calc(var(--motion-speed, 1) * 2s) var(--ease-out) 0.3s both; }

/* Background gradient (full-viewport, fixed) */
.bg-gradient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(0,150,255,0.28) 0%, rgba(0,40,120,0.10) 40%, transparent 75%),
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(40,80,180,0.15) 0%, transparent 65%),
    linear-gradient(180deg, #000509 0%, #02060F 55%, #03102A 100%);
}

/* HUD ambient grid */
.hud-grid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,255,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.18) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%);
}

/* Page transition overlay */
.route-transition {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,200,255,0.08) 0%, rgba(3,6,15,0) 60%);
  opacity: 0; transition: opacity 0.35s var(--ease-out);
}
.route-transition.is-active { opacity: 1; }
.route-transition-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--lotus-cyan), transparent);
  box-shadow: 0 0 16px var(--lotus-cyan), 0 0 32px var(--azure-glow);
  transform: scaleX(0); transform-origin: center;
}
.route-transition.is-active .route-transition-line {
  animation: scanLine 0.42s var(--ease-out) forwards;
}
@keyframes scanLine {
  0% { transform: scaleX(0); opacity: 0; }
  40% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1) translateY(40vh); opacity: 0; }
}

.route.is-leaving { animation: routeOut 0.4s var(--ease-out) forwards; }
@keyframes routeOut {
  to { opacity: 0; transform: translateY(-12px) scale(0.99); filter: blur(4px); }
}

/* Position relative wrapper for app content above bg */
#app { position: relative; z-index: 2; }
nav, footer, .route, [class*="audio"] { position: relative; z-index: 3; }

/* Hero image float — gentle breathing/levitation */
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) scale(1); filter: saturate(1.2) brightness(1.1); }
  50% { transform: translateY(-14px) scale(1.015); filter: saturate(1.3) brightness(1.18); }
}

/* Pulsing glow */
@keyframes pulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.pulse-glow { animation: pulseGlow calc(var(--motion-speed, 1) * 4s) ease-in-out infinite; }

/* Ritual article prose */
.ritual-prose { font-family: var(--font-serif); font-size: 18px; line-height: 1.75; color: var(--text-primary); }
.ritual-prose p { margin: 0 0 22px; text-wrap: pretty; }
.ritual-prose h2 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(28px, 3vw, 38px); color: var(--celeste); margin: 56px 0 20px; letter-spacing: 0; line-height: 1.2; filter: drop-shadow(0 0 12px rgba(0,200,255,0.25)); }
.ritual-prose h3 { font-family: var(--font-display); font-weight: 400; font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lotus-cyan); margin: 40px 0 14px; }
.ritual-prose ul, .ritual-prose ol { margin: 0 0 26px; padding-left: 22px; color: var(--text-secondary); }
.ritual-prose li { margin-bottom: 8px; }
.ritual-prose ul li::marker { color: var(--azure-glow); content: '◆ '; font-size: 10px; }
.ritual-prose ol li::marker { color: var(--azure-glow); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; }
.ritual-prose strong { color: var(--text-primary); font-weight: 500; }
.ritual-prose em { color: var(--celeste); font-style: italic; }
.ritual-prose blockquote { border-left: 2px solid var(--lotus-cyan); padding: 14px 26px; margin: 32px 0; font-family: var(--font-script); font-size: clamp(24px, 2.5vw, 32px); color: var(--celeste); line-height: 1.3; filter: drop-shadow(0 0 12px rgba(0,200,255,0.25)); background: rgba(10,21,53,0.35); }
.ritual-prose a { color: var(--lotus-cyan); text-decoration: none; border-bottom: 1px solid rgba(127,231,255,0.4); }

/* Six portails — version mobile compacte (≤ 768px) */
@media (max-width: 768px) {
  .portal-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .portal-card { min-height: 180px !important; }
  .portal-card-inner { padding: 16px 14px !important; }
  .portal-card-meta { font-size: 8px !important; letter-spacing: 0.22em !important; }
  .portal-card-title { font-size: 26px !important; margin-bottom: 6px !important; }
  .portal-card-sub { font-size: 12px !important; margin-bottom: 10px !important; line-height: 1.35 !important; }
  .portal-card-cta { font-size: 9px !important; letter-spacing: 0.22em !important; }
}

/* Page Livres (004) — version mobile (≤ 768px) */
@media (max-width: 768px) {
  /* Sélecteur des 3 livres : on empile en colonne */
  .book-selector-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-bottom: 32px !important; }
  .book-selector-btn { padding: 14px 16px !important; }
  .book-selector-title { font-size: 16px !important; }

  /* Layout principal : couverture au-dessus, contenu en-dessous */
  .book-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .book-cover-wrap { max-width: 240px; margin: 0 auto; width: 100%; }

  /* Titre & sous-titre du livre */
  .book-content-title { font-size: 28px !important; }
  .book-content-sub { font-size: 14px !important; line-height: 1.55 !important; margin-bottom: 20px !important; }

  /* Chapitres : empilés verticalement pour que le titre soit lisible */
  .book-chapter-btn { flex-wrap: wrap !important; gap: 10px !important; padding: 14px 0 !important; }
  .book-chapter-num { font-size: 10px !important; min-width: 28px !important; }
  .book-chapter-title { font-size: 16px !important; flex: 1 1 auto; }

  /* Encart extrait */
  .book-extract { padding: 20px 18px !important; margin-top: 24px !important; }
  .book-extract-title { font-size: 18px !important; }
  .book-extract-sub { font-size: 13px !important; }
  .book-extract-body { font-size: 15px !important; line-height: 1.65 !important; }
}

/* Page À propos (005) — version mobile (≤ 768px) */
@media (max-width: 768px) {
  /* Intro : empilage en colonne — le texte prend toute la largeur, photo en-dessous */
  .about-intro { grid-template-columns: 1fr !important; gap: 28px !important; }
  .about-intro-photo { max-width: 280px; margin: 0 auto; width: 100%; }
}