/* ==========================================================================
   ANIMATIONS — every transition passes through here
   Reveal states are driven by JS adding .is-in (see js/reveal.js)
   ========================================================================== */

/* ---------- Reveal primitives ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 1.25s var(--ease-silk),
    transform 1.25s var(--ease-silk),
    filter 1.25s var(--ease-silk);
  filter: blur(6px);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Line-by-line typography reveal: each child masked and pushed */
[data-reveal-lines] .line { overflow: hidden; display: block; }
[data-reveal-lines] .line > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition:
    transform 1.4s var(--ease-silk),
    opacity 1.1s var(--ease-silk);
}
[data-reveal-lines].is-in .line > span {
  transform: none;
  opacity: 1;
}
[data-reveal-lines].is-in .line:nth-child(2) > span { transition-delay: 0.12s; }
[data-reveal-lines].is-in .line:nth-child(3) > span { transition-delay: 0.24s; }
[data-reveal-lines].is-in .line:nth-child(4) > span { transition-delay: 0.36s; }

/* Word-by-word reveal. JS wraps each word in .word > span (see reveal.js);
   the outer span is the mask, the inner one does the travelling. */
[data-reveal-words] .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* Give descenders somewhere to live inside the mask */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
[data-reveal-words] .word > span {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  opacity: 0;
  transition:
    transform 1.15s var(--ease-silk),
    opacity 0.85s var(--ease-silk);
}
[data-reveal-words].is-in .word > span {
  transform: none;
  opacity: 1;
}

/* Stagger helper for grids */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 110ms); }

/* ---------- Curtain ---------- */
/* One flat colour, split down the middle, drawn back automatically. */
#loader {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
}
#loader.is-gone { visibility: hidden; }

.curtain__half {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;                 /* overlap by a hair so no seam shows */
  background: var(--olive);
  transition: transform 1.9s var(--ease-glide);
  will-change: transform;
}
.curtain__half--l { left: 0; }
.curtain__half--r { right: 0; }

#loader.is-open .curtain__half--l { transform: translate3d(-100%, 0, 0); }
#loader.is-open .curtain__half--r { transform: translate3d(100%, 0, 0); }

/* The seam: a hairline of light down the middle that widens before the
   panels move, so the curtain reads as opening onto something lit. */
.curtain__seam {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  translate: -50% 0;
  background: linear-gradient(180deg,
    transparent 0%, rgba(201,183,141,0.85) 22%, #F0E4C8 50%,
    rgba(201,183,141,0.85) 78%, transparent 100%);
  filter: blur(0.5px);
  opacity: 0;
  transition: opacity 0.9s var(--ease-silk), width 0.9s var(--ease-silk), filter 0.9s;
}
#loader.is-lit .curtain__seam {
  opacity: 1;
  width: 5px;
  filter: blur(2.5px);
}
#loader.is-open .curtain__seam {
  opacity: 0;
  width: 44px;
  filter: blur(9px);
  transition: opacity 1.3s var(--ease-glide), width 1.9s var(--ease-glide), filter 1.9s;
}

/* A thin warm edge on each leading side reads as light behind the curtain */
.curtain__half::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: 0.55;
}
.curtain__half--l::after { right: 0; }
.curtain__half--r::after { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .curtain__half, .curtain__seam { transition-duration: 0.01ms; }
}

/* Living gradient wash used behind quiet sections */
.wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 18% 12%, rgba(168,184,165,0.30), transparent 62%),
    radial-gradient(60% 50% at 84% 78%, rgba(125,152,179,0.24), transparent 66%);
  animation: wash 24s ease-in-out infinite alternate;
}
@keyframes wash {
  from { transform: scale(1) translate3d(0,0,0); opacity: 0.85; }
  to   { transform: scale(1.08) translate3d(0,-2%,0); opacity: 1; }
}

/* Shimmer — used by the attire panels on hover */
@keyframes shimmer {
  from { background-position: -140% 0; }
  to   { background-position: 240% 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-reveal-words] .word > span,
  [data-reveal-lines] .line > span {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .wash { display: none; }
}