/* ============================================================
   Cosmic Mother interactive band — shared component
   Used on index.html (data-mode="single") and
   cosmic-mother.html (data-mode="spread").
   Paired with cosmic-band.js. Self-contained; does not touch styles.css.
   Palette lifted from the pick-a-card demo.
   ============================================================ */

.cm-band{
  --cm-cream:#FAF5F2; --cm-gold:#D4B062; --cm-mauve:#b892a8;
  position:relative; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 90% at 50% 12%,#2a1730 0%,#1A0F1E 42%,#0E0712 100%);
  color:var(--cm-cream); text-align:center;
  padding:clamp(56px,9vh,96px) 0;
}
/* starfield canvas sits behind the content, painted by cosmic-band.js */
.cm-sky{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block}
.cm-inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2.8vh,28px)}

.cm-eyebrow{font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--cm-gold); margin:0}
.cm-head{font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:400; font-size:clamp(32px,5.6vw,56px); line-height:1.08; margin:0; max-width:20ch; color:var(--cm-cream)}

/* ---------- shared card face styling ---------- */
.cm-face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:13px; overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(212,176,98,.3), inset 0 0 0 2px rgba(212,176,98,.26)}
.cm-face img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none}
.cm-front{transform:rotateY(180deg)}
.cm-face::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(115deg,transparent 40%,rgba(255,243,214,0) 46%,rgba(255,243,214,.55) 50%,rgba(255,243,214,0) 54%,transparent 60%);
  background-size:260% 260%; background-position:120% 0; mix-blend-mode:screen; opacity:0}
/* quiet veil so a face-down card reads as a back, not an already-revealed front */
.cm-back::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:13px;
  background:linear-gradient(180deg,rgba(20,10,24,.20),rgba(20,10,24,.14));
  box-shadow:inset 0 0 0 2px rgba(212,176,98,.45), inset 0 0 0 6px rgba(20,10,24,.35);
  transition:opacity .6s ease}
.cm-fan-card .cm-back::before{background:linear-gradient(180deg,rgba(20,10,24,.52),rgba(20,10,24,.40))}
.cm-fan-card:hover .cm-back::before,.cm-fan-card:focus-visible .cm-back::before{background:linear-gradient(180deg,rgba(20,10,24,.34),rgba(20,10,24,.24))}
.cm-fan-card.cm-chosen .cm-back::before{opacity:0}

/* ---------- SINGLE mode: one breathing card (homepage) ---------- */
.cm-stage{position:relative; display:grid; place-items:center; margin-top:6px}
.cm-card{-webkit-tap-highlight-color:transparent; appearance:none; -webkit-appearance:none; background:none; border:0; padding:0;
  cursor:pointer; display:block; width:min(64vw,258px); aspect-ratio:89/127; position:relative; perspective:1500px; z-index:1;
  touch-action:manipulation; -webkit-user-select:none; user-select:none}
.cm-float{position:absolute; inset:0; display:block; transform-style:preserve-3d; animation:cm-breathe 7s ease-in-out infinite}
.cm-3d{position:absolute; inset:0; display:block; transform-style:preserve-3d; transform:rotateY(0deg)}
.cm-card.cm-flip .cm-3d{animation:cm-flip 2.3s forwards}
.cm-card.cm-flip .cm-face::after{animation:cm-foil 2.3s cubic-bezier(.4,0,.2,1) forwards}
.cm-card:focus-visible .cm-face{box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 2px var(--cm-gold),0 0 40px rgba(212,176,98,.4)}

/* ---------- SPREAD mode: breath + fan of cards (case page) ---------- */
/* .cm-zone stacks the breath orb and the fan in the same grid cell, so the
   band never reserves a second empty slab of space for the hidden state */
.cm-zone{display:grid; grid-template-columns:100%; justify-items:center; align-items:center; margin-top:6px; width:100%}
.cm-zone > *{grid-area:1/1}
.cm-breath{-webkit-tap-highlight-color:transparent; appearance:none; -webkit-appearance:none; background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:0; transition:opacity .7s ease, transform .7s ease;
  touch-action:none; -webkit-user-select:none; user-select:none; z-index:2}
.cm-breath:focus-visible{outline:2px solid var(--cm-gold); outline-offset:8px; border-radius:12px}
.cm-band.cm-begun .cm-breath{opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden}
/* glow lives inside an oversized gradient (no box-shadow — large shadow blurs
   can rasterise with square layer bounds); visible core ≈ 100px, halo ≈ 210px */
.cm-breath-orb{position:relative; width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle at 50% 47%,#fff6dd 0%,#ecc985 13%,rgba(212,176,98,.55) 24%,rgba(212,176,98,.16) 38%,rgba(212,176,98,.05) 55%,transparent 72%);
  animation:cm-orb 5s ease-in-out infinite;
  transition:transform .5s ease}
