/* Drawings and animation for the two "how" stories: the honey line on
   "How our honey is made" and the dripping pictures on "Ways to use honey".

   Every drawing's default state is its finished state, so the pages read
   correctly without JavaScript and with reduced motion. story-art.js adds
   .is-live / .js-play to start them from empty and animate them in. */

:root {
  --steel: #ddd4c2;
  --steel-dark: #b9ad98;
  --glass: #fffaf0;
  --water: #d4e8ec;
  --comb: #f3d98b;
  --leaf: #5f8f36;
  --lime: #b8d45a;
  --plate: #fbe6ad;
}

/* Shared drawing vocabulary: brown outlines like the packaging, gold honey */
.art { display: block; width: 100%; height: auto; overflow: visible; }
.art .o { stroke: var(--brown); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.art .o2 { stroke: var(--brown); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.art .ink, .art .ink2 { fill: none; stroke: var(--brown); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art .ink2 { stroke-width: 2; }
.art .hot { stroke: var(--red); }
.art .cold { stroke: #7fb3c2; }
.art .gilt { stroke: var(--gold-deep); }
.art .shine { fill: none; stroke: #fff; stroke-opacity: .8; stroke-width: 5; stroke-linecap: round; }
.art .steel { fill: var(--steel); }
.art .steel-d { fill: var(--steel-dark); }
.art .glass { fill: #fff; fill-opacity: .55; }
.art .water { fill: var(--water); }
.art .hn { fill: var(--gold); }
.art .hn-d { fill: var(--gold-deep); }
.art .hn-l { fill: var(--gold-light); }
.art .red { fill: var(--red); }
.art .brown { fill: var(--brown); }
.art .brown-m { fill: var(--brown-mid); }
.art .wax { fill: var(--wax); }
.art .white { fill: #fff; }
.art .comb { fill: var(--comb); }
.art .leaf { fill: var(--leaf); }
.art .lime { fill: var(--lime); }
.art .none { fill: none; }

/* ------------------------------------------------------------------ */
/* How our honey is made: the honey line                              */
/* ------------------------------------------------------------------ */

.honey-line {
  --mw: 320px;                       /* machine drawing width */
  --mh: calc(var(--mw) * 200 / 240); /* its height (viewBox 240 x 200) */
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.line-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--mw) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 56px);
  align-items: start;
  padding-bottom: clamp(20px, 4vw, 44px);
  counter-increment: step;
}
.line-step:last-child { padding-bottom: 0; }
.machine { position: relative; z-index: 1; }

/* The pipe runs from the middle of one machine to the middle of the next.
   --fill (0 to 1) is how far the honey has flowed down it. */
.pipe {
  position: absolute;
  z-index: 0;
  top: calc(var(--mh) / 2);
  bottom: calc(var(--mh) / -2);
  left: calc(var(--mw) / 2);
  width: calc(var(--mw) / 20);
  transform: translateX(-50%);
  overflow: hidden;
  border: 2px solid var(--brown);
  border-radius: 999px;
  background: #efe6d2;
}
.pipe-honey {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--fill, 1) * 100%);
  border-radius: 0 0 999px 999px;
  background: var(--gold);
}
/* Into the filling head at the top of the bottling machine */
.pipe-to-filler { bottom: calc(var(--mh) * -.16); }

.line-text { max-width: 44ch; padding-top: calc(var(--mh) * .2); }
.line-text::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  color: var(--red);
  font-size: 1.75rem;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  transition: color .4s ease;
}
.line-text h3 { margin-top: 10px; font-size: clamp(1.375rem, 2.4vw, 1.875rem); font-stretch: 110%; line-height: 1.1; }
.line-text p { margin-top: 8px; color: var(--brown-soft); font-size: 1.125rem; }
.honey-line.is-live .line-step:not(.is-on) .line-text::before { color: var(--brown-soft); }

/* Machine parts: finished state first */
.m-lvl, .m-fill { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.3, .7, .3, 1) .15s; }
.m-fill { transition-duration: 1.6s; transition-delay: .35s; }
.m-stream { transform-box: fill-box; transform-origin: 50% 0; transition: transform .45s ease; }
.m-tap { transform-box: view-box; transform-origin: 130px 158px; transform: rotate(-70deg); transition: transform .5s ease; }
.m-bee, .m-wave, .m-drip, .m-steam, .m-particle, .m-air, .m-spark { transition: opacity .5s ease .4s; }
.m-crystal { transform-box: fill-box; transform-origin: center; transform: scale(.55); transition: transform 1.2s ease 1s; }
.m-wax { transition: transform .7s cubic-bezier(.3, 1.4, .5, 1) .25s, opacity .3s ease .25s; }
.m-thick { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.8); fill: var(--gold-deep); transition: transform 1.1s ease 1.2s, fill 1.1s ease 1.2s; }
.m-needle { transform-box: view-box; transform-origin: 190px 70px; transform: rotate(40deg); transition: transform 1.3s cubic-bezier(.3, 1.3, .5, 1) .5s; }
.m-fan { transform-box: view-box; transform-origin: 34px 96px; }
.m-lid { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1) 1.1s, opacity .2s ease 1.1s; }
.m-label { transform-box: fill-box; transform-origin: 0 50%; transition: transform .6s cubic-bezier(.4, 0, .2, 1) .15s; }
.m-mark { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .6s; }
.m-spark { transform-box: fill-box; transform-origin: center; transition: transform .4s ease 1.5s, opacity .4s ease 1.5s; }

/* Honey hasn't reached this machine yet (only while the script runs) */
.is-live .line-step:not(.is-on) .m-lvl,
.is-live .line-step:not(.is-on) .m-fill { transform: scaleY(0); transition-delay: 0s; transition-duration: .5s; }
.is-live .line-step:not(.is-on) .m-stream { transform: scaleY(0); }
.is-live .line-step:not(.is-on) .m-tap { transform: none; }
.is-live .line-step:not(.is-on) :is(.m-bee, .m-wave, .m-drip, .m-steam, .m-particle, .m-air, .m-spark) { opacity: 0; transition-delay: 0s; }
.is-live .line-step:not(.is-on) .m-crystal { transform: none; transition: none; }
.is-live .line-step.is-on .m-crystal { transform: scale(0); }
.is-live .line-step:not(.is-on) .m-wax { opacity: 0; transform: translateY(-22px); transition-delay: 0s; }
.is-live .line-step:not(.is-on) .m-thick { transform: none; fill: var(--gold-light); transition: none; }
.is-live .line-step:not(.is-on) .m-needle { transform: rotate(-80deg); transition-delay: 0s; }
.is-live .line-step:not(.is-on) .m-lid { opacity: 0; transform: translateY(-26px); transition-delay: 0s; }
.is-live .line-step:not(.is-on) .m-label { transform: scaleX(0); transition-delay: 0s; }
.is-live .line-step:not(.is-on) .m-mark { transform: scale(0); transition-delay: 0s; }
.is-live .line-step:not(.is-on) .m-spark { transform: scale(0); transition-delay: 0s; }
/* The filler only pours while it's the machine the honey is at */
.is-live .line-step.is-on:not(.is-current) .m-pour { transform: scaleY(0); }

