:root{
    --green:#00C853;
    --green-deep:#0FA34A;
    --green-dark:#0B7D3B;
    --ink:#26292B;
    --muted:#5E616E;
    --coral:#F16261;
    --sky:#63CDF1;
    --bg:#F5F5F5;
    --white:#FFFFFF;
    --line:#E3E6E5;
    --r-lg:22px;
    --r-md:16px;
    --r-sm:10px;
    --shadow-card:0 10px 28px rgba(20,30,25,0.14);
    --shadow-btn:0 8px 20px rgba(0,200,83,0.35);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; padding:0; height:100%; background:#0d0f10; overscroll-behavior:none;}
  body{
    font-family:'Inter',sans-serif;
    display:flex; align-items:center; justify-content:center;
    -webkit-touch-callout:none; user-select:none;
    min-height:100vh;
  }
  #stage-wrap{
    width:100%; max-width:420px; height:100vh; max-height:900px;
    position:relative; overflow:hidden;
    background:var(--bg);
    box-shadow:0 0 60px rgba(0,0,0,0.5);
  }
  @media (min-width:421px) and (orientation:portrait){
    #stage-wrap{ border-radius:28px; height:min(900px, 92vh); }
  }
  /* ---- LANDSCAPE: playable fills the device viewport edge-to-edge ---- */
  @media (orientation:landscape){
    #stage-wrap{ width:100vw; height:100vh; max-width:none; max-height:none; border-radius:0; }
  }
  #stage{
    position:absolute; inset:0; overflow:hidden;
  }

  /* =========================================================
     FRAME GRID SYSTEM — same DOM, two layouts.
     Areas: top (logo/mute) / head (headline) / main (game) / cta (buttons)
     Portrait: stacked rows. Landscape: text+cta rail (left) + game stage (right).
     ========================================================= */
  .frame{
    position:absolute; inset:0;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"top" "head" "main" "cta";
    opacity:0; visibility:hidden;
    padding-top:calc(20px + var(--safe-top));
    padding-bottom:calc(20px + var(--safe-bottom));
    padding-left:var(--safe-left); padding-right:var(--safe-right);
  }
  .frame.active{ opacity:1; visibility:visible; }
  .topbar{ grid-area:top; }
  h1.headline{ grid-area:head; }
  .frame-main{ grid-area:main; min-height:0; min-width:0; display:flex; flex-direction:column; }
  .cta-zone{ grid-area:cta; }

  @media (orientation:landscape){
    .frame{
      grid-template-columns:36% 64%;
      grid-template-rows:auto 1fr auto;
      grid-template-areas:"top top" "head main" "cta main";
      column-gap:16px;
      padding-top:calc(12px + var(--safe-top));
      padding-bottom:calc(12px + var(--safe-bottom));
    }
    .topbar{ padding:0 18px; }
    h1.headline{ font-size:22px !important; line-height:1.08; margin-top:6px !important; padding:0 18px !important; }
    .frame-main{ padding:0 4px 0 18px; overflow-y:auto; -ms-overflow-style:none; scrollbar-width:none; }
    .frame-main::-webkit-scrollbar{ display:none; }
    .cta-zone{ padding:0 18px !important; margin-top:8px !important; gap:6px !important; }
    .btn{ padding:13px 16px; font-size:15px; }
    .cta-sub{ font-size:12px; }
    /* scene1/scene5 sit in the right "main" column already; give them room but keep them from forcing scroll */
    .scene1, .scene5{ margin:0 18px 0 0 !important; }
    .meal-grid{ padding:0 18px 0 0 !important; }
    .addons-row, .order-summary{ margin-left:0 !important; padding-left:0 !important; padding-right:18px !important; }
    .ticket{ margin:0 18px 0 0 !important; }
    .coach-wrap{ margin:0 18px 0 0 !important; aspect-ratio:unset !important; flex:1 !important; min-height:0 !important; }
    .confirm-card, .offer-banner{ margin:10px 18px 0 0 !important; }
    .ticket-top{ padding:14px 20px 10px !important; }
    .ticket-row{ margin-top:8px !important; }
    .ticket-field .v{ font-size:16px !important; }
    .ticket-field .k{ font-size:10.5px !important; }
    .use-pnr-wrap{ padding:4px 20px 14px !important; }
    .use-pnr-wrap .btn{ padding:12px 16px !important; }
    .delivery-reveal{ padding:0 20px 14px !important; }
    .delivery-reveal.open{ max-height:160px !important; }
    .dr-row{ margin-bottom:6px !important; font-size:13px !important; }
    .dr-badge{ padding:7px 10px !important; font-size:12px !important; margin-top:8px !important; }
    .track-line{ margin-top:8px !important; }
    .meal-grid{ grid-template-columns:1fr 1fr 1fr !important; overflow:visible !important; }
    .meal-card.big{ grid-row:auto !important; }
    .meal-card.big .thumb{ flex:none !important; aspect-ratio:1/1 !important; }
    .meal-card{ padding:8px !important; }
    .meal-card .name{ font-size:12.5px !important; margin-top:6px !important; }
    .meal-card .desc{ font-size:10.5px !important; }
    .addons-row{ margin-top:8px !important; }
    .addon-chip{ padding:8px 6px !important; }
    .order-summary{ margin-top:8px !important; padding:10px 14px !important; }
    /* Frame 4: compact the recap card and pack so the coach diagram keeps real height */
    #frame-4 .frame-main{ justify-content:flex-start !important; gap:8px !important; }
    .meal-recap{ margin:0 18px 0 0 !important; padding:6px 10px !important; }
    .meal-recap-thumb{ width:32px !important; height:32px !important; }
    .meal-recap-name{ font-size:13px !important; }
    .meal-recap-label{ font-size:9px !important; }
    .meal-recap-check{ width:20px !important; height:20px !important; }
    .meal-recap-check svg{ width:11px !important; height:11px !important; }
    .coach-wrap{ min-height:120px !important; }
    .pack-zone{ height:84px !important; margin:0 18px 0 0 !important; }
    #meal-pack{ width:76px !important; height:84px !important; margin-left:-38px !important; }
    .pack-card{ padding:5px !important; gap:3px !important; }
    .pack-card-label{ font-size:9px !important; }
    .drag-hint{ font-size:11px !important; }
    .step-progress{ padding:0 18px 0 0 !important; margin-top:0 !important; }
  }
  @media (orientation:landscape) and (max-height:420px){
    .frame{ padding-top:calc(8px + var(--safe-top)); padding-bottom:calc(8px + var(--safe-bottom)); }
    h1.headline{ font-size:18px !important; margin-top:4px !important; }
    .ctkt-logo svg{ width:20px; height:20px; }
    .ctkt-logo .wordmark{ font-size:15px; }
    #mute-btn, .mute-mirror{ width:30px; height:30px; }
    .pack-zone{ height:70px !important; }
    #meal-pack{ width:64px !important; height:70px !important; margin-left:-32px !important; }
    .drag-hint{ margin-top:2px !important; font-size:10px !important; }
    .meal-recap{ padding:4px 8px !important; }
    .meal-recap-thumb{ width:26px !important; height:26px !important; }
  }

  /* ---------- Logo lockup ---------- */
  .ctkt-logo{ display:flex; align-items:center; gap:8px; }
  .ctkt-logo svg{ width:26px; height:26px; flex:none; }
  .ctkt-logo .wordmark{ font-family:'Poppins',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.2px; }
  .ctkt-logo .wordmark .c1{ color:var(--ink); }
  .ctkt-logo .wordmark .c2{ color:var(--green); }
  .ctkt-logo.on-dark .wordmark .c1{ color:#fff; }
  .ctkt-logo.on-dark .wordmark .c2{ color:var(--green); }

  .topbar{ padding:0 22px; display:flex; align-items:center; justify-content:space-between; }

  /* ---------- Buttons ---------- */
  .btn{
    border:none; border-radius:16px; font-family:'Inter',sans-serif;
    font-weight:700; font-size:17px; letter-spacing:0.1px;
    padding:17px 20px; width:100%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    -webkit-appearance:none; appearance:none;
    transition:transform .12s ease, box-shadow .12s ease, opacity .2s ease;
  }
  .btn:active{ transform:scale(0.96); }
  .btn-primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-btn); }
  .btn-primary.pulse{ animation:pulseBtn 2.1s ease-in-out infinite; }
  .btn-primary:disabled{ background:#BFE8CC; box-shadow:none; color:#fff; cursor:default; }
  .btn-ghost{ background:transparent; color:var(--white); font-weight:600; text-decoration:underline; padding:8px; }
  @keyframes pulseBtn{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.025); } }

  .cta-zone{ padding:0 22px; display:flex; flex-direction:column; align-items:center; gap:10px; align-self:end; width:100%; }
  .cta-sub{ color:var(--muted); font-size:13.5px; text-align:center; }
  .cta-sub.on-dark{ color:rgba(255,255,255,0.82); }

  /* ---------- Timer chip ---------- */
  .timer-chip{
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.95); border-radius:14px;
    padding:10px 16px; box-shadow:var(--shadow-card);
    border:1px solid rgba(99,205,241,0.35);
  }
  .timer-chip svg{ width:20px; height:20px; flex:none; }
  .timer-chip .t-label{ font-size:12.5px; color:var(--muted); font-weight:600; }
  .timer-chip .t-num{ font-size:20px; font-weight:800; color:var(--ink); font-family:'Poppins',sans-serif; margin-left:2px;}
  .timer-chip.urgent{ animation:tickPulse 1s ease-in-out infinite; border-color:var(--coral); }
  .timer-chip.urgent .t-num{ color:var(--coral); }
  @keyframes tickPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

  h1.headline{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:30px;
    line-height:1.12; color:var(--ink); margin:14px 0 0; padding:0 22px;
    letter-spacing:-0.3px;
  }
  h1.headline.on-dark{ color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.35); }
  h1.headline .accent{ color:var(--green); }

  /* =================================================================
     FRAME 1 — HUNGER MOMENT
     ================================================================= */
  #frame-1{ background:linear-gradient(180deg,#16323a 0%, #1c1f26 55%, #14161a 100%); }
  .scene1{ position:relative; flex:1; margin:16px 22px 0; border-radius:var(--r-lg); overflow:hidden; background:#181C21; }
  .scene1 > picture, .scene1 > picture > img{ width:100%; height:100%; display:block; object-fit:cover; }
  .f1-chip-wrap{ position:absolute; left:16px; right:16px; top:16px; }

  /* =================================================================
     FRAME 2 — PNR DETECT
     ================================================================= */
  #frame-2{ background:linear-gradient(180deg,#EAF6EE 0%, var(--bg) 40%); }
  .ticket{
    margin:22px 22px 0; background:var(--white); border-radius:var(--r-lg);
    box-shadow:var(--shadow-card); position:relative; overflow:hidden;
  }
  .ticket-top{ padding:22px 22px 18px; }
  .ticket-row{ display:flex; justify-content:space-between; margin-top:14px; }
  .ticket-field .k{ font-size:11.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.6px; }
  .ticket-field .v{ font-size:19px; color:var(--ink); font-weight:800; font-family:'Poppins',sans-serif; margin-top:3px; }
  .perforation{
    position:relative; height:0; border-top:2px dashed var(--line); margin:6px 0;
  }
  .perforation::before, .perforation::after{
    content:''; position:absolute; top:-11px; width:22px; height:22px; background:var(--bg); border-radius:50%;
  }
  .perforation::before{ left:-33px; }
  .perforation::after{ right:-33px; }
  .scan-line{
    position:absolute; left:0; right:0; top:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--green), transparent);
    box-shadow:0 0 14px 2px rgba(0,200,83,0.7);
    opacity:0; pointer-events:none;
  }
  .scan-line.run{ animation:scanSweep 0.9s ease-in-out; }
  @keyframes scanSweep{ 0%{ top:0; opacity:1;} 90%{opacity:1;} 100%{ top:100%; opacity:0; } }

  .use-pnr-wrap{ padding:4px 22px 22px; }

  .delivery-reveal{
    padding:0 22px 22px; max-height:0; opacity:0; overflow:hidden;
    transition:max-height .45s ease, opacity .4s ease;
  }
  .delivery-reveal.open{ max-height:220px; opacity:1; }
  .dr-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:14.5px; color:var(--ink); }
  .dr-row b{ font-family:'Poppins',sans-serif; }
  .dr-badge{
    display:flex; align-items:center; gap:8px; background:#EAF9EF; color:var(--green-dark);
    font-weight:700; font-size:13.5px; border-radius:10px; padding:9px 12px; margin-top:6px;
  }
  .dr-badge svg{ width:16px; height:16px; }
  .track-line{ height:4px; background:var(--line); border-radius:4px; margin-top:14px; position:relative; }
  .track-line .fill{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--green); border-radius:4px; transition:width .6s ease .1s; }
  .track-line .pin{ position:absolute; top:-14px; width:24px; height:24px; transform:translateX(-50%); left:0; transition:left .6s ease .1s; }

  .p2-sub{ padding:2px 22px 0; color:var(--muted); font-size:14.5px; margin-top:10px; }

  /* =================================================================
     FRAME 3 — MEAL CHOICE
     ================================================================= */
  #frame-3{ background:var(--bg); }
  .f3-status{ padding:2px 22px 0; display:flex; align-items:center; gap:10px; }
  .f3-status .timer-chip{ background:#fff; }
  .meal-grid{ flex:1; padding:16px 22px 6px; display:grid; grid-template-columns:1fr 1fr; gap:12px; overflow:auto; }
  .meal-card{
    background:var(--white); border-radius:var(--r-md); padding:10px; border:2.5px solid transparent;
    box-shadow:var(--shadow-card); position:relative; transition:transform .18s ease, border-color .18s ease, opacity .18s ease;
    display:flex; flex-direction:column; cursor:pointer;
  }
  .meal-card.big{ grid-row:span 2; }
  .meal-card.big .thumb{ aspect-ratio:unset; flex:1; }
  .meal-card.big{ display:flex; flex-direction:column; }
  .meal-card .thumb{ width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#F0F1EF; }
  .meal-card .thumb svg{ width:100%; height:100%; display:block; }
  .meal-card .name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); margin-top:9px; }
  .meal-card .desc{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.3; }
  .meal-card.selected{ border-color:var(--green); transform:translateY(-2px); }
  .meal-card:not(.selected){ opacity:0.9; }
  .check-badge{
    position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
    background:var(--green); display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(0.4); transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
  }
  .meal-card.selected .check-badge{ opacity:1; transform:scale(1); }
  .check-badge svg{ width:13px; height:13px; }

  .addons-row{ display:flex; gap:12px; padding:2px 22px 0; }
  .addon-chip{
    flex:1; background:#fff; border:2px solid var(--line); border-radius:var(--r-sm);
    padding:10px 8px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink);
    position:relative; overflow:hidden; cursor:pointer; transition:border-color .15s ease, background .15s ease;
  }
  .addon-chip img, .addon-chip svg{ width:26px; height:26px; flex:none; }
  .addon-chip.active{ border-color:var(--coral); background:#FFF3F2; }
  .addon-float{
    position:absolute; right:10px; top:6px; font-size:12px; font-weight:800; color:var(--coral);
    opacity:0; transform:translateY(0);
  }
  .addon-float.fly{ animation:floatPlus 0.9s ease forwards; }
  @keyframes floatPlus{ 0%{opacity:1; transform:translateY(4px);} 70%{opacity:1;} 100%{opacity:0; transform:translateY(-16px);} }

  .order-summary{
    margin:14px 22px 0; background:#fff; border-radius:var(--r-md) var(--r-md) 0 0;
    padding:14px 18px; box-shadow:0 -6px 18px rgba(0,0,0,0.05); border-top:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
  }
  #order-summary-text{ font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink); }
  .order-summary .price{ color:var(--green-dark); font-weight:800; font-size:14.5px; }

  /* =================================================================
     FRAME 4 — DELIVER TO SEAT
     ================================================================= */
  #frame-4{ background:linear-gradient(180deg,#E7F7FF 0%, #EFF3F5 55%); }
  #frame-4 .frame-main{ justify-content:center; gap:14px; }

  .meal-recap{
    display:flex; align-items:center; gap:12px; margin:0 22px;
    background:#fff; border-radius:var(--r-md); padding:10px 14px;
    box-shadow:var(--shadow-card); border:1.5px solid #DFF7E7;
  }
  .meal-recap-thumb{
    width:44px; height:44px; border-radius:10px; flex:none;
    background-size:cover; background-position:center; background-color:#F0F1EF;
  }
  .meal-recap-text{ flex:1; min-width:0; }
  .meal-recap-label{ font-size:10.5px; font-weight:800; letter-spacing:0.5px; color:var(--green-dark); }
  .meal-recap-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:15px; color:var(--ink); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .meal-recap-check{
    width:26px; height:26px; border-radius:50%; background:var(--green); flex:none;
    display:flex; align-items:center; justify-content:center;
  }
  .meal-recap-check svg{ width:14px; height:14px; }

  .coach-wrap{ position:relative; margin:0 22px; aspect-ratio:340/210; flex:none; }
  .coach-wrap svg{ width:100%; height:100%; display:block; position:relative; z-index:1; }
  .coach-backdrop{ position:absolute; inset:0; border-radius:var(--r-md); overflow:hidden; opacity:0.55; }
  .coach-backdrop img{ width:100%; height:100%; object-fit:cover; display:block; }
  .seat-label{ font-family:'Poppins',sans-serif; font-weight:800; font-size:15px; fill:var(--ink); }
  .seat-label.dim{ opacity:0.55; }
  #route-path{ transition:stroke-dashoffset 0.7s ease; }
  #seat-pin{ transform-origin:center; }

  .pack-zone{ position:relative; height:130px; margin:0 22px; }
  #meal-pack{
    position:absolute; left:50%; top:0; width:112px; height:130px; margin-left:-56px;
    touch-action:none; cursor:grab; will-change:transform; z-index:5;
  }
  #meal-pack.dragging{ cursor:grabbing; }
  #meal-pack.snapped .pack-card{ box-shadow:none; }
  .pack-card{
    width:100%; height:100%; background:#fff; border-radius:16px; padding:8px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    box-shadow:0 10px 20px rgba(20,30,25,0.18); border:2px solid var(--green);
  }
  .pack-card-img{
    width:100%; flex:1; border-radius:10px; background-size:cover; background-position:center 35%;
    background-color:#F0F1EF;
  }
  .pack-card-label{
    font-family:'Poppins',sans-serif; font-weight:800; font-size:10.5px; color:var(--ink);
    letter-spacing:0.2px; white-space:nowrap;
  }
  .drag-hint{ text-align:center; font-size:12.5px; color:var(--muted); margin-top:0; }
  .drag-hint svg{ width:14px; height:14px; vertical-align:-2px; margin-right:3px; }

  .step-progress{ padding:0 22px; margin-top:0; }
  .step-bar{ height:5px; border-radius:5px; background:var(--line); position:relative; overflow:hidden; }
  .step-bar .fill{ position:absolute; inset:0; width:66%; background:var(--green); border-radius:5px; }
  .step-label{ text-align:center; font-size:12px; color:var(--muted); font-weight:700; margin-top:8px; letter-spacing:0.4px; }

  /* =================================================================
     FRAME 5 — PAYOFF
     ================================================================= */
  #frame-5{ background:linear-gradient(180deg,#12262b 0%, #1a1d22 60%, #101214 100%); }
  .scene5{ position:relative; margin:14px 22px 0; border-radius:var(--r-lg); overflow:hidden; flex:0 0 auto; height:34%; background:#1c2126; }
  .scene5 > picture, .scene5 > picture > img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center 15%; }

  .confirm-card{ margin:14px 22px 0; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:18px 20px; }
  .confirm-title{ display:flex; align-items:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:800; font-size:16px; color:var(--ink); }
  .confirm-title svg{ width:20px; height:20px; }
  .confirm-sub{ font-size:13.5px; color:var(--muted); margin-top:6px; }
  .confirm-sub b{ color:var(--ink); }
  .stepper{ display:flex; align-items:center; margin-top:16px; }
  .step{ display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
  .step .dot{ width:14px; height:14px; border-radius:50%; background:var(--line); transition:background .3s ease, box-shadow .3s ease; z-index:2; }
  .step .lbl{ font-size:9.5px; font-weight:700; color:var(--muted); margin-top:6px; text-align:center; letter-spacing:0.2px; }
  .step:not(:last-child)::after{
    content:''; position:absolute; top:6px; left:50%; width:100%; height:3px; background:var(--line); z-index:1;
  }
  .step.lit .dot{ background:var(--green); box-shadow:0 0 0 4px rgba(0,200,83,0.18); }
  .step.lit:not(:last-child)::after{ background:var(--green); }
  .step.lit .lbl{ color:var(--ink); }

  .offer-banner{
    margin:14px 22px 0; background:linear-gradient(135deg, var(--green-deep), var(--green-dark));
    border-radius:var(--r-md); padding:14px 18px; text-align:center; color:#fff;
    box-shadow:0 10px 24px rgba(0,150,60,0.4); opacity:0; transform:translateY(8px);
  }
  .offer-banner.show{ animation:offerIn .5s ease forwards; }
  @keyframes offerIn{ to{ opacity:1; transform:translateY(0); } }
  .offer-eyebrow{ font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; opacity:0.85; }
  .offer-main{ font-family:'Poppins',sans-serif; font-weight:800; font-size:19px; margin-top:3px; }
  .offer-note{ font-size:10.5px; opacity:0.75; margin-top:4px; }

  /* ---------- Sound toggle ---------- */
  #mute-btn, .mute-mirror{
    width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,0.16);
    display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; flex:none;
  }
  #mute-btn svg, .mute-mirror svg{ width:18px; height:18px; }

  /* ---------- Steam wipe transition ---------- */
  #wipe{
    position:absolute; inset:0; z-index:50; pointer-events:none;
    background:radial-gradient(circle at 50% 50%, rgba(180,235,200,0.95), rgba(20,60,35,0.98) 70%);
    opacity:0; clip-path:circle(0% at 50% 50%);
  }
  #wipe.play{ animation:wipeAnim 0.7s cubic-bezier(.65,0,.35,1) forwards; }
  @keyframes wipeAnim{
    0%{ opacity:1; clip-path:circle(0% at 50% 50%); }
    50%{ opacity:1; clip-path:circle(75% at 50% 50%); }
    100%{ opacity:0; clip-path:circle(140% at 50% 50%); }
  }

  @media (prefers-reduced-motion: reduce){
    .btn-primary.pulse, .timer-chip.urgent, .check-badge, #wipe.play, .offer-banner.show { animation:none !important; }
  }