/* =========================================================================
   ornaments.css — golden swirling-fractal / filigree flourishes for HEARTHMERE
   Loaded AFTER hearthmere.css. PURE CSS, decorates existing elements only via
   ::before / ::after + SVG data-URIs. No HTML / JS / other-CSS edits.

   Voice: WARM, SECURE, QUIET. Every flourish whispers — low opacity, refined
   gold line-art on the walnut / parchment grounds. The motif is recursive,
   self-similar gold scrollwork: nested spirals + golden-ratio curls that echo
   themselves at smaller scale, the way an illuminated manuscript margin does.

   Gold tokens (mirroring hearthmere.css):  gold #c9a24b  ·  bright #ecca77
   ========================================================================= */

:root{
  /* swirl tuning knobs — quiet by default */
  --orn-gold:#c9a24b;
  --orn-gold-bright:#ecca77;
  --orn-flourish-w:clamp(48px,7vw,96px);   /* width of a heading flourish   */
  --orn-flourish-h:clamp(20px,3vw,34px);   /* height of a heading flourish  */
  --orn-corner:clamp(40px,5vw,68px);       /* parchment corner-filigree size*/
}

/* =========================================================================
   THE MOTIFS  —  each is a hand-drawn, self-similar gold scroll embedded as
   an SVG data-URI. Drawn once here as CSS custom properties so a single curve
   library decorates every surface. Strokes only, transparent fill, so they
   sit weightlessly over candlelight or parchment.
   ========================================================================= */

