/* ============ INTRO (the original sequence) ============ */
.intro { --display: 'Editorial New', 'Newsreader', Georgia, serif; --paper: #ECE7DC; --accent: #B5915C; --muted-low: rgba(236,231,220,.42); --gutter: var(--g); }
  .intro {
    position: fixed;
    inset: 0;
    background: #0A0908;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
  }
  .intro.is-out { animation: introExit 1.4s cubic-bezier(.7,0,.3,1) forwards; }
  @keyframes introExit {
    0%   { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
  }

  /* Subtle vignette so the centered text has weight */
  .intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(10,9,8,0.6) 100%);
    pointer-events: none;
  }

  /* Three sequential phrases */
  .intro-phrase {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.5vw, 19px);
    color: var(--paper);
    opacity: 0;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.4;
    max-width: 80vw;
    z-index: 2;
  }
  .intro-phrase-1 { animation: phraseInOut 2.3s ease 0.3s forwards; }
  .intro-phrase-2 { animation: phraseInOut 2.3s ease 2.5s forwards; }
  .intro-phrase-3 { animation: phraseInOut 2.3s ease 4.7s forwards; }
  @keyframes phraseInOut {
    0%   { opacity: 0; transform: translate(-50%, -47%); }
    22%  { opacity: 0.9; transform: translate(-50%, -50%); }
    72%  { opacity: 0.9; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -53%); }
  }

  /* Ensō mark — single rotating brush stroke, then vanish, then rule.
     The pen sweeps 360° while the path draws.
     Circle completes at 8.6s, vanishes 0.25s, rule emerges from center. */
  .intro-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 3;
    animation:
      ensoShow 0.3s ease 7.0s forwards,
      ensoVanish 0.25s ease 8.6s forwards;
  }
  .intro-mark svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: ensoSpin 1.6s cubic-bezier(.4,0,.4,1) 7.0s forwards;
  }
  .intro-mark .enso-path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 56.5;
    stroke-dashoffset: 56.5;
    animation: ensoStroke 1.6s cubic-bezier(.4,0,.4,1) 7.0s forwards;
  }
  @keyframes ensoShow { to { opacity: 1; } }
  @keyframes ensoVanish { from { opacity: 1; } to { opacity: 0; } }
  @keyframes ensoStroke { to { stroke-dashoffset: 0; } }
  @keyframes ensoSpin {
    from { transform: rotate(-90deg); }
    to   { transform: rotate(270deg); }
  }

  /* The wordmark reveals */
  .intro-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--paper);
    opacity: 0;
    z-index: 2;
    transform-origin: top left;
    animation:
      stageReveal 1.4s cubic-bezier(.2,.7,.2,1) 8.85s forwards,
      stageMorph 1.4s cubic-bezier(.6,0,.3,1) 11.8s forwards;
  }
  @keyframes stageReveal {
    0%   { opacity: 0; transform: translate(-50%, -47%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
  }
  /* Morph: shrink to header size and translate to top-left corner.
     Final position must match where .frame-mark sits inside .frame-top.
     .frame-top has padding 22px var(--gutter), so target ~22px down, ~gutter from left. */
  @keyframes stageMorph {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 1;
      top: 18px;
      left: var(--g);
      transform: translate(0, 0) scale(0.26);
    }
  }
  .intro-top, .intro-bot {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.3vw, 30px);
    letter-spacing: 0.24em;
    line-height: 1.2;
    text-transform: uppercase;
    margin-right: -0.24em;
    animation: wordmarkVanish 0.7s ease 11.8s forwards;
  }
  @keyframes wordmarkVanish {
    0%   { opacity: 1; }
    50%  { opacity: 0.3; }
    100% { opacity: 0; }
  }
  .intro-est {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--muted-low);
    margin-top: 22px;
    opacity: 0;
    animation:
      estFade 1.2s ease 9.6s forwards,
      estVanish 0.6s ease 11.8s forwards;
  }
  @keyframes estVanish {
    to { opacity: 0; }
  }

  /* The replacement mark — "vskygroup" — fades in at the top-left where the wordmark lands */
  .intro-morph-target {
    position: absolute;
    top: 18px;
    left: var(--g);
    font-family: var(--grotesk);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.02em;
    color: var(--paper);
    opacity: 0;
    z-index: 3;
    animation: morphTargetFade 0.6s ease 12.7s forwards;
  }
  .intro-morph-target .v { color: var(--bronze); }
  @keyframes morphTargetFade {
    to { opacity: 1; }
  }
  @keyframes estFade {
    to { opacity: 1; }
  }
  body.is-locked { overflow: hidden; }