/* ═══════════════════════════════════════════════════════════════
   PANELOGUE VISUAL SYSTEM — decorative textures, glows, staging
═══════════════════════════════════════════════════════════════ */

/* ─── HERO — dot-grid texture, masked to a soft ellipse ──────── */
.hero__bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(29, 23, 18, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 23, 18, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 82% 84% at 66% 48%, #000 30%, transparent 82%);
  mask-image: radial-gradient(ellipse 82% 84% at 66% 48%, #000 30%, transparent 82%);
}

.hero__bg-glow {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-24%);
  width: 1000px;
  height: 600px;
  background: radial-gradient(ellipse at 50% 40%, rgba(227, 137, 28, 0.14), rgba(176, 57, 44, 0.05) 44%, transparent 68%);
  pointer-events: none;
}

.hero__corner {
  position: absolute;
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.hero__corner--tl { top: 96px; left: 34px; border-left: 1.5px solid rgba(217, 99, 58, 0.5); border-top: 1.5px solid rgba(217, 99, 58, 0.5); }
.hero__corner--tr { top: 96px; right: 34px; border-right: 1.5px solid rgba(217, 99, 58, 0.5); border-top: 1.5px solid rgba(217, 99, 58, 0.5); }
.hero__corner--bl { bottom: 42px; left: 34px; border-left: 1.5px solid rgba(217, 99, 58, 0.32); border-bottom: 1.5px solid rgba(217, 99, 58, 0.32); }

/* ─── HERO — layered screenshot staging ──────────────────────── */
.hero__shot-backdrop {
  position: absolute;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.hero__shot-backdrop--1 { top: 58px; left: 48px; right: 6px; bottom: 22px; transform: rotate(-1.7deg); box-shadow: 0 10px 30px rgba(60, 32, 8, 0.08); }
.hero__shot-backdrop--2 { top: 50px; left: 32px; right: 20px; bottom: 32px; background: #fdfcfa; transform: rotate(0.9deg); box-shadow: 0 10px 28px rgba(60, 32, 8, 0.07); }

/* ─── ANNOTATIONS — handwritten callouts + connector squiggles ─
   Arrows are real hand-drawn ink strokes (assets/images/arrow-*.png),
   not SVG paths — flipped/mirrored per spot to point the right way. */
.annot { position: absolute; display: flex; flex-direction: column; pointer-events: none; animation: plgFadeIn 0.7s both; }
.annot--tl { top: -88px; left: 13%; align-items: flex-start; animation-delay: 0.4s; }
.annot--tr { top: -82px; right: -6px; align-items: flex-end; animation-delay: 0.6s; }
.annot--bl { bottom: -86px; right: 3%; align-items: flex-end; animation-delay: 0.8s; }
/* Label ink matches the arrow stroke exactly (#ec5428) so every callout
   reads as one pen — text + arrow the same colour. */
.annot__label { font-family: var(--font-note); font-size: 24px; font-weight: 700; color: #ec5428; white-space: nowrap; }
.annot__arrow { display: block; }
.annot--tl .annot__label { transform: rotate(-3deg); }
.annot--tr .annot__label { transform: rotate(3deg); }
.annot--bl .annot__label { transform: rotate(-2deg); }
/* Stroked arrow-vertical points up by default; scaleY(-1) to point down. */
.annot--tl .annot__arrow { width: 32px; margin-left: 8px; margin-top: 4px; transform: scaleX(-1) scaleY(-1) rotate(-3deg); }
.annot--tr .annot__arrow { width: 34px; margin-right: 30px; margin-top: 4px; transform: scaleY(-1) rotate(-16deg); }
.annot--bl .annot__arrow { width: 34px; margin-right: 24px; margin-bottom: 4px; transform: rotate(-10deg); }

/* ─── FEATURE ROWS — radial glow behind screenshots ──────────── */
.feature-row__glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 50% 55%, rgba(217, 130, 10, 0.10), transparent 65%);
  pointer-events: none;
}
.feature-row__media--center .feature-row__glow {
  background: radial-gradient(ellipse at 50% 45%, rgba(217, 130, 10, 0.10), transparent 62%);
}

/* ─── SECTION ATMOSPHERE — each band gets its own glow signature ─
   Purely decorative ::before layers so every section reads as
   distinct even where the base background repeats (the two dark
   bands especially). Nothing structural changes underneath. ──── */
.positioning { overflow: hidden; }
.positioning::before {
  content: '';
  position: absolute;
  top: -140px; left: -80px;
  width: 620px; height: 460px;
  background: radial-gradient(ellipse at 30% 30%, rgba(227, 137, 28, 0.16), transparent 68%);
  pointer-events: none;
}

.arc-section { overflow: hidden; }
.arc-section::before {
  content: '';
  position: absolute;
  top: 8%; left: 50%;
  transform: translateX(-50%);
  width: 1100px; height: 640px;
  background: radial-gradient(ellipse at 50% 30%, rgba(238, 123, 108, 0.14), rgba(219, 164, 58, 0.07) 46%, transparent 74%);
  pointer-events: none;
}
.stats-section { overflow: hidden; }
.stats-section::before {
  content: '';
  position: absolute;
  bottom: -180px; right: -120px;
  width: 680px; height: 560px;
  background: radial-gradient(ellipse at 70% 70%, rgba(176, 57, 44, 0.20), transparent 70%);
  pointer-events: none;
}
.stats-section::after {
  content: '';
  position: absolute;
  top: -160px; left: -140px;
  width: 480px; height: 420px;
  background: radial-gradient(ellipse at 30% 30%, rgba(62, 120, 201, 0.10), transparent 72%);
  pointer-events: none;
}

/* Lives on the section (no overflow:hidden) rather than .export-fan
   itself — .export-fan clips its own overflow to contain the diagram,
   which was cutting this glow off in a hard rectangle instead of
   letting it fade out seamlessly. */
.exports-section::before {
  content: '';
  position: absolute;
  top: 8%; right: -6%;
  width: 62%; height: 84%;
  background: radial-gradient(ellipse at 60% 50%, rgba(227, 137, 28, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.waitlist-section { overflow: hidden; }
.waitlist-section::before {
  content: '';
  position: absolute;
  top: -60%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 520px;
  background: radial-gradient(ellipse at 50% 50%, rgba(227, 137, 28, 0.12), transparent 70%);
  pointer-events: none;
}

/* ─── FAQ PAGE HERO — dot-grid variant ───────────────────────── */
.page-hero__bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(29, 23, 18, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 23, 18, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 90% at 30% 40%, #000 20%, transparent 78%);
}
.page-hero__corner {
  position: absolute;
  top: 84px;
  right: 36px;
  width: 15px;
  height: 15px;
  border-right: 1.5px solid rgba(217, 99, 58, 0.45);
  border-top: 1.5px solid rgba(217, 99, 58, 0.45);
  pointer-events: none;
}

/* ─── SECTION CANVAS — faint static panel grid on the light "paper" bands ─
   Extends the hero's comic-panel grid down the page (same 40px cell, hairline
   ink), masked to fade at the top/bottom seams. Static by design: matches the
   reference sites and adds zero runtime cost. The dark bands keep their warm
   sepia wash instead, for editorial contrast. */
.canvas-grid { position: relative; }
.canvas-grid > * { position: relative; z-index: 1; }
.canvas-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(29, 23, 18, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 23, 18, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 87%, transparent 100%);
}

@media (max-width: 900px) {
  .hero__corner,
  .page-hero__corner { display: none; }

  /* These ambient glows are fixed-pixel and sized for a desktop-width
     canvas (up to 1100px across) — on a narrow viewport they're 2-3x
     wider than the screen. They're clipped by their section's
     overflow:hidden, but Safari has a long-standing bug where a
     position:absolute + transform element can visually escape an
     ancestor's overflow:hidden clip during a pinch-zoom gesture. A
     grossly oversized glow escaping looks like a stray, wrongly
     positioned background chunk. Scaling them down for narrow
     viewports keeps that failure mode small even if it's ever hit,
     and is more proportionate here regardless. */
  .hero__bg-glow { width: 560px; height: 340px; }
  .positioning::before { width: 360px; height: 280px; top: -90px; left: -60px; }
  .arc-section::before { width: 620px; height: 380px; }
  .stats-section::before { width: 380px; height: 320px; bottom: -110px; right: -80px; }
  .stats-section::after { width: 300px; height: 260px; top: -90px; left: -80px; }
  .waitlist-section::before { width: 520px; height: 320px; }
}