/* ==========================================================================
   HUB — the Storm Laboratory (index.html)

   Everything is laid out in normal flow (machine → shelf → footer) so text
   can never collide. Decoration is anchored to the thing it belongs to.
   One size unit, --u, scales the whole lab to the screen: it is the
   smaller of width-based and height-based sizes, so phones, laptops and
   TVs all get a lab that fits.
   ========================================================================== */

body.hub-page {
  background: #0d0418;
  --u: min(1vw, 1.12vh);
}

/* ---------- Stage ---------- */
.hub {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 2) 16px calc(var(--u) * 1.5);
  cursor: crosshair;
  --px: 0; --py: 0;
}

/* ---------- The storm ---------- */
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sky__photo {
  position: absolute; inset: -6%;
  background: url('../assets/storm/storm-sky.jpg') center 30% / cover no-repeat;
  animation: storm-churn 70s ease-in-out infinite alternate;
  transform: translate(calc(var(--px) * -10px), calc(var(--py) * -6px));
}
@keyframes storm-churn {
  from { scale: 1.02; translate: -1% 0; }
  to   { scale: 1.16; translate: 2% 1.5%; }
}
.sky__bank {
  position: absolute; left: 0; right: 0; background-repeat: repeat-x;
  animation: bank-drift linear infinite;
}
.sky__bank--back  { top: 0; height: 32%; scale: 1 -1; background-image: url('../assets/storm/bank-2.png'); background-size: auto 100%; opacity: .55; animation-duration: 160s; }
.sky__bank--front { bottom: 0; height: 38%; background-image: url('../assets/storm/bank-1.png'); background-size: auto 100%; background-position-y: bottom; opacity: .5; animation-duration: 110s; animation-direction: reverse; }
@keyframes bank-drift { to { background-position-x: -1800px; } }

.sky__moon {
  position: absolute; right: 6%; top: 5%; width: calc(var(--u) * 12); min-width: 70px;
  filter: drop-shadow(0 0 30px rgba(220, 200, 255, .45)) brightness(.9);
}

.storm { position: absolute; inset: 0; width: 100%; height: 100%; }
.storm-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--fx, 50%) 0%, rgba(150,255,170,.42), rgba(57,255,106,.06) 60%, transparent);
  opacity: 0; transition: opacity .5s;
}
.storm-flash.is-on { opacity: 1; transition: opacity .04s; }
.hub.is-flashing .sky__photo { filter: brightness(1.7) saturate(1.3) hue-rotate(-25deg); }

/* The sky is watching */
.sky-eye { position: absolute; left: 2%; top: 38%; width: calc(var(--u) * 16); min-width: 110px; pointer-events: auto; cursor: pointer; }
.sky-eye__cloud { width: 100%; height: calc(var(--u) * 6); min-height: 44px; object-fit: cover; object-position: left; opacity: .9; border-radius: 40%; }
.sky-eye__ball {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 28px;
  transform: translate(-50%, -50%);
  background: #f2ead3; border: 3px solid #0d0418; border-radius: 50%;
  overflow: hidden; animation: eye-blink 5.5s infinite;
  box-shadow: 0 0 18px rgba(57,255,106,.6);
}
.sky-eye__pupil {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0 2px, #39ff6a 3px, #0a4d1c 7px, #000 8px);
}
@keyframes eye-blink { 0%, 92%, 100% { transform: translate(-50%, -50%) scaleY(1); } 95% { transform: translate(-50%, -50%) scaleY(.05); } }

/* ---------- The machine ---------- */
.machine {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: calc(var(--u) * 92);
  pointer-events: none;
}
.machine__rig { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * 2); width: 100%; }
.machine__stack { display: flex; flex-direction: column; align-items: center; }

/* Tesla coils stand on the base either side, arcing into the storm */
.coil { position: relative; width: calc(var(--u) * 11); height: auto; filter: drop-shadow(0 0 14px rgba(57,255,106,.35)) drop-shadow(4px 6px 0 rgba(0,0,0,.5)); }
.coil--left  { order: -1; }
.coil--right { order: 1; scale: -1 1; }

