/* ─────────────────────────────────────────────────────────────
   FLY HIGH CLUB — Coming Soon
   External stylesheet.
   Tailwind CDN handles utility classes — this file covers
   pseudo-element gradients and custom keyframe animations.
───────────────────────────────────────────────────────────── */


/* ── BACKGROUND PHOTO OVERLAY ─────────────────────────────── */

.bg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(9, 9, 9, 1.00)  0%,
    rgba(9, 9, 9, 0.98) 28%,
    rgba(9, 9, 9, 0.68) 52%,
    rgba(9, 9, 9, 0.25) 76%,
    rgba(9, 9, 9, 0.06) 100%
  );
}

@media (max-width: 720px) {
  .bg-photo::after {
    background: linear-gradient(
      to top,
      rgba(9, 9, 9, 1.00)  0%,
      rgba(9, 9, 9, 0.96) 44%,
      rgba(9, 9, 9, 0.52) 70%,
      rgba(9, 9, 9, 0.12) 100%
    );
  }
}


/* ── HONEYPOT ──────────────────────────────────────────────── */
/*
  Visually hidden from real users but reachable by bots.
  Intentionally NOT using display:none or visibility:hidden —
  basic crawlers detect those and skip the field.
*/
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* ── STAMP SPIN ────────────────────────────────────────────── */
/*
  Targets #stamp svg only — keeps GSAP's entrance animation on
  the #stamp container conflict-free (separate elements).
*/

@keyframes stamp-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#stamp svg {
  animation: stamp-spin 24s linear infinite;
  transform-origin: center;
}


/* ── MOBILE SCROLL FIX ─────────────────────────────────────── */
/*
  The desktop layout is intentionally locked (h-screen overflow-hidden
  on html/body/site). On mobile these locks prevent any scrolling and
  clip content that doesn't fit the viewport.

  Strategy:
  - Unlock scroll on html, body, and #site
  - Pin the background photo with `fixed` so it stays visible as the
    page scrolls — the gradient already fades to solid ink at the bottom
    so scrolled content remains readable
  - `main` is switched to relative in the HTML (see index.html)
    so it participates in normal flow and expands with its content
*/
@media (max-width: 720px) {
  html,
  body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  #site {
    height: auto !important;
    min-height: 100svh;
    overflow: visible !important;
  }

  /* Keep hero photo pinned so it fills the screen while content scrolls */
  .bg-photo {
    position: fixed !important;
  }
}