/* =========================================================
   VEO STREAM WEB UI - SINGLE CONSOLIDATED CSS (FULL)
   - Mobile matches app feel
   - Desktop gets the "2025 polish" look
   - Bottom-sheet modal uses .is-open (not .hidden)
   ========================================================= */

:root{
  --bg:#000000;
  --panel:#0b0b0b;
  --line:rgba(255,255,255,.08);
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);
  --glass:rgba(255,255,255,.10);
  --red:#e50914;
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
body{
  margin:0;
  background:var(--bg);
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.hidden{display:none!important}

/* basic buttons */
.btn-red{
  width:100%;
  border:0;
  background:var(--red);
  color:#fff;
  padding:14px 14px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.6px;
  cursor:pointer;
}
.btn-red:disabled{opacity:.6; cursor:not-allowed}

.btn-red-small{
  border:0;
  background:var(--red);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}

.btn-ghost{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
}

.icon-btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  font-weight:900;
  font-size:12px;
  color:rgba(255,255,255,.88);
}
.pill.red{
  background:var(--red);
  border-color:transparent;
}

.glass-card{
  width:100%;
  max-width:460px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding:18px;
}
.glass-title{font-size:18px;font-weight:900}
.glass-sub{margin-top:6px;font-size:13px;line-height:1.25;color:rgba(255,255,255,.80);font-weight:700}

/* =========================================================
   EMAIL GATE
   ========================================================= */
.eg-root{
  position:relative;
  min-height:100vh;
  overflow:hidden;
}
.eg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: translateZ(0);
}
.eg-dim{position:absolute; inset:0; background:rgba(0,0,0,.42)}
.eg-grad{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0), rgba(0,0,0,.55));
}
.eg-safe{
  position:relative;
  min-height:100vh;
  padding:18px 22px;
  display:flex;
  flex-direction:column;
}
.eg-center{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 0;
}
.eg-card{transform-origin:center;}
.eg-arrive{
  animation: egArrive .55s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes egArrive{
  from{
    opacity:0;
    transform: translateY(14px) scale(.985);
    filter: blur(6px);
  }
  to{
    opacity:1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
.eg-topbar{display:flex;align-items:center;gap:12px}
.eg-brand{font-size:18px;font-weight:900;letter-spacing:.3px}
.eg-spacer{flex:1}
.btn-mute{
  border:0;
  background:var(--red);
  color:#fff;
  padding:11px 16px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.9px;
  cursor:pointer;
  box-shadow: 0 0 16px rgba(229,9,20,.40);
  display:flex; align-items:center; gap:10px;
}
.btn-mute-icon{font-size:18px}
.btn-mute-label{font-size:12px}

.eg-form{margin-top:14px; display:flex; flex-direction:column; gap:12px}
.eg-input{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:#fff;
  padding:14px 14px;
  font-size:14px;
  font-weight:800;
  outline:none;
}
.eg-input:focus{border-color:rgba(229,9,20,.95)}
.eg-err{
  color:#fff;
  font-weight:900;
  font-size:12px;
  background:rgba(229,9,20,.18);
  border:1px solid rgba(229,9,20,.35);
  padding:10px 12px;
  border-radius:12px
}
.eg-footnote{margin-top:8px; font-size:11px; color:rgba(255,255,255,.62); font-weight:800}
.eg-legal{margin-top:14px; font-size:11px; color:rgba(255,255,255,.45); font-weight:800}

/* =========================================================
   SHARED SHELL (HOME + PLAYER)
   - mobile first: full width
   - desktop: contained max width
   ========================================================= */
.home-root,
.player-root{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  width:100%;
  padding-bottom:86px; /* keep clear of bottom nav */
}

/* =========================================================
   TOP BAR (same style for home + player)
   ========================================================= */
.player-top{
  position:sticky;
  top:0;
  z-index:20;

  display:flex;
  align-items:center;
  gap:10px;

  padding:12px 12px;

  background: rgba(0,0,0,.80);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.player-logo{
  height:20px;
  width:auto;
  display:block;
  flex:0 0 auto;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.35));
}

.player-title{
  font-weight:900;
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.player-top-right{
  display:flex;
  gap:10px;
  align-items:center;
  margin-left:auto;
}

/* topbar icon button svg */
.top-ico{
  width:18px;
  height:18px;
  display:block;
  stroke:currentColor;
}

/* =========================================================
   HOME
   ========================================================= */
.home-top-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}

.home-title{
  font-weight:900;
  letter-spacing:.3px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.scroll{flex:1; overflow:auto; padding-bottom:74px}
.home-scroll{
  flex:1;
  padding-top:0;
  scroll-behavior: smooth;
}

.spacer-24{height:24px}

/* HERO */
.hero-mount{padding:12px 12px 10px 12px}
.hero{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  height:220px;
  background:rgba(255,255,255,.06);
  box-shadow: 0 16px 34px rgba(0,0,0,.40);
}

/* background layer: CSS background + optional video */
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:1;
  transform: translateZ(0);
}

.hero-grad{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.65));
}

