/* REVIVOX Hangover Shots — Coming Soon */

@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../assets/fonts/josefin-sans-latin.woff2") format("woff2");
}

:root {
  /* Palette sampled from the packaging artwork */
  --green-shadow: #002b25;
  --green-forest: #003f35;
  --green-emerald: #075b4c;
  --green-ink: #000f0c;
  --white: #ffffff;
  --raspberry: #e0304a;
  --lime: #8cc63f;

  --font-sans: "Josefin Sans", "Century Gothic", "Avenir Next", "Futura", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--green-shadow);
  color: var(--white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Static fabric stand-in: shown without JS/WebGL, hidden under the canvas otherwise. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(0, 22, 18, 0.55), transparent 70%),
    linear-gradient(118deg, transparent 20%, rgba(7, 91, 76, 0.55) 38%, transparent 55%, rgba(7, 91, 76, 0.35) 78%, transparent 95%),
    radial-gradient(ellipse at 50% 50%, var(--green-forest), var(--green-shadow) 85%);
}

.motion body {
  background: var(--green-ink);
}

.motion body::before {
  opacity: 0;
}

.motion.no-webgl body::before {
  opacity: 1;
  transition: opacity 4.5s ease;
}

/* ---------- Fabric ---------- */

.fabric {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.no-webgl .fabric {
  display: none;
}

/* ---------- Composition ---------- */

.stage {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  padding: clamp(1.25rem, 5vw, 4rem);
  padding-inline: max(clamp(1.25rem, 5vw, 4rem), env(safe-area-inset-left), env(safe-area-inset-right));
}

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.lockup__logo {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.logo {
  display: block;
  /* width is also capped by viewport height so the lockup never clips in landscape */
  width: min(80vw, 45rem, 95vh);
  width: min(80vw, 45rem, 95svh);
  height: auto;
  aspect-ratio: 1226 / 540;
  overflow: visible;
  fill: var(--white);
}

/*
 * Copy hierarchy. The secondary line is derived from the main line's size,
 * so "NO MORE REGRETS." is --copy-ratio times larger at every viewport —
 * the hierarchy cannot drift or invert at any breakpoint.
 */
.lockup {
  --tagline-size: clamp(0.9375rem, 0.7rem + 1.2vw, 1.625rem);
  --copy-ratio: 1.6;
}

.tagline,
.teaser {
  max-width: 100%;
  margin: 0;
  text-transform: uppercase;
  /* single line wherever it fits; wraps to balanced, centred lines on very narrow screens */
  text-wrap: balance;
}

.tagline {
  margin-top: clamp(1.25rem, 5vh, 3.25rem);
  font-size: var(--tagline-size);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.44em;
  /* re-centre: letter-spacing adds a trailing gap after the last glyph */
  padding-left: 0.44em;
  text-shadow: 0 0 1.75em rgba(0, 18, 15, 0.55);
}

.teaser {
  margin-top: clamp(0.6rem, 1.8vh, 1.15rem);
  font-size: calc(var(--tagline-size) / var(--copy-ratio));
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.58em;
  padding-left: 0.58em;
  color: rgba(255, 255, 255, 0.66);
  text-shadow: 0 0 1.75em rgba(0, 18, 15, 0.55);
}

.dot--raspberry {
  color: var(--raspberry);
}

.dot--lime {
  color: var(--lime);
}

/* ---------- Intro: initial (hidden) state. Motion itself is driven by js/timeline.js ---------- */

.motion [data-logo="symbol"],
.motion [data-logo="glyph"],
.motion [data-line] {
  opacity: 0;
}

.motion [data-line] {
  will-change: transform, opacity;
}

.motion.intro-done [data-line] {
  will-change: auto;
}