/* ============================================================
   Splash / entry page — logo + single CTA over a full-bleed
   backdrop. Swap .splash-media img for <video> when ready.
   ============================================================ */

.splash{
  min-height:100svh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:clamp(40px,8vh,90px) max(var(--gutter),env(safe-area-inset-left));
}

/* --- backdrop layer (image today, video later) --- */
.splash-media{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}
.splash-media img,
.splash-media video{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{from{transform:scale(1.04)}to{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.splash-media img,.splash-media video{animation:none}}

/* vignette so the mark always reads */
.splash-media::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 0%,rgba(0,0,0,.45) 62%,rgba(0,0,0,.88) 100%),
    linear-gradient(180deg,rgba(0,0,0,.55),transparent 35%,rgba(0,0,0,.75));
}

.splash-in{position:relative;z-index:1;display:grid;justify-items:center;gap:0}
.splash-logo{
  width:min(560px,74vw);
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.65));
  animation:rise .9s var(--ease) both;
}
.splash-tag{
  margin:clamp(18px,3vw,30px) 0 clamp(30px,5vw,46px);
  font-family:var(--ui);
  font-size:clamp(11px,1.9vw,17px);
  font-weight:600;
  letter-spacing:.24em;

  text-transform:uppercase;
  color:var(--gold);
  /* three columns so the middle word sits dead centre under the logo, rather
     than the line as a whole being centred and PRECISION drifting left */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(8px,1.6vw,16px);
  animation:rise .9s .12s var(--ease) both;
}
.splash-tag .w{white-space:nowrap}
.splash-tag .left{justify-self:end}
.splash-tag .right{justify-self:start}
/* the trailing letter-space on the middle word, paid back on its left */
.splash-tag .mid{padding-left:.24em}
.splash-tag i{opacity:.45;font-style:normal}
.splash .btn{
  padding:18px 46px;font-size:14px;letter-spacing:.07em;
  animation:rise .9s .24s var(--ease) both;
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* phones: the tagline must never be the thing that makes the page scroll */
@media (max-width:480px){
  .splash-logo{width:min(560px,78vw)}
  .splash-tag{letter-spacing:.16em;gap:7px;font-size:11px}
  .splash-tag .mid{padding-left:.16em}
  .splash .btn{padding:16px 34px;font-size:13px}
}

/* Portrait screens. The backdrop is a wide landscape frame, so on a tall
   screen it has to be anchored deliberately: the burst sits behind the
   wordmark instead of drifting to the bottom of the screen, and the slow
   zoom is dropped so the crop stays put. */
@media (max-aspect-ratio:3/4){
  .splash-media img,
  .splash-media video{object-position:50% 40%;animation:none;transform:scale(1.02)}
  .splash-media::after{
    background:
      radial-gradient(90% 46% at 50% 40%,transparent 0%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.9) 100%),
      linear-gradient(180deg,rgba(0,0,0,.6),transparent 30%,rgba(0,0,0,.8));
  }
  .splash-in{gap:0;transform:translateY(-2vh)}
}
@media (prefers-reduced-motion:reduce){
  .splash-logo,.splash-tag,.splash .btn{animation:none}
}

/* scroll / enter hint */
.splash-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7C7C85;
}
@media (max-height:620px){.splash-hint{display:none}}