/* ==========================================================================
   Phoenix Events — Work in progress
   Brand: Phoenix Red #E81D24 · Flame Orange #FF5A1F · Sun Gold #FFB32D
          Night Charcoal #1F1F23 · Soft White #FAFAFA
   ========================================================================== */

@font-face {
  font-family: 'Nunito';
  src: url('/assets/font/Nunito-Variable.woff2') format('woff2-variations'),
       url('/assets/font/Nunito-Variable.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --red:      #E81D24;
  --orange:   #FF5A1F;
  --gold:     #FFB32D;
  --charcoal: #1F1F23;
  --white:    #FAFAFA;

  --ink:        var(--white);
  --ink-muted:  color-mix(in srgb, var(--white) 62%, var(--charcoal));
  --bg:         var(--charcoal);
  --bg-deep:    color-mix(in srgb, var(--charcoal) 82%, #000);
  --hairline:   color-mix(in srgb, var(--white) 14%, transparent);

  --gradient: linear-gradient(135deg, var(--red) 0%, var(--orange) 50%, var(--gold) 100%);

  --font: 'Nunito', ui-rounded, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --shell: min(100% - 2.5rem, 46rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* --------------------------------------------------------------- base ---- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.75rem, 5vw, 4rem) 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 50% 8%,  color-mix(in srgb, var(--red) 14%, transparent) 0%, transparent 62%),
    radial-gradient(90% 70% at 50% 108%, color-mix(in srgb, var(--orange) 16%, transparent) 0%, transparent 60%),
    var(--bg-deep);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------- particle layers ---- */

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer canvas { display: block !important; }

/* ambient embers, full viewport */
.layer--sparks {
  position: fixed;
  z-index: 0;
  opacity: .55;
  mix-blend-mode: screen;
}

/* dense flames, bound to the phoenix. The radial mask kills the canvas'
   rectangular edge, the linear one makes the embers fade as they rise. */
.layer--flames {
  inset: 6% -8% -16%;
  z-index: 1;
  mix-blend-mode: screen;
  filter: blur(1.1px) saturate(1.2);
  -webkit-mask-image:
    radial-gradient(58% 52% at 50% 72%, #000 0%, #000 42%, transparent 78%),
    linear-gradient(to top, #000 0%, #000 32%, rgba(0, 0, 0, .5) 66%, transparent 92%);
          mask-image:
    radial-gradient(58% 52% at 50% 72%, #000 0%, #000 42%, transparent 78%),
    linear-gradient(to top, #000 0%, #000 32%, rgba(0, 0, 0, .5) 66%, transparent 92%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* ----------------------------------------------------------- layout ----- */

.stage {
  position: relative;
  z-index: 2;
  width: var(--shell);
  margin-inline: auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

/* ------------------------------------------------------------ badge ----- */

.badge {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .45em 1em .45em .85em;
  font-size: clamp(.7rem, 1.6vw, .78rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 8%, transparent);
}

.badge__dot {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 70%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%      { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange) 65%, transparent); }
  70%,
  100%    { box-shadow: 0 0 0 .7em color-mix(in srgb, var(--orange) 0%, transparent); }
}

/* ---------------------------------------------------------- phoenix ----- */

.phoenix {
  position: relative;
  margin-top: .5rem;
  width: clamp(13rem, 42vw, 21rem);
  aspect-ratio: 5 / 4;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.phoenix__glow {
  position: absolute;
  inset: -34% -30%;
  z-index: 0;
  background:
    radial-gradient(52% 46% at 50% 66%, color-mix(in srgb, var(--orange) 30%, transparent) 0%, transparent 72%),
    radial-gradient(34% 26% at 50% 80%, color-mix(in srgb, var(--gold) 22%, transparent) 0%, transparent 74%);
  filter: blur(26px);
  animation: breathe 5.5s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: .72; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

.phoenix__logo {
  position: relative;
  z-index: 2;
  width: 100%;
  filter: drop-shadow(0 6px 26px color-mix(in srgb, var(--red) 45%, transparent));
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* --------------------------------------------------------- wordmark ----- */

.wordmark {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .28em;
  line-height: 1;
  font-size: clamp(2.1rem, 9vw, 3.9rem);
}

.wordmark__phoenix {
  font-weight: 800;
  letter-spacing: -.015em;
  background: var(--gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.wordmark__events {
  font-weight: 600;
  font-size: .62em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ------------------------------------------------------------- text ----- */

.tagline {
  margin: 0;
  font-size: clamp(1rem, 3.4vw, 1.3rem);
  font-weight: 600;
  color: var(--ink);
}

.lede {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(.94rem, 2.6vw, 1.05rem);
  line-height: 1.65;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- actions ----- */

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: .35rem;
}

.btn {
  --btn-y: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0 1.5rem;
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border-radius: 999px;
  transform: translateY(var(--btn-y));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease), border-color .25s var(--ease);
}

.btn--primary {
  color: var(--charcoal);
  background: var(--gradient);
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--orange) 65%, transparent);
}

.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--white) 4%, transparent);
}

@media (hover: hover) {
  .btn:hover { --btn-y: -2px; }
  .btn--primary:hover { box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--orange) 80%, transparent); }
  .btn--ghost:hover {
    border-color: color-mix(in srgb, var(--orange) 55%, transparent);
    background: color-mix(in srgb, var(--orange) 10%, transparent);
  }
}

.btn:active { --btn-y: 0; }

@media (max-width: 30rem) {
  .actions { width: min(100%, 20rem); }
  .btn { padding: 0 1rem; }
  .btn--primary { flex: 1 0 100%; }
  .btn--ghost { flex: 1 1 0; }
}

/* ----------------------------------------------------------- footer ----- */

.foot {
  margin-top: clamp(1rem, 4vw, 2rem);
  display: grid;
  gap: .3rem;
  font-size: .8rem;
  color: color-mix(in srgb, var(--white) 42%, var(--charcoal));
}

.foot p { margin: 0; }

/* ------------------------------------------------------ a11y / motion --- */

@media (prefers-reduced-motion: reduce) {
  .badge__dot,
  .phoenix__glow,
  .phoenix__logo { animation: none; }

  .btn { transition: none; }

  .layer--sparks,
  .layer--flames { display: none; }
}