/* Original artwork coordinates are shared by the background, object masks and
   screen accents. Keep the approved pixels and composition, not recreated objects. */
.dynamic-hero {
  position: relative;
  isolation: isolate;
  min-height: max(760px, min(960px, 100svh));
  padding-top: 0;
  background: #020817;
  --scene-x: 0px;
  --scene-y: 0px;
}
.dynamic-hero .lounge-hero-shell {
  width: min(1420px, calc(100% - 80px));
  min-height: inherit;
}
.dynamic-hero .lounge-hero-grid {
  min-height: inherit;
  grid-template-areas: "message .";
  grid-template-columns: minmax(0, 470px) 1fr;
}
.dynamic-hero .lounge-hero-message {
  position: relative;
  z-index: 2;
  padding: 100px 0 60px;
  pointer-events: none;
}
.dynamic-hero .lounge-hero-actions { pointer-events: auto; }
.dynamic-hero .lounge-hero-copy h1 {
  font-size: clamp(2.8rem, 4.35vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.dynamic-hero .lounge-hero-eyebrow { margin-bottom: 20px; }
.dynamic-hero .lounge-hero-lead { max-width: 420px; }
.dynamic-hero .lounge-hero-actions .button { min-height: 50px; border-radius: 9px; }
.dynamic-hero .dynamic-scene {
  position: absolute;
  inset: 76px 0 0;
  display: block;
  width: 100%;
  height: calc(100% - 76px);
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #020817;
  aspect-ratio: auto;
}
.scene-artwork {
  position: absolute;
  /* Fit the full source height below the header: never crop the airplane tail
     or phone navigation to fill a wide desktop viewport. */
  width: auto;
  height: 100%;
  aspect-ratio: 1586 / 992;
  max-width: none;
  left: auto;
  right: 0;
  top: 0;
  transform: none;
  mask-image: linear-gradient(90deg, transparent, #000 18%);
}
.scene-layered { opacity: 0; }
.dynamic-scene [data-hero-plate] { display: none; }
.dynamic-hero[data-layered="true"] .scene-layered { opacity: 1; }
.scene-phone-parallax { transform: translate(calc(var(--scene-x) * .4), calc(var(--scene-y) * .4)); }
.scene-airplane-parallax { transform: translateY(calc(var(--scene-y) * -.3)); }
.scene-wallet-parallax { transform: translate(calc(var(--scene-x) * .9), calc(var(--scene-y) * .7)); }
.scene-terminal-parallax { transform: translate(calc(var(--scene-x) * .55), calc(var(--scene-y) * .5)); }
.scene-receipt-parallax { transform: translate(calc(var(--scene-x) * 1.2), calc(var(--scene-y) * .9)); }
.scene-notification, .scene-terminal-signal, .scene-airplane-beacon { opacity: 0; }
.scene-controls {
  position: absolute;
  z-index: 3;
  right: max(24px, calc((100vw - 1420px) / 2));
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.scene-preview-label { color: #e0e7f2; font-size: .7rem; text-shadow: 0 1px 5px #000; }
.scene-motion-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid #73849c;
  border-radius: 24px;
  background: #081322;
  color: #fff;
  font: inherit;
  font-size: .75rem;
  cursor: pointer;
}
.scene-motion-control[hidden] { display: none; }
.scene-motion-control:disabled { cursor: default; }
.scene-motion-control:focus-visible,
.dynamic-hero .button:focus-visible { outline: 3px solid #9dceff; outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .scene-phone-motion { animation: original-phone-breathe 10s ease-in-out infinite; }
  .scene-wallet-motion { animation: original-wallet-breathe 12s ease-in-out infinite; }
  .scene-airplane-motion { animation: original-airplane-forward 18s ease-out both; }
  .scene-terminal-motion { animation: original-terminal-breathe 9s ease-in-out infinite; transform-origin: 1290px 502px; }
  .scene-receipt-motion { animation: original-receipt-lift 8s ease-in-out infinite; transform-origin: 1240px 550px; }
  .scene-airplane-beacon { animation: original-airplane-beacon 4s ease-in-out infinite; }
  .scene-feed-motion { animation: original-offer-focus 14s ease-in-out infinite; transform-origin: 961px 561px; }
  .scene-shopping-motion { animation: original-shopping-focus 11s ease-in-out infinite; transform-origin: 1053px 434px; }
  .scene-notification { animation: original-notification 9s ease-in-out infinite; }
  .scene-terminal-signal { animation: original-terminal 10s ease-out infinite; transform-origin: 1332px 396px; }
  .scene-animated { animation-play-state: paused; }
  .dynamic-hero[data-layered="true"][data-motion="running"] .scene-animated { animation-play-state: running; }
}
@keyframes original-phone-breathe {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1px, -4px); }
}
@keyframes original-wallet-breathe {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-5px, -9px); }
}
/* Nose faces right: one forward pass, then park. No reverse loop or hidden reset. */
@keyframes original-airplane-forward {
  from { transform: translate(-55px, 0); }
  to { transform: translate(0, 0); }
}
@keyframes original-terminal-breathe {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(2px, -5px) rotate(.5deg); }
}
@keyframes original-receipt-lift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(-3px, -7px) rotate(-1deg); }
}
@keyframes original-airplane-beacon {
  0%, 12%, 28%, 100% { opacity: 0; }
  18% { opacity: .9; }
}
@keyframes original-offer-focus {
  0%, 18%, 88%, 100% { transform: scale(1); }
  45%, 62% { transform: scale(1.018); }
}
@keyframes original-shopping-focus {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes original-notification {
  0%, 10%, 35%, 100% { opacity: 0; }
  20% { opacity: .8; }
}
@keyframes original-terminal {
  0%, 45%, 75%, 100% { opacity: 0; transform: scale(.85); }
  50% { opacity: .45; }
  65% { opacity: 0; transform: scale(1.45); }
}
@media (max-width: 1100px) {
  .dynamic-hero { min-height: auto; }
  .dynamic-hero .lounge-hero-shell { width: min(100% - 40px, 680px); }
  .dynamic-hero .lounge-hero-grid { grid-template-areas: "message" "product"; grid-template-columns: 1fr; }
  .dynamic-hero .lounge-hero-message { padding: 38px 0 30px; }
  .dynamic-hero .lounge-hero-copy h1 { max-width: 640px; font-size: clamp(2.7rem, 6.5vw, 3.7rem); }
  .dynamic-hero .lounge-hero-lead { max-width: 560px; }
  .dynamic-hero .dynamic-scene {
    position: relative;
    inset: auto;
    grid-area: product;
    height: auto;
    aspect-ratio: 1.15;
    border-radius: 14px;
    margin-bottom: 24px;
  }
  .scene-artwork { width: 153%; height: auto; left: auto; right: -1%; top: 0; transform: none; mask-image: none; }
  .scene-controls { right: 14px; bottom: 12px; left: 14px; justify-content: space-between; gap: 6px; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .dynamic-hero { padding-top: 76px; }
}
@media (max-width: 540px) {
  .dynamic-hero .lounge-hero-shell { width: calc(100% - 32px); }
  .dynamic-hero .lounge-hero-message { padding: 28px 0 26px; }
  .dynamic-hero .lounge-hero-copy h1 { font-size: 2.7rem; }
  .dynamic-hero .lounge-hero-eyebrow { font-size: .65rem; margin-bottom: 16px; }
  .dynamic-hero .lounge-hero-lead { font-size: .95rem; margin-bottom: 24px; }
  .dynamic-hero .lounge-hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dynamic-hero .lounge-hero-actions .button { padding: 0 11px; font-size: .8rem; }
  .dynamic-hero .dynamic-scene { aspect-ratio: .92; }
  .scene-artwork { width: 170%; right: -8%; }
  .scene-preview-label { font-size: .6rem; }
  .scene-motion-control { font-size: .65rem; padding-inline: 10px; }
}
@media (max-width: 360px) {
  .dynamic-hero .lounge-hero-copy h1 { font-size: 2.4rem; }
  .dynamic-hero .lounge-hero-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dynamic-hero .scene-animated { animation: none; }
  .scene-phone-parallax, .scene-airplane-parallax, .scene-wallet-parallax,
  .scene-terminal-parallax, .scene-receipt-parallax { transform: none; }
  .dynamic-hero .button { transition: none; }
}