/**
 * JJ Stone Craft House — Mobile Animation CSS
 * Companion to jjstone_mobile.js
 * Drop into /assets/ with the other animation files.
 */

/* ─────────────────────────────────────────────
   SCROLL PROGRESS BAR
   Injected by setupScrollVelocityAmbient()
   Overrides here for extra specificity
───────────────────────────────────────────── */
#jj-scroll-bar {
  position:    fixed;
  top:         0;
  left:        0;
  height:      2px;
  z-index:     9999;
  pointer-events: none;
  will-change: width, opacity;
}

/* ─────────────────────────────────────────────
   TOUCH RIPPLE CONTAINMENT
   All ripple targets need overflow hidden.
   This CSS layer handles elements not caught
   by the JS querySelectorAll pass.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  a,
  button,
  .jj-magnetic,
  .jj-cta,
  .jj-card,
  [data-hover-lift] {
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
  }
}

/* ─────────────────────────────────────────────
   BACKGROUND ATTACHMENT — iOS fix
   background-attachment: fixed doesn't work
   on iOS Safari. Force scroll everywhere on
   touch devices so images don't freeze.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  *,
  *::before,
  *::after {
    background-attachment: scroll !important;
  }
}

/* ─────────────────────────────────────────────
   SECTION ENTRY FLASH CONTAINMENT
   Sections need relative positioning for the
   injected flash element to sit at the edge.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  section,
  [data-section-reveal],
  .hero,
  article {
    position: relative;
    overflow-x: hidden; /* prevent flash from causing horizontal scroll */
  }
}

/* ─────────────────────────────────────────────
   HERO SHIMMER CONTAINMENT
───────────────────────────────────────────── */
@media (pointer: coarse) {
  .hero,
  [data-hero-content],
  section:first-of-type {
    overflow: hidden;
  }
}

/* ─────────────────────────────────────────────
   REVEAL DISTANCES — MOBILE REDUCTION
   Desktop data-reveal uses 36px Y travel.
   That's too far on small screens — elements
   drift out of the visible "safe zone."
   Reduce all reveal travel distances for mobile.
───────────────────────────────────────────── */
@media (pointer: coarse), (max-width: 768px) {
  [data-reveal],
  [data-stagger] > * {
    /* GSAP sets inline transform — these are fallback / pre-paint guards */
    will-change: transform, opacity;
  }
}

/* ─────────────────────────────────────────────
   WORD WRAP — MOBILE LINE BREAK FIX
   jj-word-wrap uses inline-block + overflow hidden
   for clip reveals. On mobile narrow viewports
   words sometimes orphan mid-word at break points.
   Force clean breaks.
───────────────────────────────────────────── */
@media (max-width: 480px) {
  .jj-word-wrap {
    word-break: keep-all;
  }
}

/* ─────────────────────────────────────────────
   PAGE TRANSITION — MOBILE TIMING
   Desktop transition is 0.65s out / 0.9s in.
   On mobile networks that can feel slow.
   Tighten to 0.45s / 0.65s for snappier feel.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  .jj-transition-overlay {
    /* GSAP overrides duration in JS — this is backup for any CSS fallback */
    transition-duration: 0.45s;
  }

  .jj-transition-logo {
    width: 180px; /* smaller on mobile viewports */
  }
}

/* ─────────────────────────────────────────────
   NAV — MOBILE SCROLL STATE
   Scrolled state needs to account for iOS
   safe area inset (notch / home indicator)
───────────────────────────────────────────── */
/* !important: must beat inline mobile header padding shorthand (cascade order) */
@media (pointer: coarse) {
  header {
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }

  .jj-nav--scrolled {
    /* Ensure backdrop-filter is stable on iOS */
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter:          blur(14px) saturate(1.4);
  }

  /* Footer ghost watermark — desktop-only effect. Its JS reveal (jjstone_animations.js
     setupFooterGhost) early-returns on pointer:coarse, so on mobile the element is a
     permanently invisible (opacity:0) box at left:50% with no centering transform,
     white-space:nowrap, font floored at 4rem — its right edge extends past the viewport
     and creates horizontal page scroll. Remove from layout on touch devices.
     Session 5 fix — see overflow audit. */
  .jj-footer-ghost {
    display: none;
  }
}

/* ─────────────────────────────────────────────
   MARQUEE — MOBILE SPEED
   Marquee at desktop speed (50px/sec) can feel
   too slow on mobile where users read faster
   while scrolling. Slight speed increase via
   CSS animation override if GSAP doesn't apply.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  [data-marquee-wrap] {
    -webkit-overflow-scrolling: touch;
  }
}

/* ─────────────────────────────────────────────
   LOGO — MOBILE ENTRY
   Delay reduced for mobile — the desktop 0.85s
   delay feels slow when users are tap-navigating
   between pages. Tighten to 0.45s.
   (GSAP in jjstone_polish.js handles the tween —
   this comment is a reminder; override is in JS.)
───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   SMOOTH SCROLL — DISABLE ON IOS
   Native iOS overscroll/momentum is better than
   CSS scroll-behavior: smooth in most cases.
   Remove smooth scrolling on touch devices so
   Lenis-free navigation feels native.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  html {
    scroll-behavior: auto;
  }
}

/* ─────────────────────────────────────────────
   REDUCED MOTION — MOBILE ADDITIONS
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #jj-scroll-bar {
    display: none;
  }
}
/* JJ Stone Craft House mobile navigation fix.
   Append to deploy/assets/jjstone_mobile.css. */
@media (pointer: coarse), (max-width: 768px) {
  body {
    overflow-x: clip !important;
  }

  header.jj-nav--scrolled {
    background-color: #111f0a;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 768px) {
  header .nav-right {
    flex: 1;
    min-width: 0;
  }
}