/* ==========================================================================
   Home — the studio hero with a banner of released games, a showcase per
   upcoming game and contact, one screen each, on plain page scroll. Game looks live in
   /assets/css/games/<slug>/theme.css.
   ========================================================================== */

/* Sections start under the overlaid header, so in-page links land at their top. */
html {
  scroll-padding-top: 0;
}

/* ---------- Hero + banner (released games) ------------------------------ */

/* The first screen keeps the studio's pipe scene (scene.css). On it sits a
   banner card, framed in copper, one slide per released game (ParKing
   today). Each slide's look comes from its game's theme.css. */
.hero--home .hero__content {
  width: min(100%, 1180px);
  padding: calc(var(--header-h) + 24px) var(--gutter) clamp(120px, 15vh, 170px);
}

.banner {
  display: grid;
  gap: 16px;
  width: 100%;
  padding: 5px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #f4c08a, #d4823c 30%, #8a461b 55%, #e39a58 80%, #a35a24);
  box-shadow:
    0 0 0 1.5px #050608,
    0 40px 90px -30px rgb(0 0 0 / 0.9),
    0 0 80px -20px rgb(212 130 60 / 0.35);
  text-align: start;
  animation: fadeSlideUp 900ms var(--ease-out) 0.2s both;
}

.banner__slide {
  --g-bg: #070b22;
  --g-ink: var(--c-ink);
  --g-display: var(--font-display);

  position: relative;
  isolation: isolate;
  padding: clamp(20px, 3.5vw, 52px);
  border-radius: calc(var(--r-xl) - 5px);
  background: var(--g-bg);
  color: var(--g-ink);
  box-shadow: 0 0 0 1.5px #050608;
  overflow: hidden;
}

.banner__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.banner__grid {
  display: grid;
  gap: clamp(16px, 3vw, 48px);
  align-items: center;
  padding: 0;
}

.banner__art {
  display: block;
}

.banner__art .pk-stage {
  display: block;
  width: min(100%, 50svh, 500px);
}

.banner__copy {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.banner__meta {
  color: var(--g-ink-3, var(--c-ink-3));
  font-size: var(--fs-13);
  letter-spacing: var(--tracking-wide);
}

.banner__title {
  font-family: var(--g-display);
  font-size: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}

:root[lang="fa"] .banner__title {
  line-height: 1.2;
}

.banner__tagline {
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
}

.banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 6px;
}

@media (min-width: 960px) {
  .banner__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .banner__copy {
    order: -1;
    padding-inline-start: clamp(8px, 2vw, 32px);
  }
}

/* Phones: the art on top, sized to the screen's height, the copy centred. */
@media (max-width: 959px) {
  .hero--home .hero__content {
    padding-inline: var(--gutter);
  }

  /* The banner covers the gauge's spot on the floor line. */
  .hero--home .gauge {
    display: none;
  }

  .banner__art .pk-stage {
    width: min(100%, 36svh);
  }

  .banner__copy {
    gap: 8px;
    justify-items: center;
    text-align: center;
  }

  .banner__actions {
    justify-content: center;
    gap: 12px;
  }
}

/* Pointing at the banner opens the line, as the hero button once did: the
   pressure climbs, the flow brightens and the sparks fire. */
.hero:has(.banner:hover) .gauge__needle-base {
  transform: rotate(92deg);
}

.hero:has(.banner:hover) .flow {
  opacity: 1;
}

.hero:has(.banner:hover) .s-gear i {
  animation: spark-on 0.9s ease-out;
}

/* ---------- Showcase (one per game, themed by data-game) ---------------- */

.showcase {
  --g-bg: var(--c-plate);
  --g-ink: var(--c-ink);
  --g-ink-2: var(--c-ink-2);
  --g-ink-3: var(--c-ink-3);
  --g-accent: var(--c-copper);
  --g-line: var(--c-line);
  --g-display: var(--font-display);

  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + clamp(24px, 3vw, 48px)) clamp(48px, 5vw, 80px);
  background: var(--g-bg);
  color: var(--g-ink);
}

.showcase__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* The joint: a copper pipe and coupling across the seam between two worlds.
   Every game is plugged into the same studio line. */
