/* THEAFTERPARTY one-pager */
:root{--brand-primary:#ef2525;--brand-primary-hover:#ff4a3d;--brand-primary-active:#b20606;--ap-red-600:#ef2525;--ap-red-500:#ff4a3d;--rx-cream:#f3efe9;--rx-amber:#e8a13a}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ap-black);color:var(--text-primary);font-family:var(--font-body);overflow-x:hidden}
a{color:var(--rx-cream);text-decoration:none;transition:color var(--dur-fast) var(--ease-snap)}
a:hover{color:var(--brand-primary)}
::selection{background:var(--brand-primary);color:#fff}
.grain::after{content:"";position:fixed;inset:-100%;pointer-events:none;z-index:200;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 700ms steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-2%,3%)}50%{transform:translate(3%,-2%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(2%,2%)}}
.scanlines::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}
.heromark{width:min(820px,90vw);display:block;pointer-events:none;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,#000 55%,transparent 82%);mask-image:radial-gradient(ellipse 70% 62% at 50% 50%,#000 55%,transparent 82%);animation:sigdrop 6.4s steps(1) infinite,microjit 2.3s steps(1) infinite}
@keyframes sigdrop{0%,100%{opacity:1}61%{opacity:0}62%{opacity:1}61.4%{opacity:.4}}
@keyframes microjit{0%,100%{transform:translateY(0)}17%{transform:translateY(-1px)}29%{transform:translateY(0)}48%{transform:translateY(1px)}56%{transform:translateY(0)}83%{transform:translateY(-1px)}90%{transform:translateY(0)}}
.heroflick{animation:heroflick 5.7s steps(1) infinite}
@keyframes heroflick{0%,100%{opacity:1}13%{opacity:.965}14%{opacity:1}41%{opacity:.96}42.2%{opacity:1}77%{opacity:.97}78%{opacity:1}}
.lifeline{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100vw;height:110px;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 40%,#000 60%,transparent 74%);mask-image:linear-gradient(90deg,transparent 26%,#000 40%,#000 60%,transparent 74%)}
.lifeline svg{width:100%;height:100%;display:block}
.ll-trace{fill:none;stroke:var(--ap-red-400);stroke-width:2;stroke-linecap:round;stroke-dasharray:170 1330;stroke-dashoffset:1500;filter:drop-shadow(0 0 6px rgba(239,37,37,.8));animation:lltrace 4.5s linear infinite}
@keyframes lltrace{0%{stroke-dashoffset:1500}100%{stroke-dashoffset:0}}
@keyframes crtflicker{0%,100%{opacity:1}7%{opacity:.92}8%{opacity:1}31%{opacity:.88}32%{opacity:1}63%{opacity:.95}64%{opacity:1}}
.pillglow{filter:drop-shadow(0 0 26px rgba(239,37,37,.4)) drop-shadow(0 22px 44px rgba(0,0,0,.55));animation:sway 6s ease-in-out infinite;transform-origin:50% 85%}
@keyframes sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
/* glitch heading */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none}
.glitch::before{color:var(--ap-blue-glow);z-index:-1}
.glitch::after{color:var(--brand-primary);z-index:-2}
.glitch.on::before{opacity:.85;animation:glx1 320ms steps(2) 1}
.glitch.on::after{opacity:.85;animation:glx2 320ms steps(2) 1}
@keyframes glx1{0%{transform:translate(-4px,2px);clip-path:inset(10% 0 60% 0)}50%{transform:translate(3px,-2px);clip-path:inset(55% 0 15% 0)}100%{transform:translate(0,0);clip-path:inset(0 0 0 0);opacity:0}}
@keyframes glx2{0%{transform:translate(5px,-1px);clip-path:inset(60% 0 10% 0)}50%{transform:translate(-3px,3px);clip-path:inset(20% 0 55% 0)}100%{transform:translate(0,0);clip-path:inset(0 0 0 0);opacity:0}}
/* heartbeat */
@keyframes pulsebeat{0%,28%,66%,100%{transform:scale(1)}14%{transform:scale(1.12)}42%{transform:scale(1.06)}}
.beat{animation:pulsebeat 1.6s var(--ease-snap) infinite;transform-origin:center}
/* scroll reveal */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity 500ms var(--ease-snap),transform 500ms var(--ease-snap)}
/* marquee */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:var(--brand-primary)}
.marquee-inner{display:inline-flex;align-items:center;animation:mq 22s linear infinite;padding:12px 0}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee span{display:inline-flex;align-items:center;gap:28px;font-family:var(--font-display);color:#fff;font-size:20px;letter-spacing:.08em;text-transform:uppercase;margin:0 28px 0 0;line-height:1}
.marquee span svg{display:block}
/* blister pop */
.blister{position:relative;perspective:600px}
.blister .dome{transition:transform var(--dur-base) var(--ease-snap),box-shadow var(--dur-base) var(--ease-snap)}
.blister:hover .dome{transform:translateY(-6px) scale(1.04);box-shadow:0 14px 30px rgba(0,0,0,.6),var(--shadow-glow-red)}
.blister .foil{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);opacity:0;transition:opacity var(--dur-base)}
.blister:hover .foil{opacity:1}
/* rx paper */
.rxpaper{background:var(--rx-cream);color:var(--ap-black);border-radius:var(--radius-sm);position:relative;box-shadow:var(--shadow-card)}
.rxpaper .stamp{position:absolute;border:3px solid var(--brand-primary);color:var(--brand-primary);font-family:var(--font-display);text-transform:uppercase;padding:6px 14px;transform:rotate(-8deg);letter-spacing:.1em;opacity:.85;border-radius:4px}
.dashes{border-top:1.5px dashed rgba(10,10,10,.4)}
.barcode{height:34px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 7px,transparent 7px 8px,#111 8px 9px,transparent 9px 13px)}
/* nav */
.navlink{font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rx-cream);padding:8px 14px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;background:none;transition:all var(--dur-fast) var(--ease-snap)}
.navlink:hover{color:#fff;border-color:var(--brand-primary);box-shadow:var(--shadow-glow-red)}
/* dose counter */
.dose-num{font-family:var(--font-display);font-size:clamp(2.4rem,4.5vw,4rem);color:#fff;line-height:1}
/* buttons fallback (pill) */
.pillbtn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px;padding:16px 30px;border-radius:var(--radius-pill);border:1px solid var(--brand-primary);cursor:pointer;transition:all var(--dur-base) var(--ease-snap)}
.pillbtn.solid{background:var(--brand-primary);color:#fff}
.pillbtn.solid:hover{background:var(--brand-primary-hover);box-shadow:var(--shadow-glow-red);color:#fff}
.pillbtn.solid:active{background:var(--brand-primary-active)}
.pillbtn.ghost{background:transparent;color:var(--rx-cream)}
.pillbtn.ghost:hover{color:#fff;box-shadow:var(--shadow-glow-red)}
.receipt-font{font-family:var(--font-mono-receipt)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:10px 9px;cursor:pointer;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:2px;background:var(--rx-cream)}
.mobilemenu{display:flex;flex-direction:column;gap:2px;padding:8px 16px 16px;border-top:1px solid var(--border-subtle)}
.mobilemenu .navlink{text-align:left;padding:14px;font-size:14px}
.navlinks{display:flex;gap:4px;align-items:center}
@media (max-width:900px){.hide-m{display:none !important}.burger{display:flex}}
@media (max-width:640px){
#prescription,#about{padding:70px 18px 56px !important}
#dosage{padding:70px 0 76px !important}
#contact{padding:70px 18px !important}
footer{padding:60px 18px 50px !important}
.marquee span{font-size:16px;gap:18px;margin-right:18px}
.pillbtn{padding:14px 22px;font-size:13px}
.rxpaper .stamp{font-size:12px;padding:4px 10px}
}