/* CLG Motion — "Quiet Craft" layer.
   All hidden/animated states are scoped under html.clg-mo, which is added by
   motion.js at runtime: no JS (or reduced-motion) = fully static, visible page.
   Only opacity/transform animate — zero CLS. */

/* The homepage's own original build (scripts/update-christian-gifts-usa-home-page.mjs)
   ships a SEPARATE, independent reveal script (inline, pre-dates clg-motion)
   that also watches [data-clg-reveal] and adds its own .clg-is-revealed class,
   which in turn triggers a one-time "shine sweep" (.clg-craft-sheen, a
   semi-opaque gradient band) across the .clg-craft-frame photo. Running that
   legacy sweep AT THE SAME TIME as this plugin's own fade-in on the same
   element reads as a flash/wash-out rather than one calm entrance. Since
   clg-motion is now the single deliberate "Quiet Craft" reveal system for the
   whole site, disable the legacy sweep here (not applicable) — always,
   unconditionally, regardless of which class ends up on the element.
   Not scoped to reduced-motion since it must be off in every case. */
.clg-craft-sheen { animation: none !important; }

/* Root cause of the recurring "Materials and Detail" block going blank:
   the homepage's own inline categoryStageScript() (see
   scripts/update-christian-gifts-usa-home-page.mjs) ships a SECOND,
   independent reveal system clg-motion never touched — a plain (non-media-
   query) rule `.clg-page[data-clg-js] [data-clg-reveal]:not(.clg-is-revealed)
   {opacity:0}`. Its own bare IntersectionObserver (no failsafe sweep, no
   already-in-view check, no image exemption) can miss the initial
   intersection on a page that hasn't finished layout yet, leaving
   .clg-is-revealed never added and the block permanently at opacity:0 —
   independent of anything clg-motion.js does, which is why fixing
   clg-motion's own reveal logic never touched this. clg-motion is now the
   single deliberate reveal system site-wide, so neutralize the legacy rule
   outright rather than trying to make its observer more reliable. */
.clg-page[data-clg-js] [data-clg-reveal]:not(.clg-is-revealed) {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: no-preference) {

/* ── 1.1 Scroll reveal ─────────────────────────────────────────────────── */
html.clg-mo [data-clg-reveal]:not(.clg-mo-in),
html.clg-mo .clg-mo-item:not(.clg-mo-in) {
  opacity: 0;
  transform: translateY(16px);
}
html.clg-mo [data-clg-reveal],
html.clg-mo .clg-mo-item {
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--clg-mo-delay, 0ms);
}
html.clg-mo [data-clg-reveal].clg-mo-in,
html.clg-mo .clg-mo-item.clg-mo-in {
  opacity: 1;
  transform: none;
}

/* ── 1.3 Deboss heading settle (hot-stamp die press) ───────────────────── */
@keyframes clg-mo-deboss {
  0%   { text-shadow: none; }
  55%  { text-shadow: 0 2px 1px rgba(255,255,255,.55), 0 -2px 2px rgba(23,18,15,.22); }
  100% { text-shadow: 0 1px 0 rgba(255,255,255,.45), 0 -1px 1px rgba(23,18,15,.12); }
}
html.clg-mo [data-clg-reveal].clg-mo-in > h2,
html.clg-mo [data-clg-reveal].clg-mo-in > h1 {
  animation: clg-mo-deboss 1s cubic-bezier(.22,.61,.36,1) .25s both;
}

/* ── 1.4 "Ours" badge glow — once, after its row settles ───────────────── */
@keyframes clg-mo-tagpulse {
  0%   { box-shadow: 0 0 0 0 rgba(143,79,36,.5); }
  100% { box-shadow: 0 0 0 10px rgba(143,79,36,0); }
}
html.clg-mo .clg-mo-item.clg-mo-in .clg-compare-tag {
  animation: clg-mo-tagpulse 1.1s ease-out .55s 1 both;
}

/* ── 1.5 Eyebrow stitch line draws in ──────────────────────────────────── */
html.clg-mo .clg-eyebrow { position: relative; }
html.clg-mo .clg-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 0;
  background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px);
  opacity: .65;
  transition: width .8s cubic-bezier(.22,.61,.36,1) .2s;
}
html.clg-mo .clg-mo-in .clg-eyebrow::after,
html.clg-mo .clg-eyebrow.clg-mo-in::after { width: 34px; }

