/* The home page of Fein Interactive. The first screen is the studio's name beside its pixel F,
   built from cubes in a 3D scene; below it, the games, the studio and its rules, and the address.
   Black and white. Two fields, "day" (black on white) and "night" (white on black), alternate down
   the page, so it looks the same in light and dark mode. Everything that moves sits under
   prefers-reduced-motion: no-preference. */

:root {
  --day-ground: #ffffff;
  --day-ink: #000000;
  --day-soft: #5f5f5f;
  --day-tone: #ececec;
  --night-ground: #000000;
  --night-ink: #ffffff;
  --night-soft: #a3a3a3;
  --night-tone: #1f1f1f;
  /* The one colour on the interface: the rubber duck's yellow, on every primary action. */
  --accent: #ffd23f;
  --dusk: #0b0f14;

  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-text: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Small, body, lead, head; then the giant section words and the name itself. */
  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 0.9rem + 1.1vw, 2.25rem);
  --step-head: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  --step-giant: clamp(4.5rem, 9vw, 8.5rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --section: clamp(7.5rem, 12vw, 13rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  color-scheme: light dark;
}

.day { --ground: var(--day-ground); --ink: var(--day-ink); --soft: var(--day-soft); --tone: var(--day-tone); }
.night { --ground: var(--night-ground); --ink: var(--night-ink); --soft: var(--night-soft); --tone: var(--night-tone); }
.day, .night { background: var(--ground); color: var(--ink); }

/* ---------------------------------------------------------------- Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--day-ground);
  color: var(--day-ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }
::selection { background: var(--ink); color: var(--ground); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.head { font-size: var(--step-head); }
.giant { font-size: var(--step-giant); line-height: 0.9; letter-spacing: -0.04em; }
.lead { font-size: var(--step-lead); line-height: 1.25; }

.skip { position: absolute; left: var(--margin); top: -100px; z-index: 10; background: var(--day-ink); color: var(--day-ground); padding: 10px 14px; }
.skip:focus { top: 12px; }

/* One button shape for the whole page: square corners, one fill. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  background: var(--accent);
  color: #000;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.button:hover { background: var(--ink); color: var(--ground); }
.button:active { transform: scale(0.96); }
.button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- The name */

.hero {
  min-height: max(100svh, 640px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 0 var(--margin) var(--margin);
}

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: var(--step-body); text-decoration: none; white-space: nowrap; }
.brand img { width: 28px; height: 28px; }
.bar-nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); font-size: var(--step-body); }
.bar-nav a { text-decoration: none; }
.bar-nav a:not(.bar-action) { position: relative; }
.bar-nav a:not(.bar-action)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out); }
.bar-nav a:not(.bar-action):hover::after { transform: scaleX(1); transform-origin: left; }
.bar-action { padding: 10px 18px; background: var(--accent); color: #000; font-weight: 500; transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease; }
.bar-action:hover { background: var(--ink); color: var(--ground); }
.bar-action:active { transform: scale(0.96); }

/* The 3D scene fills the whole first screen, behind the bar, the name and the line under it. */
/* The 3D world sits fixed behind the whole page; every section is laid over it, with long stretches
   between them for the walk. Text that needs a calm ground sits on a black panel. */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.world canvas { display: block; width: 100%; height: 100%; }
.hero, main, .foot { position: relative; z-index: 1; }
.world-on body { background: var(--dusk); }
.world-on .night { background: transparent; }
.panel { background: rgba(11, 15, 20, 0.86); padding: clamp(20px, 3vw, 40px); }

.world-on .hero { cursor: pointer; }
/* Room for the walk between sections: the world carries these stretches on its own. */
.world-on .games, .world-on .studio, .world-on .rules { padding-top: 110svh; }
.world-on .foot { padding-top: 90svh; min-height: 0; grid-template-rows: auto; row-gap: clamp(48px, 9svh, 120px); }
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero-fallback { position: absolute; right: 8%; top: 18%; width: min(34vw, 52svh); height: auto; filter: invert(1); }
.world-on .hero-fallback { display: none; }
.brand img { filter: invert(1); }

/* The name, two lines on the left; the letter floats to its right. */
.hero-title {
  align-self: end;
  display: grid;
  padding-bottom: clamp(24px, 4svh, 48px);
  font-size: min(6.9vw, 13svh);
  line-height: 0.84;
  letter-spacing: -0.045em;
}
.hero-title .mask:first-child { font-size: 1.62em; }
.mask { display: inline-block; overflow: clip; padding-top: 0.04em; margin-top: -0.04em; justify-self: start; }
.mask > span { display: inline-block; }

.hero-foot { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.hero-line { max-width: 30ch; font-size: var(--step-body); font-weight: 500; }

/* ---------------------------------------------------------------- Games */

.games { padding: var(--section) var(--margin); display: grid; gap: clamp(40px, 6vw, 88px); }
.game { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.game-info { display: grid; gap: 40px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; }
.facts dt { color: var(--soft); font-size: var(--step-small); }
.facts dd { margin: 4px 0 0; }

.ticket {
  position: relative;
  padding: clamp(22px, 2.6vw, 40px);
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
/* The two notches where a ticket tears off its roll. */
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  bottom: 84px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--night-ground);
}
.ticket::before { left: -14px; }
.world-on .ticket::before, .world-on .ticket::after { display: none; }
.ticket::after { right: -14px; }

.ticket-title { display: flex; justify-content: space-between; gap: 0.4em; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 0.95; }
.serving { display: grid; gap: 14px; }
.serving-no b { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; margin-left: 0.3em; display: inline-block; }
.serving-boss { min-height: 5.6em; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.boss-name { font-size: var(--step-head); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.boss-says { color: var(--soft); margin-top: 6px; max-width: 38ch; }

/* The game's own health bar: one long bar, a notch where each bar ends. */
.hp { display: grid; gap: 8px; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; }
.hp-track { position: relative; height: 26px; background: var(--tone); overflow: hidden; }
.hp-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transition: transform 260ms var(--ease-out); }
.hp-track i { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--ground); z-index: 1; }
.hp-read { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; font-size: var(--step-small); }
.hp-read b { font-weight: 500; }

.ticket-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: var(--step-small); padding-top: 4px; }
.hit { min-width: 200px; }

/* Damage numbers that rise off the bar. */
.pop {
  position: absolute;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-head);
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- The studio */

.studio { padding: var(--section) var(--margin) calc(var(--section) / 2); display: grid; gap: 48px; }
.studio-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.studio-facts { grid-column: 1 / 3; display: grid; gap: 14px; align-content: start; font-size: var(--step-small); color: var(--soft); padding-top: 0.6em; }
.studio-text { grid-column: 3 / -1; display: grid; gap: 1.2em; font-size: var(--step-lead); line-height: 1.2; max-width: 36em; }
.studio-text b { font-weight: 500; }
.studio-text .soft { color: var(--soft); }
.studio-text a { color: var(--ink); text-decoration-color: var(--accent); }
.drop { float: left; width: 3.4em; height: 3.4em; margin: 0.12em 0.45em 0 -0.42em; }
.night .drop { filter: invert(1); }

/* ---------------------------------------------------------------- Rules */

.rules { padding: calc(var(--section) / 2) var(--margin) var(--section); display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; }
.rules-word { position: sticky; top: 15svh; }
.rules-list { display: grid; gap: 6px; }
.rules-list details { background: var(--tone); }
.rules-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 0 22px;
  font-size: var(--step-body);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.rules-list summary::-webkit-details-marker { display: none; }
.rules-list summary::after { color: var(--accent); content: "+"; font-family: var(--font-display); font-size: 1.4em; line-height: 1; transition: transform 240ms var(--ease-out); }
.rules-list details[open] summary::after { transform: rotate(45deg); }
.rules-list summary:hover { background: color-mix(in srgb, var(--ink) 6%, var(--tone)); }
.rules-list summary:focus-visible { outline-offset: -3px; }
.rules-list details p { padding: 0 22px 24px; max-width: 52ch; }

/* ---------------------------------------------------------------- The close */

.foot {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: clamp(40px, 6vw, 88px) var(--margin) var(--margin);
  overflow: clip;
}
.contact-intro { font-family: var(--font-text); text-transform: none; font-weight: 400; letter-spacing: 0; font-size: var(--step-lead); line-height: 1.25; max-width: 26ch; }
.contact-mail {
  align-self: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 8.6vw, 9.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 180ms ease;
}
.contact-mail:hover { color: var(--soft); }
.foot-name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 7.62vw;
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  margin: 0 0 clamp(24px, 3vw, 40px);
}
.foot-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px; font-size: var(--step-small); color: var(--soft); }
.foot-row > a { justify-self: end; color: var(--ink); }
.foot-links { display: flex; gap: 24px; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .rules-word { position: static; }
  .studio-facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; order: 2; padding-top: 32px; }
  .studio-text { grid-column: 1 / -1; }
  .foot { min-height: 0; row-gap: 12svh; }
}

