/* ============================================================================
   SPEEDRUN HERO LAB (2026-10-28) — variations on the hero, after thesis.co's
   home: a hollow square ring seen from above, black walls carrying type, light
   leaking from inside. Ours: the floor is the moving prism light (the same
   shader as the plane, laid flat in 3D), the type is Tanker, and every wall
   reads the right way round from where you stand (each wall has an outer and
   an inner face; you only ever see the one that faces you).
     B · Ring   — one deliverable per wall, the ring turns slowly
     C · Ribbon — the headline runs round the walls; scroll brings you down to it
   ========================================================================== */

/* ---- the switcher (lab only) ---- */
.lab-pick{position:fixed;left:16px;bottom:16px;z-index:900;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:rgba(20,20,20,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:13px;letter-spacing:.01em;}
.lab-pick span{padding:0 8px 0 10px;color:var(--dim);}
.lab-pick a{padding:7px 12px;border-radius:999px;text-decoration:none;color:rgba(255,255,255,.8);}
.lab-pick a:hover{background:rgba(255,255,255,.1);}
.lab-pick a[aria-current]{background:#fff;color:#000;}
.lab-tail{height:60svh;}

/* ---- the ring ---- */
.rg{--c0:var(--p-teal);--c1:var(--p-pink);--c2:var(--p-amber);--c3:var(--p-blue);
  position:absolute;inset:0;perspective:2600px;pointer-events:none;display:grid;place-items:center;}
.rg-rig{position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-32deg) rotateY(45deg);will-change:transform;}
.rg-wall{position:absolute;left:calc(var(--s) / -2);top:calc(var(--h) / -2);width:var(--s);height:var(--h);transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 90deg)) translateZ(calc(var(--s) / 2));}
.rg-wall:nth-child(2){--c:var(--c0);} .rg-wall:nth-child(3){--c:var(--c1);} .rg-wall:nth-child(4){--c:var(--c2);} .rg-wall:nth-child(5){--c:var(--c3);}
/* light escaping over the top edge of each wall, in the wall's colour */
.rg-wall::before{content:"";position:absolute;left:4%;right:4%;top:0;height:2px;transform:translateZ(-1px);border-radius:2px;
  background:var(--c);box-shadow:0 0 calc(var(--h) * .35) calc(var(--h) * .06) var(--c);opacity:var(--glow,.75);}
.rg-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  font-family:'Tanker',sans-serif;font-weight:400;text-transform:uppercase;color:#fff;line-height:1;white-space:nowrap;
  font-size:calc(var(--h) * .56);letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
.rg-in{transform:rotateY(180deg);}
.rg-face>span{transform:translateY(.04em);}
.rg-floor{position:absolute;left:calc(var(--s) / -2 - var(--bleed));top:calc(var(--s) / -2 - var(--bleed));
  width:calc(var(--s) + 2 * var(--bleed));height:calc(var(--s) + 2 * var(--bleed));
  transform:translateY(calc(var(--h) / 2)) rotateX(90deg);}
.rg-floor .sr-plane{position:absolute;inset:0;width:100%;height:100%;}

/* ============ B · Ring ============ */
.sr-hero--ring .sr-hero__in{gap:22px;margin-top:4svh;}
.sr-hero--ring .rg-stage{--s:min(30vw,440px,40svh);--h:calc(var(--s) * .24);--bleed:calc(var(--s) * .12);
  position:relative;width:calc(var(--s) * 1.5);height:calc(var(--s) * .78 + var(--h));margin:0 auto -6px;}
.sr-hero--ring .sr-hero__title{font-size:clamp(40px,4.4vw,72px);max-width:none;}

/* ============ C · Ribbon ============ */
.sr-hero--ribbon{height:200svh;display:block;place-items:normal;overflow:visible;}
.sr-hero__pin{position:sticky;top:0;width:100%;height:100svh;min-height:640px;display:grid;place-items:center;overflow:hidden;}
.sr-hero--ribbon .sr-hero__in{gap:22px;margin-top:-3svh;}
.sr-hero--ribbon .rg-stage{--s:min(36vw,520px,43svh);--h:calc(var(--s) * .26);--bleed:calc(var(--s) * .1);
  position:relative;width:calc(var(--s) * 1.5);height:calc(var(--s) * .76 + var(--h));z-index:0;}
