:root {
  --home-poppy-red: #d94b3e;
  --home-poppy-dark: #7d2925;
  --home-poppy-soft: #f2b9ae;
  --home-poppy-shadow: rgba(111, 35, 31, .08);
}

body[data-page="home"] {
  overflow-x: clip;
}

body[data-page="home"] .page-shell,
body[data-page="home"] header,
body[data-page="home"] main,
body[data-page="home"] footer {
  position: relative;
  z-index: 2;
}

/* Global depth layers. They never intercept taps/clicks. */
.home-poppy-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.home-poppy-scene--back {
  z-index: 1;
  opacity: .68;
}


.home-poppy-object {
  position: absolute;
  left: var(--x, 50vw);
  top: var(--y, 50vh);
  width: var(--size, 64px);
  height: var(--size, 64px);
  opacity: var(--opacity, .32);
  transform:
    translate3d(
      calc(var(--scroll-x, 0px) + var(--pointer-x, 0px)),
      calc(var(--scroll-y, 0px) + var(--pointer-y, 0px)),
      0
    )
    rotate(var(--rotation, 0deg));
  transform-origin: 50% 54%;
  will-change: transform;
}

.home-poppy-object::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 12px var(--home-poppy-shadow));
  animation:
    homePoppyFloat var(--float-duration, 10s) ease-in-out infinite,
    homePoppySway var(--sway-duration, 14s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), var(--delay, 0s);
}

.home-poppy-object--petal::before { background-image: url('../../asets/decor/poppy-petal.svg'); }
.home-poppy-object--petal-soft::before { background-image: url('../../asets/decor/poppy-petal-soft.svg'); }
.home-poppy-object--petal-fold::before { background-image: url('../../asets/decor/poppy-petal-fold.svg'); }
.home-poppy-object--flower::before { background-image: url('../../asets/decor/poppy-flower.svg'); }
.home-poppy-object--stem::before { background-image: url('../../asets/decor/poppy-stem.svg'); }
.home-poppy-object--pair::before { background-image: url('../../asets/decor/poppy-petals-pair.svg'); }
.home-poppy-object--spark::before { background-image: url('../../asets/decor/poppy-spark.svg'); }

.home-poppy-object.is-blur::before {
  filter: blur(.6px) drop-shadow(0 8px 12px rgba(111, 35, 31, .06));
}

.home-poppy-object.is-giant::before {
  filter: blur(.7px) drop-shadow(0 10px 18px rgba(101, 28, 26, .06));
}

/* Section-attached decorations travel with the page and get local parallax. */
.home-poppy-section-decor {
  position: absolute;
  width: var(--size, 54px);
  height: var(--size, 54px);
  left: var(--left, auto);
  right: var(--right, auto);
  top: var(--top, auto);
  bottom: var(--bottom, auto);
  z-index: var(--z, 3);
  opacity: var(--opacity, .26);
  pointer-events: none;
  transform:
    translate3d(var(--local-x, 0px), var(--local-y, 0px), 0)
    rotate(var(--rotation, 0deg));
  transform-origin: center;
  will-change: transform;
}

.home-poppy-section-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 12px rgba(116, 42, 36, .07));
  animation: homePoppySectionBreath var(--float-duration, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.home-poppy-section-decor--petal::before { background-image: url('../../asets/decor/poppy-petal.svg'); }
.home-poppy-section-decor--fold::before { background-image: url('../../asets/decor/poppy-petal-fold.svg'); }
.home-poppy-section-decor--flower::before { background-image: url('../../asets/decor/poppy-flower.svg'); }
.home-poppy-section-decor--stem::before { background-image: url('../../asets/decor/poppy-stem.svg'); }
.home-poppy-section-decor--pair::before { background-image: url('../../asets/decor/poppy-petals-pair.svg'); }
.home-poppy-section-decor--spark::before { background-image: url('../../asets/decor/poppy-spark.svg'); }

/* Hero receives a more cinematic composition without replacing its existing background image. */
.hero .home-poppy-section-decor {
  z-index: 3;
}

.hero .home-poppy-section-decor--stem {
  z-index: 1;
  opacity: .74;
}

.hero .home-poppy-section-decor--petal,
.hero .home-poppy-section-decor--fold {
  z-index: 4;
}

.hero-content,
.hero-script,
.hero-dots {
  position: relative;
  z-index: 5;
}

/* Make front petals visibly cross card/section boundaries, while never blocking controls. */
.content-section,
.promo-grid,
.about,
.benefits {
  position: relative;
}

#categories .home-poppy-section-decor,
#hits .home-poppy-section-decor,
#new .home-poppy-section-decor,
#inspiration .home-poppy-section-decor {
  z-index: 6;
}

@keyframes homePoppyFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg) scale(1); }
  35% { transform: translate3d(4px, -7px, 0) rotate(2deg) scale(1.01); }
  70% { transform: translate3d(-3px, -3px, 0) rotate(-2deg) scale(.995); }
}

@keyframes homePoppySway {
  0%, 100% { transform-origin: 48% 58%; }
  50% { transform-origin: 55% 46%; }
}

@keyframes homePoppySectionBreath {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50% { transform: translate3d(0,-5px,0) rotate(1.5deg) scale(1.015); }
}

@media (max-width: 1180px) {
  .home-poppy-object.is-giant { opacity: calc(var(--opacity, .32) * .82); }
}

@media (max-width: 820px) {
  .home-poppy-object[data-mobile="hide"],
  .home-poppy-section-decor[data-mobile="hide"] {
    display: none;
  }

  .home-poppy-object[data-mobile="soft"],
  .home-poppy-section-decor[data-mobile="soft"] {
    opacity: .18;
  }

  .hero .home-poppy-section-decor--stem {
    opacity: .05;
  }
}

@media (max-width: 560px) {
  .home-poppy-object {
    opacity: min(var(--opacity, .32), .22);
  }

  .home-poppy-object.is-giant {
    display: none;
  }

  .home-poppy-section-decor {
    max-width: 72px;
    max-height: 72px;
  }

  .home-poppy-section-decor--stem {
    max-width: 90px;
    max-height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-poppy-object,
  .home-poppy-object::before,
  .home-poppy-section-decor,
  .home-poppy-section-decor::before {
    animation: none !important;
    transform: none !important;
  }
}


.hero .home-poppy-section-decor,
#categories .home-poppy-section-decor,
#hits .home-poppy-section-decor,
#new .home-poppy-section-decor,
#inspiration .home-poppy-section-decor,
.about .home-poppy-section-decor,
.promo-grid .home-poppy-section-decor {
  mix-blend-mode: multiply;
}
