/* Ringside — coming soon.
   "Calm by default, ignites when live." The ring mark rests in ink and parchment;
   flip the toggle and the seat dot ignites + beats in ember.
   Type + color mirror the app's Brand system (Shared/Theme.swift). */

/* ---- Self-hosted brand fonts (same TTFs the app ships) ---- */
@font-face { font-family:"Big Shoulders Display"; src:url("/fonts/BigShouldersDisplay-Regular.ttf")  format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("/fonts/BigShouldersDisplay-Medium.ttf")   format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("/fonts/BigShouldersDisplay-SemiBold.ttf") format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("/fonts/BigShouldersDisplay-Bold.ttf")     format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Big Shoulders Display"; src:url("/fonts/BigShouldersDisplay-Black.ttf")    format("truetype"); font-weight:900; font-display:swap; }
@font-face { font-family:"DM Sans"; src:url("/fonts/DMSans-9pt.ttf")       format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"DM Sans"; src:url("/fonts/DMSans-9ptMedium.ttf") format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"DM Sans"; src:url("/fonts/DMSans-9ptBold.ttf")   format("truetype"); font-weight:700; font-display:swap; }

:root {
  --parchment:#F2EBDD;
  --surface:#FAF4E8;
  --ink:#1A1611;
  --ink-2:#5C5347;
  --line:rgba(26,22,17,.13);
  --ember:#E64A2E;
  --ember-deep:#B8371D;
  --slate:#5E6B66;
  --brass:#C4922E;
  --accent:var(--ink);     /* swaps to ember in live mode */
  --glow:transparent;
  --display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:"DM Sans", system-ui, -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }

body {
  min-height:100svh;
  background-color:var(--parchment);
  background-image:
    radial-gradient(120% 80% at 50% 16%, var(--surface) 0%, transparent 60%),
    radial-gradient(150% 120% at 50% 122%, rgba(26,22,17,.10) 0%, transparent 55%);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  display:grid;
  place-items:center;
  padding:7vmin 6vw;
  transition:background-color .6s ease, color .6s ease;
  overflow-x:hidden;
}

/* faint paper grain */
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* warm wash when live */
body.live { --accent:var(--ember); --glow:rgba(230,74,46,.45); }
body.live::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 55% at 50% 38%, rgba(230,74,46,.07) 0%, transparent 70%);
}

.stage {
  position:relative; z-index:1; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.6rem,1.8vw,1.05rem);
}

/* ---- ring mark : the logo ---- */
.mark { width:clamp(108px,20vw,168px); margin-bottom:clamp(.4rem,1.6vw,1rem); }
.mark svg { display:block; width:100%; height:auto; }
.ring-track { fill:none; stroke:var(--ink); stroke-width:13; opacity:.16; }
.ring-arc {
  fill:none; stroke:url(#grad); stroke-width:13; stroke-linecap:round;
  stroke-dasharray:540; stroke-dashoffset:135;
  transform:rotate(-90deg); transform-origin:center;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);
}
body.live .ring-arc { stroke-dashoffset:70; }
.seat { fill:var(--accent); transition:fill .5s; }
body.live .seat { filter:drop-shadow(0 0 10px var(--glow)); }
.seat-pulse { transform-box:fill-box; transform-origin:center; }
body.live .seat-pulse { animation:beat 1.15s ease-in-out infinite; }
@keyframes beat { 0%,100%{transform:scale(1)} 18%{transform:scale(1.18)} 36%{transform:scale(1)} 54%{transform:scale(1.1)} }

/* ---- copy ---- */
.eyebrow {
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.34em; font-size:clamp(.72rem,1.4vw,.84rem);
  color:var(--ember); padding-left:.34em;
}
.wordmark {
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(3.4rem,15vw,9.5rem); line-height:.82; letter-spacing:-.005em;
  color:var(--ink);
}
.wordmark .dot { color:var(--accent); transition:color .5s; }
.tag {
  font-family:var(--display); font-weight:500; text-transform:uppercase;
  letter-spacing:.32em; font-size:clamp(.74rem,1.6vw,1rem);
  color:var(--ink-2); padding-left:.32em;
}
.lede {
  font-family:var(--body); font-weight:400;
  font-size:clamp(1rem,2.2vw,1.22rem); line-height:1.5;
  color:var(--ink-2); max-width:34ch; margin-top:.3rem;
}

/* ---- calm / live toggle ---- */
.switcher {
  margin-top:clamp(1.1rem,3vw,1.8rem);
  display:flex; align-items:center; gap:13px;
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-size:.78rem; color:var(--ink-2);
  user-select:none;
}
.switcher .on { color:var(--ink-2); transition:color .5s; }
.switcher .live-lbl { color:var(--ink-2); transition:color .5s; }
body.live .switcher .live-lbl { color:var(--ember); }
.sw {
  -webkit-appearance:none; appearance:none;        /* Safari forces native button sizing without this */
  width:58px; height:30px; border-radius:30px; border:1.5px solid var(--ink);
  position:relative; cursor:pointer; background:transparent; transition:.5s; flex:none;
  padding:0; margin:0;
}
.sw::after {
  content:""; position:absolute; top:3px; left:3px; width:21px; height:21px;
  border-radius:50%; background:var(--ink); transition:.45s cubic-bezier(.2,.8,.2,1);
}
body.live .sw { border-color:var(--ember); box-shadow:0 0 0 3px var(--glow); }
body.live .sw::after { transform:translateX(28px); background:var(--ember); }
.hint { font-size:.66rem; letter-spacing:.16em; color:var(--line); margin-top:.1rem; min-height:1em; }

/* ---- footer ---- */
.foot {
  margin-top:clamp(1.6rem,4.5vw,2.8rem);
  display:flex; align-items:center; gap:.7em; flex-wrap:wrap; justify-content:center;
  font-family:var(--body); font-size:clamp(.78rem,1.5vw,.9rem); color:var(--ink-2);
}
.foot .dot-sep { color:var(--line); }
.foot a {
  color:var(--ember); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .2s ease;
}
.foot a:hover { border-bottom-color:var(--ember); }

/* honor reduce-motion: still toggleable, just no beat/transition theatrics */
@media (prefers-reduced-motion:reduce) {
  body, .ring-arc, .seat, .sw, .sw::after, .wordmark .dot { transition:none; }
  body.live .seat-pulse { animation:none; }
}