/* ── Açılış (crystal-globe intro) — homepage-only styles. Loaded ONLY by index.html.
   styles.css (shared across all pages) is left untouched. ── */

/* Full-screen layers behind the page content */
/* Yatay taşmayı kesin engelle (100vw scrollbar taşması / geniş hero başlığı) */
html, body { overflow-x: hidden; max-width: 100%; }

#acilis-fallback,
#acilis-canvas,
#acilis-black {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border: 0;
  pointer-events: none;
}

/* Static-still fallback (used when WebGL is unavailable / reduced-motion / low FPS).
   Dark by default; the still image is applied by JS only if it loads (graceful if missing). */
#acilis-fallback {
  z-index: 0;
  background-color: #0B0A09;
  background-repeat: no-repeat;
  background-position: center 32%;
  background-size: cover;
}

/* Live WebGL canvas — sits above the static fallback, behind the page content */
#acilis-canvas {
  z-index: 1;
  display: block;
}

/* Initial black fade-in overlay (mirrors the app's 400ms BLACK phase).
   Transparent by default so the static fallback shows through when not animating;
   only the animating path starts it opaque, then JS fades it to 0. */
#acilis-black {
  z-index: 2;
  background: #000;
  opacity: 0;
  transition: opacity 60ms linear;
}
html.acilis-anim #acilis-black { opacity: 1; }

/* The page content sits above all globe layers */
.wrap {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Header (logo + language selector) and footer stay visible from first paint. */

/* Hero AUTEUR wordmark — Cinzel champagne with a warm glow, echoing the app title screen.
   (Only the big <h1>; the small top-left .logo keeps its Cormorant styling from styles.css.) */
main h1 {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  color: #E8DCC4;
  letter-spacing: 0.22em;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-shadow: 0 0 18px rgba(240, 200, 120, 0.35), 0 2px 20px rgba(0, 0, 0, 0.75);
}
/* Mobilde Cinzel + geniş harf aralığı taşmasın (0.22em → 0.1em) */
@media (max-width: 520px) {
  main h1 { letter-spacing: 0.1em; }
}

/* Legibility of hero text over the live globe */
main .lede,
main .note {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8);
}

/* Koyu demo üzerindeki üst başlık (logo + dil) ve kahraman metni AÇIK kalır —
   global kâğıt paleti --ink'i koyulaştırdı; bu bölge "koyu kalanlar" içinde. */
.top .logo { color: var(--dark-ink); }
.lang button { color: var(--dark-ink); }
main .lede,
main .note { color: var(--dark-ink); }

/* While the sequence is animating, the hero starts hidden and merges in at the hold.
   Set synchronously by the head inline script (adds .acilis-anim) BEFORE first paint,
   so there is never a flash of the title before it fades in. */
html.acilis-anim main {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 900ms ease, transform 900ms ease;
}

/* Push the hero into the lower half so the globe has the upper-center area (as in the app,
   where the globe sits high and the wordmark reads below it). */
@media (min-width: 521px) {
  html.acilis-anim main,
  html.acilis-revealed main {
    padding-top: min(40vh, 360px);
  }
}
@media (max-width: 520px) {
  html.acilis-anim main,
  html.acilis-revealed main {
    padding-top: 46vh;
  }
}

/* If the browser never runs JS (or JS errors before deciding), the page still shows
   normally: no .acilis-anim class means main is fully visible by default. */

@media (prefers-reduced-motion: reduce) {
  #acilis-black { transition: none; }
  html.acilis-anim main { transition: none; opacity: 1; transform: none; }
}