/* ===== SECTION DECORATIVES: HERO CROPMARKS ===== */
.hero-mark {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  overflow: visible;
}
.hero-mark path {
  stroke: var(--muted);
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: hero-mark-draw 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-mark--tl { top: 20px; left: 20px; }
.hero-mark--tr { top: 20px; right: 20px; }
.hero-mark--bl { bottom: 20px; left: 20px; }
.hero-mark--br { bottom: 20px; right: 20px; }
.hero-mark--tr path { animation-delay: 0.12s; }
.hero-mark--bl path { animation-delay: 0.24s; }
.hero-mark--br path { animation-delay: 0.36s; }
@keyframes hero-mark-draw {
  to { stroke-dashoffset: 0; }
}

/* ===== SECTION DECORATIVES: PROBLEM RECEIPT ===== */
.problem {
  position: relative;
  /* Slightly darker cream for contrast with perforation holes */
  background: #e9e4d5;
  /* Room for the perforations to bleed outside */
  margin-top: 24px;
  margin-bottom: 24px;
}
/* Perforated top edge: circles punched at 24px intervals */
.problem::before,
.problem::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  /* Each circle is 12px diameter, spaced 24px apart, centered vertically */
  background-image: radial-gradient(circle, var(--paper) 6px, transparent 6px);
  background-size: 24px 14px;
  background-repeat: repeat-x;
  pointer-events: none;
  z-index: 1;
}
.problem::before {
  top: -7px;
  background-position: 12px center;
}
.problem::after {
  bottom: -7px;
  background-position: 12px center;
}

/* ===== SECTION DECORATIVES: BRIDGE SPOTLIGHT ===== */
.bridge {
  --mx: -200px;
  --my: -200px;
  /* Note: position: relative and overflow: hidden already exist on .bridge — do NOT redeclare */
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx) var(--my),
    rgba(192, 57, 43, 0.06) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}
