/* ============================================================
   Ornament layer — soft-lace frame (lab spec 18) + underline swash
   (lab spec 15) + fact-card type readability. Companion to
   /scripts/ornaments.js. Lavender-only, crisp edges (no blur);
   softness comes from the fine tulle mesh the JS paints.

   Load AFTER glass.css. The .lace-frame is a SIBLING overlay of the
   .glass-panel (never a wrapper) so it can't break the panel's
   backdrop-filter. Animations are gated on an `.orn-in` ancestor,
   added once when the card scrolls into view (see ornaments.js).
   Uses the page's --ease token.
   ============================================================ */

/* ---- overlay placement (sits above the panel, ignores pointer events) ---- */
.lace-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.lace-frame svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ---- rendered-glass stroke stack (painted strokes, no backdrop-filter) ---- */
svg.cal { overflow: visible; display: block; }
.cal-g path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cal-g .cal-shadow { stroke: rgba(14,7,26,0.34); stroke-width: calc(var(--w, 2.2px) + 1.5px); transform: translate(1.1px, 1.7px); }
.cal-g .cal-body   { stroke-width: var(--w, 2.2px); }
.cal-g .cal-hi     { stroke: rgba(255,255,255,0.92); stroke-width: calc(var(--w, 2.2px) * 0.34); transform: translate(-0.45px, -0.75px); }
.cal-g .cal-sheen  { stroke: #fff; stroke-width: calc(var(--w, 2.2px) * 0.95); }
.cal-g path.cal-fill      { stroke: none; }
.cal-g path.cal-fill-edge { fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 0.55px; }

/* fine (thread) tuning: quieter shadow, hairline highlight */
svg.fine .cal-shadow { stroke: rgba(14,7,26,0.22); stroke-width: calc(var(--w, 1.2px) + 1px); }
svg.fine .cal-hi     { stroke-width: 0.5px; transform: translate(-0.3px, -0.5px); }
.cal-g.net { opacity: 0.5; }

/* ---- draw-on: dash the path away, release it once the card is in view ---- */
.cal-g .draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.orn-in .cal-g .draw { animation: orn-draw var(--dur, 1.7s) var(--ease) calc(var(--d, 0s) + var(--layer-d, 0s)) forwards; }
.cal-g .cal-hi.draw { --layer-d: 0.14s; }
@keyframes orn-draw { to { stroke-dashoffset: 0; } }

/* ---- travelling sheen: one short dash sweeps the path, then dwells off ---- */
.cal-g .cal-sheen { stroke-dasharray: 0.16 1.84; stroke-dashoffset: 0.18; opacity: 0; }
.orn-in .cal-g .cal-sheen { animation: orn-sheen 8.5s linear calc(2.3s + var(--d, 0s)) infinite; }
@keyframes orn-sheen {
  0%   { stroke-dashoffset: 0.18; opacity: 0; }
  3%   { opacity: 0.5; }
  21%  { opacity: 0.5; }
  25%  { stroke-dashoffset: -1.02; opacity: 0; }
  100% { stroke-dashoffset: -1.02; opacity: 0; }
}
.cal-g .cal-sheen2 { stroke: #fff; stroke-width: calc(var(--w, 2.2px) * 1.7); stroke-linecap: round; stroke-dasharray: 0.3 1.7; stroke-dashoffset: 0.32; opacity: 0; }
.orn-in .cal-g .cal-sheen2 { animation: orn-sheen2 8.5s linear calc(3.1s + var(--d, 0s)) infinite; }
@keyframes orn-sheen2 {
  0%   { stroke-dashoffset: 0.32; opacity: 0; }
  4%   { opacity: 0.2; }
  20%  { opacity: 0.2; }
  26%  { stroke-dashoffset: -1.72; opacity: 0; }
  100% { stroke-dashoffset: -1.72; opacity: 0; }
}

/* filled ink masses (the swash body) fade in */
.cal-g .fadein { opacity: 0; }
.orn-in .cal-g .fadein { animation: orn-fillfade 0.9s var(--ease) calc(var(--d, 0s) + 0.3s) forwards; }
@keyframes orn-fillfade { to { opacity: 1; } }

/* gem beads: a constant bright with a breathing halo */
.bead { fill: rgba(255,255,255,0.9); }
.bead-halo { opacity: 0.25; }
.orn-in .bead-halo { animation: orn-breathe 5.4s ease-in-out var(--sd, 0s) infinite alternate; }
@keyframes orn-breathe { from { opacity: 0.18; } to { opacity: 0.7; } }

/* mesh + static bits (beads, inner beads) reveal with the card, not before it */
.lace-frame svg.cal { opacity: 0; transition: opacity 0.45s var(--ease); }
.orn-in .lace-frame svg.cal { opacity: 1; }
.orn-reveal { opacity: 0; transform: translateY(6px); transition: opacity 1.05s var(--ease), transform 1.05s var(--ease); }
.orn-in .orn-reveal { opacity: 1; transform: none; }

/* ---- LACE MATERIAL: crisp lavender ink; a fine dark shadow separates it from the
   surface behind, plus a soft lavender glow — no blur on the ink itself ---- */
.lace-frame svg.cal,
svg.orn-swash { filter: drop-shadow(0 1px 1.4px rgba(18,9,30,0.5)) drop-shadow(0 0 5px rgba(203,177,236,0.4)); }
.lace-frame .cal-g .cal-hi,
svg.orn-swash .cal-g .cal-hi { stroke: rgba(255,255,255,0.34); stroke-width: 0.45px; }
.lace-frame .cal-g.net { opacity: 0.3; }
.lace-frame .bead,
svg.orn-swash .bead { fill: rgba(255,255,255,0.72); }
svg.orn-swash .cal-g path.cal-fill-edge { stroke: rgba(255,255,255,0.42); }

/* the underline swash divider inside the lockup */
svg.orn-swash { display: block; width: min(184px, 58%); height: auto; margin: 24px auto; }

/* ============================================================
   FACT-CARD TYPE READABILITY (David & Kaylee: "slight drop shadows +
   more bold / less light typefacing"). Scoped to the dressed fact
   card via .factblock.orn-dressed so these win over the page's inline
   rules without editing them. Cormorant Garamond ships 500/600/700.
   ============================================================ */
.factblock.orn-dressed { --glass-pad: clamp(44px, 10vw, 62px); }   /* room for the lace band around the text */
.factblock.orn-dressed .big {
  font-weight: 700; letter-spacing: 0;
  text-shadow: 0 1px 2px rgba(36,26,46,0.5), 0 0 1px rgba(36,26,46,0.3);
}
.factblock.orn-dressed .fb-time {
  font-weight: 700; letter-spacing: 0.22em;
  text-shadow: 0 1px 2px rgba(36,26,46,0.5);
}
.factblock.orn-dressed .fb-time strong { font-weight: 700; }
.factblock.orn-dressed .fb-venue {
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(36,26,46,0.5);
}
.factblock.orn-dressed .fb-venue strong { font-weight: 700; color: #fff; }
.factblock.orn-dressed .fb-cal {
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(36,26,46,0.4);
}
.factblock.orn-dressed .fb-cal-alt { text-shadow: 0 1px 2px rgba(36,26,46,0.45); }
.factblock.orn-dressed .fine {
  font-weight: 500; color: #ddd0ee;
  text-shadow: 0 1px 2px rgba(36,26,46,0.5);
}
.factblock.orn-dressed .fine strong { font-weight: 700; color: #fff; }

/* ---- reduced motion: everything fully drawn, still, no sheens ---- */
@media (prefers-reduced-motion: reduce) {
  .cal-g .draw { animation: none !important; stroke-dashoffset: 0; }
  .cal-g .fadein { animation: none !important; opacity: 1; }
  .cal-g .cal-sheen, .cal-g .cal-sheen2 { display: none; }
  .orn-reveal { opacity: 1; transform: none; transition: none; }
  .lace-frame svg.cal { opacity: 1 !important; transition: none; }
  .bead-halo { animation: none !important; opacity: 0.4; }
}