/* Minyona reels slider with inline playback. Used on index.html and get-started.html.
   Ported from the approved mockup (minyona-reels-slider-mockup.netlify.app).
   Every class is prefixed mny-reels- so nothing collides with page CSS.
   Margins/paddings carry !important so page-level resets can't flatten them.
   Playback overlays (play icon, "Tap for sound" pill, pause/sound flash) are driven by the
   card state classes mny-reels-playing / -paused / -muted that reels.js mirrors from the <video>.
   Bump ?v= on the <link> after any change (assets/* is cached immutable). */
.mny-reels{--mr-bg:#07070a;--mr-bg-elevated:#0c0c10;--mr-text:#fafaf9;--mr-text-2:#a8a8b3;--mr-text-muted:#8a8a95;--mr-accent:#e07714;--mr-on-accent:#07070a;--mr-border:rgba(255,255,255,.06);--mr-border-strong:rgba(255,255,255,.12);--mr-glow:rgba(224,119,20,.18);--mr-display:'Fraunces',Georgia,serif;--mr-body:'Sora',-apple-system,sans-serif;--mr-gutter:clamp(16px,5vw,64px);--mr-w:1200px}
.mny-reels *,.mny-reels *::before,.mny-reels *::after{box-sizing:border-box}

/* ---------- Section ---------- */
.mny-reels{position:relative;background:var(--mr-bg);color:var(--mr-text);font-family:var(--mr-body);line-height:1.65;padding:clamp(64px,10vw,112px) 0 !important;margin:0 !important;border-top:1px solid var(--mr-border);overflow:hidden}
.mny-reels.mny-reels-alt{background:var(--mr-bg-elevated)}
.mny-reels h2,.mny-reels h3,.mny-reels p{margin:0 !important;padding:0 !important}
.mny-reels-head{max-width:var(--mr-w);margin:0 auto 32px !important;padding:0 var(--mr-gutter) !important;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.mny-reels-eyebrow{display:flex;align-items:center;gap:10px;font:600 .75rem/1.4 var(--mr-body);letter-spacing:.14em;text-transform:uppercase;color:var(--mr-accent);margin:0 0 14px !important}
.mny-reels-eyebrow::before{content:"";width:22px;height:2px;border-radius:1px;background:var(--mr-accent);flex:none}
.mny-reels-head h2{font-family:var(--mr-display);font-weight:400;font-size:clamp(1.625rem,3.6vw,2.5rem);line-height:1.15;letter-spacing:-.01em;color:var(--mr-text);max-width:22ch}
.mny-reels-head p.mny-reels-sub{color:var(--mr-text-2);margin-top:12px !important;font-size:1rem;line-height:1.6}
.mny-reels-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;flex:none}
.mny-reels-pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px !important;margin:0 !important;border-radius:999px;border:1px solid var(--mr-border-strong);color:var(--mr-text);text-decoration:none;font:600 .875rem/1 var(--mr-body);background:transparent;cursor:pointer;transition:border-color .2s}
.mny-reels-pill svg{width:18px;height:18px}
.mny-reels-count{color:var(--mr-text-muted);font-size:.875rem}
.mny-reels-wrap{position:relative}
.mny-reels-track{--card-w:clamp(210px,22vw,270px);display:flex;gap:clamp(16px,2.4vw,32px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;--mr-pad:max(var(--mr-gutter),calc((100% - var(--mr-w))/2 + var(--mr-gutter)));padding:20px var(--mr-pad) 8px !important;scroll-padding-inline:var(--mr-pad);margin:0 !important;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
@media (hover:hover) and (pointer:fine){.mny-reels-track{cursor:grab}}
.mny-reels-track::-webkit-scrollbar{display:none}
.mny-reels-track.mny-reels-dragging{cursor:grabbing;scroll-snap-type:none}.mny-reels-track.mny-reels-dragging *{pointer-events:none}
/* native snap to the heading's left edge, one card per swipe, active card never grows past scale(1), short compositor-only transition */
.mny-reels-card{flex:0 0 var(--card-w);scroll-snap-align:start;scroll-snap-stop:always;transition:transform .25s ease-out,opacity .25s ease-out;transform:scale(.92);opacity:.55;user-select:none;-webkit-user-select:none;will-change:transform;margin:0 !important;padding:0 !important}
.mny-reels-card.mny-reels-active{transform:scale(1);opacity:1}
.mny-reels-phone{position:relative;aspect-ratio:9/19.5;border-radius:42px;padding:9px !important;background:linear-gradient(145deg,#2a2a31,#121216 45%,#1e1e24);box-shadow:0 0 0 1px #3a3a42 inset,0 0 0 2px #0a0a0d,0 30px 60px -20px rgba(0,0,0,.8);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mny-reels-phone:focus{outline:none}
.mny-reels-phone:focus-visible{outline:2px solid var(--mr-accent);outline-offset:4px}
/* glow is its own layer that fades with opacity, so no box-shadow repaint while swiping */
.mny-reels-glow{position:absolute;inset:0;border-radius:42px;box-shadow:0 30px 80px -20px var(--mr-glow);opacity:0;transition:opacity .25s;pointer-events:none}
.mny-reels-active .mny-reels-glow{opacity:1}
.mny-reels-phone::before,.mny-reels-phone::after{content:"";position:absolute;right:-3px;width:3px;background:#2a2a31;border-radius:0 2px 2px 0}
.mny-reels-phone::before{top:24%;height:14%}.mny-reels-phone::after{left:-3px;right:auto;top:20%;height:8%;border-radius:2px 0 0 2px}
.mny-reels-screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#000;container-type:inline-size}
/* 4:5 video shown whole: letterboxed on the tall screen, nothing cropped */
.mny-reels-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;margin:0 !important;padding:0 !important;pointer-events:none}
.mny-reels-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:32%;height:22px;border-radius:20px;background:#000;z-index:3}
.mny-reels-status{position:absolute;top:12px;left:22px;right:22px;display:flex;justify-content:space-between;font:600 11px/1 var(--mr-body);color:#fff;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.mny-reels-scrim{position:absolute;inset:auto 0 0 0;height:20%;background:linear-gradient(transparent,rgba(0,0,0,.75));z-index:1;pointer-events:none}
.mny-reels-onscreen{position:absolute;left:14px;right:52px;bottom:18px;z-index:2;font-size:12px;line-height:1.35;color:#fff}
.mny-reels-onscreen b{display:block;font-weight:700;font-size:12px;margin-bottom:2px !important}
.mny-reels-side{position:absolute;right:10px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:center}
.mny-reels-side span{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.35);display:grid;place-items:center}.mny-reels-side svg{width:16px;height:16px}
.mny-reels-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18);z-index:3}.mny-reels-bar i{display:block;height:100%;width:0;background:var(--mr-accent)}

/* ---------- Playback overlays (never take the tap: the phone gets it) ---------- */
.mny-reels-playhint,.mny-reels-tapsound,.mny-reels-flash{position:absolute;inset:0;display:grid;place-items:center;z-index:4;pointer-events:none;margin:0 !important;padding:0 !important}
.mny-reels-playhint{opacity:0;transition:opacity .25s}
.mny-reels-playhint span{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.mny-reels-playhint svg{width:28px;height:28px;margin-left:3px !important}
/* paused active card: big play icon (short delay so the pause flash plays first) */
.mny-reels-active.mny-reels-paused .mny-reels-playhint{opacity:1;transition-delay:.45s}
/* playing + muted active card: the "Tap for sound" pill */
.mny-reels-tapsound{opacity:0;transition:opacity .2s}
.mny-reels-active.mny-reels-playing.mny-reels-muted .mny-reels-tapsound{opacity:1}
.mny-reels-tapsound span{display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 16px);white-space:nowrap;padding:12px 18px !important;padding:clamp(9px,5.5cqi,12px) clamp(12px,8cqi,18px) !important;border-radius:999px;background:rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.28);color:#fff;font:600 14px/1 var(--mr-body);font-size:clamp(12px,7.4cqi,16px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 6px 20px rgba(0,0,0,.35);animation:mny-reels-pulse 2s ease-in-out infinite}
.mny-reels-tapsound svg{width:1.2em;height:1.2em;flex:none}
@keyframes mny-reels-pulse{0%,100%{transform:scale(1);box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 0 0 rgba(255,255,255,.35)}50%{transform:scale(1.04);box-shadow:0 6px 20px rgba(0,0,0,.35),0 0 0 8px rgba(255,255,255,0)}}
/* brief pause / sound-on confirmation */
.mny-reels-flash{opacity:0}
.mny-reels-flash span{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff}.mny-reels-flash svg{width:28px;height:28px}
.mny-reels-flash.mny-reels-flash-on{animation:mny-reels-flash .6s ease-out forwards}
@keyframes mny-reels-flash{0%{opacity:1}60%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mny-reels-tapsound span{animation:none}}

.mny-reels-caption{margin-top:18px !important;text-align:center}
.mny-reels-caption h3{font:600 .95rem/1.35 var(--mr-body);color:var(--mr-text)}
.mny-reels-caption p{color:var(--mr-text-muted);font-size:.8rem;margin-top:4px !important}
.mny-reels-arrow{position:absolute;top:calc(50% - 40px);z-index:5;width:48px;height:48px;border-radius:50%;border:1px solid var(--mr-border-strong);background:rgba(12,12,16,.8);color:var(--mr-text);display:grid;place-items:center;cursor:pointer;padding:0 !important;margin:0 !important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s}
.mny-reels-arrow svg{width:20px}.mny-reels-arrow:disabled{visibility:hidden}
.mny-reels-prev{left:max(8px,calc(50% - var(--mr-w)/2))}.mny-reels-next{right:max(8px,calc(50% - var(--mr-w)/2))}
.mny-reels-dots{display:flex;justify-content:center;gap:8px;margin-top:24px !important;padding:0 !important}
.mny-reels-dots button{width:8px;height:8px;border-radius:8px;border:0;background:var(--mr-border-strong);padding:0 !important;margin:0 !important;cursor:pointer;transition:width .3s}
.mny-reels-dots button.mny-reels-on{width:24px;background:var(--mr-accent)}
@media (hover:hover){
  .mny-reels-pill:hover{border-color:var(--mr-text-2)}
  .mny-reels-card:not(.mny-reels-active):hover .mny-reels-playhint{opacity:1}
  .mny-reels-arrow:hover{border-color:var(--mr-accent)}
}
@media (max-width:640px){
  .mny-reels-track{--card-w:68vw}
  .mny-reels-arrow{display:none}
  .mny-reels-head{flex-direction:column;align-items:flex-start}
}