.joint {
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  z-index: 4;
  width: 18px;
  height: 104px;
  translate: calc(-50% * var(--dir)) -50%;
  border-radius: 3px;
  background: linear-gradient(90deg, #3c1c08 0%, #8a4a1e 12%, #d4823c 32%, #fbd9a9 44%, #e39a58 56%, #a35a24 82%, #3c1c08 100%);
  box-shadow: 0 0 0 1.5px #050608, 0 10px 30px rgb(0 0 0 / 0.5);
  pointer-events: none;
}

.joint::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 34px;
  height: 18px;
  translate: calc(-50% * var(--dir)) -50%;
  border-radius: 5px;
  background: linear-gradient(90deg, #3c1c08, #c97a38 20%, #fbd9a9 42%, #e39a58 56%, #8a4a1e 86%, #3c1c08);
  box-shadow: 0 0 0 1.5px #050608, inset 0 1px 0 rgb(255 236 210 / 0.5);
}

.joint::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 50%;
  width: 4px;
  height: 4px;
  translate: calc(-50% * var(--dir)) -50%;
  border-radius: 50%;
  background: var(--c-mint);
  box-shadow: 0 0 10px 2px rgb(111 216 173 / 0.8);
  animation: spark-pulse-dot 4s ease-in-out infinite;
}

@keyframes spark-pulse-dot {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.showcase__grid {
  display: grid;
  gap: clamp(44px, 5vw, 72px);
  align-items: center;
}

@media (min-width: 960px) {
  .showcase__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }

  .showcase--flip .showcase__copy {
    order: 2;
  }
}

