/* Atmosphere hero: large product UI over a soft lifestyle background. */

.hero-plane.is-atmosphere {
  /* Clear the brand row + headline — not the copy block’s empty top padding */
  --hero-copy-reserve: clamp(7rem, 17vh, 9.5rem);
  --hero-device-top: clamp(0.75rem, 2.5vh, 1.5rem);
  --hero-device-gap: 0.5rem;
}

.hero-plane.is-atmosphere .hero-plane__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  display: block;
  padding: 0;
  background: #1a2332;
  container-type: size;
}

.hero-plane.is-atmosphere .hero-plane__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      rgba(14, 22, 32, 0.62) 0%,
      rgba(14, 22, 32, 0.28) 32%,
      rgba(14, 22, 32, 0.08) 52%,
      rgba(14, 22, 32, 0.16) 100%
    ),
    linear-gradient(
      180deg,
      rgba(14, 22, 32, 0.12) 0%,
      transparent 32%,
      rgba(14, 22, 32, 0.22) 72%,
      rgba(14, 22, 32, 0.38) 100%
    );
}

.hero-plane.is-atmosphere .hero-plane__photo {
  position: absolute;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 145%;
  object-fit: cover;
  /* Gifts composed on left-center so they stay visible beside the UI */
  object-position: 28% 64%;
  transform: scale(1.06);
  filter: saturate(0.97) brightness(0.94);
  animation: hero-atmosphere-drift 32s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-plane.is-atmosphere .hero-plane__placeholder {
  display: none;
}

/* Product frame — width-first so aspect-ratio matches the UI capture
   (height-first + max-width left empty letterbox below the image). */
.hero-plane.is-atmosphere .hero-plane__device {
  --hero-ui-w: 1440;
  --hero-ui-h: 2150;
  --hero-ui-ratio: var(--hero-ui-w) / var(--hero-ui-h);
  --hero-device-bottom-inset: calc(
    var(--hero-device-top) + var(--hero-copy-reserve) + var(--hero-device-gap)
  );
  --hero-device-viewport-floor: 3.75rem;
  /* max-height: percentages resolve against the hero media height */
  --hero-device-max-h: min(
    calc(100% - var(--hero-device-bottom-inset)),
    calc(100svh - var(--hero-device-bottom-inset) - var(--hero-device-viewport-floor))
  );
  /* width calc must not use % — inside width it resolves against width, not height */
  --hero-device-max-h-for-width: calc(
    100svh - var(--hero-device-bottom-inset) - var(--hero-device-viewport-floor)
  );
  --hero-device-max-w: min(36rem, 54vw);
  display: flex;
  flex-direction: column;
  position: absolute;
  z-index: 2;
  top: var(--hero-device-top);
  right: clamp(1rem, 4vw, 3.25rem);
  bottom: auto;
  width: min(
    var(--hero-device-max-w),
    calc(var(--hero-device-max-h-for-width) * var(--hero-ui-w) / var(--hero-ui-h))
  );
  height: auto;
  max-width: var(--hero-device-max-w);
  max-height: var(--hero-device-max-h);
  aspect-ratio: var(--hero-ui-ratio);
  margin: 0;
  padding: 0.55rem;
  border-radius: 1.25rem;
  background: rgba(247, 249, 251, 0.98);
  box-shadow:
    0 28px 70px rgba(8, 14, 22, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.28);
  transform: none;
  animation: hero-atmosphere-device-in 0.95s var(--ease) 0.16s both;
  overflow: hidden;
}

.hero-plane.is-atmosphere .hero-plane__device-chrome {
  display: none;
}

.hero-plane.is-atmosphere .hero-plane__device-screen {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  border-radius: 0.95rem;
  overflow: hidden;
  background: #eef2f6;
}

.hero-plane.is-atmosphere .hero-plane__device-screen picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-plane.is-atmosphere .hero-plane__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  animation: none;
  transform: none;
}

.hero-plane.is-atmosphere .hero-plane__copy {
  position: relative;
  z-index: 3;
  width: min(100%, 34rem);
  max-width: none;
  padding: clamp(3.5rem, 12vh, 6.5rem) clamp(1.25rem, 4.5vw, 3.25rem)
    clamp(1.5rem, 4.5vh, 2.5rem);
  background: transparent;
  animation: rise-in 0.9s var(--ease) 0.1s both;
}

.hero-plane.is-atmosphere .hero-plane__brand-row {
  margin-bottom: 0.35rem;
}