.sr-hero--ribbon .rg-face{font-size:calc(var(--h) * .5);justify-content:flex-start;}
.rg-tick{display:flex;align-items:center;gap:.5em;padding-left:.5em;margin-left:calc(var(--i) * var(--s) * -1);
  animation:rg-tick 26s linear infinite;}
.rg-tick b{font-weight:400;font-size:.62em;color:var(--c);text-shadow:0 0 .4em var(--c);}
@keyframes rg-tick{to{transform:translateX(-33.3333%);}}
/* the flat headline: the real h1, it takes over once you're level with the ring */
.sr-hero--ribbon .rg-flat{position:absolute;left:50%;top:50%;width:min(92vw,1200px);transform:translate(-50%,-50%);margin:0;
  font-size:clamp(46px,6.3vw,104px);opacity:var(--flat,0);filter:blur(calc((1 - var(--flat,0)) * 14px));pointer-events:none;}
.sr-hero--ribbon .sr-hero__in{position:static;}
.rb-ui{opacity:var(--ui,1);}
.sr-hero__pin>.sr-proof{justify-self:stretch;}   /* an abspos grid child shrinks to fit unless told */
.rb-ui--col{display:flex;flex-direction:column;align-items:center;gap:22px;}
.sr-hero--ribbon .sr-proof.rb-ui{opacity:calc(var(--ui,1) * var(--pin,1));}

/* ---- phones ---- */
@media (max-width:720px){
  .sr-hero--ring .rg-stage{--s:min(62vw,300px);}
  .sr-hero--ribbon .rg-stage{--s:min(58vw,300px);}
  .sr-hero--ring .sr-hero__title{font-size:clamp(36px,10vw,52px);}
  .sr-hero--ribbon{height:170svh;}
  /* the logos join the flow below the terms instead of floating over them */
  .sr-hero--ring{height:auto;min-height:100svh;padding:96px 0 44px;align-content:center;gap:36px;}
  .sr-hero__pin{align-content:center;gap:30px;padding-top:56px;}
  .sr-hero--ribbon .sr-hero__in{margin-top:0;gap:18px;}
  .rb-ui--col{align-self:stretch;gap:18px;}
  .sr-hero--ring>.sr-proof,.sr-hero__pin>.sr-proof{position:relative;bottom:auto;margin-top:0;}
}
@media (prefers-reduced-motion:reduce){
  .rg-tick,.hx-lw i{animation:none;}
}

/* ============ D · Hex ============
   Six walls round a lit hexagonal floor (the plane's shader in hex mode). Wall i sits at rotateY(i·60°), pushed out
   by the apothem --a; a hexagon's side equals its circumradius, so the wall width --w is also the floor's radius.
   The headline and the speedrun mark alternate round the ring. */
.sr-hero--hex{height:240svh;display:block;place-items:normal;overflow:visible;}
.sr-hero--hex .rg-stage{--a:min(30vw,440px,40svh);--w:calc(var(--a) * 1.1547);--h:calc(var(--w) * .44);--bleed:calc(var(--a) * .24);
  --f:calc(var(--w) * .078);position:relative;width:calc(var(--a) * 3);height:calc(var(--a) * 1.55 + var(--h));}
.rg--hex{--c0:var(--p-teal);--c1:var(--p-blue);--c2:var(--p-pink);--c3:var(--p-coral);--c4:var(--p-amber);--c5:var(--p-green);}
.rg--hex .rg-wall{left:calc(var(--w) / -2);top:calc(var(--h) / -2);width:var(--w);height:var(--h);
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--a));}
.rg--hex .rg-face{font-size:var(--f);line-height:.98;text-align:center;}
.rg--hex .rg-face>span{transform:translateY(.05em);}
.hx-logo{display:block;width:72%;height:auto;}
/* Built as thesis.co builds its ring (read from its rendered DOM, 2026-10-28): two identical rigs in one grid cell.
   Behind: the light ring, the same six walls carrying slow two-colour gradients at half strength, fading out toward
   the bottom, and the whole layer blurred. In front: the black text walls, no lines, no highlight. The glow round
   the outside and on the inner faces is only that blurred light spilling past the black walls. */
.rg--hex .rg-wall::before{display:none;}
.rg--hex .rg-face{box-shadow:none;}
.rg--hex>.rg-rig,.hx-light{grid-area:1 / 1;}
.hx-light{position:relative;width:100%;height:100%;display:grid;place-items:center;perspective:2600px;
  filter:blur(calc(var(--a) * .1));transform:translateZ(0);opacity:var(--glow,.8);}
