/* ==========================================================================
   NewLine Break — intro
   The page performs its own name. A line runs, hits a break, steps down, and
   the screen splits along that break to reveal the hero.

   Gated on `.js` and on `.intro--play`, which script.js only adds when motion
   is welcome and the intro has not already run this session. Without either,
   nothing here renders and the page is simply the page.
   ========================================================================== */

.intro {
  display: none;
}

.js .intro.intro--play {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  /* The halves leave along Z as well as Y, so the split reads as a sheet
     tearing and tipping away rather than two rectangles sliding off. */
  perspective: 1400px;
  perspective-origin: 55% 57%;
}

/* The two halves of the screen, clipped along the stepped break. */
.intro__half {
  position: absolute;
  inset: 0;
  background: var(--ground);
  /* Both halves hinge about the break line rather than their own centres,
     which is what keeps the seam closed as they tip. */
  transform-origin: 55% 57%;
  will-change: transform;
}

.intro__half--top {
  clip-path: polygon(0 0, 100% 0, 100% 64%, 55% 64%, 55% 50%, 0 50%);
  animation: intro-part-top 0.66s cubic-bezier(0.6, 0, 0.15, 1) 1s both;
}

.intro__half--bottom {
  clip-path: polygon(0 50%, 55% 50%, 55% 64%, 100% 64%, 100% 100%, 0 100%);
  animation: intro-part-bottom 0.66s cubic-bezier(0.6, 0, 0.15, 1) 1s both;
}

/* Each half hinges on the break line it was cut along, so the two rotations
   are equal and opposite and the seam stays a seam the whole way out. */
@keyframes intro-part-top {
  to { transform: translate3d(-6vw, -102vh, -240px) rotateX(14deg); }
}

@keyframes intro-part-bottom {
  to { transform: translate3d(6vw, 102vh, -240px) rotateX(-14deg); }
}

/* The line itself. Three composited segments rather than a stroked path, so
   the draw is a transform and never a layout or paint. */
.intro__seg {
  position: absolute;
  background: var(--break);
  will-change: transform;
}

.intro__seg--a {
  left: 0;
  top: 50%;
  width: 55%;
  height: 2px;
  transform-origin: left center;
  animation: intro-grow-x 0.42s cubic-bezier(0.16, 0.8, 0.3, 1) 0.1s both,
             intro-clear 0.45s linear 0.95s both;
}

.intro__seg--b {
  left: 55%;
  top: 50%;
  width: 2px;
  height: 14%;
  transform-origin: center top;
  animation: intro-grow-y 0.28s cubic-bezier(0.7, 0, 0.3, 1) 0.52s both,
             intro-clear 0.45s linear 0.95s both;
}

.intro__seg--c {
  left: 55%;
  top: calc(64% - 2px);
  width: 45%;
  height: 2px;
  transform-origin: left center;
  animation: intro-grow-x 0.36s cubic-bezier(0.16, 0.8, 0.3, 1) 0.74s both,
             intro-clear 0.45s linear 0.95s both;
}

@keyframes intro-grow-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes intro-grow-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes intro-clear {
  to { opacity: 0; }
}

/* The break node. Lands hard, once, on the corner where the line steps down. */
.intro__node {
  position: absolute;
  left: 55%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -6px 0 0 -6px;
  background: var(--break);
  animation: intro-node 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) 0.46s both,
             intro-clear 0.45s linear 0.95s both;
}

@keyframes intro-node {
  0%   { transform: scale(0); }
  45%  { transform: scale(2.1); background: var(--text); }
  100% { transform: scale(1); background: var(--break); }
}

/* The wordmark rides the upper half so the split feels like one object
   tearing rather than two rectangles moving. */
.intro__word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -160%);
  font-family: var(--mono);
  font-size: clamp(0.75rem, 0.6rem + 0.5vw, 0.9rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--fog-dim);
  white-space: nowrap;
  animation: intro-word 0.5s var(--ease) 0.62s both,
             intro-clear 0.4s linear 0.92s both;
}

@keyframes intro-word {
  from { opacity: 0; letter-spacing: 0.9em; }
  to   { opacity: 1; letter-spacing: 0.42em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .intro.intro--play { display: none; }
}