/* Nectar Pad Flight — Gainview Farms / Appily-OneHundredSeven
   Hive crest + curved pollinator flight path of nectar pads.
   NOT Shade Vent / Rib Arch / Pearl String / hop / dial / gauge /
   stake / cell / glass island / left rail / bottom dock / burger. */

:root {
  --np-ink: #14241A;
  --np-mute: #3A4A3C;
  --np-cream: #FFFCF5;
  --np-mist: #E8F6EE;
  --np-hot: #FF3B1F;
  --np-hot-deep: #C42A12;
  --np-hot-on: #FFFFFF;
  --np-sky: #0096E0;
  --np-sky-deep: #0070A8;
  --np-sky-on: #F4FBFF;
  --np-pollen: #FFC400;
  --np-pollen-deep: #C49200;
  --np-pollen-on: #1A1600;
  --np-leaf: #0F8A52;
  --np-leaf-deep: #0A623A;
  --np-leaf-on: #F2FFF8;
  --np-hive: #1C2A20;
  --np-hive-on: #E8F6EE;
  --np-path: rgba(20, 36, 26, 0.28);
  --np-path-live: var(--np-hot);

  --np-font-display: "Bricolage Grotesque", "Epilogue", system-ui, sans-serif;
  --np-font-ui: "Atkinson Hyperlegible", "Source Sans 3", system-ui, sans-serif;

  --np-type-xs: 0.7rem;
  --np-type-sm: 0.8125rem;
  --np-type-md: 0.9375rem;
  --np-type-lg: 1.125rem;
  --np-type-brand: clamp(1.05rem, 2.2vw, 1.35rem);

  --np-radius-sm: 6px;
  --np-radius-md: 14px;
  --np-radius-lg: 22px;
  --np-radius-pill: 999px;
  --np-radius-pad: 42% 42% 38% 38% / 50% 50% 44% 44%;

  --a107-nav-h: 118px;
  --a107-accent: var(--np-hot);
  --a107-secondary: var(--np-sky);
  --a107-radius-sm: var(--np-radius-sm);
  --a107-radius-md: var(--np-radius-md);
  --a107-radius-lg: var(--np-radius-lg);
}

/* —— Shell (in-flow; not sticky/fixed) —— */
.np-flight {
  position: relative;
  z-index: 40;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 120% at 8% 0%, rgba(255, 59, 31, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 100% at 92% 10%, rgba(0, 150, 224, 0.14), transparent 50%),
    linear-gradient(180deg, #FFF8E8 0%, var(--np-cream) 55%, #F3FAF4 100%);
  border-bottom: 3px solid var(--np-ink);
  box-shadow: 0 10px 0 rgba(255, 196, 0, 0.35);
  font-family: var(--np-font-ui);
  color: var(--np-ink);
}

.np-sky {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr) minmax(160px, 240px);
  gap: 0.65rem 1rem;
  align-items: center;
  padding: 0.7rem 1rem 0.85rem;
  min-height: var(--a107-nav-h);
}

/* —— Hive brand —— */
.np-hive {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
  text-decoration: none;
  color: var(--np-hive-on);
  background: var(--np-hive);
  border: 2px solid var(--np-ink);
  border-radius: var(--np-radius-md);
  padding: 0.45rem 0.7rem 0.45rem 0.5rem;
  box-shadow: 4px 4px 0 var(--np-pollen);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 2;
}

.np-hive:hover,
.np-hive:focus-visible {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 5px 6px 0 var(--np-hot);
  outline: none;
}

.np-hive:focus-visible {
  outline: 3px solid var(--np-sky);
  outline-offset: 3px;
}

.np-hive-comb {
  display: grid;
  grid-template-columns: repeat(3, 10px);
  gap: 3px;
  width: 36px;
  height: 32px;
}

.np-hive-comb i {
  display: block;
  background: var(--np-pollen);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: np-comb-pulse 2.4s ease-in-out infinite;
}

