/* ============================================================
   Method timeline — Bee storyline animation
   ============================================================
   Visible at >=1024px (desktop). Below that, the timeline stacks
   and we keep things simple (just a soft pulse on the active step).
   ============================================================ */

.method__steps {
  position: relative;
  /* Make the strip a positioned bee playground */
}

/* ---------- Honey trail (replaces the original dashed line) ---------- */
@media (min-width: 1025px) {
  .method__steps::before {
    /* Hide the original dashed line — we draw our own SVG path */
    display: none;
  }
}

.method__bee-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 36px;        /* aligns with center of step circles (72px / 2) */
  height: 2px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.method__bee-track svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The dashed "ghost" track — always visible, soft */
.method__bee-track .track-ghost {
  fill: none;
  stroke: rgba(0, 0, 0, .15);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
}

/* The honey trail — fills in behind the bee */
.method__bee-track .track-honey {
  fill: none;
  stroke: url(#methodHoneyGrad);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0 9999;
  filter: drop-shadow(0 1px 4px rgba(253, 184, 19, .55));
  transition: stroke-dasharray 80ms linear;
}

/* ---------- Bee ---------- */
.method__bee {
  position: absolute;
  top: 36px;
  left: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;     /* center on the path */
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

.method__bee-inner {
  width: 100%;
  height: 100%;
  position: relative;
  /* Gentle bobbing */
  animation: methodBeeBob 0.9s ease-in-out infinite;
}

@keyframes methodBeeBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Wings: two stacked, fluttering ovals */
.method__bee .wing {
  position: absolute;
  width: 18px;
  height: 14px;
  top: 6px;
  background: radial-gradient(ellipse at 35% 35%,
                rgba(255, 255, 255, .95),
                rgba(220, 235, 255, .55) 55%,
                rgba(180, 200, 230, .15) 100%);
  border: 1px solid rgba(120, 150, 200, .35);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
  animation: methodBeeWing 80ms ease-in-out infinite alternate;
  filter: drop-shadow(0 1px 2px rgba(120, 150, 200, .35));
}
.method__bee .wing--left  { left: 8px;  transform: rotate(-18deg); }
.method__bee .wing--right { right: 8px; transform: rotate(18deg); animation-delay: 40ms; }

@keyframes methodBeeWing {
  0%   { transform: rotate(var(--r, -18deg)) scaleY(1); }
  100% { transform: rotate(var(--r, -18deg)) scaleY(.55); }
}
.method__bee .wing--left  { --r: -22deg; }
.method__bee .wing--right { --r: 22deg; }

/* Body */
.method__bee .body {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 32px;
  height: 28px;
  margin-left: -16px;
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background:
    /* dark stripes */
    linear-gradient(90deg,
      transparent 0 22%,
      #1d1918 22% 36%,
      transparent 36% 54%,
      #1d1918 54% 68%,
      transparent 68% 82%,
      #1d1918 82% 95%,
      transparent 95% 100%),
    linear-gradient(180deg, #ffd24a 0%, #fdb813 60%, #f29c1f 100%);
  box-shadow:
    inset 0 -3px 6px rgba(120, 70, 0, .35),
    inset 0 2px 4px rgba(255, 255, 255, .35),
    0 3px 8px rgba(0, 0, 0, .25);
}

/* Head */
.method__bee .head {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2a2422, #0d0a09);
  box-shadow:
    inset -1px -2px 3px rgba(255, 255, 255, .2),
    0 2px 4px rgba(0, 0, 0, .3);
}
.method__bee .head::before,
.method__bee .head::after {
  /* antennae */
  content: "";
  position: absolute;
  width: 1.5px;
  height: 6px;
  background: #1d1918;
  top: -5px;
  border-radius: 1px;
}
.method__bee .head::before { left: 4px;  transform: rotate(-25deg); }
.method__bee .head::after  { right: 4px; transform: rotate(25deg); }

/* Eyes */
.method__bee .eye {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #fff;
  border-radius: 50%;
  top: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4);
}
.method__bee .eye--l { left: 3px; }
.method__bee .eye--r { right: 3px; }

/* Bee glow halo */
.method__bee::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 184, 19, .35), transparent 65%);
  filter: blur(4px);
  animation: methodBeeHalo 1.4s ease-in-out infinite;
  z-index: -1;
}
@keyframes methodBeeHalo {
  0%, 100% { opacity: .6;  transform: scale(.95); }
  50%      { opacity: 1;   transform: scale(1.1);  }
}

/* Bee facing — flipped horizontally during reverse pass */
.method__bee[data-dir="back"] .method__bee-inner { transform: scaleX(-1); }
.method__bee[data-dir="back"] .method__bee-inner { animation-name: methodBeeBobFlip; }
@keyframes methodBeeBobFlip {
  0%, 100% { transform: scaleX(-1) translateY(0); }
  50%      { transform: scaleX(-1) translateY(-3px); }
}

/* ---------- Step circle states driven by the bee ---------- */
.step {
  --bee-bloom: 0;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.step.is-active {
  --bee-bloom: 1;
}
.step.is-active .step__num {
  transform: scale(1.12);
  box-shadow:
    0 0 0 6px rgba(253, 184, 19, .15),
    0 12px 24px rgba(253, 184, 19, .35),
    inset 0 -3px 8px rgba(0, 0, 0, .12);
}
.step__num {
  transition:
    transform .5s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .5s ease;
}

/* "Visited" — bee has been here, leaves a soft golden glow */
.step.is-visited .step__num {
  box-shadow: 0 0 0 3px rgba(253, 184, 19, .2),
              0 6px 14px rgba(0, 0, 0, .12);
}

/* ============================================================
   Hexagonal beehive cells — convert step circles into hexagons
   ============================================================ */
.step__num {
  /* Override the round shape with a hexagon clip-path */
  border-radius: 0 !important;
  border: none !important;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* Slightly taller to feel like a real honeycomb cell */
  width: 78px;
  height: 86px;
  /* Inner shading to give cell depth */
  position: relative;
  overflow: visible;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .14));
}

/* Inner hex highlight — gives the cell a 3D, waxy look */
.step__num {
  background-image:
    radial-gradient(ellipse at 30% 25%,
      rgba(255, 255, 255, .55) 0%,
      rgba(255, 255, 255, 0) 50%),
    radial-gradient(ellipse at 70% 90%,
      rgba(0, 0, 0, .25) 0%,
      rgba(0, 0, 0, 0) 55%);
  background-blend-mode: screen, multiply;
}

