/* Hero airplane window with real photographs.
   The photo shifts with the cursor (--px, --py from -0.5 to 0.5), the shade follows --shade (0 open, 1 closed). */

/* ---------- Hero: copy left, window right on wide screens ---------- */
@media (min-width: 1024px) {
  .hero > .container {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center; gap: var(--spacing-600);
  }
  .hero .hero-copy { justify-items: start; text-align: left; padding-top: 0; }
  .hero .hero-title { margin-inline: 0; max-width: 620px; }
  .hero .hero-actions { justify-content: flex-start; }
  .hero .window-stage { margin-top: 0; }
}

.window-stage {
  position: relative;
  display: grid; justify-items: center;
  margin-top: var(--spacing-700);
  --px: 0; --py: 0;
}

/* ---------- Bezel ---------- */
.window {
  --w: clamp(280px, 30vw, 420px);
  position: relative;
  width: var(--w); aspect-ratio: 360 / 500;
  padding: calc(var(--w) * 0.075);
  border-radius: 46% / 34%;
  background: linear-gradient(160deg, #F7F2EA 0%, #E6DED2 55%, #D3C9BB 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    inset 0 -10px 24px rgba(80, 50, 30, 0.16),
    0 40px 80px rgba(0, 0, 0, 0.32);
  transform: perspective(1200px) rotateY(calc(var(--px) * 6deg)) rotateX(calc(var(--py) * -4deg));
  transition: transform 600ms var(--ease);
  z-index: 1;
}
.window::before {
  content: ''; position: absolute; inset: calc(var(--w) * 0.045);
  border-radius: 46% / 34%;
  background: linear-gradient(180deg, #D6CCBF, #EFE9E0);
  box-shadow: inset 0 6px 14px rgba(60, 35, 20, 0.26);
}

/* ---------- Pane and photographs ---------- */
.window-pane {
  position: relative; width: 100%; height: 100%;
  border-radius: 44% / 32%;
  overflow: hidden;
  background: #1A1410;
  isolation: isolate;
  touch-action: none;
}
.window-pane::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6;
  box-shadow: inset 0 0 0 2px rgba(40, 20, 10, 0.35), inset 0 18px 40px rgba(10, 5, 0, 0.4), inset 0 -12px 30px rgba(10, 5, 0, 0.28);
}
.layer { position: absolute; inset: -20px; pointer-events: none; transition: translate 600ms var(--ease); }
.layer-scene { translate: calc(var(--px) * -16px) calc(var(--py) * -10px); }

.scene {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity 800ms var(--ease);
}
.scene.is-active { opacity: 1; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translateX(0); } to { transform: scale(1.12) translateX(-2%); } }
.scene-wing { object-position: 42% 50%; }
.scene-lhr { object-position: 56% 70%; filter: sepia(0.28) saturate(0.85) brightness(0.9) contrast(1.05); }
.scene-dxb { object-position: 46% 50%; filter: sepia(0.22) saturate(0.95) brightness(0.92) contrast(1.06); }
.scene-sin { object-position: 70% 50%; filter: saturate(0.9) contrast(1.05); }
.scene-jfk { object-position: 42% 60%; filter: saturate(0.9) contrast(1.05); }

/* One grade over every view: warm at the top, deeper at the bottom */
.photo-grade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 170, 90, 0.22) 0%, rgba(255, 150, 90, 0.06) 45%, rgba(20, 10, 5, 0.32) 100%);
  mix-blend-mode: soft-light;
}

.glare {
  position: absolute; inset: -20%; pointer-events: none; z-index: 4;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.12) 44%, transparent 56%, transparent 62%, rgba(255, 255, 255, 0.06) 68%, transparent 74%);
  translate: calc(var(--px) * 40px) calc(var(--py) * 20px);
  transition: translate 600ms var(--ease);
}

/* ---------- Shade ---------- */
.shade {
  --shade: 1;
  position: absolute; inset: 0; z-index: 5;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 22px, rgba(120, 90, 60, 0.12) 22px 23px, rgba(255, 255, 255, 0.5) 23px 24px),
    linear-gradient(180deg, #EFE7DB, #E2D7C8);
  box-shadow: 0 10px 24px rgba(10, 5, 0, 0.35);
  translate: 0 calc((var(--shade) - 1) * (100% - 40px));
  transition: translate 700ms var(--ease);
  cursor: grab;
}
.shade.is-dragging { transition: none; cursor: grabbing; }
.shade-handle {
  position: absolute; left: 50%; bottom: 10px; translate: -50% 0;
  width: 72px; height: 24px; padding: 0;
  border: 0; border-radius: 9999px; cursor: grab;
  background: transparent;
  display: grid; place-items: center;
}
.shade-handle span {
  width: 56px; height: 10px; border-radius: 9999px;
  background: linear-gradient(180deg, #CFC3B2, #B9AB98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 4px rgba(60, 35, 20, 0.3);
  transition: transform 300ms var(--ease);
}
.shade-handle:hover span { transform: scaleX(1.1); }
.shade-handle:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

/* ---------- Route plate under the window ---------- */
.route-plate {
  position: relative; z-index: 2;
  width: min(420px, 100%);
  margin-top: calc(-1 * var(--spacing-600));
  padding: var(--spacing-200) var(--spacing-300);
  display: grid; gap: var(--spacing-75);
  border-radius: var(--radius-16);
  border: 1px solid var(--border-primary);
}
.plate-top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-100); }
.plate-best { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-75) var(--spacing-100); }
.plate-best [data-plate-pts] { margin-left: auto; }
.plate-best .badge { white-space: nowrap; }
.window-hint { margin-top: var(--spacing-200); display: flex; align-items: center; gap: var(--spacing-50); }

.section-head-center { text-align: center; justify-items: center; margin-inline: auto; }
.section-preview { padding-top: var(--spacing-400); }

@media (max-width: 640px) {
  .window { --w: min(78vw, 300px); }
  .route-plate { padding: var(--spacing-200); }
}

@media (prefers-reduced-motion: reduce) {
  .window, .layer, .glare, .shade, .scene { transition: none !important; }
  .scene.is-active { animation: none !important; }
}
/* Paused by the board toggle (WCAG 2.2.2): the photo drift stops too */
.window-stage.is-paused .scene.is-active { animation-play-state: paused; }