/* Light bulbs on cords, swinging above the coils */
.bulbs { position: absolute; inset: 0; pointer-events: none; }
.bulb {
  position: absolute; top: calc(var(--u) * -2.2); width: calc(var(--u) * 4); min-width: 26px;
  transform-origin: 50% 0; animation: bulb-swing var(--swing, 3s) ease-in-out infinite alternate;
}
.bulb::before { /* the cord */
  content: ''; display: block; margin: 0 auto; width: 2px; height: calc(var(--u) * var(--len-u, 6)); background: #0d0418;
  box-shadow: 1px 0 0 rgba(255,255,255,.2);
}
.bulb:nth-child(1) { left: 1%;  --len-u: 8; }
.bulb:nth-child(2) { left: 12%; --len-u: 4; }
.bulb:nth-child(3) { right: 12%; --len-u: 6; }
.bulb:nth-child(4) { right: 1%; --len-u: 3; }
.bulb img { width: 100%; filter: brightness(.55) drop-shadow(0 4px 0 rgba(0,0,0,.4)); transition: filter .08s; }
.bulb.is-lit img, .hub.is-flashing .bulb img { filter: brightness(1.15) drop-shadow(0 0 22px #ffe94a) drop-shadow(0 0 40px #39ff6a); }
@keyframes bulb-swing { from { rotate: -7deg; } to { rotate: 7deg; } }

/* COLE / LABS: ransom-cut letters, each word on its own clock */
.logo-word {
  pointer-events: auto; cursor: pointer;
  display: flex; gap: .06em;
  font-size: calc(var(--u) * 6.2); line-height: 1;
  position: relative; z-index: 4;
}
.lchip {
  display: inline-block; padding: .04em .14em .08em;
  background: var(--bg); color: var(--fg);
  rotate: var(--r);
  box-shadow: 0 0 0 3px #f2ead3, 5px 7px 0 3px rgba(0,0,0,.6);
  transition: scale .2s cubic-bezier(.3,1.8,.5,1);
}
.lchip--cut { clip-path: polygon(4% 8%, 97% 0, 100% 88%, 90% 100%, 0 95%); box-shadow: none; filter: drop-shadow(4px 6px 0 rgba(0,0,0,.6)); }
.logo-word:hover .lchip:nth-child(odd)  { scale: 1.15; }
.logo-word:hover .lchip:nth-child(even) { scale: .9; }
.logo-word--cole { animation: cole-move 3.3s ease-in-out infinite; }
.logo-word--labs { animation: labs-move 4.7s ease-in-out infinite; }
@keyframes cole-move {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  30% { transform: translate(-8px, -5px) rotate(-5deg); }
  65% { transform: translate(6px, 2px) rotate(1deg); }
}
@keyframes labs-move {
  0%, 100% { transform: translate(0, 0) rotate(2deg); }
  35% { transform: translate(7px, 4px) rotate(4deg) scaleX(1.05); }
  70% { transform: translate(-9px, -2px) rotate(-2deg); }
}
.logo-word.is-spun { animation: word-spin .8s cubic-bezier(.3,1.5,.5,1); }
.logo-word.is-squashed { animation: word-squash .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes word-spin { from { transform: rotateY(0) scale(1.2); } to { transform: rotateY(720deg) scale(1); } }
@keyframes word-squash { 25% { transform: scale(1.4, .5); } 55% { transform: scale(.8, 1.3); } }

/* Gear → smoke → beaker, with a telescope bolted on, aimed at the moon */
.lab__core {
  position: relative; display: block;
  width: calc(var(--u) * 15); aspect-ratio: 1;
  margin-top: calc(var(--u) * 1);
}
.lab__gear {
  position: absolute; inset: -8%; width: 116%; height: 116%;
  animation: gear-spin 14s linear infinite;
  filter: brightness(.85) drop-shadow(0 0 16px rgba(183,124,255,.8));
}
@keyframes gear-spin { to { transform: rotate(360deg); } }
.lab__beaker {
  position: absolute; left: 50%; top: 50%; width: 128%;
  transform: translate(-50%, -50%);
  animation: potion 7s linear infinite, beaker-wobble 2.8s ease-in-out infinite;
}
.lab__smoke {
  position: absolute; left: 50%; bottom: 60%; width: 58%;
  transform: translateX(-46%);
  opacity: .85; mix-blend-mode: screen;
  animation: potion 7s linear infinite;
}
.lab__core::after {
  content: ''; position: absolute; left: 50%; top: 58%; width: 62%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.5), rgba(57,255,106,.25) 45%, transparent 70%);
}
.lab__beaker, .lab__smoke, .lab__puffs { z-index: 1; }
.lab__scope {
  position: absolute; left: 88%; top: 6%; width: 46%; z-index: 0;
  rotate: 28deg; transform-origin: 20% 90%;
  animation: scope-hunt 9s ease-in-out infinite alternate;
}
@keyframes scope-hunt { 50% { rotate: 20deg; } }
@keyframes potion {
  0%   { filter: hue-rotate(0deg)   drop-shadow(0 0 16px #39ff6a); }
  25%  { filter: hue-rotate(90deg)  drop-shadow(0 0 16px #00d9ff); }
  50%  { filter: hue-rotate(180deg) drop-shadow(0 0 16px #ff4fc3); }
  75%  { filter: hue-rotate(270deg) drop-shadow(0 0 16px #ffb000); }
  100% { filter: hue-rotate(360deg) drop-shadow(0 0 16px #39ff6a); }
}
@keyframes beaker-wobble { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
.lab__puffs { position: absolute; left: 50%; top: 20%; width: 0; height: 0; }
.lab__puffs i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), var(--c) 60%, transparent 72%);
  animation: puff-rise ease-out forwards;
}
@keyframes puff-rise {
  0% { transform: translate(-50%, 0) scale(.3); opacity: .95; }
  100% { transform: translate(calc(-50% + var(--dx)), -150px) scale(2.4); opacity: 0; }
}

/* ---------- The golden ticket (ORDER HERE) ---------- */
.ticket-row {
  position: relative; z-index: 6; pointer-events: auto;
  margin: calc(var(--u) * .3) 0 calc(var(--u) * 1.8);   /* below the beaker, well clear of LABS */
  filter: drop-shadow(5px 7px 0 rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(255,214,0,.45));
}
.ticket-hand {
  position: absolute; right: 100%; top: 50%; translate: 0 -50%;
  width: calc(var(--u) * 8.5); min-width: 64px; margin-right: 6px;
  animation: hand-poke 1.1s ease-in-out infinite;
}
@keyframes hand-poke { 50% { margin-right: -4px; } }

/* ---------- Brass base: gauges + warning plate ---------- */
.machine__base {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2);
  width: min(100%, calc(var(--u) * 78)); margin-top: calc(var(--u) * .6);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.6);
  background:
    radial-gradient(circle, #5a3a00 2px, transparent 3px) 8px 6px / 26px 100% repeat-x,
    linear-gradient(#e8c25a, #a8770a 45%, #6b4a05 60%, #c99a2e);
  border: 3px solid #2a1800; border-radius: 6px;
  box-shadow: 0 6px 0 #2a1800, 0 0 30px rgba(0,0,0,.6);
}
.warning-plate {
  flex: 1; text-align: center;
  font: 400 max(.8rem, calc(var(--u) * 1.5))/1.1 'Rye', serif; letter-spacing: .06em; text-transform: uppercase;
  color: #ffd400; background: #0d0418; padding: .4em .6em; border: 2px solid #ffd400;
}
.gauge {
  position: relative; flex: none; width: calc(var(--u) * 5); min-width: 38px; aspect-ratio: 1; border-radius: 50%;
  background:
    repeating-conic-gradient(from -120deg, #0d0418 0 2deg, transparent 2deg 20deg) center / 100% 100%,
    radial-gradient(circle, #f2ead3 58%, #0d0418 60% 66%, #c99a2e 68%);
  border: 2px solid #2a1800;
}
.gauge i {
  position: absolute; left: 50%; bottom: 50%; width: 3px; height: 42%; margin-left: -1.5px;
  background: #c4001a; transform-origin: 50% 100%; border-radius: 2px;
  animation: needle var(--t, 1s) steps(5) infinite alternate;
}
@keyframes needle { from { rotate: var(--min); } to { rotate: var(--max); } }

/* ---------- The specimen shelf ---------- */
.shelf {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap;
  width: 100%; max-width: calc(var(--u) * 118);
  margin-top: calc(var(--u) * 3);       /* room for the pipes to come down */
  --tag-h: max(58px, calc(var(--u) * 6.4));
}
.shelf__plank { display: none; }
.shelf__bookend { position: relative; width: calc(var(--u) * 8); min-width: 48px; align-self: flex-end; margin-bottom: calc(var(--tag-h) + 8px + max(12px, var(--u) * 1.6)); z-index: 1; }
.shelf__bookend--right { width: calc(var(--u) * 6); }

.specimen {
  position: relative; flex: 1 1 0; min-width: 0; max-width: calc(var(--u) * 22);
  display: grid; grid-template-rows: auto auto auto 1fr; justify-items: center; align-content: end;
  padding: 0 calc(var(--u) * 1);
  text-decoration: none; color: inherit; cursor: pointer;
}
/* each specimen brings its own length of shelf (grid row 3), so wrapped rows still sit on a plank */
.specimen::after {
  content: ''; grid-row: 3; justify-self: stretch; margin-inline: calc(var(--u) * -1 - 1px);
  height: calc(var(--u) * 1.6); min-height: 12px;
  background: linear-gradient(#6b3d14, #3d1f07); border-top: 3px solid #8a5523; box-shadow: 0 6px 10px rgba(0,0,0,.6);
  position: relative; z-index: 1;
}
.jar {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: min(100%, calc(var(--u) * 13)); min-width: 74px; aspect-ratio: 3 / 4;
  border-radius: 48% 48% 10% 10% / 34% 34% 6% 6%;
  background:
    linear-gradient(100deg, transparent 18%, rgba(255,255,255,.38) 22%, transparent 30%),
    radial-gradient(ellipse at 50% 85%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%),
    rgba(200, 220, 255, .1);
  border: 3px solid rgba(240, 240, 255, .55);
  box-shadow: inset 0 0 22px rgba(255,255,255,.18), 0 0 26px color-mix(in srgb, var(--glow) 30%, transparent);
  transition: box-shadow .25s;
}
.jar::before { /* brass knob on the lid: the pipe plugs in here */
  content: ''; position: absolute; left: 50%; top: -10px; translate: -50% 0;
  width: 22px; height: 14px; border-radius: 6px 6px 2px 2px;
  background: linear-gradient(#e8c25a, #8a5d07); border: 2px solid #2a1800;
}
.jar img {
  width: 72%; max-height: 76%; object-fit: contain;
  filter: drop-shadow(3px 5px 0 rgba(0,0,0,.45));
  animation: specimen-hover 4s ease-in-out infinite alternate;   /* suspended in the jar */
}
.specimen:nth-of-type(2n) .jar img { animation-duration: 5.2s; }
.specimen:nth-of-type(3n) .jar img { animation-duration: 3.4s; }
@keyframes specimen-hover { from { translate: 0 4px; rotate: -4deg; } to { translate: 0 -6px; rotate: 4deg; } }
.jar__bubbles { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.jar__bubbles i {
  position: absolute; bottom: -10px; width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.7); background: color-mix(in srgb, var(--glow) 40%, transparent);
  animation: bubble-up linear infinite;
}
@keyframes bubble-up { to { translate: 0 calc(-1 * var(--h, 200px)); opacity: 0; } }
.jar__base {
  position: relative; z-index: 2;
  width: min(108%, calc(var(--u) * 14.5)); min-width: 82px; height: calc(var(--u) * 2.4); min-height: 16px;
  margin-top: -4px;
  background: linear-gradient(#e8c25a, #a8770a 45%, #6b4a05 70%, #c99a2e);
  border: 2px solid #2a1800; border-radius: 4px 4px 8px 8px;
}
.tag {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  grid-row: 4; align-self: start;
  min-height: var(--tag-h); width: 92%; max-width: 190px;
  padding: .3em .5em .4em; margin-top: 10px;
  background: #e9d7a8; color: #2a1800;
  border: 2px solid #2a1800; border-radius: 4px;
  box-shadow: 3px 4px 0 rgba(0,0,0,.55);
  rotate: -2deg; transform-origin: 50% -8px;
  text-align: center; line-height: 1.05;
}
.specimen:nth-of-type(even) .tag { rotate: 2deg; }
.tag::before { /* string to the plank */
  content: ''; position: absolute; left: 50%; top: -10px; width: 2px; height: 10px; background: #2a1800;
}
.tag b { font: 400 max(.92rem, calc(var(--u) * 1.6)) 'Rye', serif; }
.tag small { font: 700 max(.95rem, calc(var(--u) * 1.5))/1 var(--font-hand); color: #7a1fd1; }

.specimen:hover .jar, .specimen:focus-visible .jar {
  box-shadow: inset 0 0 30px color-mix(in srgb, var(--glow) 50%, transparent), 0 0 46px var(--glow);
}
.specimen:hover .jar img, .specimen:focus-visible .jar img { animation: specimen-spin .9s cubic-bezier(.3,1.5,.5,1); }
@keyframes specimen-spin { from { rotate: 0deg; scale: 1.2; } to { rotate: 360deg; scale: 1; } }
.specimen:hover .tag, .specimen:focus-visible .tag { animation: tag-swing .8s ease-in-out; background: var(--glow); }
@keyframes tag-swing { 25% { rotate: 10deg; } 60% { rotate: -8deg; } }
.specimen:focus-visible { outline: none; }
.specimen:focus-visible .tag { outline: 4px dashed #39ff6a; outline-offset: 4px; }

/* ---------- Copper pipes ---------- */
.pipes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pipes .pipe-shell { fill: none; stroke: #2a1800; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.pipes .pipe-copper { fill: none; stroke: #b8692e; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.pipes .pipe-shine { fill: none; stroke: #ffc48a; stroke-width: 2.5; stroke-linecap: round; opacity: .8; transform: translate(-2px, -2px); }
.pipes .pipe-flow { fill: none; stroke-width: 4; stroke-dasharray: 3 22; stroke-linecap: round; animation: pipe-flow .9s linear infinite; }
.pipes .pipe-joint { fill: #c99a2e; stroke: #2a1800; stroke-width: 2.5; }
@keyframes pipe-flow { to { stroke-dashoffset: -25; } }

/* ---------- Footer ---------- */
.hub-foot {
  position: relative; z-index: 2; text-align: center;
  font-weight: 800; font-size: .9rem; color: #e8d6ff; max-width: 70ch;
  background: rgba(13, 4, 24, .78); padding: .35em 1em; border-radius: 8px;
}
.hub-foot__hint { font-size: .85rem; color: #b9a3d6; }
.hub-foot__hint a { color: #39ff6a; }

/* ---------- Easter-egg bird ---------- */
.bird {
  position: absolute; top: 30%; left: -80px; z-index: 7;
  font-size: 2.4rem; background: none; border: 0; cursor: pointer;
  transform: scaleX(-1);
  animation: bird-fly 24s linear infinite;
}
@keyframes bird-fly {
  0%   { left: -80px; top: 34%; }
  10%  { top: 27%; }
  20%  { left: calc(100% + 80px); top: 36%; }
  100% { left: calc(100% + 80px); top: 36%; }
}

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  background: #07010f url('../assets/storm/storm-sky.jpg') center / cover;
  transition: opacity .6s, visibility .6s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__gear { width: 140px; animation: gear-spin 3s linear infinite; }
.loader__text { font-family: 'Rye', serif; font-size: clamp(1.6rem, 5vw, 3rem); color: var(--lab-green); text-shadow: 0 0 18px var(--lab-green-glow), 3px 3px 0 #000; text-align: center; }
.loader__text span { animation: blink 1s infinite; }
.loader__text span:nth-child(2) { animation-delay: .2s; }
.loader__text span:nth-child(3) { animation-delay: .4s; }
.loader__hint { font-weight: 800; color: #e8d6ff; font-size: .9rem; }
@keyframes blink { 50% { opacity: .15; } }

/* ---------- Sunburst behind the beaker ---------- */
.lab__rays { inset: -95%; z-index: -1; --ray-a: rgba(255,214,0,.30); --ray-b: rgba(122,31,209,.18); }

/* ---------- Side wings full of factory junk ----------
   Landscape: two columns in the empty storm either side of the machine.
   Portrait: they become strips in the page flow (see screen shapes). */
.wing {
  position: absolute; z-index: 2; top: 0; bottom: 0;
  width: calc((100vw - var(--u) * 92) / 2 - 28px);
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 6px;
  pointer-events: none; overflow: hidden;
}
.wing--left  { right: calc(100% + 14px); top: calc(var(--u) * 9); }
.wing--right { left: calc(100% + 14px); top: calc(var(--u) * 13); }   /* the moon lives above it */
.wing img { max-width: 100%; height: auto; filter: drop-shadow(3px 5px 0 rgba(0,0,0,.5)); }
.wing .neon { --neon-fs: max(.9rem, calc(var(--u) * 1.7)); }
.junk-sm { width: calc(var(--u) * 6); min-width: 42px; }
.junk-md { width: calc(var(--u) * 10); min-width: 60px; }
.hanger { display: flex; flex-direction: column; align-items: center; }
.hanger__chain { width: calc(var(--u) * 8); rotate: 90deg; margin: calc(var(--u) * 3) 0; }
.hanger__load { width: calc(var(--u) * 7); min-width: 48px; }
.gear-cluster { position: relative; display: flex; align-items: center; }
.gear-cluster img { width: calc(var(--u) * 9); min-width: 56px; }
.gear-cluster img + img { width: calc(var(--u) * 7); margin-left: calc(var(--u) * -2); }
.stack { display: flex; flex-direction: column; align-items: center; }
.stack img { width: calc(var(--u) * 10); min-width: 60px; }
.stack img:first-child { width: calc(var(--u) * 8); margin-bottom: -6px; position: relative; z-index: 1; }
.wing .wizard--docked { order: -1; width: calc(var(--u) * 8); min-width: 64px; height: auto; pointer-events: auto; }
.wing--right .stack img { width: calc(var(--u) * 8); }

/* "Click a jar" callout over the pipes */
.shelf-callout {
  position: relative; z-index: 3; margin: calc(var(--u) * -1) 0 calc(var(--u) * -2);
  font: 400 max(1rem, calc(var(--u) * 2))/1 'Anton', Impact, sans-serif; letter-spacing: .06em;
  color: #0d0418; background: #39ff6a; padding: .3em .8em; border: 3px solid #0d0418;
  box-shadow: 4px 4px 0 #ff2d7a; rotate: -1.5deg;
  animation: callout-flash .6s steps(1) infinite;
}
@keyframes callout-flash { 50% { background: #ffd400; } }
.callout-arrow { display: inline-block; animation: ca-bob .5s ease-in-out infinite alternate; --ca-dy: 5px; }

/* Starbursts on the jar glass */
.jar .starburst { top: -14px; right: -18px; }

/* Valve wheels on the pipes */
.pipes .pipe-valve { transform-box: fill-box; transform-origin: center; animation: sb-spin 3s linear infinite; }
.pipes .pipe-valve circle { fill: none; stroke: #c4001a; stroke-width: 3.5; }
.pipes .pipe-valve line { stroke: #c4001a; stroke-width: 3; }

.belt-slot { width: 100%; position: relative; z-index: 2; }

/* ==========================================================================
   Screen shapes
   ========================================================================== */

/* Portrait phones / tall windows: the lab stacks, jars wrap 3 + 2 */
@media (max-aspect-ratio: 4/5) {
  body.hub-page { --u: min(2.3vw, 1.15vh); }
  .hub { justify-content: flex-start; gap: calc(var(--u) * 4); }
  .coil { width: calc(var(--u) * 8); }
  .machine__rig { gap: calc(var(--u) * .5); }
  .logo-word { font-size: calc(var(--u) * 8.5); }
  .lab__core { width: calc(var(--u) * 20); }
  .ticket-hand { width: calc(var(--u) * 9); }
  .specimen { flex: 0 0 33.33%; max-width: none; margin-bottom: calc(var(--u) * 4); }
  .jar { width: min(100%, calc(var(--u) * 19)); }
  .jar__base { width: min(108%, calc(var(--u) * 21)); }
  .shelf__bookend { display: none; }
  .sky-eye { top: 1%; left: 30%; }
  .sky__moon { top: 2%; }
  .bulb:nth-child(2), .bulb:nth-child(3) { display: none; }
  .wing {
    position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%;
    flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-items: center; overflow: visible;
  }
  .wing .neon { order: -1; flex-basis: 100%; text-align: center; }
  .wing .neon { flex-basis: auto; }
  .hanger { flex-direction: row; }
  .hanger__chain { rotate: 0deg; margin: 0; }
}
/* Landscape but not wide enough for side wings (e.g. 4:3 tablets): wings become strips too */
@media (min-aspect-ratio: 4/5) and (max-aspect-ratio: 3/2) {
  .wing {
    position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%; max-width: calc(var(--u) * 118);
    flex-direction: row; justify-content: space-around; overflow: visible;
  }
  .hanger { flex-direction: row; }
  .hanger__chain { rotate: 0deg; margin: 0; }
}
@media (max-width: 420px) {
  .ticket-hand { display: none; }
}
/* Very short landscape (phones sideways): let it scroll rather than squash */
@media (max-height: 520px) and (orientation: landscape) {
  body.hub-page { --u: min(1vw, 1.9vh); }
  .hub { min-height: auto; }
}
/* Big screens / TVs: cap growth so it stays a composition, not a wall */
@media (min-width: 2200px) {
  body.hub-page { --u: min(.85vw, 1.1vh); }
}

/* Narrow phones: side arrows would run off-screen, so the stickers carry the shouting */
@media (max-width: 600px) {
  .ticket-row .click-arrow, .logo-word .click-arrow { display: none; }
}

/* ==========================================================================
   LOGO BLOCK — COLE directly over ORDER HERE directly over LABS, with the
   gear + beaker blown up right behind all three.
   ========================================================================== */
.logo-block {
  position: relative; display: grid; justify-items: center; align-content: center;
  row-gap: calc(var(--u) * .9);
  min-height: calc(var(--u) * 40);
  padding: calc(var(--u) * 3) calc(var(--u) * 2);
}
.logo-block > .lab__core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: calc(var(--u) * 40); margin: 0; z-index: 0;
}
.logo-block > .lab__core .lab__gear { opacity: .9; }
.logo-block > .lab__core .lab__beaker { width: 150%; }
.logo-block > .lab__core .lab__smoke { bottom: 72%; width: 46%; }
.logo-block > .lab__core .lab__puffs { top: 8%; }
.logo-block > .lab__core .lab__scope { left: 84%; top: 4%; width: 30%; }
.logo-block > .logo-word, .logo-block > .ticket-row { position: relative; z-index: 3; margin: 0; }

@media (max-aspect-ratio: 4/5) {
  .logo-block { min-height: calc(var(--u) * 42); }
  .logo-block > .lab__core { width: calc(var(--u) * 42); }
}

/* ==========================================================================
   RUBE GOLDBERG CHAIN — a fuse wire threads every gadget; a spark runs it
   and each gadget fires as the spark arrives (sequence lives in hub.js)
   ========================================================================== */
.rube { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rube .rg-wire { fill: none; stroke: #f2ead3; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; opacity: .75; }
.rube .rg-wire.is-burnt { stroke: #39ff6a; stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 5px #39ff6a); }
.rube .rg-node { fill: #c99a2e; stroke: #2a1800; stroke-width: 2.5; }
.rube .rg-node.is-hit { fill: #39ff6a; }
.rube .rg-spark { fill: #fffbe0; filter: drop-shadow(0 0 6px #ffd400) drop-shadow(0 0 14px #39ff6a); }
.rube .rg-trail { fill: #ffd400; opacity: .7; }

/* what each gadget does when the spark reaches it */
.rg-flip       { animation: rg-flip .6s cubic-bezier(.3,1.6,.5,1) !important; }
@keyframes rg-flip { to { rotate: 540deg; } }
.rg-swing      { animation: rg-swing 1.1s ease-out !important; }
@keyframes rg-swing { 0% { rotate: 0deg; } 25% { rotate: 38deg; } 55% { rotate: -24deg; } 80% { rotate: 10deg; } 100% { rotate: 0deg; } }
.rg-whirl img  { animation-duration: .5s !important; }
.rg-shake      { animation: rg-shake .35s steps(4) 2 !important; }
@keyframes rg-shake { 25% { translate: -4px 2px; } 50% { translate: 4px -2px; } 75% { translate: -2px -3px; } }
.rg-boil .lab__beaker { animation: potion 1s linear infinite, rg-boil .18s steps(2) infinite !important; }
.rg-boil .lab__gear   { animation-duration: 1.6s !important; }
@keyframes rg-boil { 50% { translate: -50% -52%; scale: 1.04; } }
.rg-jolt .golden-ticket { animation: rg-jolt .7s cubic-bezier(.3,1.8,.5,1), ticket-shine 1s linear infinite !important; }
@keyframes rg-jolt { 0% { scale: 1; } 30% { scale: 1.18; rotate: 4deg; } 60% { scale: .94; rotate: -6deg; } 100% { scale: 1; } }
.rg-jolt .chase { animation-duration: .12s !important; }
.rg-tip        { animation: rg-tip .9s cubic-bezier(.5,0,.3,1.4) both !important; transform-origin: 100% 100%; }
@keyframes rg-tip { 0% { rotate: var(--r); } 35% { rotate: 80deg; translate: 0 6px; } 70% { rotate: 80deg; translate: 0 6px; } 100% { rotate: var(--r); translate: 0 0; } }
.rg-boing      { animation: rg-boing .9s cubic-bezier(.3,1.6,.5,1) !important; transform-origin: 50% 100%; }
@keyframes rg-boing { 0% { scale: 1 1; } 25% { scale: 1.2 .45; } 55% { scale: .85 1.45; translate: 0 -18px; } 100% { scale: 1 1; translate: 0 0; } }
.rg-drop       { animation: rg-drop .6s cubic-bezier(.6,0,.4,1.6) !important; }
@keyframes rg-drop { 0% { translate: 0 -40px; } 70% { translate: 0 4px; } 100% { translate: 0 0; } }
.rg-alarm      { animation-duration: .12s !important; }
.rg-alarm::after { animation-duration: .3s !important; }
.rg-max i      { animation: none !important; rotate: var(--max) !important; transition: rotate .2s; }
.rg-glow       { box-shadow: inset 0 0 40px var(--glow), 0 0 60px var(--glow), 0 0 0 4px var(--glow) !important; }
.rg-glow img   { animation: specimen-spin .8s cubic-bezier(.3,1.5,.5,1) !important; }
.rg-flash-plate { animation: rg-plate .14s steps(1) 6 !important; }
@keyframes rg-plate { 50% { background: #ffd400; color: #0d0418; } }

/* ---------- comic POW words + particle bursts ---------- */
.pow {
  position: absolute; z-index: 9; pointer-events: none; translate: -50% -50%;
  font: 400 clamp(1rem, calc(var(--u) * 2.2), 2rem)/1 'Bangers', 'Anton', sans-serif; letter-spacing: .04em; white-space: nowrap;
  color: #0d0418; background: var(--pow); padding: .2em .5em;
  clip-path: polygon(0 18%, 12% 0, 30% 12%, 50% 0, 68% 12%, 88% 0, 100% 20%, 92% 50%, 100% 80%, 86% 100%, 66% 88%, 48% 100%, 30% 88%, 12% 100%, 0 82%, 8% 50%);
  filter: drop-shadow(3px 4px 0 #0d0418);
  animation: pow 1s cubic-bezier(.3,1.8,.5,1) forwards;
}
@keyframes pow {
  0% { scale: 0; rotate: calc(var(--tilt) - 30deg); opacity: 1; }
  25% { scale: 1.25; rotate: var(--tilt); }
  70% { scale: 1; opacity: 1; translate: -50% -70%; }
  100% { scale: .8; opacity: 0; translate: -50% -110%; }
}
.rg-particle { position: absolute; z-index: 8; pointer-events: none; width: 8px; height: 8px; margin: -4px; animation: particle 1s ease-out forwards; }
.rg-particle--spark { background: var(--c); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 14px; height: 14px; }
.rg-particle--confetti { background: var(--c); width: 7px; height: 12px; }
.rg-particle--bubble { border: 2px solid var(--c); border-radius: 50%; width: 12px; height: 12px; }
@keyframes particle { to { translate: var(--dx) var(--dy); rotate: 540deg; opacity: 0; } }

/* ---------- carriers on the fuse ---------- */
.rube .rg-emoji { font-size: 26px; filter: drop-shadow(2px 2px 0 #0d0418); }

/* ---------- more gadget tricks ---------- */
.rg-eyepop .sky-eye__ball { animation: rg-eyepop 1.2s cubic-bezier(.3,1.8,.5,1) !important; }
@keyframes rg-eyepop { 0% { scale: 1; } 30% { scale: 2.1; } 60% { scale: 1.6; } 100% { scale: 1; } }
.rg-eyepop .sky-eye__pupil { animation: sb-spin .4s linear 3; }
.rg-hammer { animation: rg-hammer .7s cubic-bezier(.5,0,.3,1.6) !important; }
@keyframes rg-hammer { 0% { translate: 0 0; } 40% { translate: 0 -34px; rotate: -12deg; } 60% { translate: 0 6px; rotate: 0deg; } 100% { translate: 0 0; } }
.rg-squash { animation: rg-squash .7s ease-out !important; transform-origin: 50% 100%; }
@keyframes rg-squash { 55% { scale: 1 1; } 65% { scale: 1.15 .7; } 85% { scale: .95 1.08; } 100% { scale: 1 1; } }
.rg-neon { animation: rg-neon .1s steps(2) 12 !important; }
@keyframes rg-neon { 50% { filter: hue-rotate(160deg) brightness(1.8); scale: 1.06; } }
.rg-pop { animation: rg-pop .7s cubic-bezier(.3,1.8,.5,1) !important; }
@keyframes rg-pop { 0% { scale: 1; } 35% { scale: 1.45; translate: 0 -14px; } 100% { scale: 1; translate: 0 0; } }
.rg-zoom { animation: rg-zoom 1.2s ease-in-out !important; }
@keyframes rg-zoom { 0% { rotate: 28deg; scale: 1; } 40% { rotate: 8deg; scale: 1.35; } 70% { rotate: 12deg; scale: 1.35; } 100% { rotate: 28deg; scale: 1; } }
.rg-wink { animation: rg-wink 1.2s ease-in-out !important; }
@keyframes rg-wink { 30% { scale: 1.25; rotate: -15deg; filter: brightness(1.6) drop-shadow(0 0 40px #ffe94a); } 60% { scale: 1.25 .2; } 80% { scale: 1.1; } }
.rg-rays { animation-duration: 1.5s !important; }
.rg-poke { animation: rg-poke .9s ease-in-out !important; }
@keyframes rg-poke { 30% { margin-right: -28px; } 60% { margin-right: 4px; } 80% { margin-right: -16px; } }
.rg-unwind { animation: sb-spin .25s linear 6 !important; }
.rg-cast { animation: rg-cast 1.2s cubic-bezier(.3,1.6,.5,1) !important; }
@keyframes rg-cast { 0% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 -30px; rotate: -20deg; filter: drop-shadow(0 0 20px #39ff6a); } 60% { rotate: 380deg; } 100% { translate: 0 0; rotate: 360deg; } }
.rg-fizz { animation: rg-shake .15s steps(2) 8 !important; filter: drop-shadow(0 0 18px #39ff6a); }
.rg-chatter { animation: rg-chatter .09s steps(2) 12 !important; }
@keyframes rg-chatter { 50% { rotate: 8deg; translate: 0 -4px; } }
.conveyor__item { transition: translate .25s cubic-bezier(.3,1.6,.5,1); }
.conveyor__item.rg-hop { translate: 0 -38px; }
.rg-quake { animation: rg-quake .09s steps(2) 10 !important; }
@keyframes rg-quake { 50% { translate: 6px -4px; } }
.rg-bird { animation: rg-bird 1.6s ease-in-out !important; }
@keyframes rg-bird { 0% { left: -80px; top: 40%; } 50% { top: 10%; } 100% { left: calc(100% + 80px); top: 30%; } }