/* layout — Hero, marquee, reveal animations, cards and the shop block.
   Load order matters: see the <link> order in index.html. */

/* ---------- hero ---------- */
/* Blush-to-ivory wash instead of a full-bleed photo: the product now lives in the card on
   the right, so a photographic background competed with it and pushed the text contrast
   around. A gradient also costs nothing to paint, which helps the largest paint. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  display: flex;
  align-items: stretch;
  background-color: #fdf4f1;
  background-image: linear-gradient(104deg, #fdeef2 0%, #fdf1ef 30%, #fdf6ee 62%, #fbf6e8 100%);
}

.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  z-index: 0;
  animation: drift 10s ease-in-out infinite;
}

.blob-a {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(236, 95, 149, .28), transparent 70%);
  top: -140px;
  left: -120px;
}

.blob-b {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(63, 107, 71, .22), transparent 70%);
  bottom: -120px;
  right: -100px;
  animation-delay: 2s;
}

@keyframes drift {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(20px, -24px) scale(1.08);
  }
}

/* corner monstera-leaf decoration, echoing the lifestyle-photo reference */
.hero-leaf {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 18px rgba(31, 51, 36, .18));
}

.hero-leaf-tl {
  top: -54px;
  left: -58px;
  width: 230px;
  transform: rotate(-18deg);
  opacity: .92;
}

.hero-leaf-br {
  bottom: -70px;
  right: -64px;
  width: 260px;
  transform: rotate(158deg);
  opacity: .85;
}

@media(max-width:750px) {
  .hero-leaf {
    display: none;
  }
}

.hero-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  /* Two equal flexible tracks. A fixed max on the second track (minmax(0, 480px)) sized it
     from content instead, and the card's children are all absolutely positioned, so it
     collapsed to well under its cap and left a gap in the middle of the hero. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  /* Height comes from the content. A 650px floor left the copy floating in the middle of
     the section, well below the nav. */
  padding-top: 40px;
  padding-bottom: 48px;
}

.hero-copy {
  max-width: 610px;
}

@media(max-width:899px) {
  /* Copy first, product card underneath. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-top: 36px;
    padding-bottom: 44px;
  }

  .hero-copy {
    max-width: 560px;
  }
}

@media(max-width:560px) {
  .hero-grid {
    gap: 32px;
    padding-top: 38px;
    padding-bottom: 36px;
  }

  .hero-copy {
    max-width: 100%;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--accent);
  background: var(--accent-light);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

h1.hero-h {
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.05;
  font-weight: 600;
  margin: 0 0 22px;
  letter-spacing: -.01em;
}

h1.hero-h em {
  font-style: italic;
  color: var(--accent);
}

.hero p.lede {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(31, 51, 36, .7);
  max-width: 460px;
  margin-bottom: 32px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 32px;
}

.price-now {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--leaf-800);
}

.price-was {
  font-size: 15px;
  color: rgba(31, 51, 36, .4);
  text-decoration: line-through;
}

.save-pill {
  background: var(--accent-light);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}

.trust-row {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(31, 51, 36, .6);
}

.trust-row span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-copy .lede {
  max-width: 520px;
}

.hero-copy .trust-row {
  max-width: 620px;
}

.hero-copy .hero-icon-row .mini-trust {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(8px);
}

@media(min-width:900px) {
  /* Gutter on the right only. Vertical padding here made the copy column taller than the
     product card, so the card no longer set the height and the whole hero sat lower under
     the nav than it needed to. */
  .hero-copy {
    padding: 0 34px 0 0;
  }

  .hero-copy .eyebrow {
    background: rgba(229, 238, 231, .88);
  }
}

/* ---------- hero product card ---------- */
.hero-visual {
  position: relative;
}

/* Deliberately still. The card used to drift on the floaty keyframes, which fought with the
   product turning inside it — two unrelated motions in one small box. */
.hero-photo-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(31, 51, 36, .4);
}

/* A fixed ratio means the card reserves its space before the still or the clip arrives, so the
   hero never jumps as they load. 4:3 is the ratio the clip is encoded at, so neither of them is
   cropped a second time on the way in.

   The background only shows in the moment before the still paints, and is the studio grey the
   product is filmed against so that moment is not a flash of some other colour. */
