/**
 * JJ Stone Craft House — Advanced Mobile CSS
 * Companion to jjstone_advanced.js
 */

/* ─────────────────────────────────────────────
   LOW FIDELITY MODE
   Applied by network-aware fidelity system.
   Hides particle canvas and non-essential layers.
───────────────────────────────────────────── */
.jj-low-fidelity canvas {
  display: none !important;
}

.jj-low-fidelity [data-parallax] {
  background-size: cover !important;
}

.jj-low-fidelity [data-reveal="clip"],
.jj-low-fidelity [data-reveal="clip-left"] {
  clip-path: none !important;
  opacity:   1 !important;
}

/* ─────────────────────────────────────────────
   PARTICLE CANVAS
   Hero needs overflow hidden so canvas clips
   cleanly at hero boundaries.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  .hero,
  section:first-of-type {
    overflow: hidden;
  }
}

/* ─────────────────────────────────────────────
   PULL-TO-REVEAL PANEL
   Prevents panel from causing layout shifts
   on the body. The panel is fixed so no reflow,
   but body needs overflow-x guard.
───────────────────────────────────────────── */
body {
  overflow-x: hidden;
}

#jj-pull-panel {
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter:          blur(8px) saturate(1.2);
  /* Clip .jj-pull-inner — its nowrap content (~459px intrinsic) is wider than
     the 390px panel and protrudes past the viewport's right edge, creating
     horizontal pannable overflow on iOS. Session 5 fix — see overflow audit. */
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   LONG-PRESS TARGETS
   Visual affordance: show hold indicator
   on elements that have long-press data.
   Subtle amber left-border gives tactile cue
   without announcing "hidden content here."
───────────────────────────────────────────── */
@media (pointer: coarse) {
  [data-long-press] {
    position: relative;
    -webkit-touch-callout: none;
    -webkit-user-select:   none;
    user-select:           none;
  }

  [data-long-press]::after {
    content:          '';
    position:         absolute;
    left:             0;
    top:              25%;
    bottom:           25%;
    width:            1.5px;
    background:       rgba(201, 168, 76, 0.35);
    border-radius:    0;
    transition:       opacity 0.3s ease;
    opacity:          0;
  }

  [data-long-press]:focus-within::after,
  [data-long-press]:active::after {
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────
   PRESSURE BLOOM
   Elements need overflow hidden for bloom
   to stay contained.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  button,
  .jj-cta,
  .jj-magnetic,
  .jj-card,
  [data-hover-lift] {
    isolation: isolate;
  }
}

/* ─────────────────────────────────────────────
   AMBIENT TONE
   No visual component — placeholder selector
   in case future visual waveform is added.
───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   SAFE AREA INSETS
   Ensure fixed elements (pull panel, scroll bar)
   respect device notch and home indicator.
───────────────────────────────────────────── */
#jj-pull-panel {
  padding-top: env(safe-area-inset-top, 0px);
  height:      calc(80px + env(safe-area-inset-top, 0px));
}

#jj-scroll-bar {
  top: env(safe-area-inset-top, 0px);
}

/* ─────────────────────────────────────────────
   REDUCED MOTION OVERRIDES
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #jj-pull-panel {
    display: none;
  }

  [data-long-press] {
    cursor: default;
  }

  canvas {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────
   BIOMETRIC SCROLL SYNC
   When slow reader mode is active, give sections
   slightly more vertical breathing room so the
   extended animation has space to run.
───────────────────────────────────────────── */
@media (pointer: coarse) {
  [data-reveal],
  [data-section-reveal] {
    contain: layout style;
  }
}

/* Site-wide navigation and readable body copy. */
@media (min-width: 769px) {
  header { padding-left: clamp(20px, 3vw, 60px) !important; padding-right: clamp(20px, 3vw, 60px) !important; }
  header nav ul { gap: clamp(12px, 1.6vw, 30px) !important; }
  header nav ul a { font-size: clamp(0.78rem, 0.85vw, 1rem) !important; }
}
.origin-body p { font-size: clamp(1rem, 1.25vw, 1.125rem) !important; }
.jj-signup-privacy { font: 0.9rem/1.5 Arial, sans-serif; color: #d8cbb2; }
.jj-signup-privacy a, .jj-privacy-link a { color: #e2bc62; text-decoration: underline; }
.jj-footer-ghost { pointer-events: none; }
.jj-privacy-link { position: relative; z-index: 1; margin-top: 12px; font: 0.85rem/1.4 Arial, sans-serif; }