/* Prime - hub.css
   Prime Hub (hub.html): the door to the Dashboard, Prime Gaming and Prime
   Video, drawn as three loading bays of a depot at night. Each bay is a real
   link. Its roller shutter lifts on hover or focus, and on a touch screen as it
   scrolls into view, to show what is behind it: the fund's real figures, the
   games' own art, the Video shelf's still. Loaded after main.css, which gives
   the header, the footer and the tokens. */

body.hub-page { background:#060914; }

.hub {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100svh - var(--stick-h));
  padding:48px var(--gx) 64px;
  background:#060914; color:#fff;
}

/* ---------- the stage: a depot floor running toward you, and the yard light ---------- */
.hub-stage { position:absolute; inset:0; z-index:-1; perspective:520px; pointer-events:none; }
.hub-floor {
  position:absolute; left:-60%; right:-60%; bottom:-6%; height:64%;
  transform-origin:50% 100%; transform:rotateX(66deg);
  background-image:
    linear-gradient(rgba(61,125,255,.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,125,255,.2) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 40%, transparent 92%);
          mask-image:linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 40%, transparent 92%);
}
.hub-glow {
  position:absolute; inset:0;
  background:
    radial-gradient(50% 40% at 50% 34%, rgba(0,82,255,.28), transparent 70%),
    radial-gradient(30% 30% at 12% 90%, rgba(0,168,225,.12), transparent 70%),
    radial-gradient(30% 30% at 88% 90%, rgba(255,216,20,.07), transparent 70%);
}

.hub-in { max-width:1180px; margin:0 auto; }

.hub-head { text-align:center; }
.hub-title {
  font-size:clamp(44px, 7.2vw, 92px); font-weight:800; letter-spacing:-.035em; line-height:.95;
  background:linear-gradient(180deg, #fff 30%, #9DB8FF 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- the dock ---------- */
.dock {
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:32px;
  margin-top:48px;
}

.bay {
  --lift:-4%;
  --rx:0deg; --ry:0deg; --gx:50%; --gy:30%;
  position:relative; display:flex; flex-direction:column;
  color:#fff; text-decoration:none; border-radius:16px;
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform 450ms var(--ease);
}
.bay, .bay:hover { color:#fff; text-decoration:none; }
.bay:focus-visible { outline:3px solid var(--bay-hi); outline-offset:8px; }

/* the lamp over the bay, and its cone of light down the door */
.bay-lamp {
  display:block; width:58%; height:6px; margin:0 auto 14px; border-radius:6px;
  background:#1E2740; transition:background 260ms, box-shadow 260ms;
}
.bay-lamp::after {
  content:""; position:absolute; left:8%; right:8%; top:6px; height:60%;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bay) 30%, transparent), transparent 80%);
  clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  opacity:0; transition:opacity 400ms; pointer-events:none; z-index:2;
}

/* the opening: a frame of steel around whatever is inside */
.bay-door {
  position:relative; display:block; aspect-ratio:4 / 5; overflow:hidden; border-radius:16px;
  background:#0B1222;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 0 7px #121A2E, 0 0 0 8px rgba(255,255,255,.06), 0 30px 60px rgba(0,0,0,.55);
}
/* glare that follows the pointer */
.bay-door::after {
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(42% 32% at var(--gx) var(--gy), rgba(255,255,255,.16), transparent 70%);
  opacity:0; transition:opacity 300ms;
}

.bay-room { position:absolute; inset:0; display:block; }

/* The roller shutter, like the back of a delivery van: corrugated slats, a
   bottom rail and a handle, rolling up into the housing across the top.
   Closing is the resting transition: a heavier drop that settles on the
   floor. Opening (below) has its own curve: a small tug down on the handle,
   then the roll up, slowing as it winds in. */
.bay-shutter {
  position:absolute; inset:0; z-index:2; display:block;
  transform:translateY(var(--lift));
  transition:transform 820ms cubic-bezier(.45, 0, .2, 1.18);
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 18%, transparent 82%, rgba(0,0,0,.45)),
    linear-gradient(0deg, transparent 88%, rgba(0,0,0,.35)),
    repeating-linear-gradient(180deg, #303A55 0 2px, #252E46 2px 13px, #1A2135 13px 16px, #3A4562 16px 17px);
  border-bottom:12px solid #3B4663;
  box-shadow:0 10px 18px rgba(0,0,0,.5);
}
.bay-no {
  position:absolute; left:18px; bottom:20px;
  font:800 64px/1 var(--mono); letter-spacing:-.04em; color:rgba(255,255,255,.07);
}
.bay-handle {
  position:absolute; left:50%; bottom:-8px; width:64px; height:5px; margin-left:-32px;
  border-radius:3px; background:#8E9AB8;
}

