/*
 * MyCoupon — Deals Hero final motion/layout
 * Scope: /deals/ hero only
 */

body.page-template-page-deals .mc-deals-page__hero--logo-scanner {
  grid-template-columns: minmax(0,1fr) 460px;
  min-height: 365px;
  align-items: center;
  gap: 42px;
  margin-block-end: 44px;
  padding-block: 38px 34px;
  overflow: visible; /* keep full-bleed hero background intact */
}

/* Only the visual field is clipped, not the hero background. */
body.page-template-page-deals .mc-deals-logo-stage {
  position: relative;
  width: min(100%,460px);
  height: 255px;
  justify-self: end;
  overflow: hidden;
  isolation: isolate;
}

body.page-template-page-deals .mc-deals-logo-stage__field {
  position: absolute;
  inset: 0;
}

body.page-template-page-deals .mc-deals-logo-stage__shop {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb,var(--surface) 86%,transparent);
  box-shadow: 0 10px 28px var(--shadow-04);
  will-change: transform,opacity,filter;
}

body.page-template-page-deals .mc-deals-logo-stage__shop img {
  width:100%;
  height:100%;
  object-fit:contain;
}

body.page-template-page-deals .mc-deals-logo-stage__shop b {
  color:var(--brand);
  font-size:22px;
  font-weight:900;
}

/* Irregular composition — different sizes and depths */
body.page-template-page-deals .mc-deals-logo-stage__shop--1 {
  top:18px; left:22px; width:92px; height:74px;
  animation: mc-logo-float-a 8.8s ease-in-out -2.1s infinite alternate;
}
body.page-template-page-deals .mc-deals-logo-stage__shop--2 {
  top:8px; left:142px; width:64px; height:52px;
  opacity:.42; filter:blur(1.8px);
  animation: mc-logo-float-b 10.5s ease-in-out -4.7s infinite alternate;
}
body.page-template-page-deals .mc-deals-logo-stage__shop--3 {
  top:24px; right:18px; width:78px; height:60px;
  opacity:.70;
  animation: mc-logo-float-c 9.6s ease-in-out -1.4s infinite alternate;
}
body.page-template-page-deals .mc-deals-logo-stage__shop--4 {
  top:91px; left:56px; width:82px; height:64px;
  animation: mc-logo-float-c 9.2s ease-in-out -5.2s infinite alternate;
}
body.page-template-page-deals .mc-deals-logo-stage__shop--5 {
  top:98px; left:174px; width:58px; height:46px;
  opacity:.38; filter:blur(2px);
  animation: mc-logo-float-a 11s ease-in-out -7s infinite alternate;
}
body.page-template-page-deals .mc-deals-logo-stage__shop--6 {
  top:82px; right:74px; width:92px; height:72px;
  animation: mc-logo-float-b 8.6s ease-in-out -3.3s infinite alternate;
}
body.page-template-page-deals .mc-deals-logo-stage__shop--7 {
  bottom:20px; left:24px; width:68px; height:54px;
  opacity:.58; filter:blur(.6px);
  animation: mc-logo-float-b 10.2s ease-in-out -6.1s infinite alternate;
}
body.page-template-page-deals .mc-deals-logo-stage__shop--8 {
  bottom:26px; left:154px; width:76px; height:58px;
  animation: mc-logo-float-a 9.7s ease-in-out -1.8s infinite alternate;
}
body.page-template-page-deals .mc-deals-logo-stage__shop--9 {
  bottom:10px; right:18px; width:98px; height:76px;
  animation: mc-logo-float-c 8.9s ease-in-out -4.4s infinite alternate;
}

/* Small magnifier; its path deliberately visits different logo clusters. */
body.page-template-page-deals .mc-deals-logo-stage__magnifier {
  position:absolute;
  z-index:5;
  top:34px;
  right:142px;
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border:0;
  border-radius:50%;
  background:color-mix(in srgb,var(--surface) 91%,transparent);
  color:var(--brand);
  box-shadow:0 7px 18px var(--shadow-08);
  pointer-events:none;
  will-change:transform;
  animation:mc-magnifier-search 15s cubic-bezier(.42,0,.58,1) infinite;
}

body.page-template-page-deals .mc-deals-logo-stage__magnifier::before {
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand) 10%,transparent) 0%,transparent 68%);
  opacity:.55;
}