/* Re-color each hex on top of the gradient — keep brand colors */
.step:nth-child(1) .step__num { background-color: #fdb813; }
.step:nth-child(2) .step__num { background-color: #f26722; }
.step:nth-child(3) .step__num { background-color: #e53e3e; }
.step:nth-child(4) .step__num { background-color: #c1268c; }
.step:nth-child(5) .step__num { background-color: #7e3fbf; }

/* The dashed ring around each hex — match the new shape */
.step__num::after {
  inset: -8px !important;
  border: none !important;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(0, 0, 0, .25) 0deg 4deg,
      transparent 4deg 10deg
    );
  -webkit-mask:
    polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          mask:
    polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-mask-composite: source-out;
          mask-composite: exclude;
  /* Fallback: a simple hex stroke using SVG-ish double clip */
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18));
  clip-path:
    polygon(
      50% -3%, 103% 24%, 103% 76%, 50% 103%, -3% 76%, -3% 24%,
      50% -3%,
      48% 4%, -1% 28%, -1% 72%, 50% 96%, 101% 72%, 101% 28%, 50% 4%, 48% 4%
    );
  opacity: .35;
  animation: methodHexRingSpin 14s linear infinite;
}

@keyframes methodHexRingSpin {
  to { transform: rotate(360deg); }
}

/* Replace the old round-only .step__num::before hexagon with a tighter halo */
.step__num::before {
  inset: -6px;
  background: rgba(253, 184, 19, .18);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
}

/* Number text — keep readable on the hex face */
.step__num {
  /* Ensure the number sits in the visual center of the hex (which is taller) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Active state on hexagons — scale + brighter halo, no round box-shadow */
.step.is-active .step__num {
  transform: scale(1.14) translateY(-2px);
  filter:
    drop-shadow(0 10px 22px rgba(253, 184, 19, .55))
    drop-shadow(0 0 14px rgba(253, 184, 19, .45));
  box-shadow: none;
}
.step.is-visited .step__num {
  filter: drop-shadow(0 6px 14px rgba(253, 184, 19, .35));
  box-shadow: none;
}

/* Tiny honeycomb cluster behind each hex — three small hexagons that
   fade in once the cell is visited, hinting at a hive growing */
.step {
  position: relative;
}
.step__hive {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 130px;
  height: 110px;
  margin-left: -65px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .6s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1);
}
.step.is-visited .step__hive,
.step.is-active  .step__hive {
  opacity: 1;
  transform: scale(1);
}
.step__hive span {
  position: absolute;
  width: 26px;
  height: 30px;
  background: rgba(253, 184, 19, .18);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 1px solid rgba(253, 184, 19, .35);
}
.step__hive span:nth-child(1) { top: 4px;  left: 8px; }
.step__hive span:nth-child(2) { top: 4px;  right: 8px; background: rgba(253, 184, 19, .12); }
.step__hive span:nth-child(3) { top: 60px; left: 50%; margin-left: -13px; background: rgba(253, 184, 19, .25); }

html[data-theme="dark"] .step__num {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
html[data-theme="dark"] .step__hive span {
  background: rgba(253, 184, 19, .12);
  border-color: rgba(253, 184, 19, .25);
}

/* Honey droplet that pops at each visited node */
.step__droplet {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 14px;
  height: 18px;
  margin-left: -7px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0) scale(.4);
}
.step.is-active .step__droplet {
  animation: methodHoneyDrop 1s ease-out forwards;
}
@keyframes methodHoneyDrop {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  30%  { opacity: 1; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(.6); }
}
.step__droplet svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Hexagon imprint behind step number — Ekonbee DNA */
.step__num {
  position: relative;
}
.step__num::before {
  content: "";
  position: absolute;
  inset: -14px;
  background:
    /* hex outline */
    conic-gradient(from 90deg, transparent 0);
  /* Use clip-path for a true hexagon ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  background: rgba(253, 184, 19, .15);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  opacity: 0;
  transform: scale(.85) rotate(0deg);
  transition: opacity .5s ease, transform .8s cubic-bezier(.34, 1.56, .64, 1);
  z-index: -1;
}
.step.is-visited .step__num::before {
  opacity: 1;
  transform: scale(1) rotate(15deg);
}
.step.is-active .step__num::before {
  opacity: 1;
  transform: scale(1.15) rotate(30deg);
  background: rgba(253, 184, 19, .28);
}

/* ---------- Mobile/tablet — bee flies the layout regardless ---------- */
.method__bee-track {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  height: 100% !important;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.method__bee-track svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.method__bee {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .method__bee,
  .method__bee-track {
    display: none !important;
  }
  .step__num,
  .step__droplet,
  .method__bee *,
  .step.is-active .step__num,
  .step.is-active .step__droplet {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Dark mode tweaks ---------- */
html[data-theme="dark"] .method__bee-track .track-ghost {
  stroke: rgba(255, 255, 255, .15);
}
html[data-theme="dark"] .step.is-visited .step__num {
  box-shadow: 0 0 0 3px rgba(253, 184, 19, .25),
              0 6px 14px rgba(0, 0, 0, .5);
}