/* ===== OG Elite — shared styles (red / black / white) ===== */
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',system-ui,sans-serif; color:#141417; background:#FFFFFF; }
.font-display { font-family:'Sora',sans-serif; }
.font-quote   { font-family:'Fraunces',serif; }

/* animated mesh blobs */
.mesh { position:absolute; inset:0; overflow:hidden; }
.blob { position:absolute; border-radius:9999px; filter:blur(70px); opacity:.55; animation:drift 18s ease-in-out infinite; }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(40px,-30px) scale(1.12)} 66%{transform:translate(-30px,25px) scale(.92)} }

/* scroll reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s} .reveal[data-d="3"]{transition-delay:.24s}

/* card hover */
.lift { transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.lift:hover { transform:translateY(-6px); box-shadow:0 24px 50px -24px rgba(0,0,0,.45); }

/* scarcity-free benefit ticker */
.ticker-track { animation:ticker 26s linear infinite; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* progress bar */
.progress-fill { width:0; transition:width 1.6s cubic-bezier(.2,.7,.2,1); }

/* image placeholder (styled so the demo looks intentional) */
.photo-slot { background:
   radial-gradient(120% 120% at 80% 0%, rgba(193,37,68,.30), transparent 55%),
   linear-gradient(135deg,#141417 0%, #000000 75%); position:relative; }
.photo-slot .tag { position:absolute; bottom:10px; left:10px; font-size:11px; letter-spacing:.04em;
   background:rgba(0,0,0,.55); color:#fff; padding:4px 8px; border-radius:6px; }

/* ===== HERO BACKGROUND SLIDESHOW =====
   To use REAL photos: give each .slide an inline style, e.g.
     <div class="slide active" style="background-image:url('assets/photo1.jpg')"></div>
   To use a VIDEO instead: delete the .slide divs and un-comment the <video> block in the hero. */
.slideshow { position:absolute; inset:0; overflow:hidden; }
.slide { position:absolute; inset:0; opacity:0; background-size:cover; background-position:center;
   transition:opacity 1.4s ease; transform:scale(1.06); }
.slide.active { opacity:1; animation:kenburns 6s ease-out forwards; }
@keyframes kenburns { from{transform:scale(1.06)} to{transform:scale(1.16)} }
/* placeholder slide gradients (replaced by real images later) */
.slide-1 { background:linear-gradient(135deg,#7A1228 0%,#141417 70%); }
.slide-2 { background:linear-gradient(135deg,#141417 0%,#C12544 130%); }
.slide-3 { background:linear-gradient(160deg,#000 0%,#7A1228 100%); }
.hero-scrim { position:absolute; inset:0;
   background:linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.4) 100%); }

/* ===== MODAL (July Clinics popup) ===== */
.modal { position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal.open { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); }
.modal-card { position:relative; animation:pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from{opacity:0; transform:translateY(20px) scale(.96)} to{opacity:1; transform:none} }

@media (prefers-reduced-motion: reduce) {
  .blob, .ticker-track, .slide.active { animation:none !important; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .modal-card { animation:none !important; }
  html { scroll-behavior:auto; }
}