/* hero */
.hero { position: relative; padding-bottom: 92px; }
.hgrid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; padding-top: 70px;
  /* keeps the buttons centred on the scope line, whatever the copy length */
  padding-bottom: calc(min(100vw - 80px, 1280px) * 107 / 1401 / 2 - 25px); }
.hlive { margin-top: -6px; position: relative; z-index: 4; }
.hkick { display: flex; align-items: center; gap: 14px; }
.hkick .blink { display: inline-block; width: 12px; height: 16px; background: var(--accent); }
.htitle { margin-top: 10px; font-size: min(236px, 16.4vw); font-weight: 200; color: var(--text); }
.htitle h1 { margin: 0; font: inherit; letter-spacing: inherit; white-space: nowrap; }
.hname { line-height: .86; letter-spacing: .1em; }
.htag { line-height: .95; letter-spacing: .08em; }
.htag h1 { font-size: .5em; }
.htag span { display: block; }
.htag .acc { color: var(--accent); }
.hlead { margin: 30px 0 0; max-width: 42ch; font-size: 22px; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.hbio { margin: 14px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--text-3); }
.hbtns { position: relative; display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }

/* art: tentacles rising out of the scope */
.hwrap { position: absolute; top: 0; bottom: 0; left: max(40px, calc((100% - 1360px) / 2 + 40px)); right: max(40px, calc((100% - 1360px) / 2 + 40px));
  overflow: hidden; --wl: min(calc(3.71vw - 11px), 42px); }
.tent { position: absolute; right: 118px; bottom: 100px; width: 754px; pointer-events: none; z-index: 1; }
.tent-up { clip-path: inset(0 0 var(--wl) 0); }
/* The scope's own fill darkens them below the wave, all the way down to the radio dial's line. They reach 12px past it,
   so the sway never shows their ends, and the dial's box (above them) hides that part. Nothing clips the swaying tentacles
   themselves: a clip there makes browsers redraw or re-tile them while they move, and they shimmer or get chopped. */
.hwrap.dry .tent { bottom: 80px; }
.hwrap.dry .tent-up { clip-path: none; }
.under { position: absolute; inset: 0; clip-path: inset(calc(100% - var(--wl)) 0 0 0); opacity: .32; filter: blur(.6px);
  -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px); mask-image: repeating-linear-gradient(0deg, #000 0 3px, transparent 3px 5px); }
.tent .br { color: var(--tent); stroke-width: var(--tent-stroke, 1.5); }
.flip { transform: scaleY(-1); }
.flip svg { width: 100% !important; height: auto !important; }
.tl, .tg { will-change: transform; backface-visibility: hidden; animation: tilt 7s ease-in-out infinite; }
.tg { animation-name: grow; }
@keyframes tilt { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes grow { 0%, 100% { transform: scale(.985, .97); } 50% { transform: scale(1.01, 1.035); } }
/* Firefox only (hero.js): Firefox moves the slowly swaying tentacle layers in whole-pixel hops (stop motion). There the
   art is drawn into a canvas every frame instead, at the exact sway, from the hidden live art's own animation. */
.tent-up, .under { --pad: 60px; }
.tent-ras { position: absolute; left: calc(-1 * var(--pad)); top: calc(-1 * var(--pad)); pointer-events: none; display: block; }
.tent-up:has(> .tent-ras) { position: relative; }
.tent-ras-on .flip svg.br { visibility: hidden; }
.hero.shimmer .tent .br-g0 { animation: tw 6s ease-in-out infinite; }
.hero.shimmer .tent .br-g1 { animation: tw 6s ease-in-out -2s infinite; }
.hero.shimmer .tent .br-g2 { animation: tw 6s ease-in-out -4s infinite; }
@keyframes tw { 0%, 100% { opacity: 1; } 50% { opacity: var(--tent-dim, .35); } }
.scope-band { position: absolute; left: 0; right: 0; bottom: 92px; height: 150px; pointer-events: none; color: var(--scope); z-index: 2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 26%, #000 48%); mask-image: linear-gradient(90deg, transparent 0, transparent 26%, #000 48%); }
.scope { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.scv { display: block; width: 100%; height: auto; aspect-ratio: 1401 / 107; }

@media (max-width: 900px) {
  .hgrid { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 0; padding-top: 35px; }
  .hcopy { margin-bottom: 23px; }
  .hlive { display: none; }
  .htitle { font-size: min(236px, 24vw); }
  .tent { right: 0; width: min(100%, 560px); }
}
@media (max-width: 600px) {
  .hwrap { left: 16px; right: 16px; }
  .hgrid { padding-top: 22px; }
  .hlead { font-size: 18px; }
}

/* Bea's takeover (hero mode 'bea'): big boopable Bea on the right, MRRP. on the left */
.hero-bea { padding-bottom: 0; }
.bart { position: absolute; right: max(40px, calc((100% - 1360px) / 2 + 40px)); top: 10px; z-index: 4; width: 620px; pointer-events: none; }
.bart .bea-art { width: 100%; }
.bart .nose3 { pointer-events: auto; }
.bcopy { position: relative; z-index: 3; padding-top: 70px; padding-bottom: 150px; }
.bkick { display: flex; align-items: center; gap: 12px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.bkick span { width: 12px; height: 16px; background: var(--accent); }
.btitle { margin-top: 14px; font-size: min(210px, 15vw); font-weight: 200; line-height: .86; letter-spacing: .06em; color: var(--title); }
.btitle h1 { margin: 0; font: inherit; letter-spacing: inherit; }
.blead { margin: 28px 0 0; max-width: 36ch; font-size: 21px; line-height: 1.5; color: var(--title); }
.bbtns { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 36px; }
.bbtns .bob { position: absolute; left: 236px; top: 34px; fill: var(--title); stroke: var(--bg); stroke-width: 2; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 50% { transform: translate(4px, -6px) rotate(-8deg); } }
.bcount { display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.bcount .bea-cl { color: var(--text-3); }
@media (max-width: 900px) {
  .bart { position: relative; right: auto; top: 0; width: min(620px, calc(100% - 32px)); margin: 0 auto; }
  .bcopy { padding-top: 10px; padding-bottom: 92px; }
  .btitle { font-size: min(210px, 24vw); }
}
@media (max-width: 600px) { .blead { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .bbtns .bob { animation: none; } }