.hero-glass{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  box-shadow:
    0 18px 30px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.05) inset;
}

.hero-meta{flex:1}
.hero-row{display:flex;align-items:center;gap:10px}
.hero-badge{
  background:var(--red);
  color:#fff;
  font-weight:900;
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  letter-spacing:.8px;
}
.hero-tag{color:rgba(255,255,255,.70); font-weight:900; letter-spacing:1px; font-size:11px}
.hero-title{margin-top:8px; font-weight:900; font-size:18px; letter-spacing:.1px}
.hero-sub{margin-top:4px; color:rgba(255,255,255,.70); font-weight:700; font-size:12px; line-height:1.30}

.play-btn{
  background:var(--red);
  border:0;
  border-radius:14px;
  padding:12px 14px;
  color:#fff;
  font-weight:900;
  letter-spacing:.8px;
  cursor:pointer;
  display:flex; align-items:center; gap:6px;
  box-shadow: 0 10px 26px rgba(229,9,20,.28);
  transition: transform .14s ease, filter .14s ease;
}
.play-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.play-btn:active{ transform: translateY(0px) scale(.99); }

.hero-dots{
  position:absolute;
  left:0; right:0; bottom:8px;
  display:flex;
  justify-content:center;
  gap:6px;
  pointer-events:none;
}
.dot{
  height:6px;
  width:6px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
}
.dot.on{
  width:18px;
  background:var(--red);
}

/* SECTIONS */
.sections{padding-bottom:10px}
.section-head{
  padding:16px 12px 10px 12px;
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.section-title{font-size:18px; font-weight:900; letter-spacing:.2px}
.section-sub{margin-top:4px; color:rgba(255,255,255,.60); font-weight:700; line-height:1.25; max-width:560px}
.section-left{flex:1}
.section-right button{
  border:0;
  background:transparent;
  color:var(--red);
  font-weight:900;
  cursor:pointer;
}

/* RAILS */
.rail{
  display:flex;
  gap:12px;
  padding:0 12px;
  overflow:auto;

  scroll-snap-type: x mandatory;
  padding-bottom: 6px;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar{ width:0; height:0; }

/* CARDS */
.card-wide,
.card-poster{
  flex:0 0 auto;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  cursor:pointer;
  background:rgba(255,255,255,.06);

  box-shadow:
    0 16px 34px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.04) inset;

  scroll-snap-align: start;
  transform: translateZ(0);
  transition: transform .16s ease, filter .16s ease, border-color .16s ease;
}

.card-wide{
  width:232px;
  height:154px;
}
.card-wide .bg{position:absolute; inset:0; background-size:cover; background-position:center}
.card-wide .grad{
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,.82));
}
.card-wide .label{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.card-wide .t{
  flex:1;
  font-weight:900;
  font-size:14px;
  line-height:1.1;
}
.card-wide .go{
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}

.card-poster{
  width:138px;
  height:236px;
}
.card-poster .bg{position:absolute; inset:0; background-size:cover; background-position:center}
.card-poster .grad{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.04), rgba(0,0,0,.78));
}
.card-poster .top{
  position:absolute; left:10px; right:10px; top:10px;
  display:flex; align-items:center;
}
.badge-small{
  background:var(--red);
  color:#fff;
  font-weight:900;
  border-radius:999px;
  padding:5px 8px;
  font-size:10px;
  letter-spacing:.8px;
}
.card-poster .playhint{margin-left:auto; opacity:.30}
.card-poster .t{
  position:absolute; left:10px; right:10px; bottom:10px;
  font-weight:900;
  font-size:13px;
  line-height:1.1;
}

