/* ============================================================
   MERCE & IAN - THE INVITATION BLOCK  (shared)
   Yin-yang leaf sigil · monogram · names · date · countdown ·
   buttons · "Coming Soon" lockup · the .anim entrance.

   Loaded by index.html (and by the Coming Soon page until launch). Extracted verbatim
   from coming-soon.css - no values were changed.

   NOTE ON .anim - it is THIS BLOCK'S reveal class, not a general-purpose one.
   js/scene.js reveals `.cs-content .anim` and nothing else, so an .anim placed
   outside .cs-content on a GSAP page would be frozen invisible by the
   .js-gsap rule below. Page sections use .sec-in instead.

   Depends on: tokens.css   ·   behaviour in js/invite.js
   Owns the prefers-reduced-motion rules for its own selectors (see bottom).
   ============================================================ */
/* Its own family, not the display italic: the display italic is Ibarra,
   whose "&" is a swashy et-ligature. This one glyph keeps Bespoke's. */
.amp{font-family:var(--font-amp);color:var(--gold);font-style:italic;font-weight:500;font-size:0.86em;letter-spacing:0}
/* ============================================================
   YIN-YANG LEAF SIGIL
   ============================================================ */
.cs-sigil-wrap{display:flex;justify-content:center;margin-bottom:0.75rem}
.cs-sigil{width:clamp(96px,20vw,124px);height:auto;overflow:visible;filter:drop-shadow(0 0 15px rgba(201,162,75,0.5))}
.cs-sigil .sigil-spin-cw,.cs-sigil .sigil-spin-ccw,.cs-sigil .sigil-gems,.cs-sigil .sigil-pulse,.cs-sigil .yy{transform-box:fill-box;transform-origin:center}
.sigil-spin-cw{animation:sigilCW 48s linear infinite}
.sigil-spin-ccw{animation:sigilCCW 36s linear infinite}
.sigil-gems{animation:sigilCW 78s linear infinite}
.sigil-pulse{animation:sigilPulse 4.6s ease-in-out infinite}
.yy{animation:sigilCCW 26s linear infinite}
@keyframes sigilCW{to{transform:rotate(360deg)}}
@keyframes sigilCCW{to{transform:rotate(-360deg)}}
@keyframes sigilPulse{0%,100%{opacity:.42;transform:scale(.97)}50%{opacity:.8;transform:scale(1.05)}}

/* ============================================================
   CONTENT
   ============================================================ */
.cs-content{position:relative;z-index:10;padding:2rem 1.4rem;max-width:860px;will-change:transform,opacity}
.cs-monogram{font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.34em;color:var(--gold);margin-bottom:1.5rem}
.cs-monogram span{color:var(--tan-faint)}
.cs-eyebrow{font-family:var(--font-ui);font-size:12px;font-weight:500;letter-spacing:0.34em;text-transform:uppercase;color:var(--tan-mute);margin-bottom:1.1rem}
.cs-title{font-family:var(--font-script);font-weight:400;font-size:clamp(1.85rem,8.4vw,5.8rem);line-height:1.08;color:var(--tan-soft);letter-spacing:0.03em;white-space:nowrap;
  text-shadow:0 0 34px rgba(201,162,75,0.4),0 2px 44px rgba(110,36,54,0.28)}
.cs-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(1.15rem,3.2vw,1.7rem);color:var(--tan);margin-top:0.9rem}

.cs-rule{display:flex;align-items:center;justify-content:center;gap:0.9rem;margin:1.7rem 0 1.4rem}
.cs-rule::before,.cs-rule::after{content:"";height:1px;width:64px;background:linear-gradient(90deg,transparent,var(--gold))}
.cs-rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.cs-rule span{width:8px;height:8px;color:var(--gold);filter:drop-shadow(0 0 8px rgba(201,162,75,0.8))}
.cs-rule span svg{display:block;width:100%;height:100%;fill:currentColor}

.cs-date{font-family:var(--font-ui);font-size:clamp(11px,2.5vw,13px);letter-spacing:0.24em;text-transform:uppercase;color:var(--gold)}

/* ---- countdown ---- */
.cs-count{display:flex;align-items:baseline;justify-content:center;gap:0.7rem;margin-top:2rem}
.cc{display:flex;flex-direction:column;min-width:64px}
.cc-n{font-family:var(--font-display);font-weight:300;font-size:clamp(2.2rem,7vw,3.4rem);line-height:1;color:var(--tan-soft)}
.cc-l{font-family:var(--font-ui);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--tan-faint);margin-top:0.5rem}
.cc-sep{font-family:var(--font-display);font-size:clamp(1.6rem,5vw,2.6rem);color:var(--gold);opacity:0.7;align-self:flex-start}

