/* =====================================================================
   Appointek hero reel — self-contained CSS animation component.
   Outside the token gate on purpose (shape-specific radii/greys). Pure CSS,
   no JS, transform + opacity only. Loop 16s. Decorative: mark aria-hidden.
   Beats: 1 book (click), 2 mail blast, 3 buyers qualified, 4 calendar
   (uniform full size, no connector lines), 5 walk in. Progress bar stays lit.
   ===================================================================== */
.reel{
  --bg:#060608; --panel:#17171a; --panel2:#1a1a1f; --sunk:#101012;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.06);
  --ink:#f4f4f6; --ink2:rgba(255,255,255,.72); --ink3:rgba(255,255,255,.46);
  --accent:#e4002b; --accent2:#ff1f45; --soft:rgba(228,0,43,.16);
  --sil:#6d6d78; --silbg:#2b2b31; --sh:0 20px 50px rgba(0,0,0,.5);
  --disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  position:relative; min-height:380px; display:grid; place-items:center; overflow:hidden;
}
.reel>*{grid-area:1/1}
/* Decorative only: on a stacked single-column hero it would add ~380px of
   animated void below the CTAs, so drop it on narrow screens. */
@media (max-width:880px){ .reel{ display:none; } }

.reel .pfp{position:relative;border-radius:999px;background:var(--silbg);border:1px solid var(--line);overflow:hidden;flex:none}
.reel .pfp::before{content:"";position:absolute;left:50%;top:20%;transform:translateX(-50%);width:36%;height:36%;border-radius:999px;background:var(--sil)}
.reel .pfp::after{content:"";position:absolute;left:50%;top:60%;transform:translateX(-50%);width:66%;height:62%;border-radius:50% 50% 0 0/70% 70% 0 0;background:var(--sil)}

/* --- beat 1: book a call (cursor taps the pill) --- */
.reel .book{position:relative;z-index:4;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-family:var(--body);font-weight:600;font-size:14px;padding:13px 22px;border-radius:999px;box-shadow:0 6px 18px rgba(228,0,43,.3);white-space:nowrap;opacity:0;transform:scale(.9)}
.reel .rip{position:absolute;z-index:3;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:999px;background:var(--accent2);opacity:0}
.reel .cur{position:absolute;z-index:6;width:17px;height:17px;left:50%;top:50%;opacity:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
.reel .cur::before{content:"";position:absolute;inset:0;background:#fff;clip-path:polygon(0 0,0 78%,26% 60%,44% 100%,60% 92%,42% 54%,72% 54%);transform:scale(1.1)}

/* --- beat 2: the blast (many mails shooting straight, 3 lanes) --- */
.reel .blast{position:absolute;inset:0;z-index:2}
.reel .m{position:absolute;left:2%;width:15px;height:10px;border-radius:2px;background:var(--panel2);border:1px solid var(--line);opacity:0}
.reel .m::before{content:"";position:absolute;left:50%;top:1px;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:5px solid var(--accent2)}
.reel .m:nth-child(3n+1){top:34%}
.reel .m:nth-child(3n+2){top:50%}
.reel .m:nth-child(3n){top:66%}

/* --- beat 2b/3: the 3 buyers (same size), mails collide, then Qualified --- */
.reel .tgt{position:absolute;left:50%;z-index:4;display:flex;align-items:center;gap:11px;width:230px;margin-left:-95px;opacity:0}
.reel .tgt.t1{top:33%}.reel .tgt.t2{top:50%}.reel .tgt.t3{top:67%}
.reel .tgt .pfp{width:42px;height:42px}
.reel .tgt .nm{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;color:var(--ink)}
.reel .tgt .nm i{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--ink3)}
.reel .tgt .qb{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 8px;border-radius:6px;opacity:0;transform:scale(.6)}
.reel .tgt .hm{position:absolute;right:100%;margin-right:6px;top:50%;margin-top:-5px;width:15px;height:10px;border-radius:2px;background:var(--panel2);border:1px solid var(--line);opacity:0}
.reel .tgt .hm::before{content:"";position:absolute;left:50%;top:1px;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:5px solid var(--accent2)}

/* --- beat 4: real month calendar, uniform full size, no lines --- */
.reel .card{position:relative;z-index:3;width:min(100%,384px);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);overflow:hidden;opacity:0;transform:scale(.94)}
.reel .cardTop{display:flex;align-items:baseline;justify-content:space-between;padding:15px 18px 11px}
.reel .cardTop b{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--ink)}
.reel .cardTop span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.reel .cal7{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 15px 17px}
.reel .dow{font-family:var(--mono);font-size:10px;color:var(--ink3);text-align:center;padding:2px 0 6px;text-transform:uppercase}
.reel .day{font-family:var(--mono);font-size:13px;text-align:center;color:var(--ink2);padding:9px 0;border-radius:8px;position:relative;font-variant-numeric:tabular-nums}
.reel .day.e{visibility:hidden}
.reel .day.pick{color:#fff;font-weight:600}
.reel .day.pick::before{content:"";position:absolute;inset:2px;border-radius:8px;background:var(--accent);transform:scale(0);z-index:-1}

/* --- beat 5: building whose door opens --- */
.reel .bld{position:relative;z-index:3;width:158px;height:152px;opacity:0;transform:scale(.9)}
.reel .facade{position:absolute;inset:0;border-radius:12px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh);display:grid;grid-template-columns:repeat(3,1fr);gap:11px;padding:16px 16px 48px;align-content:start}
.reel .win{height:22px;border-radius:3px;background:var(--panel2);border:1px solid var(--line)}
.reel .dframe{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:48px;height:56px;background:var(--sunk);border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0}
.reel .dbeam{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:44px;height:54px;background:linear-gradient(180deg,var(--accent2),var(--soft));border-radius:5px 5px 0 0;opacity:0}
.reel .dleaf{position:absolute;left:calc(50% - 23px);bottom:1px;width:46px;height:54px;background:var(--panel2);border:1px solid var(--line);border-radius:5px 5px 0 0;transform-origin:left center}