/* Desktop hover polish */
@media (hover:hover) and (pointer:fine){
  .card-wide:hover,
  .card-poster:hover{
    transform: translateY(-2px) scale(1.01);
    filter: saturate(1.02);
    border-color: rgba(255,255,255,.16);
  }
  .card-wide:active,
  .card-poster:active{
    transform: translateY(0px) scale(.995);
  }
}

/* =========================================================
   BOTTOM NAV
   - mobile: full bleed
   - desktop: contained (handled in desktop media query)
   ========================================================= */
.bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;

  height:68px;
  background: rgba(11,11,11,.94);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  z-index:30;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 -18px 40px rgba(0,0,0,.55);

  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item{
  flex:1;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.55);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-weight:900;
  transition: color .14s ease, transform .14s ease;
}
.nav-item.is-active{color:var(--red)}
.nav-item:active{ transform: scale(.98); }

.nav-ico{
  height:22px;
  width:22px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nav-svg{
  width:22px;
  height:22px;
  display:block;
  stroke:currentColor;
  opacity:.95;
}
.nav-lbl{
  font-size:12px;
  line-height:12px;
  margin-top:4px;
}

/* =========================================================
   MODAL (BOTTOM SHEET)
   - Use: add/remove .is-open on .modal
   ========================================================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:50;

  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.modal.is-open{
  opacity:1;
  pointer-events:auto;
}

.modal-sheet{
  width:100%;
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  border-bottom:0;
  background: rgba(11,11,11,.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  padding:14px 16px 16px 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));

  transform: translateY(22px);
  transition: transform .22s cubic-bezier(.2,.9,.2,1);
  box-shadow: 0 -18px 50px rgba(0,0,0,.60);
}
.modal.is-open .modal-sheet{
  transform: translateY(0);
}

.modal-grab{
  width:44px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
  margin:0 auto 14px auto;
}

.modal-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.modal-title{
  font-size:18px;
  font-weight:900;
  flex:1;
}

.modal-input{
  width:100%;
  margin-top:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding:14px 14px;
  font-weight:800;
  outline:none;
}
.modal-input:focus{border-color:rgba(229,9,20,.95)}

.modal-note{
  margin-top:10px;
  color:rgba(255,255,255,.65);
  font-weight:700;
}

/* Segmented control */
.seg{
  margin-top:12px;
  display:flex;
  gap:8px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
}

.seg-btn{
  flex:1;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
  color:rgba(255,255,255,.80);
  padding:10px 10px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
  transition: transform .14s ease, filter .14s ease, background .14s ease, color .14s ease;
}
.seg-btn.is-on{
  background:rgba(229,9,20,.22);
  border-color: rgba(229,9,20,.45);
  color:#fff;
}
.seg-btn:active{ transform: scale(.99); }

/* Results list (used by browse/list sheets) */
.sheet-results{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height: 56vh;
  overflow:auto;
  padding-bottom: 10px;
}

.sheet-row{
  display:flex;
  gap:12px;
  align-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  padding:10px;
  cursor:pointer;
}

.sheet-thumb{
  width:56px;
  height:56px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
}

.sheet-meta{ flex:1; min-width:0; }
.sheet-title{
  font-weight:900;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sheet-sub{
  margin-top:4px;
  color:rgba(255,255,255,.65);
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sheet-empty{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  padding:14px;
  color:rgba(255,255,255,.70);
  font-weight:900;
}

/* =========================================================
   PLAYER
   ========================================================= */
.video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
}

/* Fullscreen behavior */
.video-wrap:fullscreen{
  width:100vw;
  height:100vh;
  aspect-ratio:auto;
  border-radius:0;
  border:0;
  background:#000;
}
.video-wrap:fullscreen .video{
  width:100%;
  height:100%;
  object-fit:contain;
}
.video-wrap:-webkit-full-screen{
  width:100vw;
  height:100vh;
  aspect-ratio:auto;
  border-radius:0;
  border:0;
  background:#000;
}
.video-wrap:-webkit-full-screen .video{
  width:100%;
  height:100%;
  object-fit:contain;
}

.video{
  width:100%;
  height:100%;
  display:block;
  background:#000;
  object-fit:contain;
}

/* overlay should NOT block clicks when hidden */
.overlay{
  position:absolute;
  inset:0;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.overlay.is-visible{
  opacity:1;
  pointer-events:auto;
}

.overlay-grad{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0), rgba(0,0,0,.75));
}

/* center the buttons in the middle of the video */
.overlay-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}

