/* ============================================================
   JEWELLE & PAOLO — COMING SOON
   Living golden-hour hero · gold light-motes · film grain
   Depends on: fonts.css + tokens.css
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#161634;color:var(--paper);
  font-family:var(--font-text);
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
.amp{color:var(--terracotta);font-style:italic;font-weight:400}

.cs{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}

/* ---- living gradient ---- */
.cs-gradient{position:absolute;inset:0;z-index:0;
  background:linear-gradient(158deg,#161634 0%,#2e306a 44%,#4a3550 72%,#6a3d31 100%)}
.glow{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform,opacity}
.glow-1{width:62vmax;height:62vmax;top:-18%;right:-12%;opacity:.6;
  background:radial-gradient(circle,#e96e42 0%,rgba(233,110,66,0) 62%);animation:drift1 26s ease-in-out infinite}
.glow-2{width:52vmax;height:52vmax;bottom:-20%;left:-14%;opacity:.5;
  background:radial-gradient(circle,#e5b43a 0%,rgba(229,180,58,0) 62%);animation:drift2 34s ease-in-out infinite}
.glow-3{width:44vmax;height:44vmax;top:30%;left:40%;opacity:.4;
  background:radial-gradient(circle,#7d4b8c 0%,rgba(125,75,140,0) 60%);animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,4vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5vw,-5vh) scale(1.15)}}
@keyframes drift3{0%,100%{transform:translate(-50%,0) scale(1);opacity:.28}50%{transform:translate(-42%,6vh) scale(1.2);opacity:.5}}

/* ---- particles ---- */
.cs-particles{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---- film grain ---- */
.cs-grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cs-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 42%,transparent 42%,rgba(15,13,34,0.62) 100%)}
.cs-frame{position:absolute;inset:22px;z-index:3;pointer-events:none;border:1px solid rgba(229,180,58,0.42);animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%,100%{border-color:rgba(229,180,58,0.28)}50%{border-color:rgba(229,180,58,0.6)}}

/* ---- magical snoopy sigil ---- */
.cs-sigil-wrap{display:flex;justify-content:center;margin-bottom:0.7rem}
.cs-sigil{width:clamp(94px,20vw,122px);height:auto;overflow:visible;filter:drop-shadow(0 0 15px rgba(229,180,58,0.5))}
.cs-sigil .sigil-spin-cw,.cs-sigil .sigil-spin-ccw,.cs-sigil .sigil-gems,.cs-sigil .sigil-pulse{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}
@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:4;padding:2rem 1.4rem;max-width:840px;will-change:transform}
.cs-monogram{font-family:var(--font-display);font-size:1.5rem;letter-spacing:0.34em;color:var(--gold);margin-bottom:1.6rem}
.cs-monogram span{color:rgba(248,248,248,0.6)}
.cs-eyebrow{font-family:var(--font-ui);font-size:12px;font-weight:500;letter-spacing:0.34em;text-transform:uppercase;color:rgba(248,248,248,0.78);margin-bottom:1.1rem}
.cs-title{font-family:var(--font-display);font-weight:500;font-size:clamp(2.2rem,10.5vw,7rem);line-height:0.98;color:#fff;letter-spacing:0.01em;white-space:nowrap;
  text-shadow:0 2px 40px rgba(233,110,66,0.35)}
.cs-sub{font-family:var(--font-display);font-style:italic;font-size:clamp(1.15rem,3.2vw,1.7rem);color:rgba(248,248,248,0.92);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:60px;background:linear-gradient(90deg,transparent,var(--gold))}
.cs-rule::after{background:linear-gradient(90deg,var(--gold),transparent)}
.cs-rule span{width:7px;height:7px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 14px rgba(229,180,58,0.8)}

.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:500;font-size:clamp(2.2rem,7vw,3.4rem);line-height:1;color:#fff}
.cc-l{font-family:var(--font-ui);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(248,248,248,0.6);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.3rem}
.btn{display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--font-ui);font-size:12px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;padding:15px 34px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:transform .25s ease,background .25s ease,box-shadow .25s ease}
.btn-primary{background:var(--terracotta);color:#fff;box-shadow:0 10px 30px rgba(233,110,66,0.3)}
.btn-primary:hover{background:var(--terracotta-deep);transform:translateY(-2px);box-shadow:0 14px 38px rgba(233,110,66,0.42)}
.btn.done{background:var(--gold);color:var(--navy);box-shadow:0 10px 30px rgba(229,180,58,0.35)}

.cs-note{margin-top:1.9rem;font-family:var(--font-ui);font-size:11.5px;letter-spacing:0.1em;color:rgba(248,248,248,0.62);line-height:2}
.cs-tag{display:block;font-family:var(--font-display);font-style:italic;font-size:1.25rem;letter-spacing:0.02em;color:var(--gold);margin-top:0.3rem;text-transform:none}

/* ---- entrance ---- */
.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}}

@media (prefers-reduced-motion:reduce){
  .glow,.cs-frame{animation:none}
  .sigil-spin-cw,.sigil-spin-ccw,.sigil-gems,.sigil-pulse{animation:none}
  .anim{animation:none;opacity:1;transform:none}
}
@media (max-width:480px){
  .cs-frame{inset:12px}
  .cc{min-width:52px}
  .cs-count{gap:0.35rem}
}