/* ---- actions ---- */
.cs-actions{margin-top:2.4rem}
.btn{position:relative;display:inline-flex;align-items:center;gap:0.7rem;font-family:var(--font-ui);font-size:12px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;padding:16px 40px;border-radius:3px;cursor:pointer;overflow:hidden;
  color:var(--tan-soft);border:1px solid rgba(201,162,75,0.5);
  background:linear-gradient(180deg,rgba(110,36,54,0.62),rgba(78,25,38,0.62));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease}
.btn .btn-ic{position:relative;z-index:2;filter:drop-shadow(0 0 5px rgba(201,162,75,0.7))}
.btn span.btn-t{position:relative;z-index:2}
/* breathing enchant-glow */
.btn-primary{animation:btnGlow 4.5s ease-in-out infinite}
@keyframes btnGlow{
  0%,100%{box-shadow:0 0 0 rgba(201,162,75,0),0 10px 26px rgba(0,0,0,0.4),inset 0 0 18px rgba(201,162,75,0.1)}
  50%{box-shadow:0 0 22px rgba(201,162,75,0.34),0 12px 30px rgba(0,0,0,0.45),inset 0 0 24px rgba(201,162,75,0.2)}}
/* shimmer sweep across the face */
.btn::before{content:"";position:absolute;inset:0;z-index:1;transform:translateX(-130%) skewX(-18deg);
  background:linear-gradient(105deg,transparent 34%,rgba(231,220,198,0.4) 50%,transparent 66%);
  transition:transform .85s ease}
.btn:hover::before{transform:translateX(130%) skewX(-18deg)}
.btn-primary:hover{transform:translateY(-2px);border-color:var(--gold);animation:none;
  background:linear-gradient(180deg,rgba(130,44,64,0.72),rgba(90,29,44,0.72));
  box-shadow:0 0 30px rgba(201,162,75,0.45),0 16px 40px rgba(0,0,0,0.5),inset 0 0 26px rgba(201,162,75,0.24)}
.btn:active{transform:translateY(0)}
.btn.done{animation:none;color:var(--espresso);border-color:var(--gold);
  background:linear-gradient(180deg,#d9b45f,#c9a24b);
  box-shadow:0 0 26px rgba(201,162,75,0.5),0 12px 30px rgba(0,0,0,0.4)}

.cs-note{margin-top:1.9rem;font-family:var(--font-ui);font-size:11.5px;letter-spacing:0.1em;color:var(--tan-faint);line-height:2}

/* ---- magical "Coming Soon" ---- */
.cs-soon{margin-top:1.4rem;display:flex;align-items:center;justify-content:center;gap:1rem}
.cs-soon-line{width:clamp(30px,10vw,58px);height:1px;flex:0 0 auto;
  background:linear-gradient(90deg,transparent,var(--gold))}
.cs-soon-line.r{background:linear-gradient(90deg,var(--gold),transparent)}
.cs-soon-star{width:11px;height:11px;flex:0 0 auto;fill:var(--gold);opacity:.9;
  filter:drop-shadow(0 0 6px rgba(201,162,75,0.85));animation:soonTwinkle 3.4s ease-in-out infinite}
.cs-soon-star.r{animation-delay:1.1s}
@keyframes soonTwinkle{0%,100%{opacity:.5;transform:scale(.86) rotate(0deg)}50%{opacity:1;transform:scale(1.12) rotate(45deg)}}
.cs-soon-text{font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.35rem,4.4vw,2.1rem);letter-spacing:0.06em;white-space:nowrap;
  background:linear-gradient(90deg,#8f7130 0%,#c9a24b 30%,#f0e6cd 50%,#c9a24b 70%,#8f7130 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:soonShimmer 6s linear infinite}
@keyframes soonShimmer{to{background-position:-220% center}}

/* ---- entrance (staggered rise; GSAP enhances if present) ---- */
.anim{opacity:0;transform:translateY(22px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}
/* when GSAP drives the intro we hand it a clean slate */
.js-gsap .cs-content .anim{animation:none;opacity:0;transform:translateY(22px)}

/* ---- reduced motion: this file's selectors only ---- */
@media (prefers-reduced-motion:reduce){
  .sigil-spin-cw,.sigil-spin-ccw,.sigil-gems,.sigil-pulse,.yy{animation:none}
  .btn-primary,.cs-soon-star,.cs-soon-text{animation:none}
  .anim{animation:none;opacity:1;transform:none}
}
@media (max-width:480px){
  .cc{min-width:52px}
  .cs-count{gap:0.35rem}
  /* safety: never let a nowrap element cause horizontal scroll on tiny screens */
  .cs-content{max-width:100%}
}