/* Small moving details on the machine the honey has just reached */
@media (prefers-reduced-motion: no-preference) {
  .is-current .m-bee { animation: bee 2.4s ease-in-out infinite; }
  .is-current .m-wave { animation: heat 1.6s ease-in-out infinite; }
  .is-current .m-wave + .m-wave { animation-delay: -.8s; }
  .is-current .m-drip { animation: drip 1.1s ease-in infinite; }
  .is-current .m-drip:nth-of-type(2) { animation-delay: -.55s; }
  .is-current .m-steam { animation: steam 2s ease-out infinite; }
  .is-current .m-steam:nth-of-type(2) { animation-delay: -.7s; }
  .is-current .m-steam:nth-of-type(3) { animation-delay: -1.4s; }
  .is-current .m-needle { animation: hold 1.8s ease-in-out 1.8s infinite; }
  .is-current .m-fan { animation: spin .9s linear infinite; }
  .is-current .m-air { stroke-dasharray: 6 6; animation: air .6s linear infinite; }
  .is-current .m-spark { animation: twinkle 1.8s ease-in-out 2s infinite; }
}
@keyframes bee { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, -5px); } 50% { transform: translate(-10px, 2px); } 75% { transform: translate(-4px, 5px); } }
@keyframes heat { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes drip { 0% { opacity: 0; transform: translateY(-6px); } 20% { opacity: 1; } 85% { opacity: 1; transform: translateY(9px); } 100% { opacity: 0; transform: translateY(10px); } }
@keyframes steam { 0% { opacity: 0; transform: translate(0, 6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -26px); } }
@keyframes hold { 0%, 100% { transform: rotate(40deg); } 50% { transform: rotate(34deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes air { to { stroke-dashoffset: -12; } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.6) rotate(45deg); } }

/* Raw honey: from the comb, over the machines, into the jar */
.raw-art { margin-top: 32px; padding: clamp(16px, 3vw, 32px); border-radius: var(--radius); background: var(--plate); }
.raw-art .art { max-width: 760px; margin-inline: auto; }
.raw-skip { opacity: .4; }
.raw-arc { stroke-dasharray: 1; stroke-dashoffset: 0; }
.raw-fill { transform-box: fill-box; transform-origin: 50% 100%; }
.story-body .raw-art + p.story-caption { margin-top: 10px; }

/* ------------------------------------------------------------------ */
/* Ways to use honey: a dipper drips honey into each idea             */
/* ------------------------------------------------------------------ */

.ideas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px clamp(20px, 3vw, 36px);
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.idea-art {
  margin-bottom: 18px;
  padding: 8% 6% 4%;
  border-radius: 50%;
  background: var(--plate);
  aspect-ratio: 1;
}
.js-play .idea { cursor: pointer; }
.idea :is(h3, h4) { margin: 0; font-size: 1.375rem; font-weight: 750; font-stretch: 110%; line-height: 1.15; }
.idea p { margin-top: 6px; color: var(--brown-soft); }
.story-body section > .ideas + p { margin-top: 32px; }

/* Finished state: honey in, no drop in the air */
.drop, .ripple { opacity: 0; }
.dip, .drop, .ripple, .got, .bob, .jar-lid { transform-box: fill-box; }
.dip { transform-origin: 50% 0; }
.drop { transform-origin: 50% 0; }
.ripple { transform-origin: center; fill: none; stroke: var(--gold-deep); stroke-width: 2.5; }
.got { transform-origin: 50% 100%; }
.got-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* Waiting to come on screen */
  .js-play [data-play]:not(.is-playing) .got { opacity: 0; }
  .js-play [data-play]:not(.is-playing) .got-draw { stroke-dashoffset: 1; }
  .js-play [data-play]:not(.is-playing) .raw-arc { stroke-dashoffset: 1; }
  .js-play [data-play]:not(.is-playing) .raw-fill { transform: scaleY(0); }

  .is-playing .dip { animation: dip 2.6s ease var(--delay, 0s) both; }
  .is-playing .drop { animation: fall 2.6s var(--delay, 0s) both; }
  .is-playing .ripple { animation: ripple 2.6s ease-out var(--delay, 0s) both; }
  .is-playing .got { animation: got 2.6s ease var(--delay, 0s) both; }
  .is-playing .got-draw { animation: draw 2.6s ease var(--delay, 0s) both; }

  .is-playing .jar-lid { animation: lid 1.6s ease var(--delay, 0s) both; }
  .is-playing .bob { animation: bob 1.6s ease var(--delay, 0s) both; }
  .is-playing .bob:nth-child(2n) { animation-delay: calc(var(--delay, 0s) + .12s); }
  .is-playing .bob:nth-child(3n) { animation-delay: calc(var(--delay, 0s) + .24s); }

  .is-playing .raw-arc { animation: draw-arc 3.2s ease var(--delay, 0s) both; }
  .is-playing .raw-fill { animation: raw-fill 3.2s ease var(--delay, 0s) both; }
}
@keyframes dip { 0% { transform: translateY(-14px) rotate(-12deg); opacity: 0; } 18% { opacity: 1; } 30%, 100% { transform: none; opacity: 1; } }
@keyframes fall {
  0%, 22% { opacity: 0; transform: scale(.2); }
  30% { opacity: 1; transform: scale(1); }
  40% { opacity: 1; transform: scale(.85, 1.3); animation-timing-function: cubic-bezier(.5, 0, 1, 1); }
  56% { opacity: 1; transform: translateY(var(--fall, 40px)) scale(.9, 1.15); }
  58%, 100% { opacity: 0; transform: translateY(var(--fall, 40px)) scale(.9, 1.15); }
}
@keyframes ripple { 0%, 55% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; } 85%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes got { 0%, 56% { opacity: 0; transform: scale(.6); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes draw { 0%, 56% { stroke-dashoffset: 1; } 92%, 100% { stroke-dashoffset: 0; } }
@keyframes lid { 0% { transform: none; } 30% { transform: translate(-4px, -14px) rotate(-12deg); } 70% { transform: translate(-2px, -6px) rotate(-6deg); } 100% { transform: none; } }
@keyframes bob { 0% { transform: translateY(10px); } 50% { transform: translateY(-5px); } 100% { transform: none; } }
@keyframes draw-arc { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes raw-fill { 0%, 38% { transform: scaleY(0); } 80%, 100% { transform: none; } }

/* Tabs for the longer idea lists (the script adds them; without it every
   list shows, one after another) */
.idea-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.idea-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 20px 8px 16px;
  border: 2px solid var(--brown);
  border-radius: 999px;
  background: transparent;
  color: var(--brown);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 108%;
  cursor: pointer;
}
.idea-tabs button:hover { background: var(--plate); }
.idea-tabs button[aria-selected="true"] { background: var(--brown); color: var(--wax); }
.idea-panel + .idea-panel { margin-top: clamp(40px, 6vw, 64px); }
.idea-panel-title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-stretch: 112%; }
.idea-panel > p { max-width: 62ch; margin-top: 12px; font-size: 1.125rem; }
.idea-panel .ideas + p { margin-top: 28px; }
.tabs-ready .idea-panel + .idea-panel { margin-top: 0; }
.tabs-ready .idea-panel { padding-top: 8px; }
.tabs-ready .idea-panel:focus-visible { outline-offset: 8px; border-radius: 12px; }

/* Tablet */
@media (max-width: 900px) {
  .honey-line { --mw: 240px; }
  .ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 720px) {
  .honey-line { --mw: 124px; margin-top: 28px; }
  .line-step { gap: 16px; }
  .line-text { padding-top: 0; }
  .line-text::before { font-size: 1.375rem; }
  .line-text h3 { margin-top: 6px; font-size: 1.25rem; }
  .line-text p { font-size: 1rem; }
  .ideas { gap: 28px 16px; }
  .idea :is(h3, h4) { font-size: 1.1875rem; }
  .idea p { font-size: 1rem; }
  .idea-art { margin-bottom: 12px; }
}