/* --- caption + progress bar (always lit, fills across the loop) --- */
.reel .caption{position:absolute;z-index:8;left:0;right:0;bottom:2px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);display:grid;place-items:center;height:1.4em}
.reel .caption span{grid-area:1/1;opacity:0;white-space:nowrap}
.reel .caption b{color:var(--accent2)}
.reel .track{position:absolute;z-index:8;left:8%;right:8%;bottom:20px;height:2px;background:var(--line2)}
.reel .track .fill{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--accent);transform-origin:left center;transform:scaleX(0)}
.reel .track i{position:absolute;top:-4px;width:9px;height:9px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);z-index:1}
.reel .track i:nth-child(2){left:0}.reel .track i:nth-child(3){left:25%}.reel .track i:nth-child(4){left:50%}.reel .track i:nth-child(5){left:75%}.reel .track i:nth-child(6){right:0}

/* ---- run (always on) ---- */
.reel .book{animation:rBook 16s ease infinite}
.reel .rip{animation:rRip 16s ease-out infinite}
.reel .cur{animation:rCur 16s cubic-bezier(.25,1,.5,1) infinite}
.reel .m{animation:rFly 16s linear infinite}
.reel .m:nth-child(1){animation-delay:2.60s}.reel .m:nth-child(2){animation-delay:2.72s}
.reel .m:nth-child(3){animation-delay:2.84s}.reel .m:nth-child(4){animation-delay:2.96s}
.reel .m:nth-child(5){animation-delay:3.08s}.reel .m:nth-child(6){animation-delay:3.20s}
.reel .m:nth-child(7){animation-delay:3.32s}.reel .m:nth-child(8){animation-delay:3.44s}
.reel .m:nth-child(9){animation-delay:3.56s}.reel .m:nth-child(10){animation-delay:3.68s}
.reel .m:nth-child(11){animation-delay:3.80s}.reel .m:nth-child(12){animation-delay:3.92s}
.reel .tgt{animation:rTgt 16s ease infinite}
.reel .tgt .hm{animation:rHero 16s cubic-bezier(.3,.6,.2,1) infinite}
.reel .tgt .qb{animation:rQb 16s cubic-bezier(.2,.9,.2,1.6) infinite}
.reel .card{animation:rCard 16s cubic-bezier(.2,.9,.2,1.05) infinite}
.reel .day.pick::before{animation:rPick 16s cubic-bezier(.2,.9,.2,1.4) infinite}
.reel .bld{animation:rBld 16s cubic-bezier(.2,.9,.2,1.1) infinite}
.reel .dleaf{animation:rLeaf 16s cubic-bezier(.6,0,.2,1) infinite}
.reel .dbeam{animation:rBeam 16s ease infinite}
.reel .track .fill{animation:rFill 16s cubic-bezier(.5,0,.5,1) infinite}
.reel .track i:nth-child(2){animation:rN 16s ease infinite;animation-delay:.4s}
.reel .track i:nth-child(3){animation:rN 16s ease infinite;animation-delay:2.9s}
.reel .track i:nth-child(4){animation:rN 16s ease infinite;animation-delay:6.0s}
.reel .track i:nth-child(5){animation:rN 16s ease infinite;animation-delay:8.2s}
.reel .track i:nth-child(6){animation:rN 16s ease infinite;animation-delay:12.0s}
.reel .cap1{animation:rC1 16s ease infinite}
.reel .cap2{animation:rC2 16s ease infinite}
.reel .cap3{animation:rC3 16s ease infinite}
.reel .cap4{animation:rC4 16s ease infinite}
.reel .cap5{animation:rC5 16s ease infinite}