body.page-template-page-deals .mc-deals-logo-stage__magnifier svg {
  position:relative;
  z-index:1;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@keyframes mc-logo-float-a {
  0%{transform:translate3d(-3px,2px,0) rotate(-1.2deg)}
  50%{transform:translate3d(5px,-5px,0) rotate(.8deg)}
  100%{transform:translate3d(-1px,4px,0) rotate(-.5deg)}
}
@keyframes mc-logo-float-b {
  0%{transform:translate3d(2px,-2px,0) rotate(.7deg)}
  50%{transform:translate3d(-5px,5px,0) rotate(-1deg)}
  100%{transform:translate3d(4px,1px,0) rotate(.6deg)}
}
@keyframes mc-logo-float-c {
  0%{transform:translate3d(0,4px,0) rotate(-.5deg)}
  50%{transform:translate3d(4px,-3px,0) rotate(1deg)}
  100%{transform:translate3d(-4px,2px,0) rotate(-.8deg)}
}

@keyframes mc-magnifier-search {
  0%{transform:translate3d(0,0,0) rotate(-6deg)}
  12%{transform:translate3d(-118px,-8px,0) rotate(3deg)}
  27%{transform:translate3d(-228px,34px,0) rotate(-3deg)}
  43%{transform:translate3d(-76px,72px,0) rotate(2deg)}
  58%{transform:translate3d(48px,96px,0) rotate(-4deg)}
  73%{transform:translate3d(-36px,146px,0) rotate(3deg)}
  88%{transform:translate3d(-176px,128px,0) rotate(-2deg)}
  100%{transform:translate3d(0,0,0) rotate(-6deg)}
}

@media (max-width:980px) and (min-width:769px){
  body.page-template-page-deals .mc-deals-page__hero--logo-scanner{
    grid-template-columns:minmax(0,1fr) 380px;
    gap:26px;
  }
  body.page-template-page-deals .mc-deals-logo-stage{width:380px;height:235px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--1{left:12px;width:82px;height:66px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--2{left:112px;width:58px;height:48px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--3{right:10px;width:70px;height:54px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--4{left:36px;width:74px;height:58px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--5{left:138px;width:54px;height:44px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--6{right:54px;width:82px;height:64px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--7{left:16px;width:62px;height:50px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--8{left:126px;width:68px;height:54px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--9{right:12px;width:86px;height:68px}
  body.page-template-page-deals .mc-deals-logo-stage__magnifier{right:120px}
  @keyframes mc-magnifier-search{
    0%{transform:translate3d(0,0,0) rotate(-6deg)}
    25%{transform:translate3d(-150px,24px,0) rotate(3deg)}
    50%{transform:translate3d(-34px,82px,0) rotate(-3deg)}
    75%{transform:translate3d(-102px,138px,0) rotate(3deg)}
    100%{transform:translate3d(0,0,0) rotate(-6deg)}
  }
}

@media (max-width:768px){
  body.page-template-page-deals .mc-deals-page__hero--logo-scanner{
    grid-template-columns:1fr;
    min-height:0;
    gap:14px;
    padding-block:30px 22px;
  }
  body.page-template-page-deals .mc-deals-logo-stage{
    width:min(100%,360px);
    height:215px;
    justify-self:center;
    margin-inline:auto;
  }
  body.page-template-page-deals .mc-deals-logo-stage__shop{border-radius:14px;padding:8px 10px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--1{top:14px;left:8px;width:72px;height:58px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--2{top:8px;left:96px;width:50px;height:42px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--3{top:18px;right:6px;width:62px;height:50px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--4{top:78px;left:24px;width:66px;height:52px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--5{top:84px;left:108px;width:48px;height:40px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--6{top:76px;right:20px;width:72px;height:56px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--7{bottom:18px;left:10px;width:56px;height:46px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--8{bottom:22px;left:104px;width:62px;height:48px}
  body.page-template-page-deals .mc-deals-logo-stage__shop--9{bottom:8px;right:8px;width:76px;height:60px}
  body.page-template-page-deals .mc-deals-logo-stage__magnifier{top:28px;right:104px;width:30px;height:30px}
  @keyframes mc-magnifier-search{
    0%{transform:translate3d(0,0,0) rotate(-6deg)}
    24%{transform:translate3d(-112px,18px,0) rotate(3deg)}
    50%{transform:translate3d(-20px,72px,0) rotate(-3deg)}
    76%{transform:translate3d(-78px,124px,0) rotate(3deg)}
    100%{transform:translate3d(0,0,0) rotate(-6deg)}
  }
}

@media (prefers-reduced-motion:reduce){
  body.page-template-page-deals .mc-deals-logo-stage__shop,
  body.page-template-page-deals .mc-deals-logo-stage__magnifier{animation:none}
}

/* ========================================================================
   Logo containment + white tile correction
   ======================================================================== */
body.page-template-page-deals .mc-deals-logo-stage {
  overflow: hidden;
  padding: 8px;
  box-sizing: border-box;
}

body.page-template-page-deals .mc-deals-logo-stage__field {
  inset: 8px;
  overflow: hidden;
  border-radius: 22px;
}

body.page-template-page-deals .mc-deals-logo-stage__shop {
  overflow: hidden;
  isolation: isolate;
  padding: 7px 9px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: 0 8px 22px var(--shadow-04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.page-template-page-deals .mc-deals-logo-stage__shop::before {
  content: none;
}

body.page-template-page-deals .mc-deals-logo-stage__shop img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 82%;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  mix-blend-mode: normal;
}

body.page-template-page-deals .mc-deals-logo-stage__shop b {
  position: relative;
  z-index: 1;
}

/* Keep floating motion safely inside the visual field. */
@keyframes mc-logo-float-a {
  0%   { transform: translate3d(-1px, 1px, 0) rotate(-.7deg); }
  50%  { transform: translate3d(3px, -3px, 0) rotate(.5deg); }
  100% { transform: translate3d(0, 2px, 0) rotate(-.3deg); }
}

@keyframes mc-logo-float-b {
  0%   { transform: translate3d(1px, -1px, 0) rotate(.4deg); }
  50%  { transform: translate3d(-3px, 3px, 0) rotate(-.6deg); }
  100% { transform: translate3d(2px, 0, 0) rotate(.4deg); }
}

@keyframes mc-logo-float-c {
  0%   { transform: translate3d(0, 2px, 0) rotate(-.3deg); }
  50%  { transform: translate3d(2px, -2px, 0) rotate(.6deg); }
  100% { transform: translate3d(-2px, 1px, 0) rotate(-.5deg); }
}

@media (max-width: 768px) {
  body.page-template-page-deals .mc-deals-logo-stage {
    padding: 6px;
  }

  body.page-template-page-deals .mc-deals-logo-stage__field {
    inset: 6px;
    border-radius: 18px;
  }

  body.page-template-page-deals .mc-deals-logo-stage__shop {
    padding: 6px 8px;
  }

  body.page-template-page-deals .mc-deals-logo-stage__shop img {
    max-width: 82%;
    max-height: 80%;
  }
}