/* Motion language adapted from the kim-brooks funnel pair. Content stays readable without JS. */
:root{--ease:cubic-bezier(.22,.68,0,1)}
html.smooth-wheel{scroll-behavior:auto}
/* Pre-reveal translateX must never widen the page */
html.js body{overflow-x:hidden}

/* Base scroll reveals: only when JS is present */
html.js .rv{opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv.funnel-left{transform:translateX(-56px) translateY(16px);filter:blur(7px)}
html.js .rv.funnel-right{transform:translateX(56px) translateY(16px);filter:blur(7px)}
html.js .rv.funnel-left.in,html.js .rv.funnel-right.in{transform:none;filter:blur(0)}

/* Word-by-word heading reveal */
.funnel-words .funnel-word{display:inline-block;opacity:0;filter:blur(11px);
  transform:translateY(.5em) rotateX(-16deg);transform-origin:center bottom;
  transition:opacity .68s var(--ease),filter .68s var(--ease),transform .68s var(--ease);
  transition-delay:calc(var(--word-index)*48ms)}
.in .funnel-words .funnel-word,.funnel-words.in .funnel-word{
  opacity:1;filter:blur(0);transform:none}

/* Breathing primary CTAs: transform on the button, glow on a pseudo-element
   animated by opacity only — box-shadow itself never animates (paint cost) */
@keyframes ctaLift{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.02)}}
@keyframes ctaGlow{0%,100%{opacity:0}50%{opacity:1}}
.btn.breathe{position:relative}
.btn.breathe::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;
  box-shadow:0 26px 46px -16px rgba(216,94,54,.95)}
html.js .rv.in .btn.breathe{animation:ctaLift 3.4s ease-in-out infinite}
html.js .rv.in .btn.breathe::after{animation:ctaGlow 3.4s ease-in-out infinite}

/* Best-value tag settle-in and gentle float */
@keyframes tagFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
html.js .rv.in .tag{animation:tagFloat 4.2s ease-in-out 1.2s infinite}

@media(max-width:900px){
  html.js .rv.funnel-left{transform:translateX(-24px) translateY(14px);filter:blur(5px)}
  html.js .rv.funnel-right{transform:translateX(24px) translateY(14px);filter:blur(5px)}
}

