/* ============================================================
   AL Creations — Reel scene styles (shared)
   Used by the standalone reel.html AND the homepage embed.
   ============================================================ */
:root{ --r-plum:#4a1f3d; --r-plum-dark:#35132b; --r-gold:#c9a24b; --r-gold-soft:#e7cf94; }

.stage{ position:absolute; inset:0; overflow:hidden; container-type:size; }

.progress{ position:absolute; top:0; left:0; right:0; height:4px; background:rgba(255,255,255,.18); z-index:20; }
.progress > i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--r-gold),var(--r-gold-soft)); }

.slide{ position:absolute; inset:0; opacity:0; color:#fff; font-family:"Poppins",sans-serif; }
.slide.show{ opacity:1; }
.slide .bg{ position:absolute; inset:0; background-size:cover; background-position:center top; }
.slide.show .bg.kb{ animation:kb var(--dur,4000ms) linear forwards; }
@keyframes kb{ from{ transform:scale(1.02); } to{ transform:scale(1.16); } }
.slide .scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,8,18,.85) 0%, rgba(20,8,18,.12) 45%, rgba(20,8,18,.35) 100%); }
.slide .scrim.center{ background:radial-gradient(circle at 50% 45%, rgba(53,19,43,.35), rgba(14,7,16,.9) 92%); }

.cap{ position:absolute; left:0; right:0; bottom:8%; padding:0 8%; text-align:center; z-index:5; }
.cap.mid{ top:50%; bottom:auto; transform:translateY(-50%); }
.eyebrow{ letter-spacing:5px; text-transform:uppercase; font-size:12px; color:var(--r-gold-soft); margin-bottom:10px; }
.headline{ font-family:"Cormorant Garamond",serif; font-size:clamp(30px,7cqw,54px); line-height:1.05; font-weight:700; text-shadow:0 4px 24px rgba(0,0,0,.5); margin:0; }
.headline em{ color:var(--r-gold-soft); font-style:italic; }
.sub{ font-size:clamp(12px,2.6cqw,16px); color:#f0e6ee; margin-top:8px; }
.price{ display:inline-block; margin-top:14px; background:var(--r-gold); color:#2a1c07; font-weight:700; font-size:clamp(15px,3.4cqw,20px); padding:8px 18px; border-radius:999px; }
.price s{ color:#7a5a13; font-weight:500; font-size:.7em; margin-left:6px; }
.bigsale{ font-family:"Cormorant Garamond",serif; font-size:clamp(56px,15cqw,96px); font-weight:700; color:var(--r-gold-soft); line-height:.95; }
.reel-logo{ height:clamp(52px,16cqw,80px); width:auto; margin:0 auto 6px; filter:drop-shadow(0 6px 20px rgba(0,0,0,.5)); }
.pill-row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.pill{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px); padding:6px 14px; border-radius:999px; font-size:clamp(11px,2.4cqw,13px); }
.reel-cta{ display:inline-block; margin-top:16px; background:#fff; color:var(--r-plum); font-weight:700; padding:11px 24px; border-radius:999px; font-size:clamp(13px,3cqw,16px); }

.grid{ position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:6px; padding:6px; }
.grid .g{ background-size:cover; background-position:center; border-radius:8px; opacity:0; transform:scale(.9); }
.slide.show .grid .g{ animation:pop .5s ease forwards; }
.slide.show .grid .g:nth-child(1){ animation-delay:.05s } .slide.show .grid .g:nth-child(2){ animation-delay:.20s }
.slide.show .grid .g:nth-child(3){ animation-delay:.35s } .slide.show .grid .g:nth-child(4){ animation-delay:.50s }
.slide.show .grid .g:nth-child(5){ animation-delay:.65s } .slide.show .grid .g:nth-child(6){ animation-delay:.80s }
@keyframes pop{ to{ opacity:1; transform:scale(1); } }

.slide.show .anim{ animation:rup .7s cubic-bezier(.2,.8,.2,1) both; }
.slide.show .anim.d1{ animation-delay:.15s } .slide.show .anim.d2{ animation-delay:.32s } .slide.show .anim.d3{ animation-delay:.5s }
@keyframes rup{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }