/* ═══════════════════════════════════════════════════════════════════
 * Tranki — landing, phone layout (under 900px)
 *
 * The app's real screens held like a hand of cards: the brand object is the
 * card, so the product is dealt, not framed. Swipe (or tap a side screen) to
 * bring one to the front; it deals itself in and turns on its own until
 * touched. Then the Anki import, animated: the .apkg goes in and the deck
 * fills the screen. On a tablet everything stays capped at 30rem, centred.
 *
 * The screens in `shots/` are Storybook captures of the app; see
 * `docs/tranki/flows/redesign-brief.md` for how to redo them.
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  --gutter: 1.25rem;
  --column: 30rem;
}

.only-mobile {
  display: block;
}

.nav,
.footer__inner,
.column {
  max-width: var(--column);
  padding-inline: var(--gutter);
}

.column {
  margin-inline: auto;
}

.nav {
  height: 4rem;
}

.m-hero {
  padding-top: 1.25rem;
  text-align: center;
}

.m-hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 10.6vw, 2.9rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

/* ─── Phone frame around a real screen ────────────────────────────── */
.phone {
  position: relative;
  width: var(--pw);
  aspect-ratio: 390 / 844;
  padding: calc(var(--pw) * 0.03);
  border-radius: calc(var(--pw) * 0.15);
  background: #0c0c0e;
  box-shadow:
    inset 0 0 0 1.5px #2a2a2e,
    0 30px 50px -26px rgb(2 6 24 / 0.55);
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(var(--pw) * 0.12);
  background: var(--top, #f5f5f5);
}

/* The notch; the band above the capture takes the screen's own top colour. */
.screen::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 2%;
  left: 50%;
  translate: -50% 0;
  width: 30%;
  height: 3.1%;
  border-radius: 999px;
  background: #0c0c0e;
}

.shot {
  position: absolute;
  left: 0;
  top: 5.2%;
  width: 100%;
  height: 94.8%;
  object-fit: cover;
  object-position: top;
}

/* ─── The hand ────────────────────────────────────────────────────── */
.hand {
  overflow-x: clip;
}

.fan {
  --pw: min(12.5rem, 50vw, calc((100svh - 22rem) * 390 / 844));
  position: relative;
  height: calc(var(--pw) * 844 / 390 + 4.5rem);
  margin-top: 1.75rem;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.fan__item {
  position: absolute;
  left: 50%;
  top: 0.5rem;
  margin-left: calc(var(--pw) / -2);
  transform-origin: 50% 110%;
  transition:
    transform 0.6s cubic-bezier(0.3, 1.25, 0.5, 1),
    opacity 0.4s,
    filter 0.4s;
  cursor: pointer;
}

/* Without JS the hand still fans out, with the study screen in front. */
.fan__item:nth-child(1) { transform: translateX(-72%) translateY(10%) rotate(-18deg) scale(0.8); opacity: 0.55; z-index: 8; }
.fan__item:nth-child(2) { transform: translateX(-36%) translateY(5%) rotate(-9deg) scale(0.9); z-index: 9; }
.fan__item:nth-child(3) { z-index: 10; }
.fan__item:nth-child(4) { transform: translateX(36%) translateY(5%) rotate(9deg) scale(0.9); z-index: 9; }
.fan__item:nth-child(5) { transform: translateX(72%) translateY(10%) rotate(18deg) scale(0.8); opacity: 0.55; z-index: 8; }

.fan.is-dealing .fan__item {
  transform: translateY(60%) scale(0.8) !important;
  opacity: 0 !important;
  transition: none;
}

.captions {
  min-height: 6.4rem;
  margin-top: 0.75rem;
  text-align: center;
  transition: opacity 0.2s;
}

.captions.is-swapping {
  opacity: 0;
}

.caption h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.caption p {
  max-width: 30ch;
  margin: 0.4rem auto 0;
  color: var(--muted);
  font-size: 0.98rem;
  text-wrap: pretty;
}

.fan__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.25rem;
}

.fan__nav button {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--paper);
  font-size: 1.1rem;
  font-weight: 700;
}

.dots {
  display: flex;
  gap: 0.35rem;
}

.dots i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--hairline);
  transition:
    width 0.3s var(--ease),
    background-color 0.3s;
}

.dots i.is-now {
  width: 1.3rem;
  background: var(--ink);
}

.act {
  padding-top: 1.5rem;
}

.act p {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}

/* ─── Import, animated ────────────────────────────────────────────── */
.import {
  margin-top: 3.5rem;
  padding-block: 3rem 3.25rem;
  border-radius: 2rem 2rem 0 0;
  background: var(--paper);
}

.import h2,
.close h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.import p:not([class]),
.close p {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 1.02rem;
  text-wrap: pretty;
}

.import__stage {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: 2rem;
  padding-block: 0.5rem 1rem;
}

.import .phone {
  --pw: min(13rem, 56vw);
}

.import .screen {
  --top: #ff255a;
}

/* The deck arrives from the top down: a cover in the screen's colour pulls
 * back. The image itself is never clipped, or lazy loading would never see it. */
.import .screen::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 5.2% 0 0;
  background: var(--top);
  transform-origin: 50% 100%;
  animation: reveal 6s var(--ease) infinite;
}

.file {
  position: absolute;
  z-index: 8;
  top: 38%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0.9rem;
  background: var(--paper);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow:
    0 16px 30px -12px rgb(2 6 24 / 0.45),
    0 0 0 1px rgb(2 6 24 / 0.06);
  animation: file-in 6s var(--ease) infinite;
}

.file svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--indigo);
}

.toast {
  position: absolute;
  z-index: 8;
  bottom: 1.75rem;
  left: 50%;
  translate: -50% 0;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 24px -12px rgb(2 6 24 / 0.6);
}

.toast span {
  display: block;
}

.toast span:nth-child(1) {
  animation: toast-a 6s infinite;
}

.toast span:nth-child(2) {
  position: absolute;
  inset: 0.45rem 0.85rem;
  animation: toast-b 6s infinite;
}

/* With JS, the loop only plays while it is on screen. */
.js .import:not(.in) :is(.file, .toast span),
.js .import:not(.in) .screen::after {
  animation-play-state: paused;
}

@keyframes file-in {
  0% { opacity: 0; transform: translate(-150%, 0) rotate(-8deg); }
  10% { opacity: 1; transform: translate(-110%, 0) rotate(-6deg); }
  26% { opacity: 1; transform: translate(-50%, 0) scale(0.85); }
  34%, 100% { opacity: 0; transform: translate(-50%, 10%) scale(0.4); }
}

@keyframes reveal {
  0%, 32% { transform: scaleY(1); }
  58%, 92% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@keyframes toast-a {
  0%, 30% { opacity: 0; }
  34%, 56% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes toast-b {
  0%, 58% { opacity: 0; }
  62%, 90% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

/* ─── Close + footer, on the white band the import starts ─────────── */
.close {
  padding-bottom: 1rem;
  background: var(--paper);
}

.close__panel {
  padding: 2rem 1.4rem 1.6rem;
  border-radius: 1.75rem;
  background: var(--arena);
}

.close .cta {
  margin-top: 1.5rem;
}

.footer {
  padding-block: 2rem 3rem;
  background: var(--paper);
}

.footer__inner {
  flex-direction: column;
}

@media (prefers-reduced-motion: reduce) {
  .file,
  .toast span:nth-child(1),
  .import .screen::after {
    display: none;
  }

  .toast span:nth-child(2) {
    position: static;
  }
}