/* Glowing border trace along top edge */
.bridge::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: radial-gradient(
    300px circle at var(--mx) 0px,
    rgba(192, 57, 43, 0.7) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

/* ===== SECTION DECORATIVES: SOLUTION BRACKETS ===== */
.sol-machine {
  position: relative;
}
.sol-bracket {
  position: absolute;
  width: 36px;
  height: 36px;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.sol-bracket path {
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sol-bracket--tl { top: -10px; left: -10px; }
.sol-bracket--tr { top: -10px; right: -10px; }
.sol-bracket--bl { bottom: -10px; left: -10px; }
.sol-bracket--br { bottom: -10px; right: -10px; }
.sol-bracket--tr path { transition-delay: 0.1s; }
.sol-bracket--bl path { transition-delay: 0.2s; }
.sol-bracket--br path { transition-delay: 0.3s; }
/* Trigger: when parent section is visible */
.sol--visible .sol-bracket path {
  stroke-dashoffset: 0;
}

/* ===== SECTION DECORATIVES: FEATURES SPEC SHEET ===== */
/* NOTE: .features has background: var(--ink) — a near-black dark background.
   All colors here must be light/translucent to be visible. Do NOT use --muted or --border
   (those are warm-tan values designed for the cream landing background). */
.features {
  position: relative;
  border-top: 1px solid rgba(245, 240, 232, 0.15);
}

/* ── Registration crosshair targets at 4 corners ── */
.feat-reg {
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.feat-reg--tl { top: 20px;  left: 20px; }
.feat-reg--tr { top: 20px;  right: 20px; }
.feat-reg--bl { bottom: 20px; left: 20px; }
.feat-reg--br { bottom: 20px; right: 20px; }
.feat-reg line,
.feat-reg circle {
  stroke: rgba(245, 240, 232, 0.3);
  stroke-width: 0.8;
  fill: none;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.feat-reg line {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.feat-reg circle {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.features--visible .feat-reg line,
.features--visible .feat-reg circle { stroke-dashoffset: 0; }
.feat-reg--tr line, .feat-reg--tr circle { transition-delay: 0.1s; }
.feat-reg--bl line, .feat-reg--bl circle { transition-delay: 0.2s; }
.feat-reg--br line, .feat-reg--br circle { transition-delay: 0.3s; }
.features-spec-label {
  display: block;
  font-family: var(--fm, 'DM Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: rgba(245, 240, 232, 0.4);
  text-transform: uppercase;
  margin-bottom: 32px;
  padding-top: 4px;
}
.features-spec-label::after {
  content: '';
  display: block;
  height: 1px;
  background: rgba(245, 240, 232, 0.15);
  margin-top: 12px;
  width: 100%;
}

/* ===== SECTION DECORATIVES: PRESETS 3D TILT ===== */
/* NOTE: .presets-paper is inside .presets-paper-bezel-inner which has overflow: hidden.
   Applying 3D transforms to .presets-paper directly would be cancelled by that overflow.
   Instead, tilt is applied to .presets-paper-bezel-outer (outside the clipping ancestor). */
.presets-paper-bezel-outer {
  transform-style: preserve-3d;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.presets-tilt-zone {
  perspective: 900px;
}
/* Form field label above the paper */
.presets-form-label {
  display: block;
  font-family: var(--fm, 'DM Mono', monospace);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ===== SECTION DECORATIVES: TRUST FILM PERFORATIONS ===== */
/* Sprocket holes running vertically on left + right edges — film negative strip */
.trust::before,
.trust::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  background-color: rgba(245, 240, 232, 0.025);
  background-image: radial-gradient(circle, rgba(245, 240, 232, 0.18) 5px, transparent 5px);
  background-size: 18px 24px;
  background-repeat: repeat-y;
  background-position: center 12px;
  pointer-events: none;
  z-index: 1;
}
.trust::before { left: 0; }
.trust::after  { right: 0; }

/* ===== SECTION DECORATIVES: TRUST SPOTLIGHT ENTRIES ===== */
.trust {
  border-top: 1px solid var(--border);
}
.trust-spec-label {
  display: block;
  font-family: var(--fm, 'DM Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 32px;
  padding-top: 4px;
}
.trust-fn-entry {
  position: relative;
  border-radius: 4px;
  /* NOTE: .trust-fn-entry already has opacity/transform transitions for the scroll reveal
     animation. Do NOT replace them — extend with the background transition appended: */
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), background 0.3s ease;
  padding: 12px 10px;
  margin: -12px -10px;
}
.trust-fn-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background:
    radial-gradient(150px circle at var(--ex, 50%) var(--ey, 50%), rgba(192, 57, 43, 0.12), transparent 70%) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.trust-fn-entry:hover::before {
  opacity: 1;
}

/* ===== SECTION DECORATIVES: TRUST LEDGER ===== */
/* give trust-inner a stacking context so ::before is positioned within it */
.trust-inner { position: relative; }
/* Vertical filament that draws down through the citation list on reveal */
.trust-inner::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 60px;
  bottom: 60px;
  width: 1px;
  background: rgba(245, 240, 232, 0.12);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
  pointer-events: none;
}
.trust--visible .trust-inner::before { transform: scaleY(1); }
/* Diagonal VERIFIED watermark — ghosted behind entries */
.trust-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--fm, 'DM Mono', monospace);
  font-size: clamp(64px, 12vw, 140px);
  font-weight: 700;
  letter-spacing: 0.5em;
  color: rgba(245, 240, 232, 0.025);
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
  z-index: 0;
}

/* ===== SECTION DECORATIVES: CTA SAFETY TAPE ===== */
/* Diagonal hazard-stripe bands at top + bottom — like caution tape on a final print layout */
.cta-section::before,
.cta-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(245, 240, 232, 0.07) 0px,
    rgba(245, 240, 232, 0.07) 5px,
    transparent 5px,
    transparent 10px
  );
  pointer-events: none;
  z-index: 1;
}
.cta-section::before { top: 0; }
.cta-section::after  { bottom: 0; }

/* ===== SECTION DECORATIVES: CTA COLOPHON ===== */
/* Rotating publisher's seal — draws in on .cta--visible */
.cta-seal {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 90px;
  height: 90px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}
.cta--visible .cta-seal { opacity: 1; }
.cta-seal-ring {
  fill: none;
  stroke: rgba(245, 240, 232, 0.2);
  stroke-width: 0.5;
  stroke-dasharray: 254;
  stroke-dashoffset: 254;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.cta--visible .cta-seal-ring { stroke-dashoffset: 0; }
.cta-seal-inner {
  animation: cta-seal-spin 80s linear infinite;
  transform-origin: 45px 45px;
}
@keyframes cta-seal-spin { to { transform: rotate(360deg); } }
.cta-seal-text {
  fill: rgba(245, 240, 232, 0.35);
  font-family: var(--fm, 'DM Mono', monospace);
  font-size: 5px;
  letter-spacing: 1.8px;
}
.cta-seal-cross {
  stroke: rgba(245, 240, 232, 0.25);
  stroke-width: 0.5;
  opacity: 0;
  transition: opacity 0.4s ease 1.6s;
}
.cta--visible .cta-seal-cross { opacity: 1; }
/* Directional hover fill — fill enters from the side the mouse entered */
.cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(245, 240, 232, 0.1);
  transform: var(--fill-from, translateY(101%));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}
.cta-btn:hover::after { transform: none; }
.cta-btn-label,
.cta-btn-circle { position: relative; z-index: 1; }
/* Page num in monospace for the scramble effect */
.cta-page-num { font-family: var(--fm, 'DM Mono', monospace); }
@media (max-width: 640px) { .cta-seal { display: none; } }

/* ===== SECTION DECORATIVES: ENDMATTER ===== */
/* References stagger-reveal on scroll */
.references-list li {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.endmatter--visible .references-list li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.endmatter--visible .references-list li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.15s; }
.endmatter--visible .references-list li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.25s; }
.endmatter--visible .references-list li:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.35s; }
.endmatter--visible .references-list li:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.45s; }
/* Logo expands its tracking on reveal — cinematic punctuation mark */
.logo-text { transition: letter-spacing 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; }
.endmatter--visible .logo-text { letter-spacing: 0.5em; }