/* ODOR-EX — technology page: the "how it works" three-panel diagram.
   Loaded only on the technology route. Tokens come from main.css :root;
   every var() carries a literal fallback so the drawing survives on its own. */

.tech-diagram { display: grid; gap: var(--sp-3, 1.5rem); margin: 0 0 var(--sp-4, 2.5rem); padding: 0; }
.tech-panel {
  display: block; width: 100%; max-width: 16rem; height: auto; margin-inline: auto;
  background: var(--c-surface, #fff); border: 1px solid var(--c-line, #E3E0D8);
  border-radius: var(--radius, 14px); overflow: hidden;
}
.tech-diagram__caption {
  grid-column: 1 / -1; text-align: center;
  font-family: var(--f-head, system-ui, sans-serif); font-size: var(--fs-0, 1rem);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--c-muted, #5C6B64);
}
@media (min-width: 37.5em) {
  .tech-diagram { grid-template-columns: repeat(3, 1fr); }
  .tech-panel { max-width: none; }
}

/* --- Ink -------------------------------------------------------------- */
.p-hex { fill: var(--c-primary, #1F7A63); }
.p-odor { fill: var(--c-grapefruit, #F08A5D); }
.p-band { stroke: var(--c-muted, #5C6B64); fill: none; opacity: .5; }
.p-floor { stroke: var(--c-line, #E3E0D8); }
.p-figure { fill: var(--c-nordic, #7FB7E0); opacity: .26; }
.p-badge { fill: var(--c-primary, #1F7A63); }
.p-num { fill: #fff; font: 700 20px var(--f-head, system-ui, sans-serif); text-anchor: middle; dominant-baseline: central; }
.p-bottle-body { fill: var(--c-primary-soft, #E3F1EC); stroke: var(--c-primary, #1F7A63); }
.p-bottle-cap, .p-bottle-tick { fill: var(--c-primary, #1F7A63); }
.p-bottle-label { fill: var(--c-surface, #fff); }
.p-arrow { stroke: var(--c-muted, #5C6B64); fill: none; opacity: .5; }
.p-settle { fill: var(--c-muted, #5C6B64); opacity: .07; }
.p-spark { opacity: .3; }

/* --- Motion ----------------------------------------------------------- */
@keyframes ox-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ox-rise  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7px, -10px); } }
@keyframes ox-settle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes ox-sink  { from { transform: translateY(-104px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }

.p-float--a { animation: ox-drift 7s ease-in-out infinite; }
.p-float--b { animation: ox-drift 8.5s ease-in-out -2.5s infinite; }
.p-mist--a  { animation: ox-rise 6.5s ease-in-out infinite; }
.p-mist--b  { animation: ox-rise 7.5s ease-in-out -2s infinite; }
.p-cluster--a { animation: ox-settle 6s ease-in-out infinite; }
.p-cluster--b { animation: ox-settle 7s ease-in-out -1.5s infinite; }
.p-cluster--c { animation: ox-settle 8s ease-in-out -3s infinite; }
.p-spark--a { animation: ox-drift 8s ease-in-out infinite; }
.p-spark--b { animation: ox-drift 6.5s ease-in-out -3s infinite; }
.p-sink--a { animation: ox-sink 2.4s ease-in .2s 1 both; }
.p-sink--b { animation: ox-sink 2.4s ease-in .7s 1 both; }
.p-sink--c { animation: ox-sink 2.4s ease-in 1.1s 1 both; }

@media (prefers-reduced-motion: reduce) {
  .p-float--a, .p-float--b, .p-mist--a, .p-mist--b,
  .p-cluster--a, .p-cluster--b, .p-cluster--c,
  .p-spark--a, .p-spark--b,
  .p-sink--a, .p-sink--b, .p-sink--c { animation: none !important; }
}