/* Arrival only: every layer shares one crop; the original film supplies all movement. */
body.arrival-page { overflow: hidden; background: #14251b; color: #fff2d4; }
.arrival { position: relative; width: 100%; height: 100svh; height: 100dvh; min-height: 280px; isolation: isolate; }
.arrival__scene { position: absolute; inset: 0; overflow: hidden; background: #14251b; filter: sepia(.2) saturate(1.18) brightness(1.06); }
.arrival__scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, #ffca7138, #eab04a12 48%, #ac641a14); mix-blend-mode: soft-light; }
.arrival__art, .arrival__film, .arrival__arrived { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.arrival__film, .arrival__arrived { opacity: 0; pointer-events: none; }
.arrival__scene[data-frame="ready"] .arrival__film { opacity: 1; }
.arrival__scene[data-state="complete"][data-end-frame="ready"] .arrival__arrived { opacity: 1; }
/* One reversible golden-afternoon grade covers posters and film together.
   The entrance plaque is outside this layer and retains its approved styling. */
.arrival::before { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(to bottom, #1420199c, #14201945 32%, transparent 52%); }
.arrival__intro { position: absolute; z-index: 2; left: 50%; bottom: calc(50% + 86px); transform: translateX(-50%); width: min(780px, calc(100% - 40px)); text-align: center; color: #fff0cf; text-shadow: 0 2px 4px #171b12, 0 0 24px #171b12b3; }
.arrival__intro h1 { margin: 0; font: 400 clamp(32px, 4.4vw, 76px)/1.02 Georgia, "Times New Roman", serif; text-transform: uppercase; letter-spacing: .085em; }
.arrival__intro h1 span { display: block; }
.arrival__intro p { max-width: 700px; margin: 16px auto 0; font: 400 clamp(16px, 1.6vw, 23px)/1.4 Georgia, "Times New Roman", serif; text-wrap: pretty; }
.arrival__welcome { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.arrival__enter {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: min(600px, calc(100% - 32px));
  aspect-ratio: 2170 / 725; min-height: 64px; padding: 0; pointer-events: auto;
  background: transparent; border: 0; border-radius: 22px;
  color: #fff2d4; text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.arrival__sign { position: relative; z-index: 1; display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 5px 8px #0008); transition: filter 180ms ease; }
.arrival__sign-fallback { position: absolute; left: 7%; right: 7%; top: 28%; bottom: 28%; display: grid; place-items: center; background: #20331c; border: 1px solid #bb984b; border-radius: 8px; font: 400 clamp(22px, 3.5vw, 44px)/1 Georgia, serif; }
.arrival__enter:is(:hover, :focus-visible) .arrival__sign { filter: brightness(1.08) drop-shadow(0 0 10px #f5cf764d); }
.arrival__enter:focus-visible { outline: 3px solid #fff4ce; outline-offset: 2px; }
.arrival__error[hidden] { display: none; }
.arrival__error { position: absolute; z-index: 3; top: 12px; left: 16px; right: 16px; text-align: center; background: #14251beb; padding: 12px; }
@media (max-aspect-ratio: 1/1) { .arrival__art, .arrival__film, .arrival__arrived { object-position: 75% 50%; } }
@media (max-width: 600px) {
  .arrival__intro { bottom: calc(50% + 66px); width: calc(100% - 32px); }
  .arrival__intro h1 { font-size: clamp(28px, 8vw, 42px); letter-spacing: .055em; }
  .arrival__intro p { margin-top: 14px; font-size: 16px; line-height: 1.4; }
}
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  .arrival__enter { width: min(440px, calc(100% - 32px)); }
  .arrival__intro { bottom: calc(50% + 64px); width: min(640px, calc(100% - 40px)); }
  .arrival__intro h1 { font-size: 30px; line-height: 1.05; letter-spacing: .05em; }
  .arrival__intro h1 span { display: inline; }
  .arrival__intro p { margin-top: 7px; font-size: 15px; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) { .arrival__sign { transition: none; } }
@media (forced-colors: active) { .arrival__enter { border: 2px solid ButtonText; } }