/* ==========================================================================
   Qumash — Landing page custom styles & animations
   (Tailwind handles the utility layer; this file holds fonts, tokens,
    fine-tuned type and the animation system.)
   ========================================================================== */

/* Make the `hidden` attribute always win, even on elements that carry a
   Tailwind display utility (flex / inline-flex / grid). Lets us hide any
   element with `hidden` and show it again by simply removing the attribute. */
[hidden] { display: none !important; }

:root {
  --brand-50: #f2fbf9;
  --brand-800: #1e514c;
  --brand-950: #0c2b29;
  --brand-border: #12413c;
  --ink-muted: #6a7e82;
}

/* ---- Typography --------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  background: #ffffff;
  overflow-x: hidden;
}

.font-spectral {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
}

/* Utility container matching Figma content width (1366px) */
.container-x {
  width: 100%;
  max-width: 1420px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1280px) {
  .container-x { padding-inline: 2rem; }
}

/* Hide scrollbar on horizontal scrollers but keep functionality */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Offer bar (dismissible) ------------------------------------------- */
#offer-bar {
  max-height: 32px;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
#offer-bar.offer-hidden,
html.offer-dismissed #offer-bar {
  max-height: 0;
  opacity: 0;
}
#offer-close svg { transition: transform .3s ease; }
#header-spacer { transition: height .45s cubic-bezier(.4,0,.2,1); }
html.offer-dismissed #header-spacer { height: 60px; }

/* ---- Frosted nav -------------------------------------------------------- */
.nav-frost {
  background: rgba(242, 251, 249, 0.72);
  backdrop-filter: blur(19.5px);
  -webkit-backdrop-filter: blur(19.5px);
}

/* Nav link hover underline */
.nav-link {
  position: relative;
}
/* Underline effect copied from houseofyellow.nl: a 2px bar that sweeps IN from
   the left on hover and OUT to the right on mouse-leave, via a left/right anchor
   swap (default anchored right w/ width 0 → hover anchored left w/ width 100%).
   The current page's link keeps a fixed underline and isn't clickable. */
.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  top: auto;
  left: auto;
  right: 0;                    /* default: anchored right, zero width */
  width: 0;
  height: 2px;                 /* fat 2px */
  background: #0c2b29;         /* dark brand color (brand-950) */
  transition: left .3s, right .3s, width .3s, background .3s;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;                     /* anchor switches to left → in from left, out to the right */
  right: auto;
}
.nav-link.active { pointer-events: none; }   /* current page link (fixed underline) */

/* ---- Collections mega menu (desktop hover) ------------------------------ */
/* Panel drops from the nav. Hidden/inert by default; JS toggles `.mega-open`
   on hover of the trigger or the panel itself (with a small close delay). */
.mega-panel {
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .28s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility .28s;
}
.mega-panel.mega-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Caret rotates while the menu is open */
#mega-trigger.is-open .mega-caret { transform: rotate(180deg); }

/* Left-column text links: subtle pill highlight + brand color on hover */
.mega-link {
  display: block;
  width: 100%;
  transition: background-color .25s ease, color .25s ease;
}
.mega-link:hover {
  background: rgba(30, 54, 57, 0.06);
  color: #20655D;
}

/* Image cards: "View all" button is collapsed by default (Figma default state
   shows the title only) and slides in beneath the title on card hover. */