.hx-lw:nth-child(1){--c:var(--p-teal);--d:var(--p-blue);}   .hx-lw:nth-child(2){--c:var(--p-blue);--d:var(--p-pink);}
.hx-lw:nth-child(3){--c:var(--p-pink);--d:var(--p-coral);}  .hx-lw:nth-child(4){--c:var(--p-coral);--d:var(--p-amber);}
.hx-lw:nth-child(5){--c:var(--p-amber);--d:var(--p-green);} .hx-lw:nth-child(6){--c:var(--p-green);--d:var(--p-teal);}
.hx-lw i{position:absolute;inset:0;opacity:.8;
  background:linear-gradient(100deg,var(--c) 0%,var(--c) 18%,#000 42%,#000 58%,var(--d) 82%,var(--d) 100%);background-size:260% 100%;
  -webkit-mask-image:linear-gradient(#000 0%,#000 80%,transparent 90%);mask-image:linear-gradient(#000 0%,#000 80%,transparent 90%);
  animation:hx-sweep 11s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -1.9s);}
@keyframes hx-sweep{from{background-position:0% 0;}to{background-position:100% 0;}}
/* the end: the real h1, where the front wall's type lands, then the button and the terms */
.hx-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  padding:0 var(--margin);text-align:center;pointer-events:none;}
.hx-flat{margin:0;opacity:var(--flat,0);}   /* no blur: it swaps in place for the wall's type */
.hx-end .sr-hero__cta,.hx-end .sr-hero__terms{opacity:var(--end,0);transform:translateY(calc((1 - var(--end,0)) * 14px));}
.sr-hero--hex.is-end .hx-end .sr-hero__cta{pointer-events:auto;}
.hx-ui{opacity:var(--ui,1);}
.hx-corner{position:absolute;left:var(--margin);top:28px;z-index:2;margin:0;font-size:15px;line-height:1.4;color:#fff;letter-spacing:.01em;}
.hx-corner span{color:var(--mute);}
.hx-hint{position:absolute;left:0;right:0;bottom:28px;margin:0;text-align:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);}
@media (max-width:720px){
  .sr-hero--hex{height:200svh;}
  .sr-hero--hex .rg-stage{--a:min(34vw,170px);--h:calc(var(--w) * .46);--f:calc(var(--w) * .088);}
  .hx-corner{top:20px;font-size:14px;}
  /* two lines, as on the wall, so the hand-over still lines up */
  .hx-flat{font-size:min(9.4vw,44px);max-width:none;white-space:nowrap;}
  .hx-end .sr-hero__cta{align-self:stretch;}
}

/* ============ E · Lock ============
   Four stacked octagonal rings (wall i at rotateY(i·45°), pushed out by the apothem --a) with a light inside: three
   soft discs of prism colour crossing at the axis, turning slowly. The walls are opaque, so the light only shows in the
   thin slits between the rings and down through the open top. Each ring carries words on all eight sides; only side 0
   (the key) is bright. At rest every ring sits at its own angle; scrolling locks them, key sides to the front. */
.sr-hero--lock{height:240svh;display:block;place-items:normal;overflow:visible;}
.ex-stage{--a:min(29vw,420px,38svh);--w:calc(var(--a) * .8284);--f:calc(var(--w) * .13);--bh:calc(var(--f) * .86);--pitch:var(--f);
  position:relative;width:calc(var(--a) * 2.6);height:calc(var(--a) * 1.2 + var(--pitch) * 4);}
.ex{position:absolute;inset:0;perspective:2600px;display:grid;place-items:center;pointer-events:none;}
.ex-rig{position:relative;width:0;height:0;transform-style:preserve-3d;will-change:transform;}
.ex-ring{position:absolute;left:0;top:0;transform-style:preserve-3d;}
.ex-wall{position:absolute;left:calc(var(--w) / -2);top:calc(var(--bh) / -2);width:var(--w);height:var(--bh);transform-style:preserve-3d;
  transform:rotateY(calc(var(--i) * 45deg)) translateZ(var(--a));}
