/* YR-001 polish — guide the eye from Yarak to Quick Order without visual noise. */
body.ir-page-home #home-quick-order{
  scroll-margin-block:88px;
}

body.ir-page-home .ir-home-qo-card{
  --yr-qo-teal:20,184,166;
  --yr-qo-gold:245,163,10;
}

body.ir-page-home .ir-home-qo-card.is-yarak-focus,
body.ir-page-home .ir-home-qo-card.is-yarak-focus-reduced{
  z-index:12;
}

body.ir-page-home .ir-home-qo-card.is-yarak-focus::before,
body.ir-page-home .ir-home-qo-card.is-yarak-focus::after,
body.ir-page-home .ir-home-qo-card.is-yarak-focus-reduced::after{
  content:"";
  position:absolute;
  pointer-events:none;
  box-sizing:border-box;
}

/* Main ring: a restrained teal-to-gold handoff that visually connects Yarak
   with the purchase card. It never changes layout or captures clicks. */
body.ir-page-home .ir-home-qo-card.is-yarak-focus::after{
  inset:-4px;
  z-index:8;
  border:2px solid rgba(var(--yr-qo-teal),0);
  border-radius:27px;
  opacity:0;
  transform:scale(.992);
  animation:irYarakQuickOrderRing 2.15s cubic-bezier(.22,1,.36,1) both;
}

/* A second, softer halo gives the ring depth without turning it into a flashy
   effect. It follows the main ring by a fraction of a second. */
body.ir-page-home .ir-home-qo-card.is-yarak-focus::before{
  inset:-9px;
  z-index:7;
  border:1px solid rgba(var(--yr-qo-gold),0);
  border-radius:31px;
  opacity:0;
  transform:scale(.985);
  animation:irYarakQuickOrderHalo 2.15s .08s cubic-bezier(.22,1,.36,1) both;
}

@keyframes irYarakQuickOrderRing{
  0%{
    opacity:0;
    transform:scale(.992);
    border-color:rgba(var(--yr-qo-teal),0);
    box-shadow:0 0 0 0 rgba(var(--yr-qo-teal),0);
  }
  14%{
    opacity:1;
    transform:scale(1);
    border-color:rgba(var(--yr-qo-teal),.92);
    box-shadow:0 0 0 3px rgba(var(--yr-qo-teal),.10),0 10px 32px rgba(var(--yr-qo-teal),.12);
  }
  38%{
    opacity:1;
    border-color:rgba(var(--yr-qo-teal),.72);
    box-shadow:0 0 0 5px rgba(var(--yr-qo-teal),.055),0 12px 34px rgba(var(--yr-qo-teal),.09);
  }
  57%{
    opacity:1;
    border-color:rgba(var(--yr-qo-gold),.90);
    box-shadow:0 0 0 3px rgba(var(--yr-qo-gold),.10),0 12px 34px rgba(var(--yr-qo-gold),.11);
  }
  76%{
    opacity:.78;
    border-color:rgba(var(--yr-qo-gold),.58);
    box-shadow:0 0 0 6px rgba(var(--yr-qo-gold),.045),0 10px 28px rgba(var(--yr-qo-gold),.07);
  }
  100%{
    opacity:0;
    transform:scale(1.012);
    border-color:rgba(var(--yr-qo-gold),0);
    box-shadow:0 0 0 9px rgba(var(--yr-qo-gold),0),0 8px 22px rgba(var(--yr-qo-gold),0);
  }
}

@keyframes irYarakQuickOrderHalo{
  0%,8%{
    opacity:0;
    transform:scale(.985);
    border-color:rgba(var(--yr-qo-gold),0);
  }
  28%{
    opacity:.58;
    transform:scale(1);
    border-color:rgba(var(--yr-qo-gold),.30);
  }
  58%{
    opacity:.36;
    border-color:rgba(var(--yr-qo-teal),.24);
  }
  100%{
    opacity:0;
    transform:scale(1.025);
    border-color:rgba(var(--yr-qo-teal),0);
  }
}

/* Reduced-motion users still receive a clear destination cue, but no motion. */
body.ir-page-home .ir-home-qo-card.is-yarak-focus-reduced::after{
  inset:-4px;
  z-index:8;
  border:2px solid rgba(var(--yr-qo-teal),.78);
  border-radius:27px;
  box-shadow:0 0 0 4px rgba(var(--yr-qo-gold),.08),0 10px 30px rgba(var(--yr-qo-teal),.08);
}

html.dark body.ir-page-home .ir-home-qo-card{
  --yr-qo-teal:45,212,191;
  --yr-qo-gold:251,191,36;
}

@media(max-width:1023px){
  body.ir-page-home #home-quick-order{
    scroll-margin-block:72px;
  }
  body.ir-page-home .ir-home-qo-card.is-yarak-focus::after,
  body.ir-page-home .ir-home-qo-card.is-yarak-focus-reduced::after{
    inset:-3px;
    border-radius:25px;
  }
  body.ir-page-home .ir-home-qo-card.is-yarak-focus::before{
    inset:-7px;
    border-radius:29px;
  }
}

@media(prefers-reduced-motion:reduce){
  body.ir-page-home .ir-home-qo-card.is-yarak-focus::before,
  body.ir-page-home .ir-home-qo-card.is-yarak-focus::after{
    animation:none!important;
    opacity:0!important;
  }
}