/* =============================================================
   Asaxiy — supplemental CSS
   Tailwind (Play CDN) handles the utility layer; this file only
   holds keyframes, motion states and a few things utilities
   can't express cleanly.
   ============================================================= */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* Never allow sideways scroll / phantom overflow on mobile */
html, body { overflow-x: clip; max-width: 100%; }

/* ---- Prevent a flash of untranslated content ----
   Uses visibility (not opacity) so it never conflicts with the
   opacity-based reveal / hero-stagger animations. */
body:not(.i18n-ready) [data-i18n]:not([data-i18n-keep]) { visibility: hidden; }
body.i18n-ready [data-i18n] { visibility: visible; }

/* ---- Scroll-reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Hero entrance (orchestrated on load) ---- */
.hero-stagger {
  opacity: 0;
  transform: translateY(20px);
}
.hero-in .hero-stagger {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hero-in .hero-stagger.d1 { transition-delay: .05s; }
.hero-in .hero-stagger.d2 { transition-delay: .15s; }
.hero-in .hero-stagger.d3 { transition-delay: .28s; }
.hero-in .hero-stagger.d4 { transition-delay: .42s; }
.hero-in .hero-stagger.d5 { transition-delay: .55s; }

/* ---- Floating hero chips ---- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.float-y { animation: float-y 5s ease-in-out infinite; }

/* ---- Image placeholder system ---- */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 15% 15%, rgba(255, 255, 255, .28), transparent 55%),
    radial-gradient(120% 120% at 85% 85%, rgba(0, 0, 0, .16), transparent 55%);
  z-index: 1;
  transition: opacity .5s var(--ease);
}
.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.is-loaded > .ph-img { opacity: 1; }
.ph.is-loaded::after { opacity: 0; }
.ph-tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  padding: .18rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: #334155;
  font-size: .66rem;
  font-weight: 700;
}
.ph.is-loaded .ph-tag { display: none; }

/* ---- FAQ accordion (smooth height) ---- */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.faq-item.open .faq-panel { grid-template-rows: 1fr; }
.faq-panel > div { overflow: hidden; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* =====================================================
   Live OPEN / CLOSED status dot pulse (stores + contact)
   ===================================================== */
@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%      { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); }
}

/* contact-form success state fade-in */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.fade-in { animation: fade-in .35s var(--ease); }
#contact-form[hidden],
#contact-success[hidden] { display: none !important; }

/* =====================================================
   Stores / branch cards + mini gallery
   ===================================================== */
@keyframes store-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.store-card {
  animation: store-in .5s var(--ease) both;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.store-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(15, 23, 42, .14);
}

.store-gallery .store-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s var(--ease), transform .5s var(--ease);
}
.store-gallery .store-photo.is-active { opacity: 1; }
.store-card:hover .store-gallery .store-photo.is-active { transform: scale(1.03); }

