/* Tewfeer motion layer. Load after styles.css and controls.css.
   Core content is always visible; JavaScript only adds a one-shot animation
   after an element enters the viewport. Coupon controls are owned by styles.css. */
:root {
  --motion-duration:260ms;
  --motion-ease:cubic-bezier(.2,.75,.25,1);
  --motion-spring:cubic-bezier(.2,.8,.25,1.35);
  --motion-card-shadow:0 16px 34px rgb(28 28 77 / 11%),0 3px 8px rgb(0 118 87 / 5%);
}

.store-card,
.offer-card,
.editorial-card {
  transition:transform var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) ease,
    box-shadow var(--motion-duration) ease;
}

.category-card,
.country-choice {
  transition:transform var(--motion-duration) var(--motion-ease),
    background var(--motion-duration) ease,
    border-color var(--motion-duration) ease,
    box-shadow var(--motion-duration) ease;
}

.category-icon,
.category-icon svg {
  transition:transform 340ms var(--motion-spring),box-shadow 260ms ease;
}

.editorial-image,
.offer-thumbnail {
  transition:transform 520ms var(--motion-ease),filter 520ms ease;
}

/* Anchor image scaling at its lower edge so it stays above the copy.
   Keep the content static: the heading link's stretched pseudo-element must
   remain positioned against .editorial-card, including its image area. */
.editorial-image {
  transform-origin:center bottom;
}
.editorial-card-content {
  position:static;
  background:var(--surface-card,#fff);
}

/* Decorative arrow is an image, not extra spoken link text. */
.editorial-card::before {
  content:'';
  position:absolute;
  z-index:1;
  top:16px;
  inset-inline-end:16px;
  width:42px;
  height:42px;
  border:1px solid rgb(255 255 255 / 80%);
  border-radius:50%;
  background-color:rgb(255 255 255 / 94%);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231c1c4d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6'/%3E%3C/svg%3E");
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 3px 12px rgb(28 28 77 / 10%);
  pointer-events:none;
  transition:transform 340ms var(--motion-spring),background-color 260ms ease,box-shadow 260ms ease;
}

.store-meta strong::after,
.btn svg,
.text-link svg,
.header-quick-search>button svg {
  transition:transform var(--motion-duration) var(--motion-spring);
}

.stores-showcase .store-meta strong::after {
  display:inline-block;
}

.btn,
.icon-button,
.header-quick-search>button {
  transition:transform var(--motion-duration) var(--motion-ease),
    background var(--motion-duration) ease,
    border-color var(--motion-duration) ease,
    box-shadow var(--motion-duration) ease;
}

/* Keyboard focus has the same visual prominence as a pointer hover. */
.store-card:focus-within,
.editorial-card:focus-within {
  outline:3px solid #008966;
  outline-offset:4px;
  border-color:#78cbae;
  box-shadow:0 0 0 7px rgb(0 194 146 / 9%);
}
.editorial-card h3 a:focus-visible {
  outline:none;
}
.offer-card:focus-within {
  border-color:#78cbae;
  box-shadow:0 0 0 3px rgb(0 194 146 / 10%);
}
.category-card:focus-visible,
.country-choice:focus-visible,
.btn:focus-visible,
.icon-button:focus-visible,
.text-link:focus-visible {
  outline:3px solid #008966;
  outline-offset:4px;
}

@media (hover:hover) and (pointer:fine) {
  .store-card:hover,
  .offer-card:not(.offer-card--expired):hover,
  .editorial-card:hover {
    transform:translateY(-5px);
    border-color:#78cbae;
    box-shadow:var(--motion-card-shadow);
  }
  .store-card:hover .store-meta strong,
  .editorial-card:hover h3 {
    color:#007f5d;
  }
  .stores-showcase .store-card:hover .store-meta strong::after {
    transform:translateX(-5px);
  }
  .category-card:hover {
    transform:translateY(-3px);
    border-color:#bbdecf;
    background:#f2fcf7;
  }
  .category-card:hover .category-icon {
    transform:rotate(-5deg);
    box-shadow:0 5px 12px rgb(15 119 86 / 12%);
  }
  .category-card:hover .category-icon svg {
    transform:translateY(-3px) rotate(5deg) scale(1.1);
  }
  .editorial-card:hover .editorial-image {
    transform:scale(1.065);
    filter:saturate(1.08);
  }
  .editorial-card:hover::before,
  .editorial-card:focus-within::before {
    transform:translateX(-3px) scale(1.06);
    background-color:var(--brand-mint,#cdf9ec);
    box-shadow:0 5px 16px rgb(28 28 77 / 16%);
  }
  .offer-card:hover .offer-thumbnail {
    transform:scale(1.045);
  }
  .country-choice:hover {
    transform:translateX(-3px);
    border-color:#94d4ba;
    box-shadow:0 4px 12px rgb(28 28 77 / 5%);
  }
  .btn:hover,
  .icon-button:hover,
  .header-quick-search>button:hover {
    transform:translateY(-2px);
  }
  .btn:hover svg,
  .text-link:hover svg {
    transform:translateX(-4px);
  }
  .deal-button:hover svg {
    transform:translate(2px,-2px);
  }
  .header-quick-search>button:hover svg {
    transform:scale(1.12);
  }
}

/* Touch and mouse clicks both get a brief, spatially stable pressed state. */
.btn:active,
.icon-button:active,
.header-quick-search>button:active {
  transform:translateY(1px) scale(.98);
  box-shadow:none;
}
.category-card:active,
.country-choice:active {
  transform:scale(.97);
  background:#e6f8ef;
}
.store-card:active,
.editorial-card:active {
  transform:translateY(0) scale(.992);
  border-color:#43b990;
  box-shadow:0 3px 10px rgb(28 28 77 / 7%);
}

@media (prefers-reduced-motion:no-preference) {
  .motion-reveal {
    animation:tewfeer-rise 480ms var(--motion-ease) var(--motion-delay,0ms) backwards;
  }
  @keyframes tewfeer-rise {
    from { opacity:.55; translate:0 16px; }
    to { opacity:1; translate:0 0; }
  }
}

@media (prefers-reduced-motion:reduce) {
  .motion-reveal {
    animation:none!important;
    opacity:1!important;
    translate:none!important;
  }
  .store-card,
  .offer-card,
  .editorial-card,
  .category-card,
  .country-choice,
  .category-icon,
  .category-icon svg,
  .editorial-image,
  .offer-thumbnail,
  .editorial-card::before,
  .store-meta strong::after,
  .btn,
  .btn svg,
  .icon-button,
  .text-link svg,
  .header-quick-search>button,
  .header-quick-search>button svg {
    transition:none!important;
    transform:none!important;
  }
}