/* The Shanghaier: four finite, progressively filled arrival studies.
   Include after the main site stylesheet. Content is always visible by default. */

.arrival-art-frame,
.arrival-shutters {
  display: none;
  pointer-events: none;
}

.arrival-playing .hero-art {
  position: relative;
  isolation: isolate;
}

.arrival-playing .hero-art-image {
  transform-origin: 50% 58%;
  will-change: transform, opacity, clip-path;
}

.arrival-playing .arrival-art-frame,
.arrival-playing .arrival-shutters {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  contain: paint;
}

.arrival-art-frame svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--arrival-stone, #686a69);
  stroke-width: 1.2;
}

.arrival-art-frame .arrival-portal-line,
.arrival-art-frame .arrival-measure-line {
  vector-effect: non-scaling-stroke;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.arrival-art-frame .arrival-measure-line {
  stroke-width: .7;
  opacity: .42;
}

.arrival-shutters i {
  display: block;
  position: absolute;
  background: var(--arrival-paper, var(--paper, #f3eee6));
  pointer-events: none;
}

.arrival-playing .site-header {
  animation: shanghaier-header-in 580ms 20ms both;
}

.arrival-playing .hero-eyebrow {
  animation: shanghaier-type-in 600ms 80ms both;
}

.arrival-playing .hero-title {
  animation: shanghaier-type-in 850ms 350ms both;
}

.arrival-playing .hero-copy {
  animation: shanghaier-type-in 700ms 650ms both;
}

.arrival-playing .hero-actions {
  animation: shanghaier-type-in 650ms 1050ms both;
}

.arrival-playing .hero-caption {
  animation: shanghaier-caption-in 550ms 1300ms both;
}

/* 01. THRESHOLD — 2700 ms. The crop first follows a stepped stone portal. */
.arrival-playing[data-arrival="threshold"] .hero-art-image {
  animation: shanghaier-threshold-image 1600ms 220ms both;
}

.arrival-playing[data-arrival="threshold"] .arrival-art-frame {
  animation: shanghaier-frame-life 2700ms both;
}

.arrival-playing[data-arrival="threshold"] .arrival-portal-line {
  stroke-dasharray: 1;
  animation: shanghaier-line-draw 1250ms 40ms both;
}

.arrival-playing[data-arrival="threshold"] .arrival-measure-line {
  stroke-dasharray: 1;
  animation: shanghaier-line-draw 1100ms 450ms both;
}

.arrival-playing[data-arrival="threshold"] .arrival-shutters {
  display: none;
}

/* 02. INK TO CITY — 2800 ms. Existing artwork resolves behind a precise drawing. */
.arrival-playing[data-arrival="ink"] .hero-art-image {
  animation: shanghaier-ink-image 1700ms 350ms both;
}

.arrival-playing[data-arrival="ink"] .arrival-art-frame {
  animation: shanghaier-ink-frame-life 2800ms both;
}

.arrival-playing[data-arrival="ink"] .arrival-portal-line {
  stroke-dasharray: 1;
  animation: shanghaier-line-draw 1050ms 0ms both;
}

.arrival-playing[data-arrival="ink"] .arrival-measure-line {
  stroke-dasharray: 1;
  animation: shanghaier-line-draw 1000ms 230ms both;
}

.arrival-playing[data-arrival="ink"] .hero-blueprint {
  animation: shanghaier-ink-blueprint 2800ms both;
}

.arrival-playing[data-arrival="ink"] .hero-title {
  animation-delay: 700ms;
  animation-duration: 800ms;
}

.arrival-playing[data-arrival="ink"] .hero-copy {
  animation-delay: 1000ms;
}

.arrival-playing[data-arrival="ink"] .hero-actions {
  animation-delay: 1350ms;
}

.arrival-playing[data-arrival="ink"] .hero-caption {
  animation-delay: 1800ms;
}

.arrival-playing[data-arrival="ink"] .arrival-shutters {
  display: none;
}

/* 03. LANE BY LANE — 2650 ms. Five clean paper shutters reveal one intact image. */
.arrival-playing[data-arrival="lanes"] .hero-art-image {
  animation: shanghaier-lanes-image 1700ms both;
}

.arrival-playing[data-arrival="lanes"] .arrival-art-frame {
  animation: shanghaier-lanes-frame-life 2650ms both;
}

.arrival-playing[data-arrival="lanes"] .arrival-portal-line {
  opacity: 0;
}

.arrival-playing[data-arrival="lanes"] .arrival-measure-line {
  stroke-dasharray: 1;
  animation: shanghaier-line-draw 1150ms 100ms both;
}

.arrival-playing[data-arrival="lanes"] .arrival-shutters {
  animation: shanghaier-shutters-life 2650ms both;
}

.arrival-playing[data-arrival="lanes"] .arrival-shutters i {
  inset-block: 0;
  width: 20.2%;
  transform-origin: 50% 0;
  animation: shanghaier-lane-shutter 1100ms var(--arrival-delay) both;
}

.arrival-playing[data-arrival="lanes"] .arrival-shutters i:nth-child(1) {
  left: 0;
  --arrival-delay: 120ms;
}

.arrival-playing[data-arrival="lanes"] .arrival-shutters i:nth-child(2) {
  left: 20%;
  --arrival-delay: 230ms;
}

.arrival-playing[data-arrival="lanes"] .arrival-shutters i:nth-child(3) {
  left: 40%;
  --arrival-delay: 340ms;
}

.arrival-playing[data-arrival="lanes"] .arrival-shutters i:nth-child(4) {
  left: 60%;
  --arrival-delay: 450ms;
}

.arrival-playing[data-arrival="lanes"] .arrival-shutters i:nth-child(5) {
  left: 80%;
  --arrival-delay: 550ms;
}

.arrival-playing[data-arrival="lanes"] .hero-title {
  animation-duration: 620ms;
}

.arrival-playing[data-arrival="lanes"] .hero-copy {
  animation-delay: 600ms;
  animation-duration: 620ms;
}

.arrival-playing[data-arrival="lanes"] .hero-actions {
  animation-delay: 850ms;
  animation-duration: 550ms;
}

.arrival-playing[data-arrival="lanes"] .hero-caption {
  animation-delay: 1600ms;
}

/* 04. MORNING UNFOLDS — 2750 ms. Broad architectural planes open quietly. */
.arrival-playing[data-arrival="morning"] .hero-art-image {
  animation: shanghaier-morning-image 1700ms 150ms both;
}

.arrival-playing[data-arrival="morning"] .arrival-art-frame {
  animation: shanghaier-morning-frame-life 2750ms both;
}

.arrival-playing[data-arrival="morning"] .arrival-portal-line {
  opacity: 0;
}

.arrival-playing[data-arrival="morning"] .arrival-measure-line {
  stroke-dasharray: 1;
  animation: shanghaier-line-draw 1300ms 100ms both;
}

.arrival-playing[data-arrival="morning"] .arrival-shutters {
  animation: shanghaier-shutters-life 2750ms both;
}

.arrival-playing[data-arrival="morning"] .arrival-shutters i {
  left: 0;
  width: 100%;
  height: 33.5%;
  transform-origin: 50% 0;
  animation: shanghaier-morning-plane 1350ms var(--arrival-delay) both;
}

.arrival-playing[data-arrival="morning"] .arrival-shutters i:nth-child(1) {
  top: 0;
  --arrival-delay: 150ms;
}

.arrival-playing[data-arrival="morning"] .arrival-shutters i:nth-child(2) {
  top: 33.3%;
  transform-origin: 50% 100%;
  --arrival-delay: 260ms;
}

.arrival-playing[data-arrival="morning"] .arrival-shutters i:nth-child(3) {
  top: 66.6%;
  --arrival-delay: 350ms;
}

.arrival-playing[data-arrival="morning"] .arrival-shutters i:nth-child(4) {
  inset: 0 0 0 auto;
  width: 9%;
  height: 100%;
  transform-origin: 100% 50%;
  animation: shanghaier-morning-upright 1000ms 700ms both;
}

.arrival-playing[data-arrival="morning"] .arrival-shutters i:nth-child(5) {
  display: none;
}

.arrival-playing[data-arrival="morning"] .hero-title {
  animation-delay: 450ms;
  animation-duration: 950ms;
}

.arrival-playing[data-arrival="morning"] .hero-copy {
  animation-delay: 750ms;
  animation-duration: 850ms;
}

.arrival-playing[data-arrival="morning"] .hero-actions {
  animation-delay: 1250ms;
}

.arrival-playing[data-arrival="morning"] .hero-caption {
  animation-delay: 1550ms;
}

@keyframes shanghaier-header-in {
  from { opacity: .35; }
  to { opacity: 1; }
}

@keyframes shanghaier-type-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes shanghaier-caption-in {
  from { opacity: 0; transform: translate3d(0, 5px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes shanghaier-line-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes shanghaier-threshold-image {
  0% {
    opacity: .45;
    transform: translate3d(0, 8px, 0);
    clip-path: polygon(12% 100%, 12% 100%, 20% 100%, 20% 100%, 80% 100%, 80% 100%, 88% 100%, 88% 100%);
  }
  62% {
    opacity: 1;
    clip-path: polygon(10% 100%, 10% 18%, 18% 18%, 18% 9%, 82% 9%, 82% 18%, 90% 18%, 90% 100%);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    clip-path: polygon(0 100%, 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 100%);
  }
}

@keyframes shanghaier-frame-life {
  0% { opacity: 0; }
  12% { opacity: .8; }
  65% { opacity: .8; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes shanghaier-ink-image {
  0% { opacity: 0; transform: scale(1.018); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes shanghaier-ink-frame-life {
  0% { opacity: .15; }
  18% { opacity: .85; }
  66% { opacity: .85; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes shanghaier-ink-blueprint {
  0% { opacity: 0; }
  24% { opacity: .65; }
  55% { opacity: .65; }
  100% { opacity: 0; }
}

@keyframes shanghaier-lanes-image {
  from { opacity: .4; }
  to { opacity: 1; }
}

@keyframes shanghaier-lane-shutter {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); }
}

@keyframes shanghaier-shutters-life {
  0%, 75% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes shanghaier-lanes-frame-life {
  0% { opacity: 0; }
  22% { opacity: .55; }
  60% { opacity: .55; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes shanghaier-morning-image {
  from { opacity: .5; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes shanghaier-morning-plane {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); }
}

@keyframes shanghaier-morning-upright {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes shanghaier-morning-frame-life {
  0% { opacity: 0; }
  15% { opacity: .5; }
  65% { opacity: .5; }
  100% { opacity: 0; visibility: hidden; }
}

.arrival-playing .site-header,
.arrival-playing .hero-eyebrow,
.arrival-playing .hero-title,
.arrival-playing .hero-copy,
.arrival-playing .hero-actions,
.arrival-playing .hero-caption,
.arrival-playing .hero-art-image,
.arrival-playing .arrival-shutters i {
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .arrival-playing .site-header,
  .arrival-playing .hero-eyebrow,
  .arrival-playing .hero-title,
  .arrival-playing .hero-copy,
  .arrival-playing .hero-actions,
  .arrival-playing .hero-caption,
  .arrival-playing .hero-art-image,
  .arrival-playing .hero-blueprint,
  .arrival-playing .arrival-art-frame,
  .arrival-playing .arrival-shutters,
  .arrival-playing .arrival-shutters i {
    animation: none !important;
  }

  .arrival-playing .arrival-art-frame,
  .arrival-playing .arrival-shutters {
    display: none;
  }
}