.ex-face,.ex-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;}
.ex-back{transform:rotateY(180deg);background:#060606;}
.ex-face{font-family:'Tanker',sans-serif;font-weight:400;font-size:var(--f);line-height:1;text-transform:uppercase;white-space:nowrap;
  letter-spacing:.01em;color:rgba(255,255,255,var(--dimw,.24));}
.ex-face.is-key{color:#fff;}
.ex-face>span{transform:translateY(.05em);}
.ex-logo{display:block;height:64%;width:auto;opacity:var(--dimw,.28);}
.is-key .ex-logo{opacity:var(--logo,1);}
/* the light: the inside of every wall glows in its prism colour, brightest low down, over a soft pool on the floor */
.ex-wall:nth-child(8n+2){--c:var(--p-teal);} .ex-wall:nth-child(8n+3){--c:var(--p-blue);} .ex-wall:nth-child(8n+4){--c:var(--p-pink);}
.ex-wall:nth-child(8n+5){--c:var(--p-coral);} .ex-wall:nth-child(8n+6){--c:var(--p-amber);} .ex-wall:nth-child(8n+7){--c:var(--p-green);}
.ex-wall:nth-child(8n+8){--c:var(--p-blue);} .ex-wall:nth-child(8n+1){--c:var(--p-pink);}
.ex-back{background:linear-gradient(0deg,color-mix(in srgb,var(--c) calc(var(--glow,1) * 26%),#000) 0%,#000 75%);}
.ex-pool{position:absolute;left:calc(var(--a) * -1);top:calc(var(--a) * -1);width:calc(var(--a) * 2);height:calc(var(--a) * 2);border-radius:50%;
  transform:translateY(calc(var(--pitch) * 2)) rotateX(90deg);filter:blur(calc(var(--a) * .06));opacity:calc(var(--glow,1) * .9);
  background:radial-gradient(closest-side,rgba(255,255,255,.0) 0%,transparent 30%,rgba(0,0,0,0) 31%),
    conic-gradient(from 20deg,var(--p-teal),var(--p-blue),var(--p-pink),var(--p-coral),var(--p-amber),var(--p-green),var(--p-teal));
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 55%,transparent 100%);}
.ex-bloom{position:absolute;left:50%;top:50%;width:min(86vw,1200px);height:min(52vw,640px);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(102,148,250,.13),rgba(222,106,168,.05) 55%,transparent);opacity:var(--glow,1);}
.ex-flat{margin:0;line-height:1;opacity:var(--flat,0);filter:blur(calc((1 - var(--flat,0)) * 14px));}
.sr-hero--lock .hx-end .sr-hero__cta,.sr-hero--lock .hx-end .sr-hero__terms{opacity:var(--end,0);transform:translateY(calc((1 - var(--end,0)) * 14px));}
.sr-hero--lock.is-end .hx-end .sr-hero__cta{pointer-events:auto;}
@media (max-width:720px){
  .sr-hero--lock{height:200svh;}
  .ex-stage{--a:min(38vw,180px);}
  .ex-flat{font-size:min(11vw,48px);}
}

/* ============ F · Hex, white ============
   D's build on a white page: white walls with black type, and the same blurred light ring behind. On white the
   blurred prism light reads as a coloured aura round the walls instead of a glow out of the dark. */
.sr-hero--white{background:#fff;color:#000;}
.sr-hero--white .rg--hex .rg-face{background:#fff;color:#000;}
.sr-hero--white .rg--hex .rg-in{background:#f2f2f2;}   /* the inner faces a step darker, so the walls keep their form on white */
.sr-hero--white .hx-logo{filter:invert(1);}
.sr-hero--white .hx-light{opacity:calc(var(--glow,.8) * 1.15);}
.sr-hero--white .hx-lw i{opacity:.95;
  background:linear-gradient(100deg,var(--c) 0%,var(--c) 22%,#fff 46%,#fff 54%,var(--d) 78%,var(--d) 100%);background-size:260% 100%;}
.sr-hero--white .hx-corner{color:#000;} .sr-hero--white .hx-corner span{color:rgba(0,0,0,.55);}
.sr-hero--white .hx-hint{color:rgba(0,0,0,.45);}
.sr-hero--white .hx-flat{color:#000;}
.sr-hero--white .sr-hero__terms{color:rgba(0,0,0,.6);} .sr-hero--white .sr-hero__terms i{color:rgba(0,0,0,.35);}
@media (max-width:720px){ .lab-pick{flex-wrap:wrap;max-width:calc(100vw - 32px);border-radius:18px;} .lab-pick a{padding:6px 9px;} }

/* ---- D, E, F: Apple-style light (Markiian, 2026-10-28: "more bright colors") ----
   The light in these heroes uses Apple's vivid system colours instead of speedrun's six prism colours: blue, purple,
   pink, orange, yellow, and cyan (the dark-mode values, which stay bright under blur). The --p-* names are kept, so
   the rules above pick them up; only inside these three heroes. */
.sr-hero--hex,.sr-hero--lock{--p-teal:#64D2FF;--p-blue:#0A84FF;--p-pink:#BF5AF2;--p-coral:#FF375F;--p-amber:#FF9F0A;--p-green:#FFD60A;}
.hx-lw i{opacity:1;background:linear-gradient(100deg,var(--c) 0%,var(--c) 26%,#000 46%,#000 54%,var(--d) 74%,var(--d) 100%);background-size:240% 100%;}
.hx-light{filter:blur(calc(var(--a) * .1)) saturate(1.25);}
.ex-back{background:linear-gradient(0deg,color-mix(in srgb,var(--c) calc(var(--glow,1) * 42%),#000) 0%,#000 75%);}
.ex-pool{opacity:var(--glow,1);filter:blur(calc(var(--a) * .06)) saturate(1.3);}
.ex-bloom{background:radial-gradient(closest-side,rgba(10,132,255,.18),rgba(191,90,242,.08) 55%,transparent);}
.sr-hero--white .hx-lw i{background:linear-gradient(100deg,var(--c) 0%,var(--c) 28%,#fff 48%,#fff 52%,var(--d) 72%,var(--d) 100%);background-size:240% 100%;}

/* ============ G · Square ============
   D's build with four walls (rotateY(i·90°), pushed out by half the side --a): same black walls, same blurred light
   ring behind, same type. Only the plan changes, hexagon to square, and it rests corner-on. */
.sr-hero--cube .rg-stage{--a:min(21vw,300px,27svh);--w:calc(var(--a) * 2);--h:calc(var(--w) * .44);--f:calc(var(--w) * .078);
  width:calc(var(--a) * 3.4);height:calc(var(--a) * 1.9 + var(--h));}
.rg--cube .rg-wall{transform:rotateY(calc(var(--i) * 90deg)) translateZ(var(--a));}
@media (max-width:720px){
  .sr-hero--cube .rg-stage{--a:min(30vw,150px);--h:calc(var(--w) * .46);--f:calc(var(--w) * .088);}
}

/* D, F, G: the far walls read mirrored, as on thesis — one face per wall, seen from behind through the open top
   (Markiian, 2026-10-28). The inner faces that kept every wall readable are switched off. */
.rg--hex .rg-in{display:none;}
.rg--hex .rg-out{-webkit-backface-visibility:visible;backface-visibility:visible;}

/* ---- D, F, G after thesis.co, round 2 (2026-10-28) ----
   Seams: the walls overlap by a hair at the corners, so nothing behind shows through the joints near eye level.
   Side walls: they fade on the way in (a hexagon's side walls never go edge-on as a square's do).
   Colour: thesis's light films (/gradients/A–D.mp4, 1080², 17.3 s loops) are full colour fields whose hue keeps
   travelling round the wheel — cyan to yellow, orange to blue, green to magenta — in large curved or diagonal bands
   that drift. So each light wall's two colours now cycle through the palette (registered colour properties,
   animated), out of step wall to wall, and the band angle drifts with them. */
.rg--hex>.rg-rig>.rg-wall{left:calc(var(--w) * -.507);width:calc(var(--w) * 1.014);}
.rg--hex>.rg-rig>.rg-wall:not(.is-front) .rg-face{opacity:var(--side,1);}
@property --lc{syntax:'<color>';inherits:false;initial-value:#0A84FF;}
@property --ld{syntax:'<color>';inherits:false;initial-value:#FF375F;}
@property --la{syntax:'<angle>';inherits:false;initial-value:100deg;}
.hx-lw i,.sr-hero--white .hx-lw i{opacity:1;background:linear-gradient(var(--la),var(--lc) 0%,var(--lc) 18%,var(--ld) 82%,var(--ld) 100%);background-size:100% 100%;
  animation:hx-hue 17.3s linear infinite,hx-band 23s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -2.9s),calc(var(--i) * -3.7s);}
@keyframes hx-hue{
  0%{--lc:#64D2FF;--ld:#FFD60A;} 16.6%{--lc:#FF9F0A;--ld:#0A84FF;} 33.3%{--lc:#30D158;--ld:#BF5AF2;}
  50%{--lc:#FF375F;--ld:#64D2FF;} 66.6%{--lc:#BF5AF2;--ld:#FF9F0A;} 83.3%{--lc:#0A84FF;--ld:#30D158;} 100%{--lc:#64D2FF;--ld:#FFD60A;}}
@keyframes hx-band{from{--la:70deg;}to{--la:160deg;}}
@media (prefers-reduced-motion:reduce){ .hx-lw i,.sr-hero--white .hx-lw i{animation:none;} }
/* the pin ends soon after the hand-over, not a long hold on a still headline */
.sr-hero--hex{height:200svh;}
.rg--hex>.hx-light .hx-lw:not(.is-front){opacity:var(--side,1);}
/* the type slides along the walls as you scroll, as on thesis: three copies one wall apart, the track moved
   two walls across by the hand-over, so a fresh copy lands centred on the front wall (--mx 0 → 2, set per frame) */
.hx-track{position:absolute;inset:0;transform:translateX(calc(var(--mx,0) * 100%));will-change:transform;}
.hx-copy{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.hx-c2{left:-100%;} .hx-c3{left:-200%;}
.hx-copy>span{transform:translateY(.05em);}
/* thesis-timed (round 3): the h1 is the wall's own type at the end, so the real h1 is kept for readers and search
   but out of sight; the pin is three screens and a bit, as theirs; the third copy carries the larger type */
.hx-flat{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:1;}
.sr-hero--hex{height:330svh;}
.rg--hex{--f:calc(var(--w) * .05);}
.sr-hero--hex .rg-stage{--f:calc(var(--w) * .05);}
.hx-c3{font-size:1.6em;opacity:var(--c3o,0);}
.hx-c3>span{transform:translateY(.05em) scale(var(--c3s,.75));}
.hx-c3 .hx-logo{width:72%;}
.rg--hex .hx-copy:not(.hx-c3) .hx-logo{width:52%;}
.rg--hex .hx-c3 .hx-logo{width:60%;transform:scale(var(--c3s,.75));}
/* the arriving copy fills the front wall, as thesis's 5rem copy fills theirs: three lines, about an eighth of the wall */
.hx-c3{font-size:calc(var(--w) * .122);line-height:.98;}
/* (the face's `> span` nudge was winning over the track's transform; this one is the track's) */
.rg--hex .rg-face>.hx-track{transform:translateX(calc(var(--mx,0) * 100%));}
/* one ribbon round the ring: wall i's second copy (one wall to the left) carries wall i−1's content, so what slides
   off one wall carries on, unbroken, onto the next, the way thesis's single repeated line does */
/* walls never turn see-through (thesis: the walls stay solid, the side ones only go edge-on). The faces stay opaque
   and hide whatever is behind them; only the type on the side walls fades. The arriving copy fits inside its wall. */
.rg--hex>.rg-rig>.rg-wall:not(.is-front) .rg-face{opacity:1;}
.rg--hex>.rg-rig>.rg-wall:not(.is-front) .hx-track{opacity:var(--side,1);}
.hx-c3{font-size:calc(var(--w) * .1);}
/* the passing copies fade together on every wall, the front one included, so a word never changes tone at a corner;
   what's left at eye level is the arriving headline alone */
.rg--hex>.rg-rig>.rg-wall.is-front .hx-copy:not(.hx-c3){opacity:var(--side,1);}
/* the arriving copy is the wall's own two rows (the camera closes in instead of the type growing) */
.hx-c3{font-size:1em;line-height:inherit;}
.hx-c3 .hx-logo{width:72%;}
/* the camera closes in ~4×: without a standing layer hint the browser re-draws the type at its new size, crisp */
.rg--hex .rg-rig,.rg--hex .hx-track{will-change:auto;}
/* one size, solid: every copy the same type at full strength, nothing fades */
.hx-c3{opacity:1;} .hx-c3>span,.rg--hex .hx-c3 .hx-logo{transform:none;}
.rg--hex>.rg-rig>.rg-wall .hx-track,.rg--hex>.rg-rig>.rg-wall.is-front .hx-copy:not(.hx-c3){opacity:1;}
.rg--hex>.hx-light .hx-lw:not(.is-front){opacity:1;}
/* the walls overlap a hair at the corners (no gaps); each wall's type stops at its own edge, so nothing doubles there */
.rg--hex>.rg-rig>.rg-wall .hx-copy{clip-path:none;}
.rg--hex>.rg-rig>.rg-wall>.rg-face>.hx-track{left:.7%;right:.7%;overflow:visible;}
.rg--hex>.rg-rig>.rg-wall>.rg-face{clip-path:inset(0 .7%);}