/* ==========================================================================
   since71 ("With UAE") — bespoke visual treatment, scoped to this store.
   Linked AFTER globals.css + styles/custom.css (see config storeCssHref), so
   these rules re-enable / override the neutral shared baseline. This is the
   full signature look of the original since71.online site: an animated gold
   hero (parallax backdrop, faint grid, floating gem/ring/diamond shapes), a
   gradient/shimmer hero title, and scroll-reveal. (The gold palette comes from
   this store's config theme; the UAE map is branding/map.svg, self-animated.)
   ========================================================================== */

@keyframes float-shape {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -26px, 0) rotate(8deg);
  }
}

/* --- Scroll reveal --------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --- Animated hero backdrop / grid / floating shapes ----------------------- */

.hero__backdrop {
  display: block;
  position: absolute;
  inset: -25% 0;
  z-index: 0;
  will-change: transform;
  background:
    radial-gradient(
      60% 60% at 20% 20%,
      color-mix(in srgb, var(--brand) 26%, transparent),
      transparent 60%
    ),
    radial-gradient(
      50% 50% at 85% 30%,
      color-mix(in srgb, var(--brand-bright) 18%, transparent),
      transparent 55%
    ),
    radial-gradient(
      80% 80% at 50% 110%,
      color-mix(in srgb, var(--brand-deep) 22%, transparent),
      transparent 60%
    );
}

.hero__grid {
  display: block;
  position: absolute;
  inset: -2px;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
  opacity: 0.5;
}

.hero__shapes {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__shape {
  position: absolute;
  color: var(--brand);
  opacity: 0.5;
  animation: float-shape 14s ease-in-out infinite;
  filter: drop-shadow(0 10px 30px var(--ring));
}

.hero__shape--1 {
  top: 14%;
  inset-inline-start: 8%;
  width: 120px;
  animation-delay: 0s;
}

.hero__shape--2 {
  top: 62%;
  inset-inline-start: 16%;
  width: 80px;
  animation-delay: -3s;
  opacity: 0.35;
}

.hero__shape--3 {
  top: 20%;
  inset-inline-end: 12%;
  width: 150px;
  animation-delay: -6s;
}

.hero__shape--4 {
  top: 68%;
  inset-inline-end: 10%;
  width: 90px;
  animation-delay: -9s;
  opacity: 0.4;
}

/* --- Gradient / shimmer hero title ----------------------------------------- */

.hero__title {
  background: linear-gradient(120deg, var(--ink), var(--brand-deep), var(--ink));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:root[data-theme='dark'] .hero__title {
  background: linear-gradient(120deg, var(--ink), var(--brand-bright), var(--ink));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Honor reduced-motion: no floating shapes for users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .hero__shape {
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.container.hero__content {
    max-width: 100vw;
}

.product-card__media img,
.summary__media img,
.product__media img {
    object-fit: contain;
}