/* ── 1.6 Stitched-border CTA hover ─────────────────────────────────────── */
html.clg-mo .clg-mo-stitch { position: relative; }
html.clg-mo .clg-mo-stitch::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed currentColor;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
html.clg-mo .clg-mo-stitch:hover::after { opacity: .5; }

/* ── 1.2 Leather bookmark scroll ribbon ────────────────────────────────── */
html.clg-mo .clg-mo-ribbon {
  position: fixed;
  top: 0;
  right: 14px;
  width: 9px;
  height: 100%;
  z-index: 99990;
  pointer-events: none;
}
html.clg-mo .clg-mo-ribbon-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background:
    repeating-linear-gradient(180deg, rgba(255,244,230,.5) 0 4px, transparent 4px 9px) left/1px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,244,230,.5) 0 4px, transparent 4px 9px) right/1px 100% no-repeat,
    linear-gradient(180deg, #9a5a2b, #6f3a18);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px));
  box-shadow: 0 1px 4px rgba(23,18,15,.28);
  transition: height .15s linear;
}
@media (max-width: 768px) {
  html.clg-mo .clg-mo-ribbon { right: 6px; width: 6px; }
}

/* ── 1.3 Journey's-end cross (revealed at 100% scroll) ─────────────────── */
html.clg-mo .clg-mo-cross {
  position: fixed;
  right: 7px;               /* centers the 24px glyph on the 9px ribbon (right:14px) */
  bottom: 14px;
  z-index: 99992;
  pointer-events: none;
  opacity: 0;
  transform: translateY(9px) scale(.9);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  filter: drop-shadow(0 1px 3px rgba(23,18,15,.4));
}
/* Stroke draw-in: vertical beam first, crossbar a beat later. */
html.clg-mo .clg-mo-cross .clg-mo-cross-v { stroke-dasharray: 34; stroke-dashoffset: 34; transition: stroke-dashoffset .7s ease .05s; }
html.clg-mo .clg-mo-cross .clg-mo-cross-h { stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .5s ease .5s; }
html.clg-mo .clg-mo-cross.clg-mo-cross-on { opacity: 1; transform: translateY(0) scale(1); }
html.clg-mo .clg-mo-cross.clg-mo-cross-on .clg-mo-cross-v,
html.clg-mo .clg-mo-cross.clg-mo-cross-on .clg-mo-cross-h { stroke-dashoffset: 0; }
@media (max-width: 768px) {
  html.clg-mo .clg-mo-cross { right: 4px; bottom: 10px; transform: translateY(9px) scale(.8); }
  html.clg-mo .clg-mo-cross.clg-mo-cross-on { transform: translateY(0) scale(.85); }
}

/* ── 2.1 "Lamp unto my feet" cursor light (dark zones, fine pointers) ──── */
html.clg-mo .clg-mo-lamp {
  position: fixed;
  inset: 0;
  z-index: 99991;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(340px circle at var(--clg-mx, 50%) var(--clg-my, 50%),
    rgba(255,205,140,.18), rgba(255,205,140,.06) 45%, transparent 70%);
  mix-blend-mode: screen;
}
html.clg-mo .clg-mo-lamp.clg-mo-lamp-on { opacity: 1; }

/* ── 2.2 Magnetic CTAs ─────────────────────────────────────────────────── */
html.clg-mo .clg-mo-magnet { transition: transform .25s cubic-bezier(.22,.61,.36,1); will-change: transform; }

/* ── 2.3 Verse-of-the-day word-by-word ─────────────────────────────────── */
html.clg-mo .clg-votd-text .clg-mo-w {
  opacity: 0;
  display: inline-block;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--clg-mo-delay, 0ms);
}
html.clg-mo .clg-votd-text.clg-mo-in .clg-mo-w { opacity: 1; transform: none; }

/* ── 2.4 Listen-button playing pulse ───────────────────────────────────── */
@keyframes clg-mo-listen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(143,79,36,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(143,79,36,.12); }
}
html.clg-mo .clg-mo-playing { animation: clg-mo-listen 1.4s ease-in-out infinite; }

/* ── 2.5 Sheen sweep on our own cards ──────────────────────────────────── */
html.clg-mo .clg-il-card { position: relative; }
html.clg-mo .clg-il-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255,250,240,.32), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .9s ease;
}
html.clg-mo .clg-il-card:hover::after { left: 130%; }

} /* end prefers-reduced-motion: no-preference */