/* Infinite marquee strip */
section.marquee{padding:0;overflow:hidden;border-block:1px solid var(--line);background:var(--marquee-bg,#efe0c9)}
.marquee__track{display:flex;width:max-content;padding-block:.95rem;animation:slide 44s linear infinite}
@media(max-width:699px){.marquee__track{animation-duration:30s}}
.marquee__set{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.75rem);margin:0;padding:0 clamp(1.5rem,3vw,2.75rem) 0 0;list-style:none}
.marquee__set li{display:flex;align-items:center;gap:clamp(1.5rem,3vw,2.75rem);font-family:var(--font-head);font-size:clamp(1rem,1.8vw,1.35rem);line-height:1;letter-spacing:.045em;text-transform:uppercase;color:var(--marquee-ink,#6b5a48);white-space:nowrap}
.marquee__set li::after{content:"";flex:none;width:7px;height:7px;background:var(--accent-dark);transform:rotate(45deg)}
@keyframes slide{from{transform:none}to{transform:translateX(-50%)}}

/* Pointer-tilt on offer cards */
html.js .card.rv.in{transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:opacity .85s var(--ease),filter .85s var(--ease),transform .2s ease}

/* Offer card reveal stagger: delay applies only to the fade-in transitions
   (opacity/filter); the tilt transform stays on its fast, undelayed .2s track */
.offers .card.rv.in{transition:opacity .85s var(--ease) var(--stagger,0s),filter .85s var(--ease) var(--stagger,0s),transform .2s ease}
.offers .card:nth-child(2){--stagger:.12s}
.offers .card:nth-child(3){--stagger:.24s}

/* Proximity glow border */
[data-glow-card]{--glow-active:0;--glow-angle:0deg;isolation:isolate;position:relative}
[data-glow-card]::before{content:"";position:absolute;z-index:4;inset:0;padding:2px;pointer-events:none;border-radius:inherit;background:conic-gradient(from var(--glow-angle),transparent 0 38%,var(--accent) 47%,var(--gold) 52%,transparent 62%);opacity:var(--glow-active);transition:opacity 180ms ease;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv,html.js .rv.funnel-left,html.js .rv.funnel-right,.funnel-word{
    opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  html.js .rv.in .btn.breathe,html.js .rv.in .tag{animation:none!important}
  .marquee__track{animation:none}
  [data-glow-card]::before{display:none}
}

/* ---- Checkout pour takeover ---- */
#morph-takeover{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;background:#2b1c10;color:#f7ecdd;text-align:center;padding:24px;overflow:hidden}
#morph-takeover.on{display:flex}
#morph-takeover .glow{position:absolute;inset:auto -20% -35% -20%;height:70%;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%, rgba(239,113,71,.32), rgba(239,113,71,0) 70%)}
#morph-takeover img.logo{height:52px;width:auto}
.pourcup{position:relative;width:140px;height:170px;margin:2px 0}
.pourcup svg{display:block;width:100%;height:100%}
/* pour v4: stream falls to the cup floor and stays; the rising liquid paints over it,
   so the stream visually ends at the surface. At the end the tail drops into the cup. */
.pour-stream{transform:scaleY(0);transform-origin:70px 8px;opacity:0}
#morph-takeover.on:not(.reverse) .pour-stream{animation:streamStart .38s cubic-bezier(.5,0,.6,1) forwards}
@keyframes streamStart{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:1}}
.stream-end{transform-origin:70px 140px}
#morph-takeover.on:not(.reverse) .stream-end{animation:streamOff .5s cubic-bezier(.55,0,.8,.6) 1.75s forwards}
@keyframes streamOff{to{transform:scaleY(0)}}
@keyframes streamRun{0%{transform:scaleY(0);opacity:0}8%{transform:scaleY(1);opacity:1}
  74%{transform:scaleY(1);opacity:1}86%{transform:scaleY(0);transform-origin:70px 92px;opacity:.6}
  100%{transform:scaleY(0);transform-origin:70px 92px;opacity:0}}
.pour-wobble{animation:streamWobble .55s ease-in-out infinite}
@keyframes streamWobble{0%,100%{transform:translateX(0)}50%{transform:translateX(.7px)}}
/* liquid rises in glugs while the stream pours */
.liquid2{transform:translateY(66px)}
#morph-takeover.on:not(.reverse) .liquid2{animation:cupFill 1.9s cubic-bezier(.32,.12,.55,1) .35s forwards}
@keyframes cupFill{0%{transform:translateY(66px)}100%{transform:translateY(0)}}
#morph-takeover.reverse .liquid2{animation:cupDrain 1s cubic-bezier(.4,0,.7,1) forwards}
@keyframes cupDrain{0%{transform:translateY(0)}100%{transform:translateY(66px)}}
/* surface ripple: the wave path slides horizontally under the clip */
.wave{animation:waveSlide 2.4s linear infinite}
@keyframes waveSlide{0%{transform:translateX(0)}100%{transform:translateX(-70px)}}
#morph-takeover.reverse .wave{animation-duration:2.6s}
.pourcup .wisp{position:absolute;top:14px;width:8px;height:24px;border-radius:8px;background:rgba(255,252,246,.45);
  filter:blur(5px);opacity:0;animation:wispUp 2.6s ease-in-out infinite;animation-delay:1.4s}
.pourcup .wisp.w1{left:40px}.pourcup .wisp.w2{left:60px;animation-delay:1.9s}.pourcup .wisp.w3{left:84px;animation-delay:2.3s}
#morph-takeover.reverse .wisp{animation-play-state:paused;opacity:0}
@keyframes wispUp{0%{transform:translateY(12px);opacity:0}30%{opacity:.8}100%{transform:translateY(-24px);opacity:0}}
#morph-takeover .brew{font-family:var(--font-head);font-size:1.45rem;max-width:24ch}
#morph-takeover .dots::after{content:"";animation:morphDots 1.2s steps(4) infinite}
@keyframes morphDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
#morph-takeover .sub2{color:#cfc0aa;font-size:.9rem}
::view-transition-old(cta),::view-transition-new(cta){animation-duration:.45s}
@media(prefers-reduced-motion:reduce){#morph-takeover{display:none!important}}

/* ---- Brew-fill scroll progress ---- */
#brewfill{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent));transform-origin:0 50%;transform:scaleX(0)}

/* ---- Bean drop on grind selection ---- */
.bean-fly{position:fixed;z-index:95;width:10px;height:14px;pointer-events:none;
  animation:beanFall .8s cubic-bezier(.3,.1,.6,1) forwards}
@keyframes beanFall{0%{transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(var(--bx,12px),46px) rotate(var(--br,140deg));opacity:0}}
@media(prefers-reduced-motion:reduce){#brewfill{display:none}.bean-fly{display:none}}


/* ---- Final-section steaming mug ---- */
.final-mug,.guar-mug{position:relative;width:min(320px,72vw);}
.final-mug{width:min(520px,88vw);}
.final-mug,.guar-mug{margin:0 auto 20px;border-radius:14px;overflow:hidden;
  border:1px solid #d9c6ab;box-shadow:0 22px 50px -26px rgba(0,0,0,.6)}
.final-mug img,.final-mug video{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.guar-mug img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:30% 45%;filter:brightness(1.28) contrast(1.04) saturate(1.08)}

/* ---- Layout/delight batch ---- */
/* hero: overlapping tilted pair */
.hero-img.hero-duo{overflow:visible;border:0;box-shadow:none;gap:0;padding:10px 0}
.hero-duo img{border-radius:12px;border:1px solid var(--line);box-shadow:0 24px 50px -26px rgba(43,28,16,.45);
  transition:transform .45s var(--ease)}
.hero-duo img:first-child{transform:rotate(-3deg) translateX(6%);z-index:1}
.hero-duo img:last-child{transform:rotate(3deg) translateX(-6%)}
.hero-duo:hover img{transform:rotate(0) translateX(0)}
/* best-value card elevation */
@media(min-width:720px){.offers.three .card.best{margin-top:-10px;border-width:2px;
  box-shadow:0 26px 54px -26px rgba(216,94,54,.5)}}
/* steps connector line (shows in the gaps between cards) */
@media(min-width:760px){.steps{position:relative}
  .steps::before{content:"";position:absolute;top:40px;left:14%;right:14%;border-top:2px dashed var(--grind-border);opacity:.55}
  .step{position:relative}}
/* reviews rhythm */
@media(min-width:760px){.quote:nth-child(2){margin-top:18px}}
/* founder photo: snapshot tilt */
.founder-img img{transform:rotate(-1.6deg);transition:transform .45s var(--ease)}
.founder-img:hover img{transform:rotate(0)}
/* mug photos: slow hover zoom (founder-img has no overflow:hidden wrapper, so it keeps its tilt only, no zoom) */
.final-mug img,.final-mug video,.guar-mug img{transition:transform 2.2s var(--ease)}
.final-mug:hover img,.final-mug:hover video,.guar-mug:hover img{transform:scale(1.06)}
/* section heading underline draw */
.rv-words{position:relative;padding-bottom:12px}
.rv-words::after{content:"";position:absolute;bottom:0;width:56px;height:3px;border-radius:2px;
  background:var(--gold);left:0;transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .25s}
h2.rv-words[style*="center"]::after,.reviews .rv-words::after,.how .rv-words::after,.final .rv-words::after{left:50%;margin-left:-28px;transform-origin:center}
.rv-words.in::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .hero-duo img:first-child,.hero-duo img:last-child,.founder-img img{transform:none;transition:none}
  .rv-words::after{transform:scaleX(1);transition:none}
  .final-mug img,.guar-mug img{transition:none}
  .final-mug:hover img,.guar-mug:hover img{transform:none}
}


/* ---- Trust strip: one contained band ---- */
.truststrip{margin-top:30px;padding:22px 24px;border:1px solid var(--line);border-radius:14px;
  background:var(--chip-bg);text-align:center}
.truststrip-row{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;align-items:center}
.tchip{font-size:.86rem;font-weight:600;color:var(--ink-dim)}
.tchip::before{content:"✓ ";color:var(--good)}
.pmarks{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;max-width:100%}
@media(max-width:520px){
  .pmarks{width:100%}
  .pmark{height:28px;width:66px}
  .pmark svg{height:12px}
}
.pmark{display:inline-flex;align-items:center;justify-content:center;height:34px;width:80px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  box-shadow:0 4px 12px -4px rgba(43,28,16,.28);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pmark:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 10px 22px -8px rgba(43,28,16,.4)}
.pmark svg{display:block;height:15px;width:auto;max-width:60px}
.truststrip .objection{margin:14px 0 12px}
.truststrip .tastes{margin-top:0}
@media(max-width:600px){
  .truststrip{padding:18px 16px}
  .truststrip-row{gap:8px 12px}
  .tchip{font-size:.8rem;line-height:1.45;text-align:left;position:relative;padding-left:18px;width:100%}
  .tchip::before{content:"✓";color:var(--good);position:absolute;left:0;font-weight:800}
  .truststrip .objection{font-size:.92rem;margin:12px 0 10px;text-wrap:balance}
  .tastes{gap:7px}
  .taste-chip{padding:5px 11px;font-size:.8rem}
  .pmarks{margin-top:2px}
}
html.js .truststrip.rv .tchip,html.js .truststrip.rv .pmark{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .truststrip.rv.in .tchip,html.js .truststrip.rv.in .pmark{opacity:1;transform:none}
html.js .truststrip.rv.in .tchip:nth-child(2){transition-delay:.08s}
html.js .truststrip.rv.in .tchip:nth-child(3){transition-delay:.16s}
html.js .truststrip.rv.in .pmark:nth-child(1){transition-delay:.24s}
html.js .truststrip.rv.in .pmark:nth-child(2){transition-delay:.3s}
html.js .truststrip.rv.in .pmark:nth-child(3){transition-delay:.36s}
html.js .truststrip.rv.in .pmark:nth-child(4){transition-delay:.42s}
@media(prefers-reduced-motion:reduce){html.js .truststrip.rv .tchip,html.js .truststrip.rv .pmark{opacity:1;transform:none;transition:none}}

/* ---- How-it-works: sequential left-to-right story ---- */
.step-ico{display:block;width:40px;height:40px;margin:0 auto 8px}
.step-num{position:absolute;top:10px;right:12px;width:26px;height:26px;font-size:.8rem;opacity:.75}
.step{position:relative}
html.js .steps .step.seq{opacity:0;transform:translateX(-26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .steps.play .step.seq{opacity:1;transform:none}
html.js .steps.play .step.seq:nth-child(2){transition-delay:.45s}
html.js .steps.play .step.seq:nth-child(3){transition-delay:.9s}
@media(min-width:760px){
  .steps::before{transition:clip-path 1.4s var(--ease) .2s;clip-path:inset(0 100% 0 0)}
  .steps.play::before{clip-path:inset(0 0 0 0)}
}
@media(prefers-reduced-motion:reduce){
  html.js .steps .step.seq{opacity:1;transform:none;transition:none}
  .steps::before{clip-path:none;transition:none}
}

/* pour v2 shading */
.pour-drop{opacity:0}
#morph-takeover.on:not(.reverse) .pour-drop{animation:dropSplash 1.55s ease-out .25s}
@keyframes dropSplash{0%,100%{opacity:0}20%{opacity:.9;transform:translate(0,0)}
  45%{opacity:.6;transform:translate(-7px,-9px)}70%{opacity:0;transform:translate(-11px,-13px)}}
.pour-drop2{opacity:0}
#morph-takeover.on:not(.reverse) .pour-drop2{animation:dropSplash2 1.55s ease-out .5s}
@keyframes dropSplash2{0%,100%{opacity:0}20%{opacity:.9}45%{opacity:.6;transform:translate(8px,-11px)}70%{opacity:0;transform:translate(12px,-16px)}}

/* ---- Grind toggle: sliding feel ---- */
.grind label{transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.grind label:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.grind label{transition:none}.grind label:active{transform:none}}

/* ---- Reviews marquee: continuous scroll of 5 review cards, doubled for the loop ---- */
.revwrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.revtrack{display:flex;width:max-content;animation:revslide 45s linear infinite}

@keyframes revslide{from{transform:none}to{transform:translateX(-50%)}}
.revset{display:flex;gap:18px;padding:0 9px;list-style:none;margin:0}
.rquote{flex:none;width:min(340px,78vw);background:var(--panel);color:var(--panel-ink);border:1px solid var(--line);
  border-radius:14px;padding:22px;box-shadow:0 14px 36px -24px rgba(43,28,16,.25)}
.rquote blockquote{margin:0 0 12px;font-size:.95rem;line-height:1.55;color:var(--panel-ink)}
.rquote figcaption{color:var(--panel-dim);font-weight:600;font-size:.85rem}

.rquote .avatar{width:40px;height:40px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;color:#fff;margin-bottom:10px}
.revset li:nth-child(1) .avatar{background:#d85e36}
.revset li:nth-child(2) .avatar{background:#8a6014}
.revset li:nth-child(3) .avatar{background:#7a4a22}
.revset li:nth-child(4) .avatar{background:#a8401b}
.revset li:nth-child(5) .avatar{background:#8a5526}
@media(prefers-reduced-motion:reduce){
  .revtrack{animation:none}
  .revwrap{overflow-x:auto}
}

/* FAQ two-column desktop: independent flex columns so expanding one side never
   shifts spacing in the other */
@media(min-width:820px){
  .faq-cols{display:flex;gap:44px;align-items:flex-start}
  .faq-cols .faq-col{flex:1;min-width:0}
}

/* ---- v16: hover dynamics + attention effects ---- */
.tchip,.taste-chip{transition:transform .25s var(--ease),box-shadow .25s var(--ease),
  border-color .25s var(--ease),background .25s var(--ease)}
.tchip:hover,.taste-chip:hover{transform:translateY(-2px);border-color:var(--accent-dark);
  box-shadow:0 6px 16px -8px rgba(168,64,27,.45)}
.taste-chip:hover{background:var(--accent);color:#22150a}
.step{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.step:hover{transform:translateY(-4px);border-color:var(--accent-dark);
  box-shadow:0 20px 40px -22px rgba(43,28,16,.4)}
.step-ico{transition:transform .3s var(--ease)}
.step:hover .step-ico{transform:translateY(-3px) scale(1.06)}
html.js .steps.done .step.seq{transition:transform .3s var(--ease),box-shadow .3s var(--ease),
  border-color .3s var(--ease),opacity .3s var(--ease);transition-delay:0s!important}
html.js .steps.done .step.seq:hover{transform:translateY(-4px)}

/* CTA perimeter shimmer (from the pay-pro button treatment) */
@property --tde-sweep{syntax:"<angle>";initial-value:0deg;inherits:false}
.cta-checkout,.header-actions .btn{
  --tde-fill:var(--accent);
  border:2px solid transparent;
  background:linear-gradient(var(--tde-fill),var(--tde-fill)) padding-box,
    conic-gradient(from var(--tde-sweep),
      transparent 0 34%,rgba(255,214,170,.85) 45%,#fff3e2 49%,rgba(255,214,170,.85) 53%,transparent 64%) border-box;
  animation:tdeSweep 3.6s linear infinite;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
@keyframes tdeSweep{to{--tde-sweep:360deg}}
.cta-checkout:hover,.header-actions .btn:hover{--tde-fill:var(--accent-dark);
  transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(216,94,54,.55)}

/* Best-value card sheen: a slow diagonal light sweep to pull the eye */
.card.best{overflow:visible}
.card.best::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  background-size:260% 100%;background-position:130% 0;
  animation:bestSheen 5.5s linear infinite}
@keyframes bestSheen{0%{background-position:130% 0}100%{background-position:-130% 0}}

@media(prefers-reduced-motion:reduce){
  .cta-checkout,.header-actions .btn{animation:none}
  .card.best::after{animation:none;background:none}
  .tchip,.taste-chip,.step,.step-ico{transition:none}
}

/* ---- v17: hero "pick a side" duel entrance ---- */
.hero-duo{position:relative}
html.js .hero-duo img{opacity:0}
html.js .hero-duo img:first-child{animation:duelLeft .85s cubic-bezier(.16,1,.3,1) .2s forwards}
html.js .hero-duo img:last-child{animation:duelRight .85s cubic-bezier(.16,1,.3,1) .48s forwards}
@keyframes duelLeft{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes duelRight{from{opacity:0;transform:translateX(46px)}to{opacity:1;transform:none}}
.hero-duo::after{content:"";position:absolute;top:7%;bottom:7%;left:50%;width:2px;margin-left:-1px;
  background:linear-gradient(to bottom,transparent,rgba(216,94,54,.7) 30%,rgba(216,94,54,.7) 70%,transparent);
  opacity:0;pointer-events:none}
html.js .hero-duo::after{animation:seamIn .9s var(--ease) 1.15s forwards}
@keyframes seamIn{to{opacity:1}}
.hero-duo img{transition:transform .5s var(--ease),filter .5s var(--ease)}
@media(hover:hover){
  .hero-duo img:first-child:hover{transform:scale(1.035) rotate(-1.2deg)}
  .hero-duo img:last-child:hover{transform:scale(1.035) rotate(1.2deg)}
  .hero-duo:hover img:not(:hover){filter:saturate(.8) brightness(.95)}
}
html:not(.js) .hero-duo img{opacity:1}
@media(prefers-reduced-motion:reduce){
  html.js .hero-duo img{animation:none;opacity:1}
  html.js .hero-duo::after{animation:none;opacity:1}
  .hero-duo img{transition:none}
}