/* ============================================================================
 * Odahl — Editorial / hand-feel utilities (Fiduci-aesthetic translation)
 * Paper texture, dotted ornaments, frame-in-frame, color-block compositions,
 * italic eyebrow labels, gentle hand-feel tilt. Imports tokens.css palette.
 * ============================================================================ */

/* ── Paper grain — aged-cream noise overlay (deliberately visible) ────── */
/* Body is TRANSPARENT so the cosmic-bg canvas (z-index: -1, paints its own
   cream via scene.background) shows through with the massive faint galaxies
   visible. Without this override, body's cream paint covers the canvas. */
body.paper-body { background: transparent; }
/* Two-layer texture stack — fine grain + a softer wash overlay, both fixed
   so they don't move on scroll. Together they give the visible hand-paper
   feel of the Fiduci Group brand artwork. */
body.paper-body::before {
  content: ''; position: fixed; inset: 0;
  background-image: url('/patterns/paper-grain.svg');
  background-size: 240px 240px; background-repeat: repeat;
  opacity: 0.22; pointer-events: none;
  z-index: -1; mix-blend-mode: multiply;
}
body.paper-body::after {
  content: ''; position: fixed; inset: 0;
  background-image: url('/patterns/watercolor-wash.svg');
  background-size: cover; background-repeat: no-repeat;
  background-position: center;
  opacity: 0.42; pointer-events: none;
  z-index: -1; mix-blend-mode: multiply;
}
.paper { position: relative; }
.paper::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('/patterns/paper-grain.svg');
  background-size: 240px 240px; background-repeat: repeat;
  opacity: 0.28; pointer-events: none;
  mix-blend-mode: multiply; z-index: 0;
}
.paper > * { position: relative; z-index: 1; }

/* Decorative hand-drawn underline beneath headline focal points */
.hand-underline {
  position: relative; display: inline-block;
}
.hand-underline::after {
  content: ''; position: absolute;
  left: -0.2em; right: -0.2em; bottom: -0.18em; height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6'><path d='M2 4 Q 20 1 40 3 T 80 4 T 118 2' stroke='%238E7BA3' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>") no-repeat center / 100% 100%;
  opacity: 0.75; pointer-events: none;
}

/* Soft inner glow on framed cards — makes them feel like they sit ON paper */
.frame, .landing-hero-frame, .pricing-hero-frame, .classes-hero-frame, .about-hero-frame {
  box-shadow:
    0 14px 40px -22px rgba(42, 36, 56, 0.32),
    inset 0 0 60px -20px rgba(240, 233, 208, 0.65);
}

/* ── Dotted-line ornament — recurring decorative divider ───────────────── */
.dotted-rule {
  background: url('/patterns/dotted-rule.svg') repeat-x center / 240px 8px;
  height: 8px; width: 100%; margin: 0;
}
.dotted-rule.short {
  max-width: 240px; margin-left: auto; margin-right: auto;
}
.dotted-under {
  position: relative; padding-bottom: 14px; display: inline-block;
}
.dotted-under::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 8px;
  background: url('/patterns/dotted-rule.svg') repeat-x center / 240px 8px;
}

/* ── Frame-in-frame — double-layered border treatment ──────────────────── */
.frame {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: 1px solid var(--aether-deep);
  background: var(--bone-warm);
}
.frame::before {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid var(--aether);
  opacity: 0.42; pointer-events: none;
}
.frame > * { position: relative; z-index: 1; }

/* Corner-bracket ornaments using /patterns/corner-ornament.svg */
.brackets { position: relative; }
.brackets::before, .brackets::after {
  content: ''; position: absolute;
  width: 32px; height: 32px;
  background: url('/patterns/corner-ornament.svg') no-repeat center / contain;
  z-index: 2;
}
.brackets::before { top: -2px; left: -2px; }
.brackets::after { bottom: -2px; right: -2px; transform: rotate(180deg); }

/* ── Color-block composition — Fiduci-style asymmetric swatch art ──────── */
.block-art {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.block-art .swatch {
  position: absolute;
  opacity: 0.62;
  background-image: url('/patterns/paper-grain.svg');
  background-size: 240px 240px;
  background-blend-mode: multiply;
}
.block-art .swatch.s-sage   { background-color: #B4C3B8; }
.block-art .swatch.s-ember  { background-color: #E3C0B8; }
.block-art .swatch.s-dawn   { background-color: #DFC58D; }
.block-art .swatch.s-aether { background-color: #C9BAD8; }
.block-art .swatch.s-bone   { background-color: #F0E9D0; }
.block-art .swatch.tilt-l { transform: rotate(-1.2deg); }
.block-art .swatch.tilt-r { transform: rotate(1.4deg); }

/* ── Italic eyebrow (Fiduci em-dash + italic serif) ────────────────────── */
.eyebrow-italic {
  font-family: var(--display); font-style: italic;
  font-weight: 400; font-size: 0.95rem;
  letter-spacing: 0.06em; color: var(--aether-deep);
  display: inline-block;
}
.eyebrow-italic::before { content: '— '; }

/* ── Hand-feel tilt — apply sparingly to key cards ─────────────────────── */
.tilt-l { transform: rotate(-0.6deg); }
.tilt-r { transform: rotate(0.6deg); }
.tilt-l:hover, .tilt-r:hover {
  transform: rotate(0);
  transition: transform var(--speed-standard) var(--ease-out);
}

/* ── Section-level paper variant (warm tinted strip) ───────────────────── */
.paper-strip {
  position: relative;
  background: linear-gradient(180deg, var(--bone-warm) 0%, var(--bone) 100%);
}
.paper-strip::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('/patterns/paper-grain.svg');
  background-size: 240px 240px;
  opacity: 0.18; pointer-events: none;
  mix-blend-mode: multiply;
}
.paper-strip > * { position: relative; z-index: 1; }