/* ==========================================================================
   Untravel — Marketing website  ·  styles.css
   --------------------------------------------------------------------------
   "Classy Field Notes" landing page. The page is built from per-element
   inline styles (recreated from the Claude Design handoff); this file holds
   only the global reset, the one keyframe, responsive overrides, and the
   no-JS / reduced-motion safety nets. Tokens live in colors_and_type.css.
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); }
a { text-decoration: none; color: inherit; }
::selection { background: var(--primary-bright); color: #fff; }

/* Ripple emitted by the animated finger in the "make a plan" phone. */
@keyframes uRipple {
  0%   { transform: translate(-50%,-50%) scale(0.4); opacity: 0.55; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

/* The full-bleed hero photo sits behind the protection gradients. */
.hero-bg-img { user-select: none; }

/* ---------- No-JS / progressive-enhancement safety ----------
   Scroll-revealed blocks default to visible; main.js only hides-then-reveals
   them when it runs. So with JS off (or before it loads) everything shows. */
[data-reveal] { opacity: 1; }

/* ---------- Reduced motion ----------
   Honour the user's preference: no smooth-scroll, no looping phone demo
   (main.js also reads this and renders the finished states statically). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-finger] { display: none !important; }
}

/* ---------- Mobile (≤768px) ---------- */
@media (max-width: 768px) {
  nav { padding: 14px 20px !important; }
  [data-nav-link] { display: none !important; }
  [data-nav-cta] { padding: 9px 15px !important; font-size: 13px !important; }

  /* hero → single column; funnel still flows up into the phone (positions
     are computed in JS), so the phone keeps headroom above it. */
  [data-hero-grid] {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: 100px 20px 60px !important;
    gap: 30px !important;
  }
  [data-hero-grid] h1 { font-size: 2.7rem !important; }
  [data-phone] { margin-top: 230px !important; }

  /* every 2/3-col content grid stacks */
  [data-grid] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-grid][data-pad] { padding-left: 20px !important; padding-right: 20px !important; }

  /* together: phones stack */
  [data-together-grid] { flex-direction: column !important; gap: 24px !important; }
}