/* ZPOP — home.css
   Home page sections (story, why, crunch, crave, creators, reviews, menu preview, QSR, growth, franchise teaser, social wall, final CTA) + Phase 1 home overrides.
   Load order on every page: animations.css > style.css > header.css > home.css > polish.css
   (order matters: later files intentionally override earlier ones). */

  /* ============ CORN STORY ============ */
  #story{ background:var(--zpop-green-deep); color:var(--zpop-cream); padding:140px 0; overflow:hidden; }
  #story .story-head{ text-align:center; max-width:780px; margin:0 auto 70px; }
  #story .story-head h2{ font-size:clamp(38px,5.4vw,64px); color:#fff; margin-top:14px; }
  #story .story-head p{ font-family:var(--font-body); font-weight:500; color:#D9CBB0; margin-top:18px; font-size:17px; line-height:1.6; }
  #story-cob-wrap{ position:relative; width:340px; height:340px; margin:0 auto; }
  #story-cob-wrap img{ width:100%; height:100%; object-fit:cover; border-radius:50%; border:10px solid var(--zpop-yellow); animation:spinSlow 22s linear infinite; }
  @keyframes spinSlow{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }
  .story-orbit-card{
    position:absolute; background:#fff; color:var(--ink); border-radius:18px; padding:14px 18px;
    font-family:var(--font-display); font-weight:600; font-size:13.5px; box-shadow:0 16px 34px rgba(0,0,0,0.25);
    display:flex; align-items:center; gap:10px;
  }
  .story-orbit-card img{ width:36px; height:36px; border-radius:9px; object-fit:cover; }
  #story-visual{ position:relative; min-height:420px; }
  .story-steps{ display:flex; justify-content:center; gap:14px; margin-top:56px; flex-wrap:wrap; }
  .story-step{ font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--zpop-yellow); display:flex; align-items:center; gap:8px; }
  .story-step .arrow{ color:#7a6d54; }
  @media (max-width:760px){ #story-cob-wrap{ width:220px; height:220px; } .story-orbit-card{ position:static; margin:8px auto; display:inline-flex; } #story-visual{ display:flex; flex-direction:column; align-items:center; gap:12px; } }

  /* ============ WHY ZPOP ============ */
  #why{ background:var(--zpop-cream); padding:140px 0; }
  #why .why-head{ text-align:center; max-width:680px; margin:0 auto 64px; }
  #why .why-head h2{ font-size:clamp(36px,5vw,58px); margin-top:14px; }
  .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .why-card{
    background:#fff; border-radius:26px; padding:32px 26px; position:relative; overflow:hidden;
    transition:transform 260ms var(--pop-ease-settle, ease), box-shadow 260ms ease;
    box-shadow:0 10px 30px rgba(36,27,18,0.06);
  }
  .why-card:hover{ transform:translateY(-8px); box-shadow:0 22px 44px rgba(36,27,18,0.14); }
  .why-num{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--zpop-orange); margin-bottom:16px; }
  .why-card h3{ font-size:19px; margin-bottom:10px; }
  .why-card p{ font-family:var(--font-body); font-size:13.5px; color:var(--stone); line-height:1.55; }
  .why-card .why-kernel{
    position:absolute; bottom:-14px; right:-10px; width:56px; height:70px; opacity:0.15;
    background:radial-gradient(circle at 35% 30%, var(--zpop-yellow), var(--zpop-orange));
    border-radius:52% 48% 55% 45% / 60% 55% 45% 40%;
  }
  @media (max-width:1100px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }

  /* ============ CORN TO CRAVE ============ */
  #crave{ background:var(--zpop-green-deep); color:var(--zpop-cream); padding:140px 0; }
  #crave .crave-head{ text-align:center; max-width:700px; margin:0 auto 70px; }
  #crave .crave-head h2{ font-size:clamp(36px,5vw,58px); color:#fff; margin-top:14px; }
  .crave-strip{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; }
  .crave-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:150px; }
  .crave-step .crave-dot{
    width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--zpop-yellow); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:13px;
    box-shadow:0 14px 30px rgba(0,0,0,0.3); margin-bottom:14px; transition:transform 240ms var(--pop-ease-overshoot,ease);
  }
  .crave-step:hover .crave-dot{ transform:scale(1.08); }
  .crave-step span{ font-family:var(--font-body); font-weight:700; font-size:13px; color:#D9CBB0; }
  .crave-arrow-v{ color:var(--zpop-yellow); font-size:22px; margin:0 8px; }
  @media (max-width:900px){ .crave-strip{ flex-direction:column; } .crave-arrow-v{ transform:rotate(90deg); margin:6px 0; } }

  /* ============ MENU EXPERIENCE ============ */
  #menu{ background:#fff; padding:140px 0 120px; }
  #menu .menu-head{ text-align:center; max-width:680px; margin:0 auto 40px; }
  #menu .menu-head h2{ font-size:clamp(38px,5.4vw,64px); margin-top:14px; }
  .menu-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:52px; }
  .menu-tab{
    font-family:var(--font-display); font-weight:600; font-size:14px; padding:12px 24px; border-radius:999px;
    border:2px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer;
    -webkit-appearance:none; appearance:none;
  }
  .menu-tab.active{ background:var(--ink); color:var(--zpop-cream); }
  .menu-track{ display:flex; gap:24px; overflow-x:auto; padding:8px 6vw 30px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .menu-track::-webkit-scrollbar{ height:8px; }
  .menu-track::-webkit-scrollbar-thumb{ background:var(--zpop-yellow); border-radius:99px; }
  .menu-item{
    flex:0 0 300px; scroll-snap-align:start; background:var(--zpop-cream); border-radius:28px; overflow:hidden;
    transition:transform 260ms ease, box-shadow 260ms ease; box-shadow:0 10px 26px rgba(36,27,18,0.06);
  }
  .menu-item:hover{ transform:translateY(-8px); box-shadow:0 24px 48px rgba(36,27,18,0.16); }
  .menu-item-img{ aspect-ratio:4/5; overflow:hidden; }
  .menu-item-img img{ width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
  .menu-item:hover .menu-item-img img{ transform:scale(1.05); }
  .menu-item-body{ padding:20px; }
  .menu-item-body .cat-tag{ font-family:var(--font-body); font-weight:800; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--zpop-orange); }
  .menu-item-body h3{ font-size:20px; margin:8px 0 8px; }
  .menu-item-body p{ font-family:var(--font-body); font-size:13.5px; color:var(--stone); line-height:1.5; margin-bottom:16px; min-height:40px; }
  .menu-item-cta{ display:flex; gap:8px; }
  .menu-item-cta .btn{ height:40px; padding:0 16px; font-size:12.5px; }
  .menu-footer-cta{ text-align:center; margin-top:16px; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
  @media (max-width:600px){ .menu-item{ flex-basis:78vw; } }

  /* ============ OUR QSR ============ */
  #qsr{ background:var(--zpop-green-deep); color:var(--zpop-cream); padding:140px 0; }
  .qsr-layout{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
  .qsr-facts{ display:flex; flex-direction:column; gap:22px; margin-top:32px; }
  .qsr-fact{ display:flex; gap:14px; align-items:flex-start; }
  .qsr-fact .dot{ width:8px; height:8px; border-radius:50%; background:var(--zpop-yellow); margin-top:8px; flex-shrink:0; }
  .qsr-fact p{ font-family:var(--font-body); font-size:15px; color:#D9CBB0; line-height:1.55; }
  .qsr-visual{ border-radius:32px; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,0.35); }
  .qsr-visual img{ width:100%; display:block; }
  .qsr-cta-row{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
  @media (max-width:900px){ .qsr-layout{ grid-template-columns:1fr; } }

  /* ============ GROWTH / EXPANSION ============ */
  #growth{ background:var(--zpop-yellow); padding:140px 0; }
  .growth-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center; margin:60px 0 70px; }
  .g-stat-num{ font-family:var(--font-display); font-weight:700; font-size:clamp(52px,7vw,84px); color:var(--ink); line-height:0.9; }
  .g-stat-label{ font-family:var(--font-body); font-weight:800; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--zpop-red); margin-top:10px; }
  .growth-cities{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:48px; }
  .city-pin{
    background:var(--ink); color:#fff; font-family:var(--font-display); font-weight:600; font-size:14px;
    padding:12px 24px; border-radius:999px; display:flex; align-items:center; gap:8px;
  }
  .city-pin .dot{ width:8px; height:8px; border-radius:50%; background:var(--zpop-yellow); }
  .growth-destinations{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:56px; }
  .dest-chip{ background:#fff; border-radius:999px; padding:10px 20px; font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--ink); }
  .growth-cta{ text-align:center; }
  @media (max-width:700px){ .growth-stats{ grid-template-columns:1fr; gap:44px; } }

  /* ============ FRANCHISE ============ */
  #franchise{ background:var(--zpop-red); color:#fff; padding:150px 0; text-align:center; }
  #franchise h2{ font-size:clamp(38px,6vw,74px); line-height:1.02; }
  #franchise .f-points{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin:40px 0 48px; }
  .f-point{ background:rgba(255,255,255,0.14); border-radius:999px; padding:10px 20px; font-family:var(--font-body); font-weight:700; font-size:13px; }
  #franchise .f-cta{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

  /* ============ INSTAGRAM / SOCIAL WALL ============ */
  #insta-wall{ background:#fff; padding:140px 0; }
  .insta-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
  .insta-cell{ aspect-ratio:1/1; border-radius:16px; overflow:hidden; position:relative; }
  .insta-cell img{ width:100%; height:100%; object-fit:cover; transition:transform 300ms ease; }
  .insta-cell:hover img{ transform:scale(1.08); }
  .insta-cell .insta-icon{ position:absolute; top:8px; right:8px; font-size:13px; }
  @media (max-width:900px){ .insta-grid{ grid-template-columns:repeat(3,1fr); } }

  /* ============ FINAL CTA ============ */
  #final-cta{ background:var(--zpop-green-deep); color:#fff; padding:180px 0; text-align:center; position:relative; overflow:hidden; }
  #final-cta .final-kernel{
    position:absolute; left:50%; top:50%; width:60vw; max-width:900px; aspect-ratio:1/1;
    transform:translate(-50%,-50%); border-radius:52% 48% 55% 45% / 60% 55% 45% 40%;
    background:radial-gradient(circle at 40% 30%, var(--zpop-yellow), var(--zpop-yellow-deep) 55%, var(--zpop-orange));
    opacity:0.16; z-index:0;
  }
  #final-cta h2{ position:relative; z-index:1; font-size:clamp(56px,10vw,140px); color:#fff; line-height:0.92; }
  #final-cta .final-sub{ position:relative; z-index:1; font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2.4vw,28px); color:var(--zpop-yellow); margin-top:18px; }
  #final-cta .final-cta-row{ position:relative; z-index:1; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:48px; }

/* =========================================================================
   ZPOP — PHASE 1 · HOMEPAGE
   Placed after every earlier home <style> so equal-specificity rules win.
   ========================================================================= */

/* ---------------------------------------------------------------- HERO ---- */
#home-hero{ position:relative; z-index:1; margin-top:var(--zp-nav-h); background:#012f16; }
#home-hero .zh-frame{ position:relative; }
#home-hero .zh-img{
  display:block; width:100%; height:auto; aspect-ratio:1672/941;
  /* Fit the first screen on landscape displays without ever cropping more than ~12% of the artwork. */
  max-height:max(calc(100svh - var(--zp-nav-h)), 49.5vw);
  object-fit:cover; object-position:50% 42%;
}
#home-hero .zh-cta{
  position:absolute; left:50%; bottom:clamp(40px,4.6vw,76px); transform:translateX(-50%);
  display:flex; gap:clamp(10px,1.2vw,18px); z-index:2;
}
#home-hero .zh-cta .btn{
  height:clamp(46px,3.6vw,58px); padding:0 clamp(22px,2.3vw,36px); font-size:clamp(14.5px,1.1vw,16.5px);
  box-shadow:0 14px 32px rgba(1,24,12,.5);
}
#home-hero .zh-cta .zh-btn-green{ background:#01331e; color:var(--zpop-cream); box-shadow:inset 0 0 0 2px var(--zpop-yellow), 0 14px 32px rgba(1,24,12,.5); }
#home-hero .zh-cta .zh-btn-green:hover{ transform:scale(1.03) translateY(-2px); }

