/* Starting Page.
   One photograph, edge to edge. Type sits low and centred, with the
   whole upper half left open to the view. */

.starting {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;

  /* The gradient is a fallback for the mood of the reference — warm
     interior on the left, cool sky on the right. The photograph sits
     on top of it once dropped into public/images/. */
  background-color: #14100d;

  /* The video carries the scene now. This gradient only shows if it fails
     to load — the poster covers the gap before the first frame decodes.
     Do NOT point anything here at '/starting page.jpg': that is the
     finished mockup with the logo, headline, tagline, arrow and caption
     printed into the pixels, which draws every word twice. */
  background-image: linear-gradient(105deg, #241a12 0%, #191512 38%, #1d2029 72%, #2b3040 100%);
  background-size: cover;
  background-position: center;
}

.starting__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* Phone stand-in for the scroll-scrubbed sky film: the curtain timeline
   fades this over the photograph so dawn still turns to dusk, as a single
   compositor-cheap opacity tween. Deep blue-black rather than pure black so
   the darkened frame reads as night, not as a failed load. Only rendered on
   phones (StartingPage.ts). */
.starting__night {
  position: absolute;
  inset: 0;
  background: #070a12;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* Keeps the type legible over the brighter parts of any photograph.
   Deliberately gentle — the reference is already dark where the text sits. */
.starting__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0) 34%,
    rgba(0, 0, 0, 0.12) 62%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

/* ---- Logo ------------------------------------------------------- */
/* The one element that persists into the Landing Page. It is never
   re-created or cross-faded; the curtain will carry this exact node. */

.starting__logo {
  position: absolute;
  top: clamp(22px, 3.4vh, 42px);
  left: clamp(24px, 2.7vw, 44px);
  font-size: clamp(19px, 1.9vw, 30px);
  font-weight: 200;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

/* ---- Centre stack ----------------------------------------------- */

.starting__content {
  position: absolute;
  left: 0;
  right: 0;
  top: 59.7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.starting__welcome {
  margin: 0;
  font-size: clamp(10px, 0.88vw, 14px);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.starting__wordmark {
  margin: clamp(14px, 2.2vh, 26px) 0 0;
  font-size: clamp(44px, 6.1vw, 98px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;

  /* Tracking adds space after the final letter too; this pulls the
     block back to true optical centre. */
  text-indent: var(--track-display);
}

.starting__tagline {
  margin: clamp(14px, 2.4vh, 28px) 0 0;
  font-size: clamp(14px, 1.27vw, 20px);
  font-weight: 300;
  letter-spacing: var(--track-body);
  color: rgba(255, 255, 255, 0.92);
}

.starting__arrow {
  margin: clamp(26px, 4.4vh, 52px) 0 0;
  width: clamp(40px, 3.7vw, 58px);
  height: clamp(40px, 3.7vw, 58px);
  color: rgba(255, 255, 255, 0.62);
}

.starting__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.starting__scroll {
  margin: clamp(20px, 3.6vh, 42px) 0 0;
  font-size: clamp(10px, 0.81vw, 13px);
  font-weight: 300;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* ---- Entrance ---------------------------------------------------- */
/* Same vocabulary as the curtain: rise, short distance, shared curve.
   Ordered downward so it reads as one settling motion, not five events. */

.starting__logo,
.starting__welcome,
.starting__wordmark,
.starting__tagline,
.starting__arrow,
.starting__scroll {
  opacity: 0;
  transform: translateY(18px);
  animation: starting-rise 1s var(--ease) forwards;
}

.starting__logo      { animation-delay: 0.15s; }
.starting__welcome   { animation-delay: 0.30s; }
.starting__wordmark  { animation-delay: 0.38s; }
.starting__tagline   { animation-delay: 0.46s; }
.starting__arrow     { animation-delay: 0.54s; }
.starting__scroll    { animation-delay: 0.62s; }

@keyframes starting-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .starting__logo,
  .starting__welcome,
  .starting__wordmark,
  .starting__tagline,
  .starting__arrow,
  .starting__scroll {
    animation: none;
    opacity: 1;
    transform: none;
  }
}