/* Intro animation (home page, once a day) + logo curtain between pages.
   Which one runs is decided in <head> before first paint (see Base.astro);
   behaviour lives in public/js/transitions.js. */

/* ---------- Intro ---------- */
.fx-intro { display: none; }
html.fx-intro-on, html.fx-intro-on body { overflow: hidden; }
html.fx-intro-on .fx-intro {
  display: flex; position: fixed; inset: 0; z-index: 2000;
  align-items: center; justify-content: center;
  background: #161616; /* exact background of the encoded video */
  transition: opacity .45s ease;
}
.fx-intro video { width: min(720px, 88vw); height: auto; display: block; }
.fx-intro.is-done { opacity: 0; pointer-events: none; }
.fx-intro-skip {
  position: absolute; right: 28px; bottom: 26px; padding: 10px 4px;
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); cursor: pointer;
  font: 500 11px/1 Montserrat, sans-serif; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,.55); transition: color .3s ease, border-color .3s ease;
}
.fx-intro-skip:hover, .fx-intro-skip:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }

/* ---------- Logo curtain ---------- */
.fx-curtain {
  position: fixed; inset: 0; z-index: 1999; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--background);
  transform: translateY(-100%);
  transition: transform .6s cubic-bezier(.76, 0, .24, 1);
}
.fx-curtain::after { /* thin gold line on the leading edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent) 70%, transparent); opacity: .5;
}
.fx-curtain img { width: 180px; height: auto; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .5s ease; }
.fx-curtain.is-down { transform: none; pointer-events: auto; }
.fx-curtain.is-down img { opacity: 1; transform: none; transition-delay: .25s; }
/* Arriving from an internal link: start covered, then lift (transitions.js removes the class) */
html.fx-curtain-in .fx-curtain { transform: none; transition: none; }
html.fx-curtain-in .fx-curtain img { opacity: 1; transform: none; transition: none; }

@media (max-width: 600px) { .fx-curtain img { width: 140px; } .fx-intro-skip { right: 16px; bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .fx-curtain { display: none; } }