/* ============================================================
   Curtain + section-to-section cuts + cold-open title card
   ============================================================ */

/* ---- Curtain (full-viewport navy panel) ---- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--c-navy-deep);
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
  display: grid;
  place-items: center;
}

/* Page-transition rise (covers viewport) */
.curtain.is-rising,
.curtain.is-up {
  transform: translateY(0);
  transition: transform 400ms var(--ease-in);
}
.curtain.is-up { pointer-events: auto; }

/* Page-transition drop (slides down below viewport) */
.curtain.is-falling {
  transform: translateY(100%);
  transition: transform 400ms var(--ease-out);
}

/* Cold-open variant: covers viewport instantly on page load */
.curtain--cold-open {
  transform: translateY(0);
  transition: none;
  pointer-events: auto;
}
.curtain--cold-open.is-falling {
  transform: translateY(100%);
  transition: transform 600ms var(--ease-out);
}

/* Wordmark inside the curtain — the title-card moment */
.curtain__mark {
  color: var(--c-bone);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.curtain__mark svg {
  block-size: clamp(48px, 8vw, 88px);
  inline-size: auto;
}
.curtain--cold-open.is-revealed .curtain__mark {
  opacity: 1;
  transform: translateY(0);
}

/* Orange angular corner pinned to the curtain's bottom-left */
.curtain__corner {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: clamp(160px, 22vw, 360px);
  block-size: clamp(50px, 7vw, 110px);
  background: var(--c-orange);
  clip-path: polygon(0 0, calc(100% - 38%) 0, 100% 100%, 0 100%);
  pointer-events: none;
}

/* While transitioning, hide cursor + lock scroll handled via body class */

/* ============================================================
   Cut A — angular corner wipe across section top edge
   (Hero → Services transition; can attach to other transitions later)
   ============================================================ */
.cut-corner {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: clamp(56px, 7vw, 110px);
  background: var(--c-orange);
  clip-path: polygon(0 0, 100% 0, calc(100% - 38%) 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 5;
}
.cut-corner.is-firing {
  animation: cut-corner-wipe 350ms var(--ease-out) forwards;
}
@keyframes cut-corner-wipe {
  0%   { transform: scaleX(0); opacity: 1; }
  60%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ============================================================
   Cut B — full-viewport navy flash (About → Final CTA transition)
   ============================================================ */
.cut-flash {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--c-navy);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}
.cut-flash.is-firing {
  animation: cut-flash-pulse 600ms var(--ease-in-out) forwards;
}
@keyframes cut-flash-pulse {
  0%   { opacity: 0; }
  33%  { opacity: 0.08; }
  66%  { opacity: 0.08; }
  100% { opacity: 0; }
}

/* ============================================================
   Cut C — line draw (defined per motion-feel.md, unused on home)
   ============================================================ */
.cut-line {
  position: fixed;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 1px;
  background: var(--c-navy);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 7000;
}
.cut-line.is-firing { animation: cut-line-draw 420ms var(--ease-out) forwards; }
@keyframes cut-line-draw {
  0%   { transform: scaleX(0); opacity: 1; }
  29%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ============================================================
   Page-transition exit/enter states for <main>
   ============================================================ */
.page-exit {
  opacity: 0;
  transform: translateY(-24px);
  transition: opacity 300ms var(--ease-in), transform 300ms var(--ease-in);
}

@media (prefers-reduced-motion: reduce) {
  .curtain,
  .curtain--cold-open,
  .cut-corner,
  .cut-flash,
  .cut-line,
  .page-exit { display: none !important; }
}