/* Hydroform, inside the Elbe Labs frame, dressed as the game's own menus.
   The hero is the title screen, rebuilt from the game's files (art/horizon/*.svg and the
   flat mark art/title.svg, its letters bobbing in the sea as the finished 3D title does).
   Below it the page is a menu sheet: the game's checker floor (art/floor.svg), chrome
   italic labels in Exo 2 Black Italic, the selected row in red on the water bar with its
   crest (art/ui/wave.svg), steel plates with bezels and rivets (art/ui/rivet.svg, grain.svg),
   chrome readouts, and steel keycaps. Every colour is one of the game's tokens. */

@font-face { font-family: "Exo 2"; font-style: italic; font-weight: 900; font-display: swap; src: url("../fonts/exo2-black-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "Bungee"; font-weight: 400; font-display: swap; src: url("../fonts/bungee-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500.woff2") format("woff2"); }

.hf {
  --navy: #0d2130; --navy-shade: #06121b; --navy-lit: #1d3c4e; --deep: #0846ad;
  --water: #3fa9ff; --ice: #d4f1ff; --ink-light: #eaf6ff; --key-light: #fff2dc;
  --yellow: #ffd23f; --sun: #ff9f4a; --raise: #ff3b3b; --outline: #071219; --dim: #8fb6cb;
  --accent: #ffb547; --lamp: #ff8c1a;
  --chrome-hi: #ffffff; --chrome: #dff0ff; --chrome-lo: #8cc4e6;
  --bezel-hi: #8fb8ca; --bezel: #2b4959; --steel-cap: #33566a; --steel-hi: #16303e;
  --steel: #1b3646; --steel-lo: #0a1a24; --steel-well: #05131b;
  --cut-in: 10px;
  --display: "Exo 2", "Bungee", "Arial Black", sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", "Manrope", system-ui, sans-serif;
  color: var(--ink-light);
  font: 400 18px/1.6 var(--body);
  /* the menu sheet: the game's floor tile, dimmed to the menu's light */
  background:
    linear-gradient(rgba(8, 15, 24, 0.58), rgba(8, 15, 24, 0.58)),
    url("../img/hydroform/art/floor.svg") 0 0 / 480px 480px,
    #3d5266;
}
.hf a { color: var(--water); }
.hf a:hover { color: #fff; }
.hf ::selection { background: rgba(63, 169, 255, 0.45); }

/* ---------------------------------------------------------------- the title, as a hero */

.hf-hero {
  --hz: 50%;
  --sun-x: 24%;
  --sun-y: 76%;
  --sun-r: clamp(52px, 10vmin, 118px);
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(540px, 84vh, 820px);
  background: linear-gradient(to bottom, #112045 0%, #1b2a6b 27%, #27539a var(--hz), #16406f var(--hz), #0d2130 80%, #0b1a28 100%);
}
.hf-hero .sun { position: absolute; left: 0; right: 0; top: 0; height: var(--hz); overflow: hidden;
  background: radial-gradient(circle at var(--sun-x) var(--sun-y), rgba(246, 226, 236, 0.42) 0, rgba(246, 226, 236, 0.1) 35vmin, transparent 70vmin); }
.hf-hero .rays { position: absolute; left: var(--sun-x); top: var(--sun-y); width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax;
  background: url("../img/hydroform/art/horizon/rays.svg") center / 100% 100% no-repeat; animation: hf-spin 240s linear infinite; }
.hf-hero .disc { position: absolute; left: var(--sun-x); top: var(--sun-y); width: calc(2 * var(--sun-r)); height: calc(2 * var(--sun-r));
  margin: calc(-1 * var(--sun-r)) 0 0 calc(-1 * var(--sun-r)); border-radius: 50%;
  background: radial-gradient(circle, var(--key-light) 0, var(--yellow) 55%, var(--sun) 100%); }
.hf-hero .clouds, .hf-hero .far, .hf-hero .near { position: absolute; left: 0; right: 0; background-repeat: repeat-x; background-size: auto 100%; }
.hf-hero .clouds { top: 0; height: var(--hz); background-image: url("../img/hydroform/art/horizon/clouds.svg"); background-position: left top; animation: hf-drift 420s linear infinite; }
.hf-hero .far { top: calc(var(--hz) - 22%); height: 22%; background-image: url("../img/hydroform/art/horizon/far.svg"); background-position: left bottom; }
.hf-hero .near { top: calc(var(--hz) - 9%); height: 18%; background-image: url("../img/hydroform/art/horizon/near.svg"); background-position: 30% bottom; }
.hf-hero .shafts { position: absolute; top: var(--hz); bottom: 0; left: calc(var(--sun-x) - 38%); width: 76%;
  background: url("../img/hydroform/art/horizon/shafts.svg") center top / 100% 100% no-repeat; opacity: 0.8; }

/* The mark stands in the sea. Each letter is drawn twice, dyed deep below a fixed waterline and
   ice above it, and the two copies bob together, so a letter dips and rises through the water
   as it does on the finished title. */
.hf-hero h1 { margin: 0; }
.hf-mark { position: absolute; left: 50%; top: var(--hz); z-index: 2; width: min(88vw, 1060px); height: auto; transform: translate(-50%, -50%); overflow: visible; }
.hf-mark--tall { display: none; }
.hf-mark .bob { transform-box: fill-box; transform-origin: 50% 50%; animation: hf-bob 3.8s ease-in-out infinite; }
.hf-mark .b1 { translate: 0 70px; animation-delay: -0.3s; }
.hf-mark .b2 { translate: 0 -95px; animation-delay: -1.9s; animation-duration: 4.1s; }
.hf-mark .b3 { translate: 0 25px; animation-delay: -1.1s; animation-duration: 3.6s; }
.hf-mark .b4 { translate: 0 -30px; animation-delay: -2.7s; }
.hf-mark .b5 { translate: 0 10px; animation-delay: -0.8s; animation-duration: 4.3s; }
.hf-mark .b6 { translate: 0 -20px; animation-delay: -3.1s; animation-duration: 3.5s; }
.hf-mark .b7 { translate: 0 -75px; animation-delay: -1.4s; animation-duration: 4s; }
.hf-mark .b8 { translate: 0 -60px; animation-delay: -2.2s; animation-duration: 3.7s; }
.hf-mark .b9 { translate: 0 120px; animation-delay: -0.1s; animation-duration: 4.4s; }
@keyframes hf-bob {
  0%, 100% { transform: translateY(-38px) rotate(-2.2deg); }
  50% { transform: translateY(38px) rotate(2.2deg); }
}
.hf-hero__water { position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; z-index: 3;
  background: linear-gradient(to bottom, rgba(8, 70, 173, 0.5) 0%, rgba(8, 70, 173, 0.5) 45%, rgba(8, 70, 173, 0) 100%); }
.hf-hero__foam { position: absolute; left: 0; right: 0; top: var(--hz); z-index: 4; height: 5px; margin-top: -2px; background: var(--ice); box-shadow: 0 0 12px rgba(212, 241, 255, 0.55); }
.hf-hero__below { position: absolute; left: 0; right: 0; bottom: clamp(36px, 7vh, 72px); z-index: 5; padding: 0 var(--el-gutter); text-align: center; }
.hf-hero__tag {
  margin: 0 0 24px; color: var(--ink-light);
  font: 700 clamp(15px, 2vw, 21px)/1.2 var(--label); letter-spacing: 0.24em; text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
}
.hf-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
@media (max-width: 700px) {
  .hf-hero { --hz: 46%; height: clamp(560px, 88vh, 760px); }
  .hf-mark--wide { display: none; }
  .hf-mark--tall { display: block; width: min(86vw, 520px); transform: translate(-50%, -75.2%); }
  .hf-hero .far { top: calc(var(--hz) - 14%); height: 14%; }
  .hf-hero .near { top: calc(var(--hz) - 6%); height: 12%; }
}
@keyframes hf-spin { to { transform: rotate(360deg); } }
@keyframes hf-drift { to { background-position: -3000px 0; } }

/* ---------------------------------------------------------------- the menu's print */

/* chrome italic, the carousel's labels: a chrome face, a dark keyline, a short extrusion */
.hf-chrome {
  margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 0.98;
  background-image: linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome) 38%, var(--chrome-lo) 56%, var(--chrome-hi) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(1.5px 0 0 var(--outline)) drop-shadow(-1.5px 0 0 var(--outline)) drop-shadow(0 1.5px 0 var(--outline)) drop-shadow(0 -1.5px 0 var(--outline)) drop-shadow(0 5px 0 #0b2a3d);
}
/* the selected label: the same print dyed raise-red */
.hf-chrome--red { background-image: linear-gradient(180deg, #ffd7cf 0%, #ff6a5c 34%, var(--raise) 55%, #c9121f 78%, #ff8a7a 100%); }
.hf-h2 { font-size: clamp(38px, 5.6vw, 68px); margin-bottom: 22px; }
.hf-kicker { margin: 0 0 12px; color: var(--accent); font: 700 15px/1 var(--label); letter-spacing: 0.3em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6); }
/* the readout: condensed chrome figures, as the best score and the level sit on the menu */
.hf-readout {
  font-family: var(--label); font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; text-transform: uppercase;
  background-image: linear-gradient(180deg, var(--chrome-hi) 0%, var(--chrome) 38%, var(--chrome-lo) 56%, var(--chrome-hi) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(2, 10, 16, 0.9)) drop-shadow(0 0 9px rgba(90, 190, 255, 0.35));
}

/* ---------------------------------------------------------------- plates, bars, keys */

/* the description card: dark glass with cut corners */
.hf-card {
  position: relative; padding: 20px 24px 22px; color: var(--ice);
  background: rgba(7, 18, 27, 0.86);
  clip-path: polygon(var(--cut-in) 0, 100% 0, 100% calc(100% - var(--cut-in)), calc(100% - var(--cut-in)) 100%, 0 100%, 0 var(--cut-in));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.hf-card p { margin: 0 0 12px; }
.hf-card p:last-child { margin-bottom: 0; }

/* the steel plate: bezel gradient rim, well of dark steel, a rivet in each corner */
.hf-plate {
  position: relative; padding: 4px;
  background: linear-gradient(152deg, var(--bezel-hi) 0%, var(--bezel) 34%, var(--outline) 78%, var(--steel-hi) 100%);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  filter: drop-shadow(0 3px 0 rgba(2, 9, 14, 0.7)) drop-shadow(0 9px 14px rgba(0, 0, 0, 0.55));
}
.hf-plate__in {
  position: relative; height: 100%; padding: 22px 26px 24px;
  background:
    url("../img/hydroform/art/ui/rivet.svg") 6px 6px / 10px 10px no-repeat,
    url("../img/hydroform/art/ui/rivet.svg") calc(100% - 6px) 6px / 10px 10px no-repeat,
    url("../img/hydroform/art/ui/rivet.svg") 6px calc(100% - 6px) / 10px 10px no-repeat,
    url("../img/hydroform/art/ui/rivet.svg") calc(100% - 6px) calc(100% - 6px) / 10px 10px no-repeat,
    url("../img/hydroform/art/ui/grain.svg") 0 0 / 180px 180px,
    linear-gradient(150deg, var(--steel) 0%, var(--steel-lo) 60%, var(--steel-well) 100%);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* the water bar under a selected row: a deep band, its crest riding on top */
.hf-bar { position: relative; }
.hf-bar::before {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--el-gutter)); right: -18px; top: 12%; bottom: 8%;
  background: linear-gradient(180deg, #2a8cf0 0%, #0f63d0 45%, var(--deep) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.hf-bar::after {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--el-gutter)); right: -10px; top: calc(12% - 9px); height: 14px;
  background: url("../img/hydroform/art/ui/wave.svg") 0 0 / 64px 14px repeat-x; animation: hf-crest 3.2s linear infinite;
}
@keyframes hf-crest { to { background-position: 64px 0; } }

/* steel keycap, as the game prints its controls */
.hf-key {
  display: inline-block; margin: 0 2px; padding: 3px 9px 4px; color: var(--ink-light);
  font: 700 14px/1.2 var(--label); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 1px;
  background: linear-gradient(180deg, var(--steel-cap) 0%, var(--steel) 55%, var(--steel-lo) 100%);
  box-shadow: inset 0 1px rgba(190, 232, 255, 0.35), inset 0 -2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.7);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

/* buttons: the lobby's CONTINUE slat, red; and a steel slat */
.hf-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px 14px; border: 0; cursor: pointer; text-decoration: none;
  font: 900 italic clamp(17px, 1.8vw, 21px)/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #ff5b52 0%, var(--raise) 45%, #d31826 100%);
  text-shadow: 1px 1px 0 var(--outline), -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 0 3px 0 #5a0b12;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  filter: drop-shadow(0 4px 0 rgba(2, 9, 14, 0.6));
  transition: transform 0.12s ease, filter 0.12s ease;
}
.hf a.hf-btn, .hf a.hf-btn:hover { color: #fff; }
.hf-btn:hover { transform: translateY(-2px); filter: drop-shadow(0 6px 0 rgba(2, 9, 14, 0.6)) brightness(1.08); }
.hf-btn--steel { background: linear-gradient(180deg, #4a7890 0%, var(--steel-cap) 40%, var(--steel) 100%); text-shadow: 1px 1px 0 var(--outline), -1px -1px 0 var(--outline), 1px -1px 0 var(--outline), -1px 1px 0 var(--outline), 0 3px 0 #04121a; }

/* ---------------------------------------------------------------- sections on the sheet */

.hf-section { position: relative; padding: clamp(64px, 9vw, 104px) 0; }
.hf-section + .hf-section { padding-top: 0; }
/* the multiplayer menus turn the whole sheet a third of the way round the colour wheel */
.hf-section--versus { isolation: isolate; padding-top: clamp(64px, 9vw, 104px) !important; }
.hf-section--versus::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(8, 15, 24, 0.5), rgba(8, 15, 24, 0.5)), url("../img/hydroform/art/floor.svg") 0 0 / 480px 480px, #3d5266;
  filter: hue-rotate(120deg) saturate(0.9);
}

.hf-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.hf-lead { margin: 0 0 12px; color: #fff; font-size: clamp(19px, 1.8vw, 21px); font-weight: 500; }
.hf-facts { margin: 0; display: grid; gap: 0; }
.hf-facts div { display: grid; grid-template-columns: 104px 1fr; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(143, 182, 203, 0.16); }
.hf-facts div:last-child { border-bottom: 0; }
.hf-facts dt { color: var(--dim); font: 700 14px/1.4 var(--label); letter-spacing: 0.18em; text-transform: uppercase; }
.hf-facts dd { margin: 0; font-size: 22px; }
@media (max-width: 860px) { .hf-intro { grid-template-columns: 1fr; } }

.hf-video { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--steel-well); }
.hf-video > img, .hf-video > video, .hf-video > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.hf-video__soon { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(to top, rgba(6, 18, 27, 0.8), rgba(6, 18, 27, 0.25)); text-align: center; }
.hf-video__soon .hf-chrome { font-size: clamp(28px, 4.4vw, 54px); }
.hf-video__soon p { margin: 12px 0 0; color: var(--dim); font: 700 16px/1 var(--label); letter-spacing: 0.24em; text-transform: uppercase; }
.hf-plate--flush .hf-plate__in { padding: 8px; }

.hf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.hf-steps .hf-card { height: 100%; }
.hf-steps img { width: 60px; height: 60px; margin-bottom: 10px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.4)); }
.hf-steps .hf-chrome { font-size: 34px; margin-bottom: 8px; }
.hf-steps p { font-size: 16.5px; }
.hf-bag { margin: 20px 0 0; }
.hf-bag strong { color: #fff; }
@media (max-width: 1000px) { .hf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .hf-steps { grid-template-columns: 1fr; } }

/* a mode list read like the game's menu: chrome rows, the selected one red on the water bar;
   pointing at a row selects it */
.hf-menu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); }
.hf-menu h3 { margin: 0 0 18px; }
.hf-menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hf-row { position: relative; isolation: isolate; padding: 10px 0 12px; }
.hf-row .hf-chrome { font-size: clamp(26px, 3vw, 36px); }
.hf-row p { margin: 6px 0 0; max-width: 46ch; color: var(--ice); font-size: 16.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
.hf-row.is-later { opacity: 0.6; }
.hf-row::before, .hf-row::after { opacity: 0; transition: opacity 0.15s ease; }
.hf-menu ul:not(:hover) .hf-row.is-sel::before, .hf-menu ul:not(:hover) .hf-row.is-sel::after,
.hf-row:hover::before, .hf-row:hover::after { opacity: 1; }
.hf-menu ul:not(:hover) .hf-row.is-sel .hf-chrome, .hf-row:hover .hf-chrome {
  background-image: linear-gradient(180deg, #ffd7cf 0%, #ff6a5c 34%, var(--raise) 55%, #c9121f 78%, #ff8a7a 100%);
}
.hf-row::before {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--el-gutter)); right: 0; top: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(42, 140, 240, 0.9) 0%, rgba(15, 99, 208, 0.9) 45%, rgba(8, 70, 173, 0.92) 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
.hf-row::after {
  content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--el-gutter)); right: 8px; top: -8px; height: 14px;
  background: url("../img/hydroform/art/ui/wave.svg") 0 0 / 64px 14px repeat-x; animation: hf-crest 3.2s linear infinite;
}
.hf-dropin { margin: 26px 0 0; color: var(--ice); font-size: 16.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
@media (max-width: 860px) { .hf-menu { grid-template-columns: 1fr; } }

.hf-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.hf-gallery a { display: block; overflow: hidden; }
.hf-gallery img { display: block; width: 100%; aspect-ratio: 1288 / 943; object-fit: cover; object-position: 50% 0; transition: transform 0.4s ease; }
.hf-gallery img.is-wide { object-position: 50% 50%; }
.hf-gallery a:hover img { transform: scale(1.03); }
.hf-gallery .cap { display: block; margin-top: 12px; color: var(--ice); font: 600 17px/1.35 var(--label); letter-spacing: 0.04em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }
@media (max-width: 700px) { .hf-gallery { grid-template-columns: 1fr; } }

/* where to buy: one steel namebar a store, lit when its page opens */
.hf-stores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0 0 22px; padding: 0; list-style: none; }
.hf-store .hf-plate__in { display: flex; flex-direction: column; justify-content: center; min-height: 104px; padding: 18px 22px; }
.hf-store .hf-chrome { font-size: 25px; }
.hf-store small { margin-top: 6px; color: var(--dim); font: 700 13px/1 var(--label); letter-spacing: 0.22em; text-transform: uppercase; }
.hf-store a { text-decoration: none; }
.hf-store a small { color: var(--accent); }
.hf-store--soon { opacity: 0.78; }
.hf-note { margin: 0; color: var(--ice); font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85); }

@media (prefers-reduced-motion: reduce) {
  .hf-hero .rays, .hf-hero .clouds, .hf-mark .bob, .hf-bar::after, .hf-row::after { animation: none; }
}

/* a mode list's preview, the way the menu shows the board beside the list */
.hf-shot { margin: 0; align-self: center; }
.hf-shot img { display: block; width: 100%; height: auto; }
.hf-shot figcaption { margin-top: 14px; }

/* small print that must not take the kicker's wide tracking */
.hf-video__soon p.hf-chrome { letter-spacing: 0.01em; margin: 0; }
.hf-store small { letter-spacing: 0.12em; line-height: 1.3; }