/* controls pinned to bottom inside video */
.overlay-bottom{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:10px 12px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.row{display:flex; align-items:center; gap:10px}
.time{font-weight:900; font-size:12px; color:rgba(255,255,255,.80)}
.time.dim{color:rgba(255,255,255,.65)}
.seek{flex:1}
.vol{flex:1}

.glass-btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  cursor:pointer;
}
.glass-btn.big{padding:14px 16px; font-size:16px}

.red-circle{
  border:0;
  background:var(--red);
  width:70px;
  height:70px;
  border-radius:999px;
  color:#fff;
  font-weight:900;
  font-size:28px;
  cursor:pointer;
}

.details{
  background:var(--panel);
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px 16px 16px 16px;
}

.details-title-row{display:flex; align-items:center; gap:10px}
.details-title{
  font-size:18px;
  font-weight:900;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.details-desc{
  margin-top:8px;
  color:rgba(255,255,255,.80);
  font-weight:700;
  line-height:1.25;
  max-height:40px;
  overflow:hidden;
}
.chips{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  font-weight:800;
  font-size:12px;
}
.chip.strong{
  border-color:rgba(229,9,20,.35);
  background:rgba(229,9,20,.18);
}
.play-ico{
  display:inline-block;
  line-height:1;
  transform:translateY(1px);
  font-size:30px;
  font-weight:900;
}

.meta{margin-top:10px}
.meta-row{display:flex; gap:10px; padding-bottom:6px}
.meta-k{width:72px; color:rgba(255,255,255,.50); font-weight:900; font-size:12px}
.meta-v{
  flex:1;
  color:rgba(255,255,255,.85);
  font-weight:700;
  font-size:12px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.status-line{
  margin-top:10px;
  color:rgba(255,255,255,.60);
  font-weight:800;
  font-size:12px;
}

/* =========================================================
   DESKTOP "2025 POLISH" (contained layout + subtle depth)
   ========================================================= */
@media (min-width: 980px){

  body{
    background:
      radial-gradient(900px 520px at 15% -10%, rgba(229,9,20,.16), transparent 60%),
      radial-gradient(900px 520px at 85% -10%, rgba(255,255,255,.06), transparent 60%),
      var(--bg);
  }

  .home-root,
  .player-root{
    max-width:1100px;
    margin:0 auto;
  }

  .home-scroll{
    padding-bottom: 96px;
  }

  .player-top{
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .pill{ box-shadow: 0 8px 24px rgba(0,0,0,.20); }

  .hero-mount{ padding: 18px 16px 12px 16px; }
  .hero{
    height:360px;
    border-radius:22px;
    border-color: rgba(255,255,255,.09);
    box-shadow:
      0 18px 40px rgba(0,0,0,.40),
      0 1px 0 rgba(255,255,255,.05) inset;
  }

  .card-wide{ width:290px; height:180px; border-radius:18px; }
  .card-poster{ width:160px; height:270px; border-radius:18px; }

  /* bottom nav contained + rounded on desktop */
  .bottom-nav{
    left:50%;
    right:auto;
    transform:translateX(-50%);
    width:min(1100px, 100%);
    border:1px solid rgba(255,255,255,.08);
    border-bottom:0;
    border-top-left-radius:18px;
    border-top-right-radius:18px;
    overflow:hidden;
  }

  /* modal sheet contained on desktop */
  .modal-sheet{
    width:min(1100px, 100%);
  }

  .section-title{ font-size:19px; }
}

/* =========================================================
   ACCESSIBILITY: reduce motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Optional: prevent accidental horizontal scroll */
html, body{ overflow-x: hidden; }