.showcase__copy {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.showcase__title {
  font-family: var(--g-display);
  font-size: clamp(3rem, 2.1rem + 4vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}

:root[lang="fa"] .showcase__title {
  line-height: 1.15;
}

.showcase__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 6px;
}

.showcase__art {
  position: relative;
}

/* ---------- Next in the pipeline (the open slot for future games) ------ */

.next {
  --g-bg: #090b0f;
  --g-accent: var(--c-copper-hi);
  overflow: clip;
}

.next .showcase__bg {
  background:
    linear-gradient(rgb(212 130 60 / 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgb(212 130 60 / 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
    radial-gradient(60% 80% at 50% 50%, rgb(212 130 60 / 0.08), transparent 70%),
    #090b0f;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 100%);
}

.next__card {
  position: relative;
  display: grid;
  gap: 20px;
  justify-items: center;
  max-width: 720px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
  border: 1.5px dashed rgb(212 130 60 / 0.4);
  border-radius: var(--r-xl);
  background: rgb(10 11 14 / 0.6);
  text-align: center;
}

.next__card .showcase__text {
  margin-inline: auto;
}

.next__valve {
  position: relative;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #1d2027, #0d0f13);
  box-shadow: inset 0 0 0 1px var(--c-line-2), 0 0 0 8px rgb(212 130 60 / 0.06), 0 0 50px rgb(212 130 60 / 0.15);
  color: var(--c-copper-hi);
}

.next__valve .icon {
  width: 38px;
  height: 38px;
  transition: transform 1.2s var(--ease-out);
}

.next__card:hover .next__valve .icon {
  transform: rotate(-180deg);
}

.next__title {
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-snug);
}

.next__slots {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.next__slots li {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
}

.next__slots img {
  border-radius: inherit;
  outline: 1px solid oklch(1 0 0 / 0.1);
  outline-offset: -1px;
}

.next__slots li.is-empty {
  display: grid;
  place-items: center;
  border: 1.5px dashed rgb(212 130 60 / 0.5);
  box-shadow: none;
  color: var(--c-copper-hi);
  font-weight: 700;
}

/* ---------- Contact ------------------------------------------------------ */

/* The last screen holds contact and the footer together. */
.finale {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.contact {
  position: relative;
  flex: 1;
  display: grid;
  align-content: center;
  padding-block: calc(var(--header-h) + 24px) 48px;
  overflow: clip;
  text-align: center;
}

.contact__inner {
  display: grid;
  gap: 22px;
  justify-items: center;
}

/* The email button sits between two copper pipes, like the studio banner.
   Hovering it sends a pulse down both lines toward the button. */
.contact__line {
  display: flex;
  align-items: center;
  width: min(100%, 980px);
  margin-top: 12px;
}

.contact__pipe {
  position: relative;
  flex: 1;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(180deg, #3c1c08, #b8692c 25%, #fbd9a9 45%, #c97a38 65%, #4a230c);
  box-shadow: 0 0 0 1.5px #050608;
  container-type: inline-size;
}

.contact__pipe:first-child {
  mask-image: linear-gradient(to var(--fade-to, left), #000 55%, transparent);
}

.contact__pipe:last-child {
  mask-image: linear-gradient(to var(--fade-to-end, right), #000 55%, transparent);
}

[dir="rtl"] .contact__pipe:first-child {
  --fade-to: right;
}

[dir="rtl"] .contact__pipe:last-child {
  --fade-to-end: left;
}

.contact__pipe::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 90px;
  background: radial-gradient(closest-side, rgb(255 246 230 / 0.95), rgb(111 216 173 / 0.4) 60%, transparent);
  opacity: 0;
  /* Paused, not removed, when the pointer leaves: the pulse fades where it is. */
  animation: pulse-in 1.1s var(--ease-in-out) infinite paused;
  transition: opacity var(--t-med) ease;
}

.contact__pipe:first-child::after {
  left: 0;
  transform: translateX(-100%);
}

.contact__pipe:last-child::after {
  right: 0;
  transform: translateX(100%);
  animation-name: pulse-in-end;
}

.contact__coupling {
  width: 14px;
  height: 22px;
  flex: none;
  border-radius: 4px;
  background: linear-gradient(180deg, #3c1c08, #c97a38 22%, #fbd9a9 42%, #e39a58 55%, #8a4a1e 86%, #3c1c08);
  box-shadow: 0 0 0 1.5px #050608;
}

.contact__line .btn {
  margin-inline: 2px;
}

.contact__line:has(.btn:hover) .contact__pipe::after {
  opacity: 1;
  animation-play-state: running;
}

@keyframes pulse-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(100cqw); }
}

@keyframes pulse-in-end {
  from { transform: translateX(100%); }
  to { transform: translateX(-100cqw); }
}

/* ---------- Phones -------------------------------------------------------- */

/* Each section fits one screen, so the art is sized by height. */
@media (max-width: 959px) {
  .showcase {
    padding-block: calc(var(--header-h) + 8px) 32px;
  }

  .showcase__grid {
    gap: 28px;
  }

  .showcase__copy {
    gap: 14px;
    justify-items: center;
    text-align: center;
  }

  .showcase__actions {
    justify-content: center;
    margin-top: 0;
  }

  .showcase .tw-frame {
    width: min(100%, 64svh);
    margin-inline: auto;
  }

  .showcase .hu-scope {
    width: min(100%, 42svh);
  }

  .joint {
    height: 64px;
  }
}

/* ---------- Rail (where you are in the line-up) -------------------------- */

/* A column of game icons on the free edge of wide screens (the showcase art
   reaches the other one). It fades in once the hero is behind you; the
   current world's icon is ringed (set by site.js). */
.rail {
  display: none;
}

@media (min-width: 1100px) and (min-height: 640px) {
  .rail {
    position: fixed;
    inset-inline-start: 22px;
    top: 50%;
    z-index: 15;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 8px;
    border-radius: var(--r-pill);
    background: rgb(10 11 14 / 0.55);
    box-shadow: inset 0 0 0 1px var(--c-line);
    backdrop-filter: blur(10px);
    list-style: none;
    translate: 0 -50%;
  }
}

@supports (animation-timeline: scroll()) {
  .rail {
    animation: rail-in linear both;
    animation-timeline: scroll(root);
    animation-range: 40vh 90vh;
  }

  @keyframes rail-in {
    from {
      opacity: 0;
      visibility: hidden;
    }
    to {
      opacity: 1;
      visibility: visible;
    }
  }
}

.rail a {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: transform 200ms var(--ease-out);
}

.rail img,
.rail__soon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  opacity: 0.55;
  outline: 1px solid oklch(1 0 0 / 0.1);
  outline-offset: -1px;
  transition: opacity var(--t-fast) ease, box-shadow var(--t-med) var(--ease-out);
}

.rail__soon {
  display: grid;
  place-items: center;
  border: 1px dashed var(--c-line-3);
  outline: 0;
  color: var(--c-copper-hi);
}

.rail__soon .icon {
  width: 13px;
  height: 13px;
}

.rail a:hover img,
.rail a:hover .rail__soon,
.rail a[aria-current] img,
.rail a[aria-current] .rail__soon {
  opacity: 1;
}

.rail a[aria-current] img,
.rail a[aria-current] .rail__soon {
  box-shadow: 0 0 0 2px var(--c-ground), 0 0 0 3.5px var(--c-copper);
}

.rail a:active {
  transform: scale(0.92);
  transition-duration: 100ms;
}

/* The name, on a pill beside the icon, while hovered or focused. */
.rail__name {
  position: absolute;
  inset-inline-start: calc(100% + 14px);
  top: 50%;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--c-raised-2);
  box-shadow: inset 0 0 0 1px var(--c-line-2);
  color: var(--c-ink);
  font-size: var(--fs-13);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  translate: calc(-6px * var(--dir)) -50%;
  transition: opacity var(--t-fast) ease, translate var(--t-med) var(--ease-out);
}

.rail a:hover .rail__name,
.rail a:focus-visible .rail__name {
  opacity: 1;
  translate: 0 -50%;
}