/* Hero designs. Nothing moves on its own; everything is driven by --p
   (0 → 1 as the hero scrolls out of view), set by assets/hero.js. */

.hero { --p: 0; position: relative; }

/* ---------- Spice Wheel (pepper section) ---------- */
.wheel { --p: 0; position: relative; aspect-ratio: 1; width: min(100%, 540px); margin-inline: auto; }
.wheel::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 2px dashed rgba(227, 30, 44, .35); }
.wheel__ring { position: absolute; inset: 0; transform: rotate(calc(var(--p) * 140deg)); will-change: transform; }
.wheel__ring img {
  --a: calc(var(--i) * 45deg);
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 5px solid var(--white); box-shadow: 0 14px 26px -12px rgba(40, 20, 10, .45);
  /* place on the circle, then counter-rotate so each photo stays upright */
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-200%) rotate(calc(-1 * var(--a) - var(--p) * 140deg));
}
.wheel__center {
  position: absolute; inset: 27%; border-radius: 50%; overflow: hidden; background: var(--red);
  box-shadow: 0 30px 60px -20px rgba(120, 10, 10, .5); border: 8px solid var(--white);
}
/* Centre stays still; only the outer ring turns */
.wheel__center img { width: 100%; height: 100%; object-fit: cover; scale: 1.15; }

/* ---------- KOGI Fan (hero) ---------- */
.hero--fan { overflow: hidden; padding-bottom: 0; }
.hero__text--center { text-align: center; max-width: 760px; margin-inline: auto; }
.hero__text--center .lead { margin-inline: auto; }
.hero__text--center .hero__cta { justify-content: center; }
.hero__text--center { position: relative; z-index: 2; }
.fan { position: relative; height: clamp(340px, 34vw, 440px); margin-top: 2rem; overflow: hidden; }
.fan__arc {
  position: absolute; left: 50%; top: 18%; width: min(900px, 120%); aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; background: var(--red);
  background-image: repeating-conic-gradient(from 0deg, rgba(255,255,255,.08) 0 6deg, transparent 6deg 12deg);
  transform: rotate(calc(var(--p) * 40deg));
}
.fan img {
  position: absolute; left: 50%; top: 4%; width: clamp(140px, 15vw, 210px);
  transform-origin: 50% 230%;
  filter: drop-shadow(0 20px 26px rgba(60, 10, 10, .4));
  /* packs fan out further as you scroll */
  transform: translateX(-50%) rotate(calc(var(--o) * (21deg + var(--p) * 7deg)));
  z-index: calc(10 - var(--o) * var(--o));
}

/* Responsive */
@media (max-width: 820px) {
  .wheel { width: min(100%, 400px); }
  .fan { height: 300px; }
  .fan img { width: 120px; }
}
@media (max-width: 520px) {
  .fan img:nth-of-type(1), .fan img:nth-of-type(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .wheel { --p: 0 !important; }
}