/* ========================================
   NECTARINE — hero growth sequence
   seed → stem → flower → fruit (plays once on load)
   Total runtime ≈ 11s, fruit + aura persist after.
   ======================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px var(--pad-x) 80px;
  overflow: hidden;
  isolation: isolate;
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(50% 40% at 50% 50%, rgba(255, 107, 61, 0.10), transparent 65%),
    radial-gradient(40% 40% at 30% 70%, rgba(216, 58, 42, 0.06), transparent 65%);
  filter: blur(24px);
  z-index: -1;
}

.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.nectarine {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(240px, min(36vw, 52vh), 500px);
  aspect-ratio: 1;
  filter: brightness(0.92) saturate(1.15) contrast(1.08) drop-shadow(0 30px 60px rgba(220, 40, 80, 0.22));
  z-index: 0;
}

/* Aura — appears with the fruit, then drifts/pulses */
.nectarine-glow {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(36% 36% at 50% 50%, rgba(255, 110, 130, 0.30), transparent 72%),
    radial-gradient(55% 55% at 50% 55%, rgba(220, 50, 70, 0.16), transparent 78%),
    radial-gradient(90% 90% at 50% 60%, rgba(180, 30, 50, 0.07), transparent 82%);
  filter: blur(70px);
  z-index: -1;
  opacity: 0;
  transform-origin: center;
  animation:
    nectr-glow-in 1s var(--ease-out) 3.4s forwards,
    nectr-aura-drift 11s ease-in-out 4.4s infinite,
    nectr-aura-pulse 6s ease-in-out 4.4s infinite;
}
@keyframes nectr-glow-in {
  from { opacity: 0; }
  to   { opacity: 0.45; }
}
@keyframes nectr-aura-drift {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(-4%, 3%) scale(1.05); }
  45%  { transform: translate(5%, -2%) scale(1.10); }
  70%  { transform: translate(3%, 4%) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes nectr-aura-pulse {
  0%, 100% { opacity: 0.4;  filter: blur(70px) hue-rotate(0deg); }
  50%      { opacity: 0.55; filter: blur(82px) hue-rotate(-8deg); }
}

/* ========================================
   Growth sequence — fast cinematic build (~4.5s total)
   ======================================== */

.stage-seed,
.stage-soil,
.stage-floor,
.stage-stem-leaf,
.stage-flower,
.stage-fruit,
.stage-stem-shadow,
.pollen-bit {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 300px 300px;
}

/* — Ambient floor light pool — */
.stage-floor {
  animation: floor-fade 1.2s ease-out 0s forwards;
}
@keyframes floor-fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* — Seed — */
.stage-seed {
  transform-origin: 300px 555px;
  animation:
    seed-pop 0.45s cubic-bezier(0.34, 1.6, 0.5, 1) 0.10s forwards,
    seed-fade 0.5s ease-in 1.6s forwards;
}
@keyframes seed-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(0.3); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes seed-fade {
  to { opacity: 0; }
}

/* — Soil — */
.stage-soil {
  transform-origin: 300px 565px;
  animation:
    soil-spread 0.5s ease-out 0.3s forwards,
    seed-fade 0.7s ease-in 3.6s forwards;
}
@keyframes soil-spread {
  0%   { opacity: 0; transform: scaleX(0.2); }
  100% { opacity: 0.85; transform: scaleX(1); }
}

/* — Stem cast shadow — */
.stage-stem-shadow {
  animation: floor-fade 1s ease-out 0.4s forwards;
}

/* — Stem (all 3 layers draw on together) — */
.stage-stem {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 1;
  animation: stem-grow 1.3s cubic-bezier(0.55, 0, 0.35, 1) 0.35s forwards;
}
@keyframes stem-grow {
  0%   { stroke-dashoffset: 1; }
  100% { stroke-dashoffset: 0; }
}

/* — Stem leaves — */
.stage-stem-leaf-1 {
  transform-origin: 296px 412px;
  animation: leaf-unfurl 0.5s cubic-bezier(0.34, 1.5, 0.5, 1) 0.85s forwards;
}
.stage-stem-leaf-2 {
  transform-origin: 304px 288px;
  animation: leaf-unfurl 0.5s cubic-bezier(0.34, 1.5, 0.5, 1) 1.15s forwards;
}
@keyframes leaf-unfurl {
  0%   { opacity: 0; transform: scale(0) rotate(-25deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Stem & leaves gently sway between growth and fruit — then fade for fruit */
.stage-plant {
  transform-origin: 300px 558px;
  animation: stem-sway 2.4s ease-in-out 1.65s 1 forwards;
}
@keyframes stem-sway {
  0%   { transform: rotate(0deg); }
  35%  { transform: rotate(2.2deg); }
  70%  { transform: rotate(-1.6deg); }
  100% { transform: rotate(0deg); }
}

/* — Flower — */
.stage-flower {
  transform-origin: 300px 108px;
  animation:
    flower-bloom 0.75s cubic-bezier(0.34, 1.5, 0.5, 1) 1.50s forwards,
    flower-wilt  0.8s cubic-bezier(0.5, 0, 0.65, 1) 2.40s forwards;
}
@keyframes flower-bloom {
  0%   { opacity: 0; transform: scale(0) rotate(-45deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes flower-wilt {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); }
  60%  { opacity: 0.6; }
  100% { opacity: 0; transform: scale(1.25) rotate(18deg) translateY(20px); }
}

/* — Pollen particles drift out during bloom — */
.pollen-bit {
  transform-origin: 300px 108px;
}
.pollen-1 { animation: pollen-drift-1 1.6s ease-out 2.0s forwards; }
.pollen-2 { animation: pollen-drift-2 1.8s ease-out 2.1s forwards; }
.pollen-3 { animation: pollen-drift-3 1.5s ease-out 2.05s forwards; }
.pollen-4 { animation: pollen-drift-4 1.7s ease-out 2.15s forwards; }
.pollen-5 { animation: pollen-drift-5 1.6s ease-out 2.0s forwards; }
.pollen-6 { animation: pollen-drift-6 1.9s ease-out 2.1s forwards; }
@keyframes pollen-drift-1 { 0%{opacity:0; transform:translate(0,0) scale(0.4);} 25%{opacity:1;} 100%{opacity:0; transform:translate(-60px,-50px) scale(1);} }
@keyframes pollen-drift-2 { 0%{opacity:0; transform:translate(0,0) scale(0.4);} 25%{opacity:1;} 100%{opacity:0; transform:translate(55px,-65px) scale(1);} }
@keyframes pollen-drift-3 { 0%{opacity:0; transform:translate(0,0) scale(0.4);} 25%{opacity:1;} 100%{opacity:0; transform:translate(-40px,-80px) scale(1);} }
@keyframes pollen-drift-4 { 0%{opacity:0; transform:translate(0,0) scale(0.4);} 25%{opacity:1;} 100%{opacity:0; transform:translate(70px,-30px) scale(1);} }
@keyframes pollen-drift-5 { 0%{opacity:0; transform:translate(0,0) scale(0.4);} 25%{opacity:1;} 100%{opacity:0; transform:translate(20px,-90px) scale(1);} }
@keyframes pollen-drift-6 { 0%{opacity:0; transform:translate(0,0) scale(0.4);} 25%{opacity:1;} 100%{opacity:0; transform:translate(-75px,-35px) scale(1);} }

/* — Fruit grows from where the flower was — */
.stage-fruit {
  transform-origin: 300px 108px;
  animation: fruit-grow 1.4s cubic-bezier(0.32, 1.05, 0.55, 1) 2.80s forwards;
}
@keyframes fruit-grow {
  0%   { opacity: 0; transform: scale(0.04); }
  10%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}

/* Subtle breathing once fully grown */
@keyframes nectr-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
  50%      { transform: translate(-50%, -48.5%) scale(1.018) rotate(1deg); }
}
.nectarine {
  animation: nectr-breathe 8s ease-in-out 4.4s infinite;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .stage-seed, .stage-soil, .stage-floor, .stage-stem-leaf, .stage-flower, .pollen-bit, .stage-plant, .stage-stem-shadow { display: none; }
  .stage-fruit { opacity: 1; transform: scale(1); animation: none; }
  .stage-stem { stroke-dashoffset: 0; animation: none; }
  .nectarine-glow { opacity: 0.45; animation: nectr-aura-drift 11s ease-in-out infinite, nectr-aura-pulse 6s ease-in-out infinite; }
  .nectarine { animation: nectr-breathe 8s ease-in-out infinite; }
}

/* ========================================
   Hero copy
   ======================================== */

.hero-meta {
  position: absolute;
  top: 120px;
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero-meta-block { max-width: 220px; line-height: 1.7; }
.hero-meta-block .label { color: var(--ink-faint); display: block; margin-bottom: 4px; }

.hero-headline {
  font-family: "Hanken Grotesk", "Geist", system-ui, sans-serif;
  font-size: clamp(40px, 7.5vw, 126px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-weight: 900;
  text-wrap: balance;
  max-width: 14ch;
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 0 auto;
  color: #fff;
}
.hero-headline em { font-style: normal; color: var(--accent); }

.hero-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 64px;
  gap: 32px;
  position: relative;
  z-index: 2;
  text-align: center;
}
.hero-footer p {
  max-width: 52ch;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .hero-meta { display: none; }
  .nectarine { left: 50%; top: 50%; }
}