@media (max-width:819px){
  #home-hero .zh-img{ max-height:none; object-fit:fill; }
  #home-hero .zh-cta{
    position:static; transform:none; flex-wrap:wrap; justify-content:center;
    padding:20px max(6vw,20px) 52px; background:#012f16;
  }
  #home-hero .zh-cta .btn{ height:50px; flex:1 1 200px; max-width:340px; }
}

/* --------------------------------------------- WHO IS THE HERO? (#story) ---- */
/* Rounded sheet that slides up over the hero's lower edge = the transition. */
#story{ margin-top:-30px; border-radius:34px 34px 0 0; z-index:2; padding-top:150px; }
@media (max-width:760px){
  #story{ margin-top:-24px; border-radius:26px 26px 0 0; padding:110px 0 100px; }
  #story .story-head{ margin-bottom:48px; }
}

/* ------------------------- TASTY BITE. CORN THAT CRUNCHES. BIG FLAVOUR. ---- */
#crunch{ background:linear-gradient(#FFF8E7 0, #FEFAEC 80px); line-height:0; overflow:hidden; }
#crunch .crunch-fig{ margin:0; }
#crunch .crunch-img{
  display:block; width:100%; height:auto; aspect-ratio:1672/941;
  /* the poster's spice + corn bowl are cropped by its top edge: dissolve them into the cream above */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 8%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 8%);
}
/* poster ends on a deep-green brush strip (#01331E) → carry that tone into the Transformation section */
#crave{ background:linear-gradient(to bottom, #01331e 0, var(--zpop-green-deep) 280px); }

