/* SEKEM Vision Flower — shared component */

.flower-stage {
  position: relative;
  width: min(760px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.flower-stage::before {
  content: "";
  position: absolute; inset: -8%;
  background: radial-gradient(closest-side, rgba(0,80,48,0.08), transparent 70%);
  z-index: 0;
}
.flower-stage svg.vision-flower {
  position: relative; z-index: 1; width: 100%; height: 100%;
  overflow: visible; display: block;
}

.petal-segment {
  transition: opacity 320ms cubic-bezier(.16,1,.3,1),
              transform 360ms cubic-bezier(.16,1,.3,1),
              filter 240ms ease;
  transform-origin: 380px 380px;
  transform-box: view-box;
}
.petal-group {
  transform-origin: 380px 380px;
  transform-box: view-box;
  cursor: pointer;
}
.petal-group .petal-bg { transition: filter 220ms ease, opacity 220ms ease; }
.petal-label-text { font-family: 'Inter', sans-serif; font-size: 9px; fill: #1F2A2D; pointer-events: none; letter-spacing: 0.02em; }
.petal-number  { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 11px; fill: #fff; pointer-events: none; }
.arc-label-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  fill: #fff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Hover: dim siblings, lift active */
.flower-stage[data-active] .petal-group:not([data-active]) { opacity: 0.32; }
.petal-group[data-active] { transform: scale(1.045); filter: drop-shadow(0 6px 16px rgba(0,0,0,0.15)); }
.petal-group[data-active] .petal-bg { filter: brightness(1.06); }

/* Idle breathing */
@keyframes flower-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012); } }
.flower-stage:not([data-active]) .flower-root {
  animation: flower-breathe 7s ease-in-out infinite;
  transform-origin: 380px 380px; transform-box: view-box;
}
@media (prefers-reduced-motion: reduce) {
  .flower-root { animation: none !important; }
  .petal-segment { transition: none !important; }
}

/* Bloom in */
.petal-group { opacity: 0; transform: scale(.42); }
.petal-group.bloomed { opacity: 1; transform: scale(1); }

/* Tooltip card — anchored in the stage's empty top-right corner; never escapes the viewport */
.flower-tooltip {
  position: absolute;
  top: 16px;
  right: 16px;
  width: min(340px, calc(100% - 32px));
  max-width: calc(100vw - 32px);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
          backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(232, 226, 213, 0.85);
  border-radius: 18px;
  padding: 22px 24px 20px;
  box-shadow: 0 22px 56px -12px rgba(0,63,38, 0.18),
              0 6px 18px -6px rgba(0, 0, 0, 0.08);
  opacity: 0; transform: translateY(10px) scale(.98);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
  z-index: 5;
}
.flower-tooltip.show { opacity: 1; transform: translateY(0) scale(1); }
.flower-tooltip .ttl-eyebrow { font-family: 'Plus Jakarta Sans'; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.flower-tooltip .ttl-name    { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 24px; line-height: 1.2; margin-top: 8px; color: #1F2A2D; word-wrap: break-word; }
.flower-tooltip .ttl-phase   { font-family: 'Inter'; font-size: 13.5px; line-height: 1.5; color: #555; margin-top: 12px; }
.flower-tooltip .ttl-phase strong { color: #1F2A2D; font-weight: 700; }
.flower-tooltip .ttl-cta     { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 13px; color: #7A1414; margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; }

/* Below the flower on narrow screens — keeps it readable + always on-screen */
@media (max-width: 767px) {
  .flower-tooltip {
    position: relative;
    top: auto; right: auto; left: auto;
    width: 100%;
    max-width: 100%;
    margin: 16px auto 0;
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Phase legend */
.flower-legend { font-family: 'Inter'; }
.flower-legend .swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

/* Animate toggle */
.flower-anim-toggle { font-family: 'Inter'; font-size: 12px; }

/* Shared site nav */
.site-nav-link.active { color: #7A1414; border-bottom: 2px solid #7A1414; padding-bottom: 4px; }