/* the housing the shutter winds into: a drum with a lip, always in front */
.bay-door::before {
  content:""; position:absolute; left:0; right:0; top:0; height:18px; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, #0D1324 0%, #4A5677 34%, #2A3350 62%, #121A2E 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.55);
}

/* under the shutter, the bay's own light leaks out of the gap */
.bay-room::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:22%; z-index:1; pointer-events:none;
  /* solid at the very bottom, so the gap shows light and not half a line of text */
  background:linear-gradient(0deg, color-mix(in srgb, var(--bay) 55%, #060914) 0 11%, color-mix(in srgb, var(--bay) 30%, transparent) 11%, transparent);
  transition:opacity 400ms;
}

/* open: hover, keyboard focus, a touch screen's scroll, the intro's peek */
.bay.is-peek { --lift:-34%; }
.bay.is-open, .bay:focus-visible { --lift:-102%; }
@media (hover:hover) { .bay:hover { --lift:-102%; } }
.bay.is-peek .bay-shutter, .bay.is-open .bay-shutter, .bay:focus-visible .bay-shutter {
  transition:transform 1050ms cubic-bezier(.55, -0.12, .3, 1);
}
@media (hover:hover) { .bay:hover .bay-shutter { transition:transform 1050ms cubic-bezier(.55, -0.12, .3, 1); } }
.bay.is-open .bay-lamp, .bay:focus-visible .bay-lamp { background:var(--bay); box-shadow:0 0 18px var(--bay), 0 0 42px color-mix(in srgb, var(--bay) 60%, transparent); }
.bay.is-open .bay-lamp::after, .bay:focus-visible .bay-lamp::after { opacity:1; }
.bay.is-open .bay-room::after, .bay:focus-visible .bay-room::after { opacity:0; }
@media (hover:hover) {
  .bay:hover .bay-lamp { background:var(--bay); box-shadow:0 0 18px var(--bay), 0 0 42px color-mix(in srgb, var(--bay) 60%, transparent); }
  .bay:hover .bay-lamp::after, .bay:hover .bay-door::after { opacity:1; }
  .bay:hover .bay-room::after { opacity:0; }
  .bay:hover .bay-go svg { transform:translateX(4px); }
}

/* the words under the door */
.bay-copy { display:flex; flex-direction:column; gap:8px; padding:24px 4px 0; }
.bay-name { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.bay-sub { font-size:var(--t-plus); line-height:1.5; color:rgba(255,255,255,.7); }
.bay-go { display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-weight:700; color:var(--bay-hi); }
.bay-go svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform 260ms var(--ease); }

.bay[data-bay="dash"]  { --bay-hi:#7FA8FF; }
.bay[data-bay="games"] { --bay-hi:#FFD814; }
.bay[data-bay="video"] { --bay-hi:#5ED3FF; }

/* ---------- behind door 01: the fund, in real figures ---------- */
.bay-room-dash {
  background:
    radial-gradient(90% 60% at 50% 110%, rgba(0,82,255,.55), transparent 70%),
    linear-gradient(180deg, #0A1430, #071022);
}
.dash-fig { position:absolute; left:24px; right:24px; top:24px; display:flex; flex-direction:column; gap:4px; }
.dash-fig b { font-size:clamp(32px, 3.6vw, 46px); font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.dash-fig small, .dash-row small { font-size:var(--t-sm); color:rgba(255,255,255,.7); }
.dash-chart { position:absolute; left:0; right:0; bottom:84px; width:100%; height:46%; overflow:visible; }
.dash-area { fill:url(#dash-fill); opacity:0; transition:opacity 900ms 300ms; }
.dash-line {
  fill:none; stroke:#8DB2FF; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1500ms var(--ease) 150ms;
  filter:drop-shadow(0 0 6px rgba(61,125,255,.8));
}
.dash-row {
  position:absolute; left:24px; right:24px; bottom:22px; display:grid; grid-template-columns:1fr 1fr; gap:16px;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.12);
}
.dash-row > span { display:flex; flex-direction:column; gap:2px; }
.dash-row b { font-size:20px; font-weight:800; font-variant-numeric:tabular-nums; }
.bay.is-open .dash-line, .bay:focus-visible .dash-line { stroke-dashoffset:0; }
.bay.is-open .dash-area, .bay:focus-visible .dash-area { opacity:1; }
@media (hover:hover) {
  .bay:hover .dash-line { stroke-dashoffset:0; }
  .bay:hover .dash-area { opacity:1; }
}

/* ---------- behind door 02: the games, one cover after another ---------- */
.bay-room-games { background:#05070F; }
.games-reel { position:absolute; inset:0; display:block; }
.games-reel img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.12); transition:opacity 700ms, transform 3200ms linear;
}
.games-reel img.is-on { opacity:1; transform:scale(1); }
.bay-room-games::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,7,15,.1) 50%, rgba(5,7,15,.85));
}
.games-tag {
  position:absolute; left:20px; bottom:22px; z-index:2;
  padding:7px 14px; border-radius:var(--r-pill);
  background:#FFD814; color:var(--ink); font-size:var(--t-plus); font-weight:800;
}

/* ---------- behind door 03: Video, honestly still on its way ---------- */
.bay-room-video { background:#06101A; }
.bay-room-video img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 2400ms var(--ease); }
.bay-room-video::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,16,26,.15), rgba(6,16,26,.8));
}
.video-play {
  position:absolute; left:50%; top:46%; z-index:2; width:76px; height:76px; margin:-38px 0 0 -38px;
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.14); border:2px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.video-play svg { width:24px; height:28px; margin-left:5px; fill:#fff; }
.video-soon {
  position:absolute; left:20px; bottom:22px; z-index:2;
  padding:7px 14px; border-radius:var(--r-pill);
  background:#00A8E1; color:#04121C; font-size:var(--t-plus); font-weight:800;
}
.bay.is-open .bay-room-video img, .bay:focus-visible .bay-room-video img { transform:scale(1); }
@media (hover:hover) { .bay:hover .bay-room-video img { transform:scale(1); } }

/* ---------- the way through: a sweep in the bay's colour, then the depot's dark ---------- */
.hub-wipe {
  position:fixed; inset:0; z-index:200; pointer-events:none;
  clip-path:circle(0 at var(--wx, 50%) var(--wy, 50%));
}
.hub-wipe-a { background:var(--wipe, #0052FF); transition:clip-path 560ms var(--ease); }
.hub-wipe-b { background:#060914; transition:clip-path 600ms var(--ease) 260ms; }
.hub-wipe.is-on { clip-path:circle(150% at var(--wx, 50%) var(--wy, 50%)); }

/* ---------- arrival ---------- */
@media (prefers-reduced-motion:no-preference) {
  .hub-floor { animation:hub-floor 5s linear infinite; }
  @keyframes hub-floor { to { background-position:0 64px, 0 0; } }

  .hub-title { animation:hub-rise 900ms var(--ease) both; }
  .bay { animation:hub-rise 900ms var(--ease) both; }
  .bay:nth-child(1) { animation-delay:180ms; }
  .bay:nth-child(2) { animation-delay:300ms; }
  .bay:nth-child(3) { animation-delay:420ms; }
  @keyframes hub-rise { from { opacity:0; translate:0 28px; } }

  /* the shutters come down as the bays arrive, and the lamps blink on */
  /* backwards, not both: an animation that keeps filling after it ends owns
     the transform, and the shutter would jump instead of rolling */
  .bay-shutter { animation:hub-drop 1100ms var(--ease) backwards; }
  .bay:nth-child(1) .bay-shutter { animation-delay:380ms; }
  .bay:nth-child(2) .bay-shutter { animation-delay:500ms; }
  .bay:nth-child(3) .bay-shutter { animation-delay:620ms; }
  @keyframes hub-drop { from { transform:translateY(-102%); } }

  .video-play::after {
    content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(255,255,255,.6);
    animation:hub-ping 2s var(--ease) infinite;
  }
  @keyframes hub-ping { to { transform:scale(1.6); opacity:0; } }
}

/* Reduced motion: nothing moves, so nothing hides. The shutters stay up and
   every bay shows what is behind it from the start. */
@media (prefers-reduced-motion:reduce) {
  .bay { --lift:-102%; transform:none; transition:none; }
  .bay-shutter, .bay-shutter * , .bay-room *, .bay-copy * { transition:none !important; }
  .dash-line { stroke-dashoffset:0; }
  .dash-area { opacity:1; }
  .bay-lamp { background:var(--bay); }
}

/* ---------- smaller screens ---------- */
@media (max-width:1023px) {
  .dock { gap:20px; }
  .bay-name { font-size:20px; }
  .dash-row b { font-size:17px; }
}
@media (max-width:759px) {
  .hub { padding-top:32px; padding-bottom:48px; }
  .dock { grid-template-columns:1fr; gap:40px; max-width:520px; margin:32px auto 0; }
  .bay-door { aspect-ratio:3 / 2; }
  .dash-chart { height:38%; bottom:76px; }
  .dash-fig { top:20px; left:20px; right:20px; }
  .dash-row { left:20px; right:20px; bottom:18px; }
  .bay-no { font-size:48px; }
}