/* charging ring — expands while held */
.cm-breath-orb::after{content:""; position:absolute; inset:34px; border-radius:50%; border:2px solid rgba(230,200,130,.8); opacity:0; transform:scale(.7)}
/* press-and-hold: inhale — orb swells, ring expands (durations match INHALE in cosmic-band.js) */
.cm-breath.cm-holding .cm-breath-orb{animation:none; transform:scale(1.34); transition:transform 1.2s ease-in-out}
.cm-breath.cm-holding .cm-breath-orb::after{opacity:.9; transform:scale(1.24); transition:transform 1.2s ease-out, opacity .4s ease-out}
/* …exhale — orb settles back down before the cards appear (matches EXHALE) */
.cm-breath.cm-exhaling .cm-breath-orb{transform:scale(1); transition:transform 1.2s ease-in-out}
.cm-breath.cm-exhaling .cm-breath-orb::after{opacity:.35; transform:scale(.9); transition:transform 1.2s ease-in-out, opacity 1.2s ease-in-out}
.cm-breath-cue{font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:rgba(244,233,240,.78); margin:0}

.cm-spread{position:relative; width:min(92vw,560px); max-width:100%; height:clamp(220px,44vw,300px);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .8s ease, transform .8s ease, visibility 0s linear .8s; pointer-events:none; z-index:1}
.cm-band.cm-begun .cm-spread{opacity:1; visibility:visible; transform:none; pointer-events:auto;
  transition:opacity .8s ease, transform .8s ease, visibility 0s}
.cm-fan-card{-webkit-tap-highlight-color:transparent; appearance:none; -webkit-appearance:none; background:none; border:0; padding:0; cursor:pointer;
  position:absolute; top:50%; left:50%; width:clamp(104px,20vw,140px); aspect-ratio:89/127;
  margin-left:calc(clamp(104px,20vw,140px) * -.5); margin-top:calc(clamp(104px,20vw,140px) * -.714);
  perspective:1400px;
  transform:translateX(var(--x)) translateY(var(--y)) rotate(var(--a));
  transition:transform .5s cubic-bezier(.19,1,.22,1), opacity .5s ease; will-change:transform;
  touch-action:manipulation; -webkit-user-select:none; user-select:none}
/* fan geometry — wider arc on desktop, vw-scaled on small screens so nothing clips */
.cm-fan-card:nth-of-type(1){--x:max(-184px,-31.5vw); --y:22px; --a:-14deg}
.cm-fan-card:nth-of-type(2){--x:max(-92px,-15.75vw); --y:6px;  --a:-7deg}
.cm-fan-card:nth-of-type(3){--x:0px;                  --y:0px;  --a:0deg}
.cm-fan-card:nth-of-type(4){--x:min(92px,15.75vw);    --y:6px;  --a:7deg}
.cm-fan-card:nth-of-type(5){--x:min(184px,31.5vw);    --y:22px; --a:14deg}
.cm-fan-3d{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateY(0deg)}
.cm-fan-card:hover, .cm-fan-card:focus-visible{transform:translateX(var(--x)) translateY(calc(var(--y) - 20px)) rotate(var(--a)); z-index:6}
.cm-fan-card:focus-visible{outline:none}
.cm-fan-card:focus-visible .cm-face{box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 2px var(--cm-gold),0 0 40px rgba(212,176,98,.4)}
/* once picked: non-chosen cards drift away, chosen glides to centre + flips */
.cm-spread.cm-picked .cm-fan-card:not(.cm-chosen){opacity:0; transform:translateX(calc(var(--x)*1.4)) translateY(var(--y)) rotate(var(--a)) scale(.9); pointer-events:none}
.cm-spread.cm-picked .cm-fan-card.cm-chosen{transform:translateX(0) translateY(-4px) rotate(0deg) scale(1.45); z-index:10; cursor:default}
.cm-fan-card.cm-chosen .cm-fan-3d{animation:cm-flip 2.3s forwards}
.cm-fan-card.cm-chosen .cm-face::after{animation:cm-foil 2.3s cubic-bezier(.4,0,.2,1) forwards}

/* ---------- shockwave ring — one-shot on flip (both modes) ---------- */
.cm-shock{position:absolute; left:50%; top:50%; width:clamp(150px,42vw,260px); aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.5); border-radius:50%; border:1px solid var(--cm-gold);
  opacity:0; pointer-events:none; z-index:0}
.cm-shock.cm-go{animation:cm-shock 2.1s cubic-bezier(.19,1,.22,1) forwards}