:root{

  /* --- 1. HEADING FLOURISH (points RIGHT) ------------------------------
     A recursive scroll: a long sweep that buds a smaller spiral, which itself
     buds a smaller curl — three generations of the same coil, Fibonacci-ish.
     viewBox 120x40, gold strokes, used flanking section headings.          */
  --orn-swirl-r:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2040'%3E%3Cg%20fill='none'%20stroke='%23c9a24b'%20stroke-width='1.4'%20stroke-linecap='round'%3E%3Cpath%20d='M2%2020%20C%2030%2020%2046%2020%2064%2020'/%3E%3Cpath%20d='M64%2020%20C%2084%2020%2092%2034%2078%2034%20C%2068%2034%2068%2022%2080%2022%20C%2096%2022%20100%208%2086%206%20C%2076%204.5%2070%2012%2072%2020'%20stroke='%23ecca77'/%3E%3Cpath%20d='M64%2020%20C%2078%2020%2084%2010%2074%2010%20C%2067%2010%2068%2018%2076%2017'/%3E%3Cpath%20d='M104%2014%20C%20116%2014%20118%2026%20108%2026%20C%20101%2026%20101%2017%20109%2017'%20stroke='%23ecca77'/%3E%3Ccircle%20cx='2'%20cy='20'%20r='1.6'%20fill='%23ecca77'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E");

  /* --- 2. RULE DIVERSITY FLOURISH (symmetric, centred) -----------------
     Two mirrored coils meeting at a small lozenge — sits BEHIND the ❦ in
     .rule so the existing gradient hairlines still read on top.           */
  --orn-rule:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2040'%3E%3Cg%20fill='none'%20stroke='%23c9a24b'%20stroke-width='1.3'%20stroke-linecap='round'%3E%3Cpath%20d='M100%2020%20C%2078%2020%2070%2034%2056%2034%20C%2040%2034%2040%2014%2058%2014%20C%2072%2014%2074%2026%2062%2026%20C%2054%2026%2054%2018%2062%2019'/%3E%3Cpath%20d='M100%2020%20C%20122%2020%20130%2034%20144%2034%20C%20160%2034%20160%2014%20142%2014%20C%20128%2014%20126%2026%20138%2026%20C%20146%2026%20146%2018%20138%2019'/%3E%3Cpath%20d='M40%2020%20C%2028%2020%2024%2028%2016%2028%20C%2010%2028%2010%2012%2018%2012'%20stroke='%23ecca77'%20opacity='.85'/%3E%3Cpath%20d='M160%2020%20C%20172%2020%20176%2028%20184%2028%20C%20190%2028%20190%2012%20182%2012'%20stroke='%23ecca77'%20opacity='.85'/%3E%3Cpath%20d='M94%2020%20l6%20-6%206%206%20-6%206%20Z'%20fill='%23ecca77'%20stroke='%23ecca77'/%3E%3C/g%3E%3C/svg%3E");

  /* --- 3. CORNER FILIGREE (top-left orientation) ----------------------
     A nested-spiral corner-piece for parchment panels: a hooking vine that
     spirals into itself, then sprouts a smaller self-similar curl — the
     recursive signature again, sized for a card corner. Rotated per-corner. */
  --orn-corner-img:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2068%2068'%3E%3Cg%20fill='none'%20stroke='%23c9a24b'%20stroke-width='1.4'%20stroke-linecap='round'%3E%3Cpath%20d='M4%204%20C%204%2026%204%2040%2020%2046%20C%2034%2051%2046%2042%2040%2032%20C%2036%2025%2026%2027%2028%2036%20C%2029%2041%2036%2042%2039%2038'/%3E%3Cpath%20d='M4%204%20C%2026%204%2040%204%2046%2020%20C%2051%2034%2042%2046%2032%2040%20C%2025%2036%2027%2026%2036%2028%20C%2041%2029%2042%2036%2038%2039'%20stroke='%23ecca77'/%3E%3Cpath%20d='M4%204%20C%2018%2012%2012%2018%204%204'/%3E%3Ccircle%20cx='52'%20cy='16'%20r='1.5'%20fill='%23ecca77'%20stroke='none'/%3E%3Ccircle%20cx='16'%20cy='52'%20r='1.5'%20fill='%23ecca77'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E");

  /* --- 4. SLOW GLOW SPIRAL (animated, behind .snug-head / footer) ------
     A faint many-armed golden spiral whose arms are self-similar logarithmic
     curls. Very low opacity; it rotates almost imperceptibly.             */
  --orn-spiral:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20300'%3E%3Cg%20fill='none'%20stroke='%23c9a24b'%20stroke-width='1'%20stroke-linecap='round'%3E%3Cpath%20d='M150%20150%20C%20150%20110%20120%2090%2090%20110%20C%2058%20131%2070%20186%20122%20198'/%3E%3Cpath%20d='M150%20150%20C%20190%20150%20210%20120%20190%2090%20C%20169%2058%20114%2070%20102%20122'/%3E%3Cpath%20d='M150%20150%20C%20150%20190%20180%20210%20210%20190%20C%20242%20169%20230%20114%20178%20102'/%3E%3Cpath%20d='M150%20150%20C%20110%20150%2090%20180%20110%20210%20C%20131%20242%20186%20230%20198%20178'/%3E%3Cpath%20d='M150%20150%20C%20150%20126%20132%20114%20114%20126%20C%2095%20139%20102%20172%20133%20179'%20stroke='%23ecca77'/%3E%3Cpath%20d='M150%20150%20C%20174%20150%20186%20132%20174%20114%20C%20161%2095%20128%20102%20121%20133'%20stroke='%23ecca77'/%3E%3Ccircle%20cx='150'%20cy='150'%20r='3'%20fill='%23ecca77'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

/* =========================================================================
   SECTION HEADINGS — flanking flourishes
   .snug-head (centred), .shelf-label (left-flush row), .page-head (left).
   Mirror the right-facing motif with scaleX(-1) for the left wing.
   ========================================================================= */

/* shared appearance for the wing pseudo-elements */
.snug-head::before,.snug-head::after,
.page-head .kicker::after{
  content:"";display:block;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}

/* --- .snug-head : a wing each side, sitting under the kicker line ------- */
.snug-head{position:relative}
.snug-head::before,.snug-head::after{
  position:absolute;top:6px;width:var(--orn-flourish-w);height:var(--orn-flourish-h);
  background-image:var(--orn-swirl-r);opacity:.5;pointer-events:none;
}
.snug-head::before{right:calc(50% + 96px);transform:scaleX(-1)}
.snug-head::after{left:calc(50% + 96px)}
@media(max-width:680px){
  /* keep the heading airy on phones — fold the wings away */
  .snug-head::before,.snug-head::after{display:none}
}

/* --- .shelf-label : one quiet flourish trailing the shelf heading -------
   The row is flex (h3 · note · "See all" link). Decorate the h3 itself so
   the curl hugs the title without disturbing the layout border.          */
.shelf-label h3{position:relative}
.shelf-label h3::after{
  content:"";display:inline-block;vertical-align:middle;
  width:clamp(40px,5vw,72px);height:var(--orn-flourish-h);margin-left:14px;
  background:var(--orn-swirl-r) no-repeat center/contain;
  opacity:.42;pointer-events:none;
}
@media(max-width:560px){.shelf-label h3::after{display:none}}

/* --- .page-head : a small flourish tucked after the kicker label -------- */
.page-head .kicker{position:relative;display:inline-block!important}
.page-head .kicker::after{
  position:relative;display:inline-block;vertical-align:middle;
  width:clamp(34px,4vw,58px);height:18px;margin-left:14px;top:-1px;
  background-image:var(--orn-swirl-r);opacity:.5;pointer-events:none;
}
@media(max-width:520px){.page-head .kicker::after{display:none}}

/* =========================================================================
   THE RULE  —  enrich the ❦ divider
   .rule already owns ::before/::after (its gradient hairlines), so we layer
   the symmetric scroll as a background-image ON the flex element, sitting
   behind the glyph and between the existing lines. The ❦ gets a soft glow.
   ========================================================================= */
.rule{
  position:relative;
  background-image:var(--orn-rule);
  background-repeat:no-repeat;background-position:center;
  background-size:clamp(150px,42vw,220px) auto;
  /* lift the glyph & give the scroll a little breathing room */
  min-height:30px;
}
.rule{font-size:18px;line-height:30px;color:var(--orn-gold-bright);
  text-shadow:0 0 10px rgba(236,202,119,.45),0 1px 0 rgba(0,0,0,.5)}

/* =========================================================================
   PARCHMENT PANELS  —  corner filigree
   .receipt (uses ::before for its inner border → decorate via ::after),
   .form-card / .summary-card (both pseudo-elements free → use ::after,
   leaving ::before untouched). One SVG, painted into all four corners with
   per-corner rotation via background, kept faint so the cream ground wins.
   ========================================================================= */

.receipt::after,
.form-card::after,
.summary-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:.4;
  background-image:var(--orn-corner-img),var(--orn-corner-img),
                   var(--orn-corner-img),var(--orn-corner-img);
  background-repeat:no-repeat;
  background-position:
    left   18px top    18px,   /* top-left  */
    right  18px top    18px,   /* top-right */
    left   18px bottom 18px,   /* bottom-left  */
    right  18px bottom 18px;   /* bottom-right */
  background-size:var(--orn-corner) var(--orn-corner);
}
/* the single SVG is drawn for a top-left corner; CSS background can't rotate
   individual layers, so we flip the whole layer set with a sibling trick:
   each corner needs its own mirrored art. We achieve the mirroring with four
   distinct rotated copies declared as separate data-URIs below.           */

