/* TikTok-style layer: full-screen reels viewer, hero UI rail, floating hearts */

/* ---------- hero card: fake-but-honest TikTok chrome (numbers are the real ones for this video) ---------- */
.tt{position:absolute;inset:0;z-index:4;pointer-events:none;color:#fff;background:linear-gradient(transparent 55%,#000000aa)}
.tt__rail{position:absolute;right:8px;bottom:58px;display:grid;gap:13px;justify-items:center}
.tt__ic{display:grid;justify-items:center;gap:2px;font:700 11px var(--f-t);filter:drop-shadow(0 2px 6px #000a)}
.tt__ic b{font-weight:700}
.tt__ic--like svg{color:var(--red);animation:beat 2.4s ease-in-out infinite;transform-origin:50% 60%}
@keyframes beat{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.28)}80%{transform:scale(.96)}88%{transform:scale(1.14)}}
.tt__cap{position:absolute;left:12px;right:56px;bottom:20px;display:grid;gap:2px;font-size:12px;line-height:1.25;text-shadow:0 1px 6px #000}
.tt__cap b{font:700 14px var(--f-t)}
.tt__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff40}
.tt__bar u{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,0));text-decoration:none}

/* ---------- floating hearts ---------- */
.hearts{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:visible}
.heart{position:absolute;width:var(--s,30px);height:var(--s,30px);color:var(--red);opacity:0;animation:heartUp var(--d,2.6s) cubic-bezier(.2,.7,.3,1) forwards;filter:drop-shadow(0 4px 10px #ff1f3d88)}
.heart svg{display:block;width:100%;height:100%}
@keyframes heartUp{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}12%{opacity:1;transform:translate(calc(var(--dx)*.1),-24px) scale(1) rotate(calc(var(--r)*.3))}100%{opacity:0;transform:translate(var(--dx),-260px) scale(1.15) rotate(var(--r))}}

/* ---------- hero word glitch: a quick red/white split every few seconds ---------- */
.hero__word{animation:wordGlitch 7s steps(1,end) 5s infinite}
@keyframes wordGlitch{0%,92%,100%{text-shadow:0 0 80px #ff1f3d55}93%{text-shadow:-5px 0 #fff,5px 0 #7a0011,0 0 80px #ff1f3d55}95%{text-shadow:4px 1px #fff,-4px -1px #7a0011,0 0 80px #ff1f3d55}97%{text-shadow:-2px 0 #fff,2px 0 #7a0011,0 0 80px #ff1f3d55}}

/* ---------- reels viewer ---------- */
.reels{position:fixed;inset:0;z-index:300;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden}
.reels::backdrop{background:#000}
.reels[open]{display:block;animation:reelsIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes reelsIn{from{opacity:0;transform:scale(.94) translateY(30px)}}
.reels__bg{position:absolute;inset:-6%;background:center/cover no-repeat;filter:blur(46px) brightness(.45) saturate(1.3);transform:scale(1.1);transition:background-image .4s}
.reels__feed{position:relative;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain}
.reels__feed::-webkit-scrollbar{display:none}
.reel{height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center;padding:16px 0}
.reel__frame{position:relative;height:min(100%,calc(100vw * 16 / 9));aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 30px 120px -20px #000,0 0 0 1px #ffffff22;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel__shade{position:absolute;inset:0;background:linear-gradient(#0000008c,transparent 18%,transparent 52%,#000000d9);pointer-events:none}
.reel__prog{position:absolute;left:12px;right:12px;top:12px;height:3px;border-radius:3px;background:#ffffff40;overflow:hidden;z-index:3}
.reel__prog u{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,0));text-decoration:none}
.reel__top{position:absolute;left:12px;right:12px;top:22px;display:flex;justify-content:space-between;align-items:center;z-index:3;font:700 14px var(--f-d);letter-spacing:.1em;text-transform:uppercase}
.reel__pause{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .25s}
.reel__pause svg{width:84px;height:84px;color:#fff;filter:drop-shadow(0 6px 18px #000a);transform:scale(.8);transition:transform .25s}
.reel.is-paused .reel__pause{opacity:1}.reel.is-paused .reel__pause svg{transform:scale(1)}
.reel__rail{position:absolute;right:10px;bottom:120px;display:grid;gap:18px;justify-items:center;z-index:4}
.rbtn{display:grid;justify-items:center;gap:3px;min-width:48px;padding:0;border:0;background:none;color:#fff;font:700 13px var(--f-t);cursor:pointer;filter:drop-shadow(0 2px 8px #000a);-webkit-tap-highlight-color:transparent}
.rbtn i{display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#ffffff1f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .25s cubic-bezier(.2,1.6,.4,1),background .25s}
.rbtn:hover i{background:#ffffff38}
.rbtn:active i{transform:scale(.86)}
.rbtn svg{width:26px;height:26px}
.rbtn.is-on i{background:#ff1f3d}
.rbtn.is-on.pop i{animation:likePop .5s cubic-bezier(.2,1.8,.4,1)}
@keyframes likePop{0%{transform:scale(.6)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.reel__cap{position:absolute;left:14px;right:84px;bottom:18px;z-index:4;display:grid;gap:6px}
.reel__user{font:700 16px var(--f-t)}
.reel__brand{font:700 clamp(30px,5.2vh,44px)/.95 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
.reel__hook{font-size:14px;line-height:1.35;color:#f0eceb;text-shadow:0 1px 8px #000}
.reel__cta{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;margin-top:6px;border-radius:999px;border:0;background:var(--red);color:#0a0a0a;font:700 15px var(--f-d);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 30px -8px var(--red);transition:transform .25s,background .2s}
.reel__cta:hover{transform:translateY(-2px);background:var(--red3)}
.reel__burst{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;color:var(--red);pointer-events:none;z-index:5;animation:burst .9s cubic-bezier(.2,.8,.2,1) forwards;filter:drop-shadow(0 8px 24px #ff1f3daa)}
@keyframes burst{0%{opacity:0;transform:scale(.3) rotate(-12deg)}25%{opacity:1;transform:scale(1.15) rotate(6deg)}70%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:translateY(-60px) scale(1.2)}}

.reels__close{position:fixed;top:16px;right:16px;z-index:12;width:52px;height:52px;border-radius:50%;border:1px solid #ffffff40;background:#111c;color:#fff;font-size:20px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.reels__close:hover{background:var(--red);border-color:var(--red);color:#0a0a0a}
.reels__nav{position:fixed;right:max(24px,3vw);top:50%;z-index:12;display:grid;gap:12px;transform:translateY(-50%)}
.reels__nav button{width:56px;height:56px;border-radius:50%;border:1px solid #ffffff40;background:#111c;color:#fff;font-size:22px;cursor:pointer;transition:.2s}
.reels__nav button:hover{background:#fff;color:#000}
.reels__nav button:disabled{opacity:.3;cursor:default}
.reels__count{position:fixed;left:20px;top:22px;z-index:12;font:700 15px var(--f-d);letter-spacing:.14em;text-transform:uppercase}
.reels__toast{position:fixed;left:50%;bottom:30px;z-index:13;transform:translate(-50%,40px);padding:12px 20px;border-radius:999px;background:#fff;color:#000;font:600 14px var(--f-t);opacity:0;transition:.35s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.reels__toast.on{opacity:1;transform:translate(-50%,0)}
.reels__hint{position:fixed;left:50%;top:64px;z-index:12;transform:translateX(-50%);font:700 13px var(--f-d);letter-spacing:.14em;text-transform:uppercase;color:#ffffffcc;animation:hint 1.8s ease-in-out 3;pointer-events:none}
@keyframes hint{50%{transform:translate(-50%,10px);opacity:.5}}
body.reels-open{overflow:hidden}

@media (max-width:700px){
  .reel{padding:0}
  .reel__frame{height:100%;width:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .reels__nav{display:none}
  .reels__count{top:20px;left:14px}
  .reel__top{top:34px}
  .reels__hint{top:92px}
  .reel__prog{top:8px}
  .reels__close{top:26px;right:12px;width:46px;height:46px}
  .reel__brand{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
  .reels[open],.heart,.tt__ic--like svg,.reel__burst,.reels__hint,.hero__word{animation:none!important}
  .reels__feed{scroll-behavior:auto}
}

/* device audit: rail never taller than the video */
@media (max-height:720px){
  .reel__rail{gap:8px;bottom:104px}
  .rbtn i{width:42px;height:42px}
  .rbtn svg{width:22px;height:22px}
  .rbtn{font-size:11px;min-width:42px}
  .reel__brand{font-size:30px}
}
@media (max-height:600px){
  .reel__rail{gap:5px;bottom:96px}
  .rbtn i{width:38px;height:38px}
  .reel__hook{display:none}
  .reel__cta{min-height:44px}
}
@media (max-height:520px) and (orientation:landscape){
  .reel{padding:0}
  .reel__frame{height:100%;width:auto;aspect-ratio:9/16;border-radius:0;max-width:100%}
  .reel__rail{gap:3px;bottom:62px;right:6px}
  .rbtn i{width:34px;height:34px}
  .rbtn svg{width:19px;height:19px}
  .rbtn span{font-size:10px}
  .reel__cap{left:10px;right:56px;bottom:10px;gap:3px}
  .reel__user{font-size:13px}
  .reel__brand{font-size:22px}
  .reel__cta{min-height:44px;padding:0 14px;font-size:13px;margin-top:2px}
  .reels__count{top:10px;left:12px;font-size:12px}
  .reels__close{top:8px;right:10px;width:44px;height:44px}
  .reels__nav{display:grid;right:14px}
  .reels__nav button{width:44px;height:44px}
  .reel__prog{top:6px}
}
.reel__embed{width:100%;height:100%;border:0;display:block;background:#000}