.np-hive-comb i:nth-child(2),
.np-hive-comb i:nth-child(5) { background: var(--np-hot); animation-delay: 0.15s; }
.np-hive-comb i:nth-child(3),
.np-hive-comb i:nth-child(6) { background: var(--np-sky); animation-delay: 0.3s; }
.np-hive-comb i:nth-child(4) { background: var(--np-leaf); animation-delay: 0.45s; }

@keyframes np-comb-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.88); opacity: 0.85; }
}

.np-hive-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.np-hive-copy small {
  font-family: var(--np-font-ui);
  font-size: var(--np-type-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--np-pollen);
}

.np-hive-copy strong {
  font-family: var(--np-font-display);
  font-size: var(--np-type-brand);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--np-hive-on);
}

.np-hive-wing {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 22px;
  background: rgba(255, 196, 0, 0.55);
  border-radius: 60% 40% 50% 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.np-hive-wing--l { left: -8px; transform: translateY(-50%) rotate(-18deg); }
.np-hive-wing--r { right: -8px; transform: translateY(-50%) rotate(18deg) scaleX(-1); }

.np-flight[data-np-state="open"] .np-hive-wing,
.np-hive:hover .np-hive-wing {
  opacity: 1;
}

.np-flight[data-np-state="open"] .np-hive-wing--l {
  animation: np-wing-l 0.35s ease-in-out infinite alternate;
}
.np-flight[data-np-state="open"] .np-hive-wing--r {
  animation: np-wing-r 0.35s ease-in-out infinite alternate;
}

@keyframes np-wing-l {
  from { transform: translateY(-50%) rotate(-12deg); }
  to { transform: translateY(-50%) rotate(-28deg); }
}
@keyframes np-wing-r {
  from { transform: translateY(-50%) rotate(12deg) scaleX(-1); }
  to { transform: translateY(-50%) rotate(28deg) scaleX(-1); }
}

/* —— Flight path + pads —— */
.np-path {
  position: relative;
  min-height: 96px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0.25rem 0.15rem;
}

.np-arc {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 4px;
  width: 96%;
  height: 78px;
  pointer-events: none;
  overflow: visible;
}

.np-arc-guide {
  stroke: var(--np-path);
  stroke-width: 2.5;
  stroke-dasharray: 5 7;
}

.np-arc-live {
  stroke: var(--np-path-live);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - (var(--np-active, 0) + 0.15) * 20);
  transition: stroke-dashoffset 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 4px rgba(255, 59, 31, 0.45));
}

.np-pads {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  align-items: end;
  position: relative;
  z-index: 1;
}

.np-pad-slot {
  display: flex;
  justify-content: center;
  /* Arc lift via margin so land-in transform stays free */
  margin-bottom: calc((2 - (var(--np-i) - 2) * (var(--np-i) - 2)) * 5px + 4px);
  padding-top: calc((2 - (var(--np-i) - 2) * (var(--np-i) - 2)) * 7px);
  animation: np-pad-land 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--np-i) * 0.07s);
}

@keyframes np-pad-land {
  from { opacity: 0; transform: translateY(16px) scale(0.86); }
  to { opacity: 1; transform: none; }
}

.np-pad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 100%;
  max-width: 108px;
  min-height: 64px;
  padding: 0.45rem 0.35rem 0.5rem;
  text-decoration: none;
  text-align: center;
  border: 2px solid var(--np-ink);
  border-radius: var(--np-radius-pad);
  background: var(--np-cream);
  color: var(--np-ink);
  box-shadow: 3px 3px 0 var(--np-ink);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.np-pad:hover,
.np-pad:focus-visible {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 4px 7px 0 var(--np-ink);
  outline: none;
  z-index: 2;
}

.np-pad:focus-visible {
  outline: 3px solid var(--np-sky);
  outline-offset: 3px;
}

.np-pad-nectar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
  pointer-events: none;
}

.np-pad--leaf .np-pad-nectar { background: var(--np-leaf); }
.np-pad--hot .np-pad-nectar { background: var(--np-hot); }
.np-pad--pollen .np-pad-nectar { background: var(--np-pollen); }
.np-pad--sky .np-pad-nectar { background: var(--np-sky); }

