/* Deskrune v6 — Mobile Power Pass
 *
 * Three problems solved:
 *
 *   1. Pull-to-refresh on iOS Safari shakes / locks up the page.
 *      Root cause: native rubber-band overscroll competing with our
 *      View Transitions and reveal animations. Fix: overscroll-behavior-y
 *      contain + overscroll-behavior-x none, plus -webkit-overflow-scrolling
 *      tweaks.
 *
 *   2. The 3D hero canvas was effectively invisible on mobile because
 *      mobile opacity was 0.70 AND the aurora-stage washed it out. Bump
 *      to 1.0 with a subtle multiply, raise canvas z-index above aurora.
 *
 *   3. Mobile felt like the "lite" version of the site. This file makes
 *      mobile match desktop in visual ambition: bigger hero, real spacing,
 *      premium tap targets, safe-area-insets for notched devices.
 *
 * This file ships as a small extra sheet (3-4KB) loaded after the mega-
 * bundle so its rules win on cascade.
 */

/* ─── 1. Pull-to-refresh + overscroll lockdown ─────────────────────── */
html, body {
  /* Prevent rubber-band bounce that competes with our reveal animations.
     `contain` blocks the bounce from leaking up but still allows scroll. */
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
}

@media (max-width: 760px) {
  html {
    /* Modern iOS prefers this for predictable scroll feel */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    /* Stops the page from "wobbling" when the user reaches the top
       and pulls down. Native pull-to-refresh stays available because
       it's a browser-chrome gesture, not a content gesture. */
    overscroll-behavior-y: contain;
    /* Modern iOS Safari smooth scroll */
    -webkit-overflow-scrolling: touch;
  }

  /* Disable any view-transition fade on first paint of mobile to prevent
     the "shake" the user described. View transitions still fire on link
     clicks; just not on initial paint. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 200ms;
  }

  /* Skip-link should not steal focus on mobile gestures */
  .skip-to-content {
    transition: none;
  }
}

/* ─── 2. 3D hero canvas: STANDALONE BLOCK ABOVE TEXT (mobile) ──────────
 *
 * Layout: on mobile the 3D wireframe gets its OWN dedicated block at the
 * TOP of the hero, then the text hero (eyebrow / H1 / lede / CTAs) flows
 * below. No more overlap with the H1 — the glyph is the front-door
 * graphic, the text is the body.
 *
 * Implementation:
 *   .hero-vp   → flex-column on mobile
 *   .dr-hero-canvas-wrap → first child, `position:relative`, fixed 320px
 *   .hero-inner-vp → second child
 */
@media (max-width: 760px) {
  /* Hero becomes a vertical stack: canvas → text */
  :root.dr-v4 .hero-vp,
  .hero-vp {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
  }

  /* CANVAS WRAP — standalone block at top, in normal flow (not absolute) */
  :root.dr-v4 .hero-vp .dr-hero-canvas-wrap,
  .hero-vp .dr-hero-canvas-wrap {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    flex: 0 0 320px !important;
    order: 1 !important;
    opacity: 1 !important;
    z-index: 1 !important;
    mix-blend-mode: normal !important;
    overflow: hidden !important;
    /* Soft radial vignette so the glyph fades into the paper at the edges */
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0.85) 85%, rgba(0,0,0,0) 100%) !important;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 50%, rgba(0,0,0,0.85) 85%, rgba(0,0,0,0) 100%) !important;
    /* Subtle warm-paper backdrop — gives the canvas dimension */
    background:
      radial-gradient(ellipse at 50% 50%, rgba(201, 97, 63, 0.06) 0%, transparent 70%),
      linear-gradient(180deg, rgba(245, 239, 228, 0.55) 0%, rgba(250, 249, 245, 0) 100%);
    /* Hairline divider so the canvas reads as a deliberate block */
    border-bottom: 1px solid var(--dr-rule, #e8e6dc);
  }

  /* Canvas itself fills its wrap */
  :root.dr-v4 .hero-vp #dr-hero-canvas,
  .hero-vp #dr-hero-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Aurora-stage: positioned absolute behind canvas only */
  :root.dr-v4 .hero-vp .aurora-stage,
  .hero-vp .aurora-stage {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 320px !important;
    max-height: 320px !important;
    z-index: 0 !important;
    opacity: 0.30 !important;
    pointer-events: none !important;
  }

  /* Text hero — flows BELOW the canvas, in its own block */
  :root.dr-v4 .hero-vp .hero-inner-vp,
  .hero-vp .hero-inner-vp {
    position: relative !important;
    z-index: 2 !important;
    order: 2 !important;
    padding: clamp(32px, 7vw, 48px) clamp(20px, 5vw, 28px) clamp(48px, 10vw, 72px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
  }
}

