/* Eye of Light – v9: the v8 journey landing onto the v4.4 paper page and its painted lotus.
   Loaded after main.css / v4.css / v43.css. This file owns:
   · the journey overlay (captions, hairline progress, hint, short skip button);
   · the reveal hand-off, where the flight's night canvas fades away and the paper page arrives;
   · the small v8 components main.css does not carry (dayarc, wheel rings/dots, footer CTA). */

:root { --ease: cubic-bezier(.22, .61, .36, 1); }

/* the flight's canvas: fixed behind everything, gone once the paper takes over */
#space { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; background: #050103; transition: opacity 2.4s ease; }
#space.parted { opacity: 0; pointer-events: none; }

/* while the journey flies, the paper page is held back */
body.is-journey .site-header, body.is-journey #main, body.is-journey .site-footer { opacity: 0; transform: translateY(18px); }
body.is-journey { overflow: hidden; height: 100vh; }
body.is-journey::before { opacity: 0; }   /* the paper itself waits until the landing */
.site-header, #main, .site-footer { transition: opacity 1.6s ease .2s, transform 1.6s var(--ease) .2s, background .3s, box-shadow .3s, backdrop-filter .3s; }
body.revealed .site-header, body.revealed #main, body.revealed .site-footer { opacity: 1; transform: none; }
body.revealed::before { opacity: 1; transition: opacity 2.2s ease; }

/* ──────────────────────────────── the journey overlay */
#journey { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#journey.gone { opacity: 0; transition: opacity 1.4s ease; }
.journey__caption {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0;
  font: italic 500 clamp(20px, 3.4vw, 40px)/1.28 var(--serif); letter-spacing: .04em;
  color: #FFF3E2; text-align: center; max-width: min(86vw, 780px); text-wrap: balance;
  text-shadow: 0 0 26px rgba(236, 200, 111, .4), 0 2px 22px rgba(0, 0, 0, .8);
  opacity: 0; transition: opacity .7s ease;
}
.journey__caption.on { opacity: 1; }
.journey__caption small { display: block; margin-top: .7em; font: 400 12.5px/1.5 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: #D9A98A; }
.journey__bar { position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%); width: min(280px, 52vw); height: 1px; background: rgba(236, 200, 111, .18); overflow: hidden; }
.journey__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #C8102E, var(--gold-2)); box-shadow: 0 0 12px rgba(236, 200, 111, .8); }
.journey__hint {
  position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); margin: 0;
  font: 400 10.5px/1.4 var(--sans); letter-spacing: .4em; text-transform: uppercase; color: #C79A76;
  opacity: .85; animation: hintPulse 3.2s ease-in-out infinite;
}
@keyframes hintPulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }

/* the way out: small and quiet, bottom right (specificity matches body.v43 .hero__skip in v43.css) */
body.v4 .hero__skip, body.v43 .hero__skip {
  position: fixed; right: 20px; bottom: 22px; top: auto; z-index: 95;
  background: transparent; color: #E8C79E; border: 1px solid rgba(236, 200, 111, .35);
  font: 400 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all .35s ease;
}
body.v4 .hero__skip:hover, body.v43 .hero__skip:hover { color: #FFF4E4; border-color: var(--gold-2); box-shadow: 0 0 24px rgba(236, 200, 111, .28); }
.hero__skip[hidden] { display: none; }

/* travel again, under the verse */
.journey__replay { background: none; border: 0; cursor: pointer; margin-top: 18px; padding: 6px 2px;
  font: 400 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--accent-ink, #9C0A22); transition: color .3s; }
.journey__replay:hover { color: var(--accent, #C8102E); }

/* ──────────────────────────────── components the v8 page draws but main.css does not carry */

/* the arc of the day */
.dayarc { width: 100%; height: auto; overflow: visible; }
.dayarc .arc { fill: none; stroke: url(#arcGrad); stroke-width: 2.4; stroke-linecap: round; }
.dayarc .horizon { stroke: rgba(156, 10, 34, .25); stroke-width: 1; }
.dayarc .sun { fill: #E07B12; filter: drop-shadow(0 0 8px rgba(224, 123, 18, .8)); }
.dayarc .moon { fill: #7E94B8; filter: drop-shadow(0 0 6px rgba(126, 148, 184, .7)); }
.dayarc text { fill: var(--ink-2); font: 400 11.5px var(--sans); }

/* the graha wheel */
.wheel .ring { fill: none; stroke: rgba(176, 124, 46, .4); }
.wheel .spoke { stroke: rgba(176, 124, 46, .2); }
.wheel .glyph { fill: var(--ink-2); font: 400 14px var(--sans); text-anchor: middle; dominant-baseline: central; }
.wheel .dot { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(200, 151, 58, .8)); }
.wheel .dot--moon { fill: #8CA8C8; filter: drop-shadow(0 0 5px rgba(140, 168, 200, .8)); }
.wheel .dot--sun { fill: #E07B12; filter: drop-shadow(0 0 7px rgba(224, 123, 18, .9)); }

/* the closing invitation */
.site-footer__close { display: block; margin-top: 12px; color: var(--gold-2); font-size: 11.5px;
  letter-spacing: .28em; text-transform: uppercase; text-shadow: 0 0 16px rgba(200, 151, 58, .4); }
.footer-cta { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-night); }
.footer-cta .btn { margin: 0; }
.footer-cta__line { margin: 0; font: italic 400 clamp(15px, 1.8vw, 18px)/1.5 var(--serif); color: #E7D3C4; }

/* the skip-to-content link */
.skip-link { position: fixed; left: -999px; top: 10px; z-index: 200; background: var(--ivory); color: var(--accent-ink, #9C0A22); padding: 10px 18px; }
.skip-link:focus { left: 10px; }

/* an error line in the place sheet, where there is no .field around it */
.error { color: var(--bad, #C8102E); font-size: .9rem; margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .site-header, #main, .site-footer { transition: none; }
  .journey__caption { transition: opacity .3s ease; }
  .journey__hint { animation: none; }
}