@keyframes rBook{0%{opacity:0;transform:scale(.9)}4%{opacity:1;transform:scale(1)}9%{transform:scale(.95)}12%{transform:scale(1)}15%,100%{opacity:0;transform:scale(.95)}}
@keyframes rRip{0%,7%{opacity:0;transform:scale(.3)}9%{opacity:.5;transform:scale(.6)}15%{opacity:0;transform:scale(2.4)}100%{opacity:0}}
@keyframes rCur{0%{opacity:0;transform:translate(64px,52px)}3%{opacity:1}8%{transform:translate(10px,10px)}10%{transform:translate(8px,12px)}13%,100%{opacity:0;transform:translate(34px,30px)}}
@keyframes rFly{0%{opacity:0;transform:translateX(0)}3%{opacity:1;transform:translateX(30px)}12%{opacity:1;transform:translateX(430px)}15%,100%{opacity:0;transform:translateX(478px)}}
@keyframes rTgt{0%,18%{opacity:0}23%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes rHero{0%,19%{opacity:0;transform:translateX(-340px)}23%{opacity:1}27%{opacity:1;transform:translateX(0)}30%{transform:translateX(0)}32%,100%{opacity:0;transform:translateX(6px)}}
@keyframes rQb{0%,32%{opacity:0;transform:scale(.6)}36%{opacity:1;transform:scale(1.15)}39%,46%{opacity:1;transform:scale(1)}50%,100%{opacity:0;transform:scale(.9)}}
@keyframes rCard{0%,49%{opacity:0;transform:scale(.94)}55%,72%{opacity:1;transform:scale(1)}77%,100%{opacity:0;transform:scale(.97)}}
@keyframes rPick{0%,55%{transform:scale(0)}61%{transform:scale(1.12)}66%,72%{transform:scale(1)}77%,100%{transform:scale(1)}}
@keyframes rBld{0%,79%{opacity:0;transform:scale(.9)}84%,94%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes rLeaf{0%,85%{transform:rotateY(0)}90%,95%{transform:rotateY(-78deg)}99%,100%{transform:rotateY(0)}}
@keyframes rBeam{0%,86%{opacity:0}91%{opacity:1}96%,100%{opacity:0}}
@keyframes rFill{0%{transform:scaleX(0)}94%{transform:scaleX(1)}100%{transform:scaleX(1)}}
@keyframes rN{0%{background:var(--panel2);box-shadow:none}3%{background:var(--accent2);box-shadow:0 0 8px var(--accent2)}96%{background:var(--accent2);box-shadow:0 0 8px var(--accent2)}100%{background:var(--panel2)}}
@keyframes rC1{0%,2%{opacity:0}6%,13%{opacity:1}17%,100%{opacity:0}}
@keyframes rC2{0%,17%{opacity:0}21%,33%{opacity:1}37%,100%{opacity:0}}
@keyframes rC3{0%,35%{opacity:0}39%,46%{opacity:1}50%,100%{opacity:0}}
@keyframes rC4{0%,50%{opacity:0}56%,70%{opacity:1}74%,100%{opacity:0}}
@keyframes rC5{0%,80%{opacity:0}85%,94%{opacity:1}98%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .reel *{animation:none!important}
  .reel .book,.reel .rip,.reel .cur,.reel .blast,.reel .tgt,.reel .bld{opacity:0!important}
  .reel .card{opacity:1!important;transform:none!important}
  .reel .day.pick::before{transform:scale(1)!important}
  .reel .track .fill{transform:scaleX(1)!important}
  .reel .cap4{opacity:1!important}
}