/* The painted sky stays fixed; only the transparent airplane layer animates. */
.kv[data-app-id="hello-stranger"] {
  isolation: isolate;
  background-image: url('/assets/hello-sky-clean-v1-B55wKxHl.webp');
}
.kv[data-app-id="hello-stranger"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(5,33,78,.64), rgba(5,33,78,.5) 30%, rgba(5,33,78,0) 64%);
}
.kv[data-app-id="hello-stranger"] > .kv__content,
.kv[data-app-id="hello-stranger"] > .kv__media { z-index: 2; }
.hello-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  --flight-state: paused;
}
.hello-sky[data-running="true"] { --flight-state: running; }
.hello-sky__flight {
  z-index: var(--depth-order);
  position: absolute;
  inset: 0;
  animation: hello-flight-x var(--duration) var(--horizontal-ease) var(--delay) infinite both;
  animation-play-state: var(--flight-state);
  will-change: transform;
}
.hello-sky__rise {
  position: absolute;
  inset: 0;
  animation: hello-flight-y var(--duration) var(--vertical-ease) var(--delay) infinite both;
  animation-play-state: var(--flight-state);
  will-change: transform;
}
.hello-sky__plane {
  position: relative;
  display: block;
  width: clamp(153px, 22.1vw, 357px);
  aspect-ratio: 1619 / 971;
  transform-origin: 50% 50%;
  filter: hue-rotate(var(--plane-hue)) saturate(var(--plane-saturation)) blur(var(--plane-blur));
  animation: hello-distance var(--duration) cubic-bezier(.16,.36,.46,1) var(--delay) infinite both;
  animation-play-state: var(--flight-state);
  will-change: transform;
}
.hello-sky__plane::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/assets/hello-plane-gold-v1-CyAr2aUi.webp') center / contain no-repeat;
  animation: hello-bank var(--bank-duration) ease-in-out var(--delay) infinite alternate;
  animation-play-state: var(--flight-state);
}
@keyframes hello-flight-x {
  from { transform: translate3d(var(--from-x), 0, 0); }
  to { transform: translate3d(var(--to-x), 0, 0); }
}
@keyframes hello-flight-y {
  from { transform: translate3d(0, var(--from-y), 0); }
  to { transform: translate3d(0, var(--to-y), 0); }
}
@keyframes hello-bank {
  from { transform: rotate(calc(-1 * var(--bank-angle))); }
  to { transform: rotate(var(--bank-angle)); }
}
@keyframes hello-distance {
  0% { transform: scale(var(--near-scale)) rotate(-4deg); }
  100% { transform: scale(var(--far-scale)) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hello-sky { display: none; }
  .kv[data-app-id="hello-stranger"] { background-image: url('/assets/hello-paper-plane-sky-background-B-lo8PuI.webp'); }
}

/* Fit the unmodified app capture inside the existing 600 × 1100 device artwork. */
.hello-device { position: relative; }
.hello-device__screen {
  position: absolute;
  left: 12.5%; right: 12.5%; top: 5.73%; bottom: 5.73%;
  overflow: hidden;
  border-radius: 15% / 7%;
  background: #fff;
}
.hello-device__screen img { width: 100%; height: 100%; object-fit: cover; }
.hello-device > .hello-device__island {
  position: absolute;
  inset: 0;
  clip-path: inset(7% 38% 89.2% 38% round 999px);
  pointer-events: none;
}