/* Tall screens: the name sits under the bar instead of leaving the top half empty. */
@media (max-aspect-ratio: 1/1) {
  .hero-title { font-size: min(10.4vw, 9svh); }
  .hero-fallback { left: 50%; right: auto; top: 14%; width: min(46vw, 34svh); transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .bar { min-height: 64px; }
  .bar-nav a:not(.bar-action) { display: none; }
  .hero-foot { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-foot .button { width: 100%; }

  .facts { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ticket { padding: 22px 18px; }
  .ticket::before, .ticket::after { bottom: 92px; }
  .ticket-title { display: block; font-size: 8.4vw; line-height: 1; }
  .ticket-title span:nth-child(2)::after { content: ""; display: block; }
  .ticket-foot { flex-direction: column-reverse; align-items: stretch; }
  .hit { width: 100%; }
  .serving-boss { min-height: 7em; }

  .studio-text { font-size: 1.375rem; line-height: 1.25; }
  .drop { margin-left: 0; width: 4.2em; height: 4.2em; }

  .contact-mail { font-size: 9.6vw; }
  .foot-row { grid-template-columns: 1fr auto; row-gap: 12px; }
  .foot-links { grid-column: 1 / -1; grid-row: 1; flex-wrap: wrap; gap: 8px 20px; }
}

/* ---------------------------------------------------------------- Motion */

@media (prefers-reduced-motion: no-preference) {
  /* Load: the letters rise out of their masks, the rest arrives behind them; settled by 1.2s. */
  .js .hero-title .mask > span { transform: translateY(105%); animation: rise 900ms var(--ease-expo) forwards; animation-delay: calc(140ms + var(--i) * 110ms); }
  .js [data-load] { opacity: 0; transform: translateY(16px); animation: arrive 600ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js .bar { animation: fade 600ms ease 200ms both; }

  /* Sections: heading, then text, then the rest, once each. */
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].in { opacity: 1; transform: none; }

  .rules-list details[open] p { animation: arrive 420ms var(--ease-out) both; }

  /* The ticket when the next boss steps up. */
  .serving-boss.leave { animation: leave 280ms var(--ease-in-out) forwards; }
  .serving-boss.enter { animation: arrive 520ms var(--ease-expo) both; }
  .serving-no b.flip { animation: flip 520ms var(--ease-expo); }
  .hp.shake { animation: shake 220ms var(--ease-out); }
  .pop { animation: pop 900ms var(--ease-out) forwards; }
  .hp-track.crack { animation: crack 300ms var(--ease-out); }
}

@keyframes rise { to { transform: none; } }
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes leave { to { opacity: 0; transform: translateY(-18px); } }
@keyframes flip { from { transform: translateY(60%) rotateX(80deg); opacity: 0; } }
@keyframes shake { 30% { transform: translateX(-5px); } 60% { transform: translateX(4px); } }
@keyframes pop { 0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; } 20% { transform: translate(-50%, -18px) scale(1.1); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
@keyframes crack { 40% { transform: scaleY(1.35); } }