/* =====================================================================
   NATOKGHOR — LIVELY LAYER  (home page only)
   Theatre curtain entrance → modern, light, glassy page.
   Loaded AFTER style.css and polish.css. Remove via one <link> + the
   curtain markup to revert. Honours prefers-reduced-motion.
   ===================================================================== */

/* ---------- 0. THE CURTAIN (one-time entrance showpiece) ---------- */
#curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;display:flex;}
#curtain .panel{
  width:50.5%;height:100%;position:relative;   /* slight overlap removes the centre seam */
  background:
    repeating-linear-gradient(90deg,#5C0F0F 0 18px,#7A1414 18px 30px,#4A0C0C 30px 44px),
    linear-gradient(90deg,#3A0808,#7A1414);
  box-shadow:inset -30px 0 60px rgba(0,0,0,.5);
  will-change:transform;backface-visibility:hidden;transform:translateZ(0);
}
#curtain .panel.right{transform:scaleX(-1);}
#curtain .panel::after{ /* gold fringe at the bottom */
  content:"";position:absolute;left:0;right:0;bottom:0;height:14px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 12px,var(--gold-light) 12px 24px);
}
#curtain .rod{position:absolute;top:0;left:0;right:0;height:10px;z-index:2;
  background:linear-gradient(180deg,#E8B84B,#9A7016);box-shadow:0 2px 8px rgba(0,0,0,.4);
  will-change:transform;backface-visibility:hidden;}
#curtain .title{
  position:absolute;top:42%;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--disp);font-size:clamp(2.2rem,7vw,4rem);font-weight:700;
  color:var(--gold-light);letter-spacing:.06em;text-shadow:0 2px 30px rgba(232,184,75,.5);
  opacity:0;animation:curtain-title 1s ease .15s forwards;will-change:transform,opacity;
}
/* smoother, GPU-composited curtain reveal (easeInOutQuint-style curve) */
.curtain-go .panel.left{animation:part-left 2.3s cubic-bezier(.83,0,.17,1) 1.0s forwards;}
.curtain-go .panel.right{animation:part-right 2.3s cubic-bezier(.83,0,.17,1) 1.0s forwards;}
.curtain-go .rod{animation:rod-up 2.3s cubic-bezier(.83,0,.17,1) 1.0s forwards;}
.curtain-go .title{animation:curtain-title-out .7s ease 1.0s forwards;}
.curtain-go #curtain{animation:curtain-done 0s linear 3.5s forwards;}
@keyframes curtain-title{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes curtain-title-out{to{opacity:0;}}
@keyframes part-left{to{transform:translateX(-100%);}}
@keyframes part-right{to{transform:scaleX(-1) translateX(-100%);}}
@keyframes rod-up{to{transform:translateY(-100%);}}
@keyframes curtain-done{to{display:none;visibility:hidden;}}

/* ---------- 1. DARK THEATRICAL BASE (home only via .lively) ---------- */
.lively{background:
  radial-gradient(1150px 560px at 84% -12%, rgba(212,175,55,.08) 0%, transparent 58%),
  radial-gradient(900px 520px at -10% 6%, rgba(146,43,62,.22) 0%, transparent 55%),
  #0C0C0C;}

/* hero: the old-site maroon curtain (same in light + dark) */
.lively .hero{
  background:linear-gradient(165deg,#4A0C0C 0%,#6B1414 55%,#7A1818 100%);
}
.lively .hero::before{opacity:.5;}

/* ---------- 2. DARK GLASS CARDS ---------- */
.lively .drama-card,
.lively .how-card{
  background:rgba(22,22,22,.72);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(212,175,55,.14);
  box-shadow:0 6px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(212,175,55,.06);
}
.lively .drama-card:hover,
.lively .how-card:hover{
  border-color:rgba(212,175,55,.32);
  box-shadow:0 22px 50px rgba(0,0,0,.65), inset 0 1px 0 rgba(212,175,55,.12);
}

/* ---------- 3. SPRINGY, CONFIDENT HOVER (3D tilt toward cursor) ---------- */
.lively .drama-card{
  transition:transform .35s cubic-bezier(.34,1.56,.4,1), box-shadow .35s ease;
  transform-style:preserve-3d;will-change:transform;
}
.lively .drama-card:hover{transform:translateY(-8px) scale(1.025);}

/* ---------- 4. STAGGERED ENTRANCE for buzz cards ("dealing cards") ---------- */
.lively .reveal{opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .6s ease, transform .6s cubic-bezier(.34,1.4,.4,1);}
.lively .reveal.in{opacity:1;transform:none;}

/* ---------- 5. LIVELIER HERO ENTRANCE (springy, more travel) ---------- */
.lively .hero-mark{animation:pop-in .9s cubic-bezier(.34,1.5,.4,1) both, marquee-glow 6s ease-in-out 1s infinite;}
.lively .hero-en{animation:rise .7s cubic-bezier(.34,1.4,.4,1) .15s both;}
.lively .hero-tag{animation:rise .7s cubic-bezier(.34,1.4,.4,1) .26s both;}
.lively .hero-tag-bn{animation:rise .7s cubic-bezier(.34,1.4,.4,1) .36s both;}
.lively .search-wrap{animation:rise .7s cubic-bezier(.34,1.4,.4,1) .46s both;}
.lively .hero-stats{animation:rise .7s cubic-bezier(.34,1.4,.4,1) .58s both;}
@keyframes pop-in{0%{opacity:0;transform:translateY(24px) scale(.9);}100%{opacity:1;transform:none;}}

/* ---------- 6. GLASS WEEK-CARDS + brighter arrows ---------- */
.lively .car-arrow{
  background:rgba(255,255,255,.16);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.25);
}
.lively .car-arrow:hover{background:var(--gold);border-color:var(--gold);color:#fff;}

/* ---------- 7. SCORE RINGS pulse subtly when they finish filling ---------- */
.lively .ring{will-change:transform;}
.lively .ring.counted{animation:ring-pop .5s cubic-bezier(.34,1.6,.4,1);}
@keyframes ring-pop{0%{transform:scale(1);}45%{transform:scale(1.12);}100%{transform:scale(1);}}

/* ---------- 8. CTA band: glassy sheen sweep ---------- */
.lively .cta-band{box-shadow:0 18px 50px rgba(58,8,8,.22);}

/* ---------- reduced motion: no curtain, no springs ---------- */
@media (prefers-reduced-motion:reduce){
  #curtain{display:none!important;}
  .lively .hero-mark,.lively .hero-en,.lively .hero-tag,.lively .hero-tag-bn,
  .lively .search-wrap,.lively .hero-stats{animation:none!important;}
  .lively .reveal{opacity:1!important;transform:none!important;}
  .lively .ring.counted{animation:none!important;}
}

/* ---------- LIGHT THEME base (home only via .lively). The hero stays
   maroon in both themes; only the page background + cards go light. ---------- */
html[data-theme="light"] .lively{background:
  radial-gradient(1100px 500px at 80% -10%, #FBEFE0 0%, transparent 60%),
  radial-gradient(900px 500px at -10% 10%, #F3EEF7 0%, transparent 55%),
  #FAF7F2;}
html[data-theme="light"] .lively .drama-card,
html[data-theme="light"] .lively .how-card{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 22px rgba(58,8,8,.08), inset 0 1px 0 rgba(255,255,255,.6);
}