/* ============================================================
   MACTAVISH WELDING — mobile-app.css
   App-style layer for phones. EVERY rule is gated to ≤700px;
   desktop rendering is untouched. The only rule outside the
   media query keeps the new nav elements dormant on desktop.
   ============================================================ */

/* new app-only elements stay invisible at every width by default */
.nav__burger, .appmenu, .hero__badges { display: none; }

@media (max-width: 700px) {

  /* ============================================================
     APP BAR — brand at rest, lion-only once scrolled (.app-past)
     ============================================================ */
  .nav { height: 60px; padding-inline: 18px; gap: 12px; }
  .nav__brand { font-size: 19px; transition: opacity .25s ease; }
  .nav__lion { height: 26px; margin-top: -4px; margin-right: 8px; }

  /* past the landing: "WELDING" drops off — the bar reads lion + MacTAVISH */
  html.app-past .nav__brand span { display: none; }
  html.app-past .nav { background: rgba(13, 13, 15, 0.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }

  /* ---------- burger (3 lines → X) ---------- */
  .nav__burger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto; margin-right: -8px;
    background: none; border: 0; cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__burger span {
    display: block; width: 22px; height: 2px; background: var(--bone);
    transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .2s ease;
  }
  .nav__burger.x span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.x span:nth-child(2) { opacity: 0; }
  .nav__burger.x span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ============================================================
     FULL-SCREEN MENU — fades the site behind it
     ============================================================ */
  .appmenu { display: block; position: fixed; inset: 0; z-index: 190; pointer-events: none; }
  .appmenu__scrim {
    position: absolute; inset: 0;
    background: rgba(8, 8, 10, 0.86);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    opacity: 0; transition: opacity .34s ease;
  }
  .appmenu__panel {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 90px 34px 110px;
  }
  .appmenu__panel > a {
    font-family: var(--display); font-size: 36px; line-height: 1;
    letter-spacing: 0.03em; text-transform: uppercase; color: var(--bone);
    padding: 13px 0; text-decoration: none;
    opacity: 0; transform: translateY(16px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1), color .25s;
  }
  .appmenu__panel > a.live { color: var(--amber); }
  .appmenu__meta {
    margin-top: 30px; display: flex; flex-direction: column; gap: 16px;
    opacity: 0; transform: translateY(16px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1);
  }
  .appmenu__tel { font-family: var(--mono); font-size: 14px; letter-spacing: 0.16em; color: var(--plat); }
  .appmenu__cta { width: 100%; padding: 17px 28px; }

  .appmenu.on { pointer-events: auto; }
  .appmenu.on .appmenu__scrim { opacity: 1; }
  .appmenu.on .appmenu__panel > a, .appmenu.on .appmenu__meta { opacity: 1; transform: translateY(0); }
  .appmenu.on .appmenu__panel > a:nth-child(1) { transition-delay: .05s; }
  .appmenu.on .appmenu__panel > a:nth-child(2) { transition-delay: .09s; }
  .appmenu.on .appmenu__panel > a:nth-child(3) { transition-delay: .13s; }
  .appmenu.on .appmenu__panel > a:nth-child(4) { transition-delay: .17s; }
  .appmenu.on .appmenu__panel > a:nth-child(5) { transition-delay: .21s; }
  .appmenu.on .appmenu__panel > a:nth-child(6) { transition-delay: .25s; }
  .appmenu.on .appmenu__meta { transition-delay: .3s; }
  body.amlock { overflow: hidden; }
  /* the menu sits under the bar (z 190 < 200) so the lion + X stay tappable */

  /* ============================================================
     INDEX — static app hero replaces the scroll ride (html.app-m
     is set by main.js on phones only)
     ============================================================ */
  html.app-m .ride { height: 100svh !important; }
  html.app-m #rideCanvas, html.app-m #sparks, html.app-m #rideFallback { display: none !important; }
  /* poster still behind everything — what you see before the loop starts,
     and all that reduced-motion / save-data visitors get */
  html.app-m .ride__stage {
    background: #0d0d0f url('../assets/photos/home/hero-crest-mob2.webp') center 30% / cover no-repeat;
  }
  /* the ambient crest loop — the crest with molten edges, sparks, and the
     welder's arc flashing behind; plays in place, no scrolling involved */
  html.app-m #heroIdle {
    display: block; position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
    /* the desktop ride loop fades this element in each frame; that loop is off on
       phones, so the base opacity:0 must be overridden here or the video is invisible */
    opacity: 1 !important;
  }
  html.app-m .ride__stage::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background:
      linear-gradient(180deg, rgba(13,13,15,0.62) 0%, rgba(13,13,15,0) 22%),
      linear-gradient(180deg, rgba(13,13,15,0) 40%, rgba(13,13,15,0.82) 82%, #0d0d0f 100%);
    pointer-events: none;
  }
  html.app-m .ov--hero { opacity: 1 !important; visibility: visible !important; z-index: 5; padding-bottom: 54px; }
  /* amber lines get a dark backing so they read over the bright crest */
  html.app-m .ov--hero .eyebrow,
  html.app-m .contact .eyebrow, html.app-m .contact__tel, html.app-m .contact__hours, html.app-m .contact__hours a {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 14px rgba(0, 0, 0, 0.8);
  }
  /* the location line sits right on the bright crest — an organic pool of
     darkness behind it: two soft offset ellipses that finish fading INSIDE
     the box (no clipped edges, so no square), plus a tight halo on the letters */
  html.app-m .ov--hero .eyebrow {
    width: fit-content;
    padding: 28px 36px;
    margin: -28px 0 -8px -36px;
    gap: 10px;
    background:
      radial-gradient(ellipse 60% 52% at 48% 52%,
        rgba(3, 3, 5, 0.55) 0%, rgba(3, 3, 5, 0.3) 46%, rgba(3, 3, 5, 0) 74%),
      radial-gradient(ellipse 78% 68% at 56% 46%,
        rgba(3, 3, 5, 0.32) 0%, rgba(3, 3, 5, 0) 72%);
    text-shadow:
      0 0 1px rgba(0, 0, 0, 1),
      0 0 3px rgba(0, 0, 0, 0.95),
      0 0 6px rgba(0, 0, 0, 0.85),
      0 1px 10px rgba(0, 0, 0, 0.65);
  }
  html.app-m .ov--hero .eyebrow .eyebrow__rule { width: 18px; flex: none; }
  html.app-m .ov--manifesto, html.app-m .ov--name, html.app-m .ov--forge, html.app-m .ov--cred { display: none !important; }
  html.app-m .hero__scroll, html.app-m .hero__meta { display: none; }
  html.app-m .hero__claim { max-width: 30ch; font-size: 16px; }
  html.app-m .hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; margin-top: 26px; }
  html.app-m .hero__ctas .btn { width: 100%; padding: 17px 28px; }
  /* credibility chips under the phone button */
  html.app-m .hero__badges { display: flex; gap: 10px; margin-top: 12px; }
  html.app-m .hero__badges .badge {
    flex: 1; text-align: center; padding: 12px 4px; white-space: nowrap;
    background: rgba(13, 13, 15, 0.35);
  }
  /* the first flow section no longer tucks under a fading ride */
  html.app-m .work { margin-top: 0 !important; }

  /* ============================================================
     DECLUTTER / BREATHING ROOM — all pages
     ============================================================ */
  :root { --pad: 20px; }
  .sec { margin-top: 64px; }
  .sec__head { gap: 10px; }
  .page__note { font-size: 16px; }

  /* forms feel native: 16px inputs stop iOS focus-zoom, taller submit */
  .qform input, .qform textarea { font-size: 16px; }
  .qform .btn, .qform__submit { width: 100%; }

  /* buttons and small links become full tap targets */
  .sec__more { padding: 10px 0; display: inline-block; }

  /* footer stacks into an app-like sheet */
  .foot__grid { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
  .foot__links { display: grid; grid-template-columns: 1fr; gap: 2px; width: 100%; }
  .foot__links a { padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; }
  .foot__links a:last-child { border-bottom: 0; }
  .foot__fine { font-size: 9.5px; line-height: 1.8; }
}