/* ─── 3. Mobile = same ambition as desktop ─────────────────────────── */
@media (max-width: 760px) {
  /* Bigger, better-balanced hero typography */
  :root.dr-v4 .hero-vp h1,
  .hero-vp h1 {
    font-size: clamp(34px, 9vw, 52px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 18px !important;
  }

  :root.dr-v4 .hero-vp .hero-lede,
  .hero-vp .hero-lede {
    font-size: 17px !important;
    line-height: 1.55 !important;
    margin-bottom: 24px !important;
  }

  /* Premium tap targets — 48px min hit area for accessibility */
  .hero-action,
  .buy.primary,
  .buy.secondary,
  .cta-buy,
  .nav-cta,
  button,
  .submit {
    min-height: 48px;
    -webkit-tap-highlight-color: rgba(201, 97, 63, 0.18);
  }

  /* Hero CTA buttons: side-by-side on small screens — but stack if too narrow */
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-actions .hero-action {
    flex: 1 1 auto;
    min-width: 140px;
    text-align: center;
    justify-content: center;
  }

  /* Sale banner: make sure the countdown is readable */
  .deskrune-sale-banner {
    font-size: 12px;
    padding: 10px 12px;
    line-height: 1.4;
    flex-wrap: wrap;
    gap: 6px 12px;
  }
  .deskrune-sale-banner strong { font-size: 11px; }
  .deskrune-sale-banner .deskrune-countdown {
    font-size: 12px;
    padding: 3px 8px;
  }

  /* Section spacing: real breathing room, not cramped */
  :root.dr-v4 main > section,
  main > section {
    padding-top: clamp(48px, 12vw, 72px) !important;
    padding-bottom: clamp(48px, 12vw, 72px) !important;
  }

  /* Card grids: stack cleanly with proper gap */
  .tool-cards,
  .live-product-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Ensure section headlines have weight and breathe */
  :root.dr-v4 .section h2,
  .section h2 {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  /* Brand-glyph reveal stays beautiful but lighter on mobile */
  .dr-reveal-glyph {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ─── 4. Safe-area-inset for notched devices (iPhone X+) ───────────── */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  nav,
  .deskrune-sale-banner,
  .footer {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

/* ─── 5. Tap feedback — subtle press states for touch ──────────────── */
@media (hover: none) and (pointer: coarse) {
  .hero-action:active,
  .buy.primary:active,
  .buy.secondary:active,
  .cta-buy:active,
  .tool-card:active,
  button:active {
    transform: translateY(1px) !important;
    transition: transform 80ms ease !important;
  }
  .tool-card:active {
    background: rgba(201, 97, 63, 0.04);
  }
}

/* ─── 6. Mobile menu / nav: more breathing room, more contrast ─────── */
@media (max-width: 760px) {
  nav .inner {
    padding: 12px 16px !important;
  }
  nav .links {
    gap: 14px;
  }
  nav .links a {
    font-size: 13px;
  }

  /* Hide some nav items on tiny screens to keep nav uncluttered */
  @media (max-width: 420px) {
    nav .links a:not(.brand) {
      font-size: 12px;
      padding: 4px 6px;
    }
  }
}

/* ─── 7. Form inputs on mobile: 16px font (avoid iOS zoom on focus) ── */
@media (max-width: 760px) {
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="url"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important; /* iOS won't zoom into inputs ≥16px */
  }
}

/* ─── 8. Mobile-only ribbon: "Free AI tool — 4 sec" floating CTA ──── */
.dr-mobile-cta {
  display: none;
}
@media (max-width: 760px) {
  .dr-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    background: var(--dr-clay, #c9613f);
    color: #faf9f5;
    padding: 12px 16px;
    border-radius: 12px;
    z-index: 50;
    box-shadow: 0 12px 32px -8px rgba(20, 20, 19, 0.32);
    font-family: 'Inter', system-ui, sans-serif;
    text-decoration: none;
    transform: translateY(120%);
    transition: transform 360ms cubic-bezier(0.25, 0, 0.2, 1),
                opacity 360ms ease;
    opacity: 0;
    pointer-events: none;
  }
  .dr-mobile-cta.dr-mobile-cta-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .dr-mobile-cta-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }
  .dr-mobile-cta-text small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 2px;
  }
  .dr-mobile-cta-arrow {
    font-size: 18px;
    flex-shrink: 0;
  }
  .dr-mobile-cta-dismiss {
    background: transparent;
    border: 0;
    color: rgba(250, 249, 245, 0.6);
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Push footer up so floating CTA doesn't cover it */
  body.dr-mobile-cta-visible-spacing footer {
    padding-bottom: 80px;
  }
}

/* ─── 9. Reduced motion: respect it always ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dr-mobile-cta {
    transition: none !important;
  }
}