.hero-plane.is-atmosphere .hero-plane__brand-row .brand-mark {
  width: clamp(2.8rem, 8vw, 3.75rem);
  height: clamp(2.8rem, 8vw, 3.75rem);
  border-radius: 0.8rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.hero-plane.is-atmosphere .hero-plane__brand {
  font-size: clamp(2.75rem, 8vw, 4.35rem);
  letter-spacing: -0.035em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
}

.hero-plane.is-atmosphere .hero-plane__title {
  margin-top: 0.55rem;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
  font-weight: 500;
  max-width: 22rem;
  color: rgba(247, 251, 252, 0.94);
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.hero-plane.is-atmosphere .hero-plane__lead {
  display: none;
}

.hero-plane.is-atmosphere .hero-plane__actions {
  margin-top: 1.35rem;
  gap: 0.75rem;
}

.hero-plane.is-atmosphere .hero-plane__actions .btn--primary {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.hero-plane.is-atmosphere .hero-plane__actions .btn--ghost {
  color: #f4f8fa;
  border-color: rgba(247, 251, 252, 0.42);
  background: rgba(14, 22, 32, 0.22);
  backdrop-filter: blur(8px);
}

@keyframes hero-atmosphere-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.2%, 0, 0); }
}

@keyframes hero-atmosphere-device-in {
  from { opacity: 0; transform: translateY(0.65rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Wide / tablet-desktop product frame — taller capture, aspect-locked */
@media (min-width: 960px) {
  .hero-plane.is-atmosphere {
    /* Title sits on the left — use the right column down to the hero floor */
    --hero-copy-reserve: clamp(1.5rem, 4vh, 2.5rem);
    --hero-device-top: clamp(0.4rem, 1.5vh, 1rem);
  }

  .hero-plane.is-atmosphere .hero-plane__device {
    --hero-ui-w: 1440;
    --hero-ui-h: 2150;
    --hero-device-max-w: min(50rem, 60vw);
    right: clamp(3rem, 6.5vw, 5.75rem);
    width: min(
      var(--hero-device-max-w),
      calc(var(--hero-device-max-h-for-width) * var(--hero-ui-w) / var(--hero-ui-h))
    );
    height: auto;
    padding: 0.6rem;
    border-radius: 1.15rem;
  }

  .hero-plane.is-atmosphere .hero-plane__device-screen {
    border-radius: 0.85rem;
  }
}

@media (min-width: 1280px) {
  .hero-plane.is-atmosphere {
    --hero-copy-reserve: clamp(1.25rem, 3.5vh, 2.25rem);
  }

  .hero-plane.is-atmosphere .hero-plane__device {
    --hero-device-max-w: min(54rem, 64vw);
    width: min(
      var(--hero-device-max-w),
      calc(var(--hero-device-max-h-for-width) * var(--hero-ui-w) / var(--hero-ui-h))
    );
  }

  .hero-plane.is-atmosphere .hero-plane__copy {
    width: min(100%, 32rem);
  }
}

@media (max-width: 959px) {
  .hero-plane.is-atmosphere {
    --hero-copy-reserve: clamp(6.5rem, 15vh, 8.5rem);
    --hero-device-top: clamp(0.5rem, 2vh, 1rem);
  }

  .hero-plane.is-atmosphere .hero-plane__device {
    --hero-ui-w: 780;
    --hero-ui-h: 1165;
    --hero-device-max-w: min(34rem, 58vw);
    width: min(
      var(--hero-device-max-w),
      calc(var(--hero-device-max-h-for-width) * var(--hero-ui-w) / var(--hero-ui-h))
    );
    height: auto;
    right: 0.65rem;
  }
}

@media (max-width: 640px) {
  .hero-plane.is-atmosphere {
    /* LOCKED: approved mobile layout — do not restyle without an explicit ask */
    --hero-copy-reserve: calc(
      clamp(12.75rem, 28vh, 14rem) + env(safe-area-inset-bottom, 0px)
    );
    --hero-device-top: clamp(0.35rem, 1.5vh, 0.75rem);
  }

  .hero-plane.is-atmosphere .hero-plane__copy {
    padding-top: clamp(2rem, 7vh, 3rem);
    width: min(100%, 22rem);
  }

  .hero-plane.is-atmosphere .hero-plane__photo {
    object-position: 70% 58%;
    filter: saturate(0.92) brightness(0.84);
  }

  .hero-plane.is-atmosphere .hero-plane__brand {
    font-size: clamp(2.45rem, 12vw, 3.25rem);
  }

  .hero-plane.is-atmosphere .hero-plane__device {
    --hero-ui-w: 780;
    --hero-ui-h: 1165;
    --hero-device-viewport-floor: 4rem;
    /* ~same screen share as desktop, with a slight bleed off the right edge */
    --hero-device-max-w: min(24rem, 92vw);
    width: min(
      var(--hero-device-max-w),
      calc(var(--hero-device-max-h-for-width) * var(--hero-ui-w) / var(--hero-ui-h))
    );
    height: auto;
    right: clamp(-1.15rem, -3vw, -0.35rem);
    border-radius: 1.15rem;
    padding: 0.4rem;
  }

  .hero-plane.is-atmosphere .hero-plane__device-screen {
    border-radius: 0.85rem;
  }
}

@supports (width: 1cqh) {
  .hero-plane.is-atmosphere .hero-plane__device {
    --hero-device-max-h-for-width: calc(100cqh - var(--hero-device-bottom-inset));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-plane.is-atmosphere .hero-plane__photo {
    animation: none;
    transform: scale(1.06);
  }

  .hero-plane.is-atmosphere .hero-plane__device {
    animation: none;
    transform: none;
  }
}