.np-pad:hover .np-pad-nectar,
.np-pad:focus-visible .np-pad-nectar {
  height: 38%;
}

.np-pad.is-active .np-pad-nectar {
  height: 100%;
}

.np-pad.is-active.np-pad--leaf { color: var(--np-leaf-on); background: var(--np-leaf-deep); }
.np-pad.is-active.np-pad--hot { color: var(--np-hot-on); background: var(--np-hot-deep); }
.np-pad.is-active.np-pad--pollen { color: var(--np-pollen-on); background: var(--np-pollen); }
.np-pad.is-active.np-pad--sky { color: var(--np-sky-on); background: var(--np-sky-deep); }

.np-pad.is-active {
  box-shadow: 4px 4px 0 var(--np-ink), 0 0 0 3px rgba(255, 196, 0, 0.65);
  animation: np-pad-pulse 1.8s ease-in-out infinite;
}

@keyframes np-pad-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

.np-pad-spark {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--np-pollen);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.25s ease;
  z-index: 2;
}

.np-pad:hover .np-pad-spark,
.np-pad:focus-visible .np-pad-spark,
.np-pad.is-active .np-pad-spark {
  opacity: 1;
  transform: scale(1);
}

.np-pad-num,
.np-pad-label {
  position: relative;
  z-index: 1;
}