.mega-viewall {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  transition: max-height .4s ease, margin-top .4s ease,
              opacity .35s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.mega-img-card:hover .mega-viewall {
  max-height: 40px;
  margin-top: 12px;
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .mega-panel { transition: opacity .2s ease, visibility .2s; transform: none; }
  .mega-panel.mega-open { transform: none; }
  .mega-viewall,
  .mega-img-card img { transition: none; }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn-glass {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.btn-glass:hover {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
.btn-glass svg { transition: transform .3s ease; }
.btn-glass:hover svg { transform: translateX(4px); }

/* ---- Cards -------------------------------------------------------------- */
.card-hover {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
}
/* Product-card hover: elevate the image with a soft brand shadow */
.card-hover .prod-gallery { transition: box-shadow .45s ease; }
.card-hover:hover .prod-gallery {
  box-shadow: 0 22px 44px -16px rgba(12, 43, 41, 0.35);
}

/* ---- Buy-now drawer (product page) ------------------------------------- */
/* Slides in from the right over a 25% scrim; click-outside / ✕ / Esc close. */
.buy-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.buy-overlay.open { opacity: 1; visibility: visible; }
.buy-drawer {
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.buy-drawer.open { transform: translateX(0); }
/* the reused card acts as a slider here → keep its arrows always visible */
#buy-drawer-card .prod-arrows { opacity: 1; }

/* Product / category image zoom on hover */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.card-hover:hover .img-zoom img,
.img-zoom:hover img { transform: scale(1.06); }

/* Circular action buttons on product cards */
.round-btn {
  transition: transform .3s ease, background .3s ease;
}
.round-btn:hover { transform: scale(1.1); }

/* Product carousel arrows show on hover */
.prod-arrows { opacity: 0; transition: opacity .35s ease; }
.group\/card:hover .prod-arrows { opacity: 1; }

/* Product card image gallery (4 images cycled by the arrows).
   Images intentionally carry NO z-index, so the overlay controls (arrows,
   dots, and the wishlist/cart buttons — all later in the DOM) always stack
   above the photo instead of being hidden behind it. */
.prod-gallery .prod-img {
  opacity: 0;
  /* keep the existing hover-zoom on transform, add a cross-fade on opacity */
  transition: opacity .5s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.prod-gallery .prod-img.is-active { opacity: 1; }

.prod-dot {
  height: 6px;
  width: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.5);
  transition: width .3s ease, background .3s ease;
}
.prod-dot.active {
  width: 18px;
  background: rgba(255, 255, 255, 0.95);
}

/* ---- Shop the Look — Reels card (Figma default/hover variants) ---------- */
/* The row scrolls horizontally (overflow-x), which forces overflow-y to
   `auto` and would clip the hover Card shadow. Give it vertical room here
   (id selector wins over utility classes) and pull it back with a negative
   margin so section spacing is unchanged. */
#reels-row {
  padding-top: 0.5rem;
  padding-bottom: 3rem;    /* ~48px: ample room for the ~32px hover shadow */
  margin-bottom: -2.5rem;  /* -40px: keeps the gap to the next section */
  cursor: grab;
  scroll-behavior: auto;   /* per-frame auto-scroll must be instant, not smooth */
}
#reels-row.cursor-grabbing { cursor: grabbing; }

/* Soft radial glow behind the action buttons (approximates the Figma ellipse) */
.reel-glow {
  background: radial-gradient(62% 58% at 80% 82%, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 72%);
}
/* White info panel: flat by default, elevates with the exact Card shadow on hover */
.reel-content {
  transition: box-shadow .35s ease;
}
.reel-title,
.reel-ext { transition: color .3s ease; }
.reel-card:hover .reel-content {
  box-shadow: 0 0 2px rgba(145, 158, 171, 0.2), 0 12px 24px -4px rgba(145, 158, 171, 0.12);
}
.reel-card:hover .reel-title { color: #20655D; } /* Brand color/700 */
.reel-card:hover .reel-ext   { color: #20655D; }

/* ---- WhatsApp float ----------------------------------------------------- */
.wa-float {
  animation: wa-bob 2.8s ease-in-out infinite;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}
.wa-float:hover { animation-play-state: paused; transform: scale(1.08); }
/* Clear the mobile sticky Buy-now bar (product page) so it never overlaps
   the WhatsApp float — scoped to pages that have that bar, mobile only. */
@media (max-width: 767px) {
  body:has(.buy-now-bar) .wa-float { bottom: 104px; }
}
@keyframes wa-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.wa-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: #25d366;
  opacity: .55;
  z-index: -1;
  animation: wa-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes wa-ping {
  0%   { transform: scale(1);   opacity: .55; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}

/* ---- Scroll reveal animation ------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1),
              transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .wa-float, .wa-pulse::before { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---- Hero slider dots --------------------------------------------------- */
.hero-dot {
  height: 20px;
  width: 21px;
  border-radius: 14.5px;
  background: rgba(255, 255, 255, 0.25);
  transition: width .4s ease, background .4s ease;
  cursor: pointer;
}
.hero-dot.active {
  width: 58px;
  background: rgba(255, 255, 255, 0.85);
}

/* ---- Hero cross-fade slides + Ken Burns pan ---------------------------- */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1); /* smooth cross-fade */
}
.hero-slide.active { opacity: 1; }

/* The photo slowly drifts (zoom + pan) while its slide is active. Constant
   linear motion reads smoothest; overscan (min scale 1.06) keeps the edges
   covered during the translate so no gap ever shows. */
.hero-slide img {
  transform: scale(1.06);
  transition: transform 1.4s cubic-bezier(0.4, 0, 0.2, 1); /* eases the reset as a slide fades out */
  will-change: transform;
  backface-visibility: hidden;
}
.hero-slide.active img { animation: kenburns-a 8s linear forwards; }
.hero-slide:nth-child(even).active img { animation-name: kenburns-b; }

@keyframes kenburns-a {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.16) translate(-1.8%, -1.2%); }
}
@keyframes kenburns-b {
  from { transform: scale(1.16) translate(1.8%, 1.2%); }
  to   { transform: scale(1.06) translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide img,
  .hero-slide.active img { animation: none; transform: scale(1.06); }
}

/* ---- Section title underline accent ------------------------------------ */
.section-title { position: relative; }

/* ---- Mobile menu -------------------------------------------------------- */
.mobile-menu {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}
.mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.menu-backdrop {
  transition: opacity .35s ease;
  opacity: 0;
  pointer-events: none;
}
.menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Fade-in for the whole page on load */
.page-fade { animation: pageFade .8s ease both; }
@keyframes pageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}