.receipt::after,
.form-card::after,
.summary-card::after{
  background-image:
    /* TL : original */
    var(--orn-corner-img),
    /* TR : mirrored on X */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2068%2068'%3E%3Cg%20transform='translate(68,0)%20scale(-1,1)'%20fill='none'%20stroke='%23c9a24b'%20stroke-width='1.4'%20stroke-linecap='round'%3E%3Cpath%20d='M4%204%20C%204%2026%204%2040%2020%2046%20C%2034%2051%2046%2042%2040%2032%20C%2036%2025%2026%2027%2028%2036%20C%2029%2041%2036%2042%2039%2038'/%3E%3Cpath%20d='M4%204%20C%2026%204%2040%204%2046%2020%20C%2051%2034%2042%2046%2032%2040%20C%2025%2036%2027%2026%2036%2028%20C%2041%2029%2042%2036%2038%2039'%20stroke='%23ecca77'/%3E%3Cpath%20d='M4%204%20C%2018%2012%2012%2018%204%204'/%3E%3Ccircle%20cx='52'%20cy='16'%20r='1.5'%20fill='%23ecca77'%20stroke='none'/%3E%3Ccircle%20cx='16'%20cy='52'%20r='1.5'%20fill='%23ecca77'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E"),
    /* BL : mirrored on Y */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2068%2068'%3E%3Cg%20transform='translate(0,68)%20scale(1,-1)'%20fill='none'%20stroke='%23c9a24b'%20stroke-width='1.4'%20stroke-linecap='round'%3E%3Cpath%20d='M4%204%20C%204%2026%204%2040%2020%2046%20C%2034%2051%2046%2042%2040%2032%20C%2036%2025%2026%2027%2028%2036%20C%2029%2041%2036%2042%2039%2038'/%3E%3Cpath%20d='M4%204%20C%2026%204%2040%204%2046%2020%20C%2051%2034%2042%2046%2032%2040%20C%2025%2036%2027%2026%2036%2028%20C%2041%2029%2042%2036%2038%2039'%20stroke='%23ecca77'/%3E%3Cpath%20d='M4%204%20C%2018%2012%2012%2018%204%204'/%3E%3Ccircle%20cx='52'%20cy='16'%20r='1.5'%20fill='%23ecca77'%20stroke='none'/%3E%3Ccircle%20cx='16'%20cy='52'%20r='1.5'%20fill='%23ecca77'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E"),
    /* BR : rotated 180 */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2068%2068'%3E%3Cg%20transform='translate(68,68)%20rotate(180)'%20fill='none'%20stroke='%23c9a24b'%20stroke-width='1.4'%20stroke-linecap='round'%3E%3Cpath%20d='M4%204%20C%204%2026%204%2040%2020%2046%20C%2034%2051%2046%2042%2040%2032%20C%2036%2025%2026%2027%2028%2036%20C%2029%2041%2036%2042%2039%2038'/%3E%3Cpath%20d='M4%204%20C%2026%204%2040%204%2046%2020%20C%2051%2034%2042%2046%2032%2040%20C%2025%2036%2027%2026%2036%2028%20C%2041%2029%2042%2036%2038%2039'%20stroke='%23ecca77'/%3E%3Cpath%20d='M4%204%20C%2018%2012%2012%2018%204%204'/%3E%3Ccircle%20cx='52'%20cy='16'%20r='1.5'%20fill='%23ecca77'%20stroke='none'/%3E%3Ccircle%20cx='16'%20cy='52'%20r='1.5'%20fill='%23ecca77'%20stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}
@media(max-width:560px){
  /* on narrow panels, keep just the two top corners so the art never crowds */
  .receipt::after,.form-card::after,.summary-card::after{
    --orn-corner:48px;opacity:.34;
  }
}

/* =========================================================================
   MASTHEAD  —  decorate AROUND the hero title, never over it.
   The title must stay perfectly legible, so the flourish sits well below the
   tagline / button as a faint, wide, symmetric scroll — a quiet underline to
   the whole title block. pointer-events:none so the "Step inside" link works.
   ========================================================================= */
.masthead{position:relative}
.masthead::after{
  content:"";position:absolute;left:50%;bottom:clamp(-64px,-7vw,-40px);
  transform:translateX(-50%);
  width:clamp(180px,34vw,340px);height:38px;
  background:var(--orn-rule) no-repeat center/contain;
  opacity:.42;pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(236,202,119,.25));
}
@media(max-width:560px){.masthead::after{width:200px;bottom:-46px;opacity:.36}}

