/* --fade is registered so it can transition while --p (scroll) follows the finger at once */
@property --fade { syntax: "<number>"; inherits: false; initial-value: 1; }
/* Desktop hero, only from 1024px: reels as stories, the active one in the middle. Phones keep the full screen reel */
@media (min-width: 1024px), (pointer: coarse) and (min-width: 761px) and (min-height: 600px) {
  html[data-hero] .hero { background: #0D0D0D; }
  html[data-hero] .hero-reel { position: absolute; inset: 0; z-index: 0; }
  html[data-hero] .reel-card, html[data-hero] .hero .corners > :nth-child(2) { display: none; }
  html[data-hero] .hero .rc-tag { position: absolute; display: flex; }
  html[data-hero] .hero .mega { font-size: clamp(56px, 7vw, 130px); }
  html[data-hero] .hero .mega, html[data-hero] .hero-foot, html[data-hero] .hero .corners { z-index: 20; }
  /* the role line sits beside the logo pill, centred on its height (pill: 54px tall, 108px wide) */
  html[data-hero] .hero .corners { position: absolute; top: var(--top); left: calc(var(--gutter) + 128px); height: 54px; display: flex; align-items: center; }

  .hd-sto { --p: 0; --h: min(72svh, 760px); --w: calc(var(--h) * 9 / 16); position: absolute; inset: 0; overflow: hidden; }
  /* blurred at a quarter of the size and scaled up: the same softness for far less work than a full screen blur */
  .hd-sto-bg { position: absolute; left: 50%; top: 50%; width: 32%; height: 32%; object-fit: cover; transform: translate(-50%, -50%) scale(3.6); filter: blur(18px) saturate(1.4) brightness(.55); opacity: 0; transition: opacity 1200ms cubic-bezier(.4,0,.2,1); }
  .hd-sto-bg.on { opacity: calc(1 - var(--p) * .7); }
  .hd-card { position: absolute; left: 50%; top: calc(50% + 28px); width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: #111; cursor: pointer; pointer-events: auto; corner-shape: superellipse(1.6);
    transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--s, 1));
    /* scroll moves these at once, without the slide transition */
    translate: calc(var(--dir, 0) * var(--p) * 18vw) calc(var(--p) * var(--a, 0) * 8vh);
    rotate: calc(var(--dir, 0) * var(--p) * 9deg);
    --fade: 1; opacity: var(--fade);
    transition: transform 700ms cubic-bezier(.32,.72,0,1), --fade 600ms cubic-bezier(.4,0,.2,1); box-shadow: 0 30px 90px rgb(0 0 0 / .4); }
  .hd-card:not(.on) { opacity: calc(var(--fade) * (1 - var(--p) * 1.3)); }
  .hd-card.on { translate: 0 calc(var(--p) * -6vh); scale: calc(1 + var(--p) * .16); }
  .hd-card.far { --fade: 0; pointer-events: none; }
  .hd-card > img, .hd-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hd-card > video { z-index: 1; }
  .hd-card:not(.on)::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgb(13 13 13 / .35); transition: background 300ms; }
  .hd-card:not(.on):hover::after { background: rgb(13 13 13 / .1); }
  .hd-card .rc-tag { left: 12px; right: 12px; bottom: 12px; max-width: none; z-index: 3; transition: opacity 300ms; }
  .hd-card:not(.on) .rc-tag, .hd-card:not(.on) .hd-bar { opacity: 0; }
  .hd-bar { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .35); overflow: hidden; }
  .hd-bar b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce), (pointer: coarse) and (min-width: 761px) and (min-height: 600px) and (prefers-reduced-motion: reduce) { .hd-card { transition: none; } }
/* bottom corners: the name on the left, the button on the right, the scroll cue small in the middle under the reel */
@media (min-width: 1024px), (pointer: coarse) and (min-width: 761px) and (min-height: 600px) {
  html[data-hero] .hero-ui { grid-template-rows: 1fr auto; }
  html[data-hero] .hero .mega { grid-row: 2; align-self: end; margin: 0; }
  html[data-hero] .hero-foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(28px, env(safe-area-inset-bottom)); height: 0; margin: 0; display: block; }
  html[data-hero] .hero-foot > div { position: absolute; right: 0; bottom: 0; }
  html[data-hero] .hero .cue { position: absolute; left: 50%; bottom: 0; translate: -50% 0; opacity: .5; transition: opacity 300ms; }
  html[data-hero] .hero .cue:hover { opacity: 1; }
}

/* portrait tablets: a shorter row placed higher, so the name and buttons keep the bottom of the screen */
@media (pointer: coarse) and (min-width: 761px) and (min-height: 600px) and (orientation: portrait) {
  .hd-sto { --h: min(54svh, 680px); }
  .hd-card { top: calc(42% + 28px); }
  html[data-hero] .hero .mega { font-size: clamp(56px, 11vw, 130px); }
}