/* ------------------------------------- INSTAGRAM-STYLE REELS (#creators) ---- */
#creators{ background:var(--zpop-cream); padding:clamp(80px,10vw,140px) 0; }
#creators .creators-head{ text-align:center; max-width:680px; margin:0 auto clamp(36px,5vw,60px); }
#creators .creators-head h2{ font-size:clamp(36px,5vw,58px); margin-top:14px; }
#creators .creators-note{ margin-top:14px; font-family:var(--font-body); font-size:13px; color:var(--stone-700-fix,#4A4438); }

.reels{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; padding:14px 0; list-style:none; }
.reel{
  position:relative; isolation:isolate; aspect-ratio:3/4.6; overflow:hidden; border-radius:26px;
  background:linear-gradient(160deg,#3a2c1d,#241B12); color:#fff;
  transform:rotate(var(--tilt,0deg));
  box-shadow:0 20px 40px -20px rgba(36,27,18,.55);
  transition:transform 280ms var(--pop-ease-settle,ease), box-shadow 280ms ease;
}
.reel:nth-child(odd){ --tilt:1.5deg; }
.reel:nth-child(even){ --tilt:-2deg; }
.reel:hover, .reel:focus-within{ transform:rotate(0) translateY(-8px) scale(1.02); box-shadow:0 30px 50px -20px rgba(36,27,18,.6); }
.reel.is-playing{ transform:none; box-shadow:0 30px 50px -20px rgba(36,27,18,.6); }
.reel-media{ position:absolute; inset:0; z-index:0; }
.reel-poster{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.reel-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.reel-video[hidden]{ display:none; }
.reel-info{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:56px 18px 18px; pointer-events:none;
  background:linear-gradient(0deg, rgba(0,0,0,.9), rgba(0,0,0,.55) 55%, transparent);
}
.reel-info .c-name{ font-family:var(--font-display); font-weight:600; font-size:17px; }
.reel-info .c-handle{ font-size:12.5px; color:var(--zpop-yellow); margin-bottom:8px; }
.reel-info .c-quote{ font-size:13.5px; line-height:1.45; color:#f0eadc; }
.reel-info .c-food{ margin-top:10px; font-weight:800; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#ff9a4d; }
.reel-play, .reel-close{
  position:absolute; top:14px; right:14px; z-index:3; width:44px; height:44px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--ink); background:rgba(255,255,255,.93);
  transition:transform 200ms var(--pop-ease-overshoot,ease);
}
.reel-play:hover, .reel-close:hover{ transform:scale(1.1); }
.reel-play svg{ width:18px; height:18px; margin-left:2px; }
.reel-close svg{ width:16px; height:16px; }
.reel-close[hidden]{ display:none; }
.reel.is-playing .reel-play, .reel.is-playing .reel-info{ display:none; }
.reel-toast{
  position:absolute; left:50%; top:46%; z-index:4; transform:translate(-50%,-50%);
  padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.96); color:var(--ink);
  font-weight:800; font-size:13px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 200ms ease;
}
.reel.show-toast .reel-toast{ opacity:1; }
.creators-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:clamp(36px,5vw,56px); }
.creators-cta .is-pending{ opacity:.55; cursor:not-allowed; }
.creators-cta .is-pending:hover{ background:transparent; color:var(--ink); transform:none; }

@media (max-width:1000px){
  /* reel-style swipe row instead of a long stack */
  .reels{
    display:flex; gap:16px; margin:0 -6vw; padding:18px 6vw 30px;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:var(--zpop-yellow) transparent;
  }
  .reel{ flex:0 0 min(44vw,300px); scroll-snap-align:center; }
}
@media (max-width:600px){ .reel{ flex-basis:68vw; } }

/* ---------------------------------------------- CUSTOMER REVIEWS (#social-proof) ---- */
#social-proof{ background:#fff; padding:clamp(64px,8vw,120px) 0; overflow:hidden; }
.rv-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.06fr); align-items:center; gap:clamp(24px,4vw,64px); }
.rv-visual{ position:relative; width:100%; justify-self:center; }
.rv-visual img{
  display:block; width:112%; max-width:none; margin-left:-9%; height:auto; aspect-ratio:910/610;
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 78%, transparent 100%);
}
.rv-summary{
  position:absolute; right:2%; bottom:4%; display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:20px; background:#fff; box-shadow:0 18px 40px -14px rgba(36,27,18,.3);
  font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--zpop-green-deep);
}
.rv-summary[hidden]{ display:none; }
.rv-summary b{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:#FFF1C7; font-size:17px; }
.rv-summary svg{ width:16px; height:16px; }
.rv-pill{
  display:inline-block; padding:10px 18px; border-radius:999px; background:#FFF1C7; color:var(--zpop-green-deep);
  font-family:var(--font-body); font-weight:800; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
}
.rv-copy h2{ margin:18px 0 22px; font-size:clamp(32px,3.9vw,54px); line-height:1.06; letter-spacing:-.01em; color:var(--zpop-green-deep); }
.rv-card{ margin:0; transition:opacity 260ms ease; }
.rv-card.has-carousel{ min-height:210px; }
.rv-card.is-swapping{ opacity:0; }
.rv-quote{ font-family:var(--font-body); font-weight:500; font-size:clamp(17px,1.5vw,20px); line-height:1.65; color:var(--stone-700-fix,#4A4438); max-width:34em; }
.rv-person{ display:flex; align-items:center; gap:16px; margin-top:26px; }
.rv-avatar{
  width:64px; height:64px; flex:0 0 64px; border-radius:50%; overflow:hidden; display:grid; place-items:center;
  background:#FFF1C7; color:var(--zpop-green-deep); font-family:var(--font-display); font-weight:600; font-size:24px;
}
.rv-avatar img{ width:100%; height:100%; object-fit:cover; }
.rv-avatar svg{ width:30px; height:30px; opacity:.6; }
.rv-name{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--zpop-green-deep); }
.rv-city{ font-size:14px; color:var(--stone-700-fix,#4A4438); margin-top:2px; }
.rv-stars{ display:flex; align-items:center; gap:3px; margin-top:8px; }
.rv-stars svg{ width:20px; height:20px; }
.rv-stars span{ margin-left:8px; font-weight:800; font-size:15px; color:var(--zpop-green-deep); }
.rv-controls{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.rv-controls[hidden]{ display:none; }
.rv-arrow{
  width:44px; height:44px; border-radius:50%; border:2px solid var(--zpop-green-deep); background:transparent;
  color:var(--zpop-green-deep); display:grid; place-items:center; cursor:pointer; transition:background 160ms ease,color 160ms ease;
}
.rv-arrow:hover{ background:var(--zpop-green-deep); color:#fff; }
.rv-arrow svg{ width:18px; height:18px; }
.rv-dots{ display:flex; gap:10px; }
.rv-dots button{ width:10px; height:10px; padding:0; border:0; border-radius:50%; background:rgba(36,27,18,.2); cursor:pointer; }
.rv-dots button[aria-current="true"]{ background:var(--zpop-red); }
.rv-note{ margin-top:26px; margin-bottom:0; }
.rv-note[hidden]{ display:none; }

@media (max-width:900px){
  .rv-grid{ grid-template-columns:1fr; }
  .rv-visual{ max-width:520px; }
  .rv-visual img{ width:100%; margin-left:0; }
}

/* ------------------------------------------------ reduced motion (home) ---- */
@media (prefers-reduced-motion:reduce){
  #story-cob-wrap img{ animation:none; }
  .reel, .reel-play, .reel-close, .reel-toast, .rv-card{ transition:none; }
  .reel:hover, .reel:focus-within{ transform:none; }
  .reel:nth-child(odd), .reel:nth-child(even){ --tilt:0deg; }
  .reels{ scroll-behavior:auto; }
}