/* =========================================================================
   ONE SLOW ANIMATED SWIRL  —  a faint rotating golden spiral glow behind
   .snug-head, plus a second still-but-breathing one in the footer.
   The home intro is the quiet hearth of the page; a near-still rotation there
   reads as candlelight catching gilt, not as motion.
   ========================================================================= */

/* the glow plate lives on .snug — drawn behind the .snug-head content */
.snug-head::after{ /* (already declared as a wing above; keep that) */ }

/* dedicated animated layer: attach to .snug-head via an extra ::marker-free
   element is impossible without HTML, so we ride .snug's background — but
   .snug already has a gradient. Instead, use the .rule? No. Use a fixed,
   purpose-built layer on .footer + a low rotating spiral behind .snug-head
   through its existing free space: we co-opt the .kicker inside snug-head. */

/* Behind the snug-head kicker: a large faint spiral, centred on the heading */
.snug-head .kicker{position:relative}
.snug-head .kicker::before{
  content:"";position:absolute;left:50%;top:50%;
  width:clamp(280px,46vw,460px);height:clamp(280px,46vw,460px);
  transform:translate(-50%,-50%);
  background:var(--orn-spiral) no-repeat center/contain;
  opacity:.06;pointer-events:none;z-index:-1;
  filter:drop-shadow(0 0 22px rgba(201,162,75,.25));
}

/* footer : a single quiet spiral glow behind the brand */
footer{position:relative;overflow:hidden}
footer::before{
  content:"";position:absolute;left:50%;top:38px;
  width:clamp(200px,30vw,320px);height:clamp(200px,30vw,320px);
  transform:translate(-50%,0);
  background:var(--orn-spiral) no-repeat center/contain;
  opacity:.05;pointer-events:none;z-index:0;
  filter:drop-shadow(0 0 18px rgba(201,162,75,.2));
}
footer>*{position:relative;z-index:1}

/* --- the animation, gated behind a motion-safe query --------------------
   Long duration, tiny opacity, no scale jumps — it must never call attention
   to itself. Disabled entirely when the user prefers reduced motion.      */
@media(prefers-reduced-motion:no-preference){
  .snug-head .kicker::before{animation:orn-turn 140s linear infinite}
  footer::before{animation:orn-turn 200s linear infinite reverse}
}
@keyframes orn-turn{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to  {transform:translate(-50%,-50%) rotate(360deg)}
}
/* footer spiral keeps its own translate origin (top-anchored, not centred) */
@media(prefers-reduced-motion:no-preference){
  @keyframes orn-turn-footer{
    from{transform:translate(-50%,0) rotate(0deg)}
    to  {transform:translate(-50%,0) rotate(-360deg)}
  }
  footer::before{animation:orn-turn-footer 200s linear infinite}
}

/* explicit belt-and-braces: honour reduced motion even if a UA misorders
   the media queries above. */
@media(prefers-reduced-motion:reduce){
  .snug-head .kicker::before,
  footer::before{animation:none!important}
}