/* Wasem Works — intro + crossfade home blend */

/* Don't lock document scroll — overlay already covers the page (Info-like scroll after intro) */
html.ww-intro-pending,
html.ww-intro-animating {
  overscroll-behavior: none;
}

/* Cover flash before overlay mounts */
html.ww-intro-pending:not(.ww-intro-ready)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: var(--ww-bg, #fff);
  pointer-events: none;
}

.ww-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.ww-intro__bg {
  position: absolute;
  inset: 0;
  background: var(--ww-bg);
  opacity: 1;
  will-change: opacity;
}

.ww-intro__veil {
  position: absolute;
  inset: 0;
  background: var(--ww-bg);
  opacity: 0.55;
  pointer-events: none;
  will-change: opacity;
}

.ww-intro__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: normal;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  line-height: normal;
  text-transform: none;
  text-align: left;
  color: var(--ww-intro-fg, #d8d8d8);
  white-space: nowrap;
  opacity: 1;
  filter: blur(0);
  will-change: opacity, filter;
}

html[data-theme="dark"] {
  --ww-intro-fg: #3a3a3a;
}

html[data-theme="light"],
:root {
  --ww-intro-fg: #d8d8d8;
}

.ww-intro__char {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  opacity: 0.001;
  filter: blur(10px);
  will-change: opacity, filter;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ww-intro.is-in .ww-intro__char {
  opacity: 1;
  filter: blur(0);
}

/* —— Exit dissolve (driven by classes; long ease-in-out crossfade) —— */

.ww-intro.is-exit-text .ww-intro__text {
  opacity: 0;
  filter: blur(10px);
  transition:
    opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    filter 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ww-intro.is-exit-bg .ww-intro__bg {
  opacity: 0;
  transition: opacity 1.85s cubic-bezier(0.4, 0, 0.2, 1);
}

.ww-intro.is-exit-bg .ww-intro__veil {
  opacity: 0;
  transition: opacity 2.15s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

/*
  Crossfade: home content rises as the curtain falls.
  Same duration / easing as the veil for a true blend.
*/
html.ww-intro-animating:not(.ww-intro-ready) #page {
  opacity: 0;
}

html.ww-intro-ready:not(.ww-intro-revealing) #page .site-header,
html.ww-intro-ready:not(.ww-intro-revealing) #page .site-main {
  opacity: 0;
}

html.ww-intro-revealing #page .site-header,
html.ww-intro-revealing #page .site-main {
  opacity: 1;
  transition: opacity 1.85s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ww-intro__bg,
  .ww-intro__veil,
  .ww-intro__text,
  .ww-intro__char,
  html.ww-intro-revealing #page .site-header,
  html.ww-intro-revealing #page .site-main {
    transition: none !important;
  }
}