/* ---------- hint + reveal ---------- */
.cm-hint{font-family:'Inter',system-ui,sans-serif; font-weight:500; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,233,240,.66); margin:0; transition:opacity .4s ease}
.cm-hint.cm-gone{opacity:0}
/* in spread mode the "Pick a card" hint only appears once the breath is done */
.cm-band[data-mode="spread"] .cm-hint{opacity:0}
.cm-band[data-mode="spread"].cm-begun .cm-hint{opacity:1}
.cm-reveal{max-width:600px; min-height:1px}
.cm-name{font-family:'Cormorant Garamond',Georgia,serif; font-weight:500; font-size:clamp(26px,5vw,40px); margin:0 0 10px;
  background:linear-gradient(180deg,#fff 0%,#f3e3c0 55%,var(--cm-gold) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; transform:translateY(16px); transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1)}
.cm-line{font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; font-size:clamp(19px,3.4vw,25px); line-height:1.5; margin:0;
  background:linear-gradient(180deg,#fbf1d8 0%,#efe2d4 60%,#d9c69a 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  opacity:0; transform:translateY(18px); filter:blur(3px); transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1),filter .55s cubic-bezier(.4,0,.2,1)}
.cm-band.cm-revealed .cm-name{opacity:1; transform:none}
.cm-band.cm-revealed .cm-line{opacity:1; transform:none; filter:none}
.cm-cta{display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:center; align-items:center; margin-top:6px;
  opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .5s ease .15s, transform .5s ease .15s}
.cm-band.cm-revealed .cm-cta{opacity:1; transform:none; pointer-events:auto}
.cm-primary{font-family:'Inter',system-ui,sans-serif; font-weight:600; letter-spacing:.01em; font-size:14px; padding:13px 24px; border-radius:40px; text-decoration:none;
  background:linear-gradient(180deg,#e7c877,var(--cm-gold)); color:#2a1c05; box-shadow:0 8px 24px rgba(212,176,98,.28); transition:transform .3s ease, box-shadow .3s ease}
.cm-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(212,176,98,.42)}
.cm-story{font-family:'Inter',system-ui,sans-serif; font-weight:600; font-size:14px; color:var(--cm-cream); text-decoration:none; opacity:.9}
.cm-story:hover{color:var(--cm-gold)}

/* ---------- MINI variant: compact homepage teaser ---------- */
.cm-band.cm-mini{padding:clamp(44px,7vh,72px) 0}
.cm-mini .cm-cols{display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,64px); align-items:center; text-align:left; max-width:820px; margin-inline:auto}
.cm-mini .cm-stage{margin:0}
.cm-mini .cm-card{width:min(44vw,190px)}
.cm-mini .cm-copy{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.cm-mini .cm-head{font-size:clamp(26px,3.4vw,40px); max-width:18ch}
.cm-mini .cm-reveal{max-width:none}
.cm-mini .cm-name{font-size:clamp(22px,2.6vw,30px); margin:0 0 6px}
.cm-mini .cm-line{font-size:clamp(17px,1.9vw,21px)}
/* hint and reveal share one reserved slot, so the band never changes height */
.cm-mini .cm-swap{display:grid; min-height:94px; align-items:start; justify-items:start}
.cm-mini .cm-swap > *{grid-area:1/1}
@media(max-width:680px){ .cm-mini .cm-swap{justify-items:center} }
/* teaser CTA is never gated behind the flip */
.cm-mini .cm-cta{opacity:1; transform:none; pointer-events:auto; margin-top:4px}
@media(max-width:680px){
  .cm-mini .cm-cols{grid-template-columns:1fr; justify-items:center; text-align:center; gap:22px}
  .cm-mini .cm-copy{align-items:center}
  .cm-mini .cm-card{width:min(52vw,190px)}
}

/* ---------- keyframes ---------- */
@keyframes cm-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes cm-orb{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}}
@keyframes cm-flip{0%{transform:rotateY(0deg) scale(1);animation-timing-function:ease-in}50%{transform:rotateY(90deg) scale(1.06);animation-timing-function:ease-out}100%{transform:rotateY(180deg) scale(1)}}
@keyframes cm-foil{0%{opacity:0;background-position:120% 0}55%{opacity:.9}100%{opacity:0;background-position:-60% 0}}
@keyframes cm-shock{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}18%{opacity:.55}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4)}}

/* ---------- reduced motion: collapse to calm, no looping ---------- */
@media (prefers-reduced-motion:reduce){
  .cm-float,.cm-breath-orb{animation:none}
  .cm-card.cm-flip .cm-3d,.cm-fan-card.cm-chosen .cm-fan-3d{animation:none; transform:rotateY(180deg)}
  .cm-card.cm-flip .cm-face::after,.cm-fan-card.cm-chosen .cm-face::after{animation:none}
  .cm-shock.cm-go{animation:none}
  .cm-name,.cm-line{transition:opacity .3s linear; transform:none; filter:none}
  .cm-cta,.cm-spread,.cm-breath{transition:opacity .3s linear}
  .cm-fan-card{transition:opacity .3s linear}
}