/* Mobile compatibility layer. The legacy export remains the visual reference. */
:root { --mobile-envelope-duration: 520ms; }

[data-testid="envelope-introduction"] {
  contain: layout paint;
}

  [data-testid="envelope-introduction"].mobile-compat-open {
    display: none !important;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--mobile-envelope-duration) ease;
  }

[data-testid="envelope-introduction"].mobile-compat-open > * {
  pointer-events: none;
}

[data-mobile-compat-fallback] {
  position: absolute;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 100;
  min-width: 44px;
  min-height: 44px;
  transform: translateX(-50%);
  padding: .75rem 1.1rem;
  border: 1px solid rgb(255 255 255 / .55);
  border-radius: 999px;
  color: #fff;
  background: rgb(0 0 0 / .42);
  font: inherit;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

@media (max-width: 1024px) {
  /* Safari can briefly expose React's legacy entering state before the
     compatibility click handler runs. In production mobile that state must
     never be painted: it is the source of the full-screen zoom and crash. */
  html.mobile-compat-safe [data-testid="envelope-introduction"][data-state="entering"] {
    display: none !important;
    pointer-events: none !important;
  }

  /* Undo the old generated portrait rotation without modifying generated CSS. */
  html:not(.envelope-active), body:not(.envelope-active) {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
  }
  html, body { max-width: 100%; }
  [data-testid="template-root"] {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    transform: none !important;
    transform-origin: initial !important;
    overflow: visible !important;
  }
  [data-testid="envelope-introduction"] {
    min-height: 100svh;
    height: 100dvh;
    background: transparent !important;
    touch-action: none;
  }
  [data-testid="hero-foreground"] {
    opacity: 1 !important;
  }
  /* The generated envelope controller applies scale(1.006) to the whole
     site-layer while the overlay is active. That moves the hero instead of
     the envelope and causes a visible snap on the first scroll. */
  [data-testid="site-layer"] {
    transform: none !important;
    transition: none !important;
  }
  html.mobile-compat-open [data-testid="site-layer"] {
    pointer-events: auto !important;
  }
  [data-testid="envelope-introduction"] > button {
    bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    min-width: 44px;
    min-height: 44px;
    padding: .75rem 1.1rem !important;
    opacity: 1 !important;
    z-index: 90;
  }
  [data-testid="envelope-introduction"] > div:nth-of-type(1) {
    width: 1200vw !important;
    height: 1200svh !important;
  }
  [data-testid="envelope-introduction"] > div:nth-of-type(2) {
    width: min(90vw, 42rem) !important;
  }
  [data-testid="envelope-introduction"] > div:nth-of-type(3),
  [data-testid="envelope-introduction"] > div:nth-of-type(4) {
    width: max(300vw, 700.37svh) !important;
    height: 300svh !important;
  }
  [data-testid="envelope-introduction"] img {
    max-width: none;
  }
  [data-testid="envelope-introduction"] img[data-mobile-compat-failed="true"] {
    display: none !important;
  }

  /* Keep the first hero frame stable when Safari changes its visual viewport
     as the browser chrome collapses on the first scroll. */
  [data-mobile-compat-hero-frame] {
    width: calc(100vw - 24px) !important;
    height: calc(100svh - 24px) !important;
    transform: none !important;
  }
  [data-mobile-compat-hero-frame] > img {
    transition: none !important;
  }

  /* The generated closed/open state uses enormous source rectangles and then
     scales them down. Keep the exact same visible size with smaller backing
     surfaces before the user enters. This protects the initial paint/reload;
     the explicit animated diagnostic intentionally falls back to the legacy
     geometry once React changes the state to entering. */
  [data-testid="envelope-introduction"][data-state="closed"] > div:nth-of-type(1) {
    width: 200vw !important;
    height: 200svh !important;
    transform: translate3d(-50%, -50%, 0) scale(.5) !important;
  }
  [data-testid="envelope-introduction"][data-state="closed"] > div:nth-of-type(3),
  [data-testid="envelope-introduction"][data-state="closed"] > div:nth-of-type(4) {
    width: max(100vw, 233.46svh) !important;
    height: 100svh !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }
  [data-testid="envelope-introduction"][data-state="open"] > div:nth-of-type(1) {
    width: 104vw !important;
    height: 104svh !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
  }
  [data-testid="envelope-introduction"][data-state="open"] > div:nth-of-type(3),
  [data-testid="envelope-introduction"][data-state="open"] > div:nth-of-type(4) {
    width: max(103vw, 240.46svh) !important;
    height: 103svh !important;
  }
  [data-testid="envelope-introduction"][data-state="open"] > div:nth-of-type(3) {
    transform: translate3d(calc(-50% - 5vw - max(50vw, 116.7284svh)), -50%, 0) scale(1) !important;
  }
  [data-testid="envelope-introduction"][data-state="open"] > div:nth-of-type(4) {
    transform: translate3d(calc(-50% + 5vw + max(50vw, 116.7284svh)), -50%, 0) scale(1) !important;
  }

  /* Lightweight mobile entry animation. It starts from the already visible
     compact envelope and fades/slides its layers away without invoking
     React's oversized `entering` composition. */
  [data-testid="envelope-introduction"].mobile-compat-opening {
    pointer-events: none !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening > div:nth-of-type(1),
  [data-testid="envelope-introduction"].mobile-compat-opening > div:nth-of-type(2),
  [data-testid="envelope-introduction"].mobile-compat-opening > div:nth-of-type(3),
  [data-testid="envelope-introduction"].mobile-compat-opening > div:nth-of-type(4) {
    will-change: transform, opacity;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening > div:nth-of-type(1) {
    transition: transform 1700ms cubic-bezier(.74, 0, .16, 1), opacity 650ms ease-out 1050ms !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening > div:nth-of-type(2) {
    transition: transform 850ms cubic-bezier(.74, 0, .16, 1), opacity 520ms ease-out !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening > div:nth-of-type(3),
  [data-testid="envelope-introduction"].mobile-compat-opening > div:nth-of-type(4) {
    transition: transform 1700ms cubic-bezier(.74, 0, .16, 1), opacity 650ms ease-out 1050ms !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening > button {
    transition: opacity 420ms ease-out !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening.mobile-compat-opening-active > div:nth-of-type(1) {
    opacity: 0 !important;
    transform: translate3d(-50%, -50%, 0) scale(1.12) !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening.mobile-compat-opening-active > div:nth-of-type(2) {
    opacity: 0 !important;
    transform: translate3d(-50%, -54%, 0) scale(2.7) !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening.mobile-compat-opening-active > div:nth-of-type(3) {
    opacity: 0 !important;
    transform: translate3d(calc(-50% - 5vw - max(50vw, 116.7284svh) - 38vw), calc(-50% - 2svh), 0) rotate(-1.5deg) scale(1.08) !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening.mobile-compat-opening-active > div:nth-of-type(4) {
    opacity: 0 !important;
    transform: translate3d(calc(-50% + 5vw + max(50vw, 116.7284svh) + 38vw), calc(-50% - 2svh), 0) rotate(1.5deg) scale(1.08) !important;
  }
  [data-testid="envelope-introduction"].mobile-compat-opening.mobile-compat-opening-active > button {
    opacity: 0 !important;
  }

  html.mobile-compat-open, html.mobile-compat-open body,
  body.mobile-compat-open,
  html.mobile-compat-open [data-testid="template-root"] {
    height: auto !important;
    min-height: 100%;
    overflow: visible !important;
    position: static !important;
  }
}

/* The source illustration is portrait. On desktop it must fit in one
   viewport, so the section height wins over its natural aspect ratio. The
   image itself remains `contain`, preserving every pixel without cropping. */
@media (min-width: 1025px) {
  #footer {
    height: 100svh !important;
    aspect-ratio: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-testid="envelope-introduction"],
  [data-testid="envelope-introduction"] * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-testid="envelope-introduction"] [data-mobile-parallax] {
    transform: none !important;
    translate: none !important;
  }
}