.np-pad-num {
  font-family: var(--np-font-display);
  font-size: var(--np-type-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.75;
}

.np-pad.is-active .np-pad-num { opacity: 1; }

.np-pad-label {
  font-family: var(--np-font-display);
  font-size: clamp(0.68rem, 1.15vw, 0.82rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 9.5ch;
}

/* High-contrast hover text on rising nectar */
.np-pad--leaf:hover,
.np-pad--leaf:focus-visible { color: var(--np-leaf-on); }
.np-pad--hot:hover,
.np-pad--hot:focus-visible { color: var(--np-hot-on); }
.np-pad--pollen:hover,
.np-pad--pollen:focus-visible { color: var(--np-pollen-on); }
.np-pad--sky:hover,
.np-pad--sky:focus-visible { color: var(--np-sky-on); }

.np-pad--leaf:hover .np-pad-nectar,
.np-pad--leaf:focus-visible .np-pad-nectar { background: var(--np-leaf-deep); height: 100%; }
.np-pad--hot:hover .np-pad-nectar,
.np-pad--hot:focus-visible .np-pad-nectar { background: var(--np-hot-deep); height: 100%; }
.np-pad--pollen:hover .np-pad-nectar,
.np-pad--pollen:focus-visible .np-pad-nectar { background: var(--np-pollen-deep); height: 100%; color: var(--np-pollen-on); }
.np-pad--sky:hover .np-pad-nectar,
.np-pad--sky:focus-visible .np-pad-nectar { background: var(--np-sky-deep); height: 100%; }

/* —— Pollen tools —— */
.np-pollen {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: stretch;
}

.np-pipette {
  display: grid;
  grid-template-columns: 1fr auto;
  border: 2px solid var(--np-ink);
  border-radius: var(--np-radius-pill);
  overflow: hidden;
  background: #fff;
  box-shadow: 2px 2px 0 var(--np-sky);
}

.np-pipette input {
  border: 0;
  padding: 0.4rem 0.75rem;
  font: 600 var(--np-type-sm) / 1.2 var(--np-font-ui);
  color: var(--np-ink);
  background: #fff;
  min-width: 0;
}

.np-pipette input::placeholder { color: var(--np-mute); opacity: 1; }

.np-pipette input:focus {
  outline: none;
  background: #F0FBFF;
}

.np-pipette:focus-within {
  box-shadow: 2px 2px 0 var(--np-hot), 0 0 0 3px rgba(0, 150, 224, 0.35);
}

.np-pipette button {
  border: 0;
  border-left: 2px solid var(--np-ink);
  padding: 0.4rem 0.65rem;
  font: 800 var(--np-type-xs) / 1 var(--np-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-pollen-on);
  background: var(--np-pollen);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.np-pipette button:hover,
.np-pipette button:focus-visible {
  background: var(--np-hot);
  color: var(--np-hot-on);
  outline: none;
}

.np-sachets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.np-sachet {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  font: 700 var(--np-type-xs) / 1.1 var(--np-font-ui);
  letter-spacing: 0.02em;
  padding: 0.38rem 0.55rem;
  border: 2px solid var(--np-ink);
  border-radius: var(--np-radius-sm);
  color: var(--np-ink);
  background: #fff;
  box-shadow: 2px 2px 0 var(--np-ink);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.np-sachet--cart {
  background: var(--np-hot);
  color: var(--np-hot-on);
  box-shadow: 2px 2px 0 var(--np-ink);
}

.np-sachet--track {
  background: var(--np-sky);
  color: var(--np-sky-on);
}

.np-sachet:hover,
.np-sachet:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.np-sachet:focus-visible {
  outline: 3px solid var(--np-pollen);
  outline-offset: 2px;
}

.np-sachet--cart:hover,
.np-sachet--cart:focus-visible {
  background: var(--np-hot-deep);
  color: var(--np-hot-on);
}

.np-sachet--track:hover,
.np-sachet--track:focus-visible {
  background: var(--np-sky-deep);
  color: var(--np-sky-on);
}

.np-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.25rem;
  border-radius: var(--np-radius-pill);
  background: var(--np-pollen);
  color: var(--np-pollen-on);
  font: 800 var(--np-type-xs) / 1 var(--np-font-display);
  animation: np-count-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes np-count-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.np-bloom {
  display: none;
  align-items: center;
  gap: 0.35rem;
  border: 2px solid var(--np-ink);
  border-radius: var(--np-radius-pill);
  padding: 0.4rem 0.7rem;
  font: 800 var(--np-type-sm) / 1 var(--np-font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-ink);
  background: var(--np-pollen);
  box-shadow: 3px 3px 0 var(--np-hot);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.np-bloom:hover,
.np-bloom:focus-visible {
  transform: translateY(-2px);
  background: #FFE066;
  box-shadow: 4px 5px 0 var(--np-hot);
  outline: none;
}

.np-bloom:focus-visible {
  outline: 3px solid var(--np-sky);
  outline-offset: 2px;
}

.np-bloom-petals {
  display: inline-grid;
  grid-template-columns: repeat(3, 6px);
  gap: 2px;
}

.np-bloom-petals i {
  width: 6px;
  height: 10px;
  border-radius: 60% 60% 40% 40%;
  background: var(--np-hot);
}

.np-bloom-petals i:nth-child(2) { background: var(--np-leaf); }
.np-bloom-petals i:nth-child(3) { background: var(--np-sky); }

.np-flight[data-np-state="open"] .np-bloom {
  background: var(--np-hot);
  color: var(--np-hot-on);
  box-shadow: 3px 3px 0 var(--np-ink);
}

.np-flight[data-np-state="open"] .np-bloom-petals i {
  animation: np-petal-spin 0.5s ease infinite alternate;
}

@keyframes np-petal-spin {
  from { transform: rotate(-12deg) scaleY(0.9); }
  to { transform: rotate(12deg) scaleY(1.1); }
}

/* —— Mobile cascade —— */
.np-cascade {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 45;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255, 196, 0, 0.35), transparent 60%),
    linear-gradient(180deg, #FFF8E8, var(--np-cream));
  border-bottom: 3px solid var(--np-ink);
  max-height: min(78vh, 640px);
  overflow: auto;
  box-shadow: 0 18px 40px rgba(20, 36, 26, 0.22);
}

.np-cascade[hidden],
.np-scrim[hidden] { display: none !important; }

.np-cascade-inner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1rem 1rem 1.25rem;
}

.np-cascade-kicker {
  margin: 0 0 0.35rem;
  font: 700 var(--np-type-xs) / 1.2 var(--np-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-mute);
}

.np-cascade-pad {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  text-decoration: none;
  padding: 0.85rem 1rem;
  border: 2px solid var(--np-ink);
  border-radius: var(--np-radius-md);
  font-family: var(--np-font-display);
  font-weight: 700;
  font-size: var(--np-type-md);
  color: var(--np-ink);
  background: #fff;
  box-shadow: 3px 3px 0 var(--np-ink);
  animation: np-cascade-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--np-i, 0) * 0.05s);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

@keyframes np-cascade-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96) rotate(-1deg); }
  to { opacity: 1; transform: none; }
}