.hero-visual .hero-photo-card {
  aspect-ratio: 4 / 3;
  background: radial-gradient(125% 105% at 50% 26%, #f1f3f1 0%, #e3e7e4 52%, #d2d8d4 100%);
}

/* ---- the turning product ----------------------------------------------------------------
   The still and the clip are stacked in one box at one size, both cover-fitted, so the product
   does not move by a pixel when the video arrives over the photograph of it.

   The still is not swapped out, only covered. If the video never plays — reduced motion, a
   failed fetch, a browser that refuses to autoplay — what is left is a sharp frame of the
   product rather than an empty card, and no code has to notice. */
.hero-card-still,
.hero-card-spin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fades up once ui.js has it actually playing, so a black first frame or an empty box is never
   on screen. What it fades over is the clip's own first frame, which is what makes the handover
   invisible rather than merely quick. */
.hero-card-spin {
  opacity: 0;
  transition: opacity .5s ease;
}

.hero-card-spin.is-playing {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

  /* Asked for less motion, the card is simply the still. ui.js does not fetch the clip at all in
     that case, so this only has to cover a visitor who changes the setting after load. */
  .hero-card-spin {
    display: none;
  }
}

/* Ribbon and seal from the reference: a squared tag top-left, a round stamp bottom-right. */
.hero-card-tag {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  padding: 7px 13px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 20px -10px rgba(31, 51, 36, .45);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leaf-900);
}

.hero-card-seal {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: 20px;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 30px -12px rgba(31, 51, 36, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(31, 51, 36, .78);
}

.hero-card-seal em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--leaf-900);
}

@media(max-width:899px) {
  .hero-visual {
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
}

@media(max-width:560px) {
  .hero-card-seal {
    width: 72px;
    height: 72px;
    right: 14px;
    bottom: 14px;
    font-size: 8px;
  }

  .hero-card-seal em {
    font-size: 11px;
  }
}

/* Respect a stated preference for less motion: no float, no drift, no spinning video. */
@media (prefers-reduced-motion: reduce) {

  .hero-photo-card,
  .hero-card-seal,
  .blob {
    animation: none;
  }
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0) rotate(-.4deg);
  }

  50% {
    transform: translateY(-16px) rotate(.6deg);
  }
}

/* Scoped to the shop gallery's <picture>, not to every image in a card: the hero's card holds a
   still that sizes itself, and this rule would fight it. */
.hero-photo-card picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.badge-float {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 16px 32px -14px rgba(31, 51, 36, .35);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: floaty2 5s ease-in-out infinite;
}

@keyframes floaty2 {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.badge-1 {
  top: -16px;
  right: -16px;
  animation-delay: .4s;
}

.badge-2 {
  bottom: -18px;
  left: -18px;
  animation-delay: 1.1s;
}

/* lifestyle-style product presentation (no card frame — sits on the hero backdrop like the reference photo) */
.hero-visual-v2 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 380px;
}

.hero-product-img {
  width: 100%;
  max-width: 460px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 34px 34px rgba(31, 51, 36, .32));
  animation: floaty 6s ease-in-out infinite;
}

.hero-visual-v2 .badge-2 {
  bottom: 6%;
  left: 2%;
}

@media(min-width:900px) {
  .hero-visual-v2 {
    min-height: 460px;
  }

  .hero-product-img {
    max-width: 520px;
  }
}

/* ---------- marquee ---------- */
.marquee-wrap {
  border-top: 1px solid rgba(31, 51, 36, .08);
  border-bottom: 1px solid rgba(31, 51, 36, .08);
  padding: 16px 0;
  overflow: hidden;
  background: var(--cream-2);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--leaf-800);
  text-transform: uppercase;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.reveal-stagger>* {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}

.reveal-stagger.in-view>* {
  opacity: 1;
  transform: none;
}

.reveal-stagger.in-view>*:nth-child(1) {
  transition-delay: .05s;
}

.reveal-stagger.in-view>*:nth-child(2) {
  transition-delay: .14s;
}

.reveal-stagger.in-view>*:nth-child(3) {
  transition-delay: .23s;
}

.reveal-stagger.in-view>*:nth-child(4) {
  transition-delay: .32s;
}

/* ---------- cards ---------- */
.card {
  background: #fff;
  border-radius: 20px;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 36px -16px rgba(236, 95, 149, .25);
}

.icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ---------- shop ---------- */
/* Replaces the Tailwind utilities the shop block used to rely on:
   .shop-grid  was "grid md:grid-cols-2 gap-14 items-start"
   .shop-thumbs was "grid grid-cols-3 gap-3" */
.shop-grid {
  display: grid;
  gap: 3.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.shop-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.qty-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(31, 51, 36, .25);
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: all .2s ease;
}

.qty-btn:hover {
  background: var(--leaf-900);
  color: #fff;
  border-color: var(--leaf-900);
}

.thumb {
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .2s ease, transform .2s ease;
}

.thumb:hover {
  transform: translateY(-3px);
}

.thumb.active {
  border-color: var(--accent);
}