/* ═══════════════════════════════════════════════════════════
   Ora Pay — arrival sequence
   A riffle of travel memories, 1970s → 1990s, landing on the
   mark. 6.8s, skippable, once per session, off for reduced motion.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:Space;src:url("../fonts/space-grotesk-500.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:DM;src:url("../fonts/dm-sans-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url("../fonts/dm-sans-500.ttf") format("truetype");font-weight:500;font-display:swap}

.intro{
  --bone:#FFFEF9;
  --azure:#0B3948;
  --coral:#EB5E55;
  --muted:#58676b;
  --ease:cubic-bezier(.22,1,.36,1);
}

.intro{
  position:fixed;inset:0;z-index:900;
  background:var(--azure);
  overflow:hidden;
  opacity:1;transition:opacity .6s var(--ease);
}
.intro[hidden]{display:none}
.intro.is-out{opacity:0;pointer-events:none}
body.intro-lock{overflow:hidden}

/* ───── the gate ───── */
.intro__gate{position:absolute;inset:0;will-change:transform}
.intro__frames{position:absolute;inset:0}
.intro__frame{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;visibility:hidden;
  transform:scale(1.05);
}
.intro__frame.is-on{opacity:1;visibility:visible;transform:none;transition:transform .12s linear}
.intro__frame.is-hold{transition:transform 1.4s cubic-bezier(.33,0,.2,1);transform:scale(1.1)}

/* ───── treatments ───── */
.intro__vig{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(11,57,72,.55) 0%,transparent 26%,transparent 68%,rgba(11,57,72,.75) 100%),
    radial-gradient(125% 92% at 50% 50%,transparent 34%,rgba(11,57,72,.82) 100%);
}
.intro__grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.20;
  background-image:repeating-linear-gradient(to bottom,rgba(11,57,72,.5) 0 1px,transparent 1px 3px);
}
.intro__flash{position:absolute;inset:0;z-index:5;pointer-events:none;background:var(--bone);opacity:0}
.intro__flash.is-lit{animation:introFlash .19s linear}
@keyframes introFlash{0%{opacity:.5}100%{opacity:0}}

/* ───── opening mark ───── */
.intro__lead{
  position:absolute;inset:0;z-index:6;
  display:flex;align-items:center;justify-content:center;
  background:var(--azure);
}
.intro__lead[hidden]{display:none}
.intro__lead img{width:clamp(46px,6vw,74px);height:auto;opacity:.92;
  filter:brightness(0) invert(1)}

/* ───── lockup ───── */
.intro__lockup{
  position:absolute;inset:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;text-align:center;padding:0 24px;
  opacity:0;pointer-events:none;
}
.intro__lockup.is-in{opacity:1}
.intro__lockup::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 66% at 50% 50%,rgba(11,57,72,.96) 0%,rgba(11,57,72,.88) 50%,rgba(11,57,72,.45) 80%,transparent 100%);
}
@media (max-aspect-ratio:1/1){
  .intro__lockup::before{
    background:radial-gradient(95% 48% at 50% 50%,rgba(11,57,72,.96) 0%,rgba(11,57,72,.88) 55%,rgba(11,57,72,.45) 82%,transparent 100%);
  }
}

.intro__mark{
  width:clamp(56px,7vw,86px);height:auto;
  filter:brightness(0) invert(1);
  opacity:0;transform:translateY(14px) scale(.9);
}
.intro__lockup.is-in .intro__mark{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .84s var(--ease);
}

.intro__word{
  position:relative;z-index:0;isolation:isolate;margin:0;
  font-family:Space,"Helvetica Neue",sans-serif;font-weight:500;
  font-size:clamp(2.6rem,9vw,6.2rem);line-height:.92;letter-spacing:-.045em;
  color:var(--bone);
  opacity:0;transform:scale(1.22);
}
.intro__lockup.is-in .intro__word{
  opacity:1;transform:none;
  transition:transform .96s cubic-bezier(.16,1,.3,1) .12s,opacity .48s linear .12s;
}
.intro__word::before,.intro__word::after{content:attr(data-word);position:absolute;inset:0;z-index:-1}
.intro__word::before{color:var(--coral);transform:translate(4px,3px)}
.intro__word::after{color:rgba(255,254,249,.22);transform:translate(-4px,-3px)}

.intro__sweep{
  position:absolute;top:0;bottom:0;width:36%;left:-42%;
  background:linear-gradient(105deg,transparent,rgba(255,254,249,.6),transparent);
  opacity:0;pointer-events:none;mix-blend-mode:screen;
}
.intro__lockup.is-in .intro__sweep{animation:introSweep 1.14s .54s cubic-bezier(.4,0,.2,1) forwards}
@keyframes introSweep{0%{left:-42%;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:106%;opacity:0}}

.intro__line{
  margin:0;font-family:DM,sans-serif;font-weight:500;
  font-size:clamp(.66rem,1.6vw,.82rem);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,254,249,.72);
  opacity:0;transform:translateY(10px);
}
.intro__lockup.is-in .intro__line{
  opacity:1;transform:none;
  transition:opacity .6s .84s var(--ease),transform .6s .84s var(--ease);
}

/* ───── skip ───── */
.intro__skip{
  position:absolute;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:9;
  background:transparent;border:1px solid rgba(255,254,249,.45);border-radius:7px;
  color:var(--bone);cursor:pointer;
  font-family:DM,sans-serif;font-weight:500;font-size:13px;
  letter-spacing:.06em;padding:11px 17px;min-height:42px;
  transition:background .25s,border-color .25s,color .25s;
}
.intro__skip:hover{background:var(--bone);border-color:var(--bone);color:var(--azure)}
.intro__skip:focus-visible{outline:3px solid var(--bone);outline-offset:4px}

/* The subline runs nearly edge to edge on a narrow phone. */
@media (max-width:430px){
  .intro__line{letter-spacing:.18em;padding-inline:18px;line-height:1.5}
  .intro__lockup{gap:20px}
}

@media (prefers-reduced-motion:reduce){ .intro{display:none!important} }