.np-cascade-pad em {
  font-style: normal;
  font-size: var(--np-type-sm);
  opacity: 0.7;
}

.np-cascade-pad.np-pad--leaf { border-left: 6px solid var(--np-leaf); }
.np-cascade-pad.np-pad--hot { border-left: 6px solid var(--np-hot); }
.np-cascade-pad.np-pad--pollen { border-left: 6px solid var(--np-pollen); }
.np-cascade-pad.np-pad--sky { border-left: 6px solid var(--np-sky); }

.np-cascade-pad.is-active.np-pad--leaf {
  background: var(--np-leaf);
  color: var(--np-leaf-on);
}
.np-cascade-pad.is-active.np-pad--hot {
  background: var(--np-hot);
  color: var(--np-hot-on);
}
.np-cascade-pad.is-active.np-pad--pollen {
  background: var(--np-pollen);
  color: var(--np-pollen-on);
}
.np-cascade-pad.is-active.np-pad--sky {
  background: var(--np-sky);
  color: var(--np-sky-on);
}

.np-cascade-pad:hover,
.np-cascade-pad:focus-visible {
  transform: translateX(6px);
  outline: none;
}

.np-cascade-pad:focus-visible {
  outline: 3px solid var(--np-sky);
  outline-offset: 2px;
}

.np-cascade-find {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: 0.35rem;
  border: 2px solid var(--np-ink);
  border-radius: var(--np-radius-md);
  overflow: hidden;
  background: #fff;
}

.np-cascade-find input {
  border: 0;
  padding: 0.75rem 0.85rem;
  font: 600 var(--np-type-md) / 1.2 var(--np-font-ui);
  color: var(--np-ink);
}

.np-cascade-find button {
  border: 0;
  border-left: 2px solid var(--np-ink);
  padding: 0.75rem 1rem;
  font: 800 var(--np-type-sm) / 1 var(--np-font-display);
  color: var(--np-pollen-on);
  background: var(--np-pollen);
  cursor: pointer;
}

.np-cascade-find button:hover,
.np-cascade-find button:focus-visible {
  background: var(--np-hot);
  color: var(--np-hot-on);
  outline: none;
}

.np-scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(14, 28, 20, 0.48);
  backdrop-filter: blur(2px);
}

body.np-bloom-open {
  overflow: hidden;
}

/* —— Responsive —— */
@media (max-width: 980px) {
  .np-sky {
    grid-template-columns: minmax(120px, 1fr) auto;
    grid-template-areas:
      "hive pollen"
      "path path";
  }
  .np-hive { grid-area: hive; }
  .np-path { grid-area: path; min-height: 88px; }
  .np-pollen { grid-area: pollen; }
  .np-pipette { display: none; }
  .np-bloom { display: inline-flex; }
  .np-sachet--track { display: none; }
  :root { --a107-nav-h: 168px; }
}

@media (max-width: 720px) {
  .np-sky {
    grid-template-columns: 1fr auto;
    grid-template-areas: "hive pollen";
    padding: 0.65rem 0.85rem;
    min-height: 72px;
  }
  .np-path { display: none; }
  .np-sachet--cart span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .np-sachet--cart { position: relative; }
  .np-hive-copy strong { font-size: 1.1rem; }
  :root { --a107-nav-h: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-pad-slot,
  .np-cascade-pad,
  .np-hive-comb i,
  .np-pad.is-active,
  .np-count,
  .np-flight[data-np-state="open"] .np-hive-wing--l,
  .np-flight[data-np-state="open"] .np-hive-wing--r,
  .np-flight[data-np-state="open"] .np-bloom-petals i {
    animation: none !important;
  }
  .np-pad,
  .np-hive,
  .np-sachet,
  .np-arc-live {
    transition: none !important;
  }
}