.store-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.store-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: width .3s var(--ease), background .3s var(--ease);
}
.store-dot.is-active { width: 18px; background: #fff; }

/* prev / next arrows over the photo */
.store-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #0f172a;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .2s var(--ease), background .2s var(--ease);
}
.store-arrow--prev { left: 8px; }
.store-arrow--next { right: 8px; }
.store-arrow:hover { background: #fff; }
.store-gallery:hover .store-arrow,
.store-arrow:focus-visible { opacity: 1; }
/* touch / no-hover devices: always visible */
@media (hover: none) {
  .store-arrow { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .store-card { animation: none; }
  .store-gallery .store-photo { transition: none; }
  .store-card:hover .store-gallery .store-photo.is-active { transform: none; }
  .store-dots,
  .store-arrow { display: none; }
}

/* =====================================================
   Category tiles — image fill, name overlay on hover
   ===================================================== */
.cat-tile {
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
  /* fallback shown only if the <img> is missing / fails to load */
  background: linear-gradient(135deg, #006bff, #4d9bff);
  transition: box-shadow .3s var(--ease);
}
.cat-tile:hover { box-shadow: 0 18px 40px rgba(15, 23, 42, .16); }

/* real category photo — plain <img>, no reveal gating */
.cat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform .4s var(--ease);
}
.cat-tile:hover .cat-img { transform: scale(1.05); }

/* gradient-placeholder fallback tile */
.cat-tile .ph { transition: transform .4s var(--ease); }
.cat-tile:hover .ph { transform: scale(1.05); }

.cat-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(15, 23, 42, .82) 0%, rgba(15, 23, 42, .18) 45%, transparent 70%);
  opacity: 0;
  transition: opacity .2s var(--ease);
}
.cat-name {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.cat-tile:hover .cat-scrim { opacity: 1; }
.cat-tile:hover .cat-name { opacity: 1; transform: none; }

/* touch / no-hover: keep the label permanently visible */
@media (hover: none) {
  .cat-scrim {
    opacity: 1;
    background: linear-gradient(to top, rgba(15, 23, 42, .7) 0%, rgba(15, 23, 42, .1) 50%, transparent 72%);
  }
  .cat-name { opacity: 1; transform: none; }
}

/* collapsed grid shows only the first 8 tiles */
#categories-grid.is-collapsed [data-cat]:nth-child(n+9) { display: none; }
/* beats the .btn-ghost (inline-flex) component class so [hidden] really hides */
#cat-toggle[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .cat-tile .ph,
  .cat-img,
  .cat-scrim,
  .cat-name { transition: none; }
  .cat-tile:hover .ph,
  .cat-tile:hover .cat-img { transform: none; }
  .cat-scrim { opacity: 1; }
  .cat-name { opacity: 1; transform: none; }
}

/* =====================================================
   Hero theme carousel
   ===================================================== */
.hero-carousel { position: relative; }

/* soft blurred blue/pink glow lifting the frame off the hero bg */
.hero-glow {
  position: absolute;
  inset: -12% -6% -16%;
  z-index: 0;
  border-radius: 40%;
  background:
    radial-gradient(50% 55% at 24% 24%, rgba(0, 107, 255, .55), transparent 70%),
    radial-gradient(46% 52% at 82% 86%, rgba(232, 53, 97, .45), transparent 72%);
  filter: blur(42px);
  opacity: .9;
  pointer-events: none;
}

/* the visible framed viewport */
.hero-frame {
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .55),
    0 0 0 6px rgba(255, 255, 255, .12),
    0 34px 60px -22px rgba(2, 18, 55, .6);
}

.hero-slide {
  position: absolute;
  inset: 0;
  /* brand-blue fallback if the photo is missing */
  background: linear-gradient(135deg, #0047ab, #006bff);
  opacity: 0;
  transform: translateX(6%) scale(1.05);
  transition: opacity .8s var(--ease), transform 1s var(--ease);
}
.hero-slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* floating selling-point chip */
.hero-badge {
  position: absolute;
  top: 16px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 9px;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 16px 32px -12px rgba(2, 18, 55, .5);
}
.hero-badge-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(0, 107, 255, .12);
  color: #006bff;
}

/* dots — premium pill housing */
.hero-carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(6px);
  transform: translateX(-50%);
}
.hero-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: width .35s var(--ease), background .35s var(--ease);
}
.hero-dot.is-active {
  width: 24px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .16);
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: opacity .3s ease; transform: none; }
  .hero-slide.is-active { transform: none; }
  .hero-badge { animation: none; }
  .hero-carousel-dots { display: none; }
}

/* =====================================================
   Store OPEN / CLOSED status pill
   ===================================================== */
.store-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
/* hide until JS resolves the current state (avoids a 1-frame flash) */
.store-status:not(.is-open):not(.is-closed) { display: none; }
.store-status.is-open { background: rgba(34, 197, 94, .12); color: #15803d; }
.store-status.is-closed { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.store-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.store-status.is-open .store-status__dot { animation: dot-pulse 2.4s ease-out infinite; }

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .hero-stagger { opacity: 1 !important; transform: none !important; }
}