/*
 * Tournamently — shared site styles.
 *
 * The pages come from a Claude Design canvas (see ../../design/), which styles
 * everything inline and fakes responsiveness with a `viewport` prop the editor
 * sets by hand. A browser cannot set that prop, so every one of those layout
 * values lives here as a custom property instead, and the media queries below
 * do what the editor dropdown used to. The markup keeps its inline styles and
 * just reads `var(--…)`, which is why the pages still look identical to the
 * canvas while actually responding to a real phone.
 */

:root {
  /* Desktop — what the canvas called `viewport: Desktop`, and the default. */
  --maxw: 1060px;
  --hero-grid: 1.1fr 0.9fr;
  --cols2: 1fr 1fr;
  --cols3: 1fr 1fr 1fr;
  --h1: 58px;
  --h2: 36px;
  --nav-links: flex;
  --burger: none;
  --marquee: 110px;

  --ink: #f5eff1;
  --ink-dim: rgba(245, 239, 241, 0.7);
  --accent: #ff8a5c;
  --grad: linear-gradient(135deg, #ff8a3d, #ff3d77);
}

/* Tablet. */
@media (max-width: 1023px) {
  :root {
    --maxw: 760px;
    --hero-grid: 1fr;
    --h1: 48px;
    --marquee: 82px;
  }
}

/* Phone. Below this the canvas hid the nav links and showed the burger. */
@media (max-width: 767px) {
  :root {
    --maxw: 430px;
    --hero-grid: 1fr;
    --cols2: 1fr;
    --cols3: 1fr;
    --h1: 38px;
    --h2: 28px;
    --nav-links: none;
    --burger: flex;
    --marquee: 56px;
  }
}

body {
  margin: 0;
  background: #0f0a0c;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: #ffb08a;
}

/* The canvas expressed hover with a `style-hover` attribute its runtime read.
   These two rules are that attribute, in CSS. */
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 138, 61, 0.4);
}

.step:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 61, 119, 0.4);
}

/* Anything clickable in the canvas was a <div onClick>, which no keyboard can
   reach. They are real buttons here; this keeps them looking like the design. */
.btn {
  font: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

.btn:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The "Almost there" dialog. `<sc-if>` in the canvas, a class here. */
.soon {
  display: none;
}

.soon.open {
  display: flex;
}

/* Phone menu. The canvas drew the burger but wired nothing to it. */
.navmenu {
  display: none;
}

.navmenu.open {
  display: flex;
}

@media (min-width: 768px) {
  .navmenu.open {
    display: none;
  }
}

/* The parallax, the marquee drift and the reveal are decoration. Anyone who has
   asked their OS to stop moving things gets the finished layout immediately. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}