/* ============================================================
   Coalridge Outdoor Grills — eLearning course
   Brand tokens from Coalridge_StyleGuide.pdf
   ============================================================ */

@font-face {
  font-family: 'Raleway';
  src: url('assets/fonts/Raleway-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('assets/fonts/Raleway-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('assets/fonts/Raleway-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('assets/fonts/Raleway-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('assets/fonts/Raleway-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('assets/fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Brand palette */
  --charcoal: #2B3139;
  --ash: #C4BEBC;
  --white: #FFFFFF;
  --fire: #E46A55;

  /* Derived charcoal scale (warm-cool neutral) */
  --char-950: #14171c;
  --char-900: #1b1f25;
  --char-800: #232932;
  --char-700: #2B3139;
  --char-600: #3a424d;
  --char-500: #4d5662;

  /* Ember / fire scale */
  --ember-deep: #b03a26;
  --ember: #E46A55;
  --ember-hot: #f59563;
  --ember-glow: #ffb37a;

  --ash-soft: #d8d3d0;
  --ink: #1b1f25;

  --font-head: 'Raleway', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: #0d0f12;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

#root { height: 100%; }

button { font-family: inherit; cursor: pointer; }

/* ---- Stage: scales the phone to fit any viewport ---- */
.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 118%, rgba(228,106,85,0.30) 0%, rgba(228,106,85,0.06) 32%, rgba(0,0,0,0) 60%),
    radial-gradient(80% 60% at 50% -10%, rgba(196,190,188,0.07) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, #0c0e11 0%, #121519 55%, #0a0c0e 100%);
}
.stage-amber {
  position: absolute; left: 50%; bottom: -8%;
  width: 78vmin; height: 60vmin; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(245,149,99,0.35), rgba(228,106,85,0) 70%);
  filter: blur(8px);
  animation: amberBreath 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes amberBreath {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.9;  transform: translateX(-50%) scale(1.06); }
}
.device-scale { transform-origin: center center; }

/* ---- Screen scaffold (inside the phone) ---- */
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  color: var(--white);
  background: linear-gradient(180deg, var(--char-900) 0%, var(--char-950) 100%);
}
.screen-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* status-bar scrim — fades scrolled content out before it reaches the clock / signal bars */
.screen:not(.intro)::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 110px;
  z-index: 8; pointer-events: none;
  background: linear-gradient(180deg,
    var(--char-900) 0%, var(--char-900) 48%,
    rgba(27,31,37,0.85) 66%, rgba(27,31,37,0) 100%);
}

/* top utility bar */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 58px 18px 0;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brandmark { display: flex; align-items: center; gap: 8px; }
.brandmark img { height: 18px; display: block; opacity: 0.92; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  color: var(--ash-soft);
  transition: background .2s, color .2s, transform .15s;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* progress dots */
.progress {
  display: flex; gap: 7px; align-items: center;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.08);
}
.progress .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.22); transition: all .35s;
}
.progress .dot.active { width: 22px; border-radius: 999px; background: var(--fire); }
.progress .dot.done { background: rgba(228,106,85,0.5); }

/* eyebrow / chapter label */
.eyebrow {
  font-family: var(--font-head); font-weight: 700;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fire);
}
.kicker-num {
  font-family: var(--font-head); font-weight: 800;
  color: rgba(196,190,188,0.5); font-size: 13px; letter-spacing: 0.08em;
}

h1, h2, h3 { font-family: var(--font-head); margin: 0; color: #fff; }
.h-display {
  font-weight: 800; font-size: 40px; line-height: 1.02;
  letter-spacing: -0.01em; text-wrap: balance;
}
.h-title {
  font-weight: 800; font-size: 29px; line-height: 1.06;
  letter-spacing: -0.01em; text-wrap: balance;
}
.lede {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: rgba(216,211,208,0.82); font-weight: 400;
}
.muted { color: rgba(196,190,188,0.62); }

/* primary CTA */
.btn-fire {
  appearance: none; border: none;
  font-family: var(--font-head); font-weight: 800; font-size: 16px;
  letter-spacing: 0.01em;
  color: #fff; background: var(--fire);
  padding: 16px 26px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 10px 28px -8px rgba(228,106,85,0.7), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: transform .15s ease, box-shadow .2s, filter .2s;
}
.btn-fire:hover { filter: brightness(1.05); box-shadow: 0 14px 34px -8px rgba(228,106,85,0.85), inset 0 1px 0 rgba(255,255,255,0.22); }
.btn-fire:active { transform: translateY(1px) scale(0.99); }

.btn-ghost {
  appearance: none; background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--ash-soft);
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .2s, color .2s, transform .15s, border-color .2s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-ghost:active { transform: scale(0.98); }
.btn-ghost.is-stub {
  color: var(--ember-glow); border-color: rgba(255,179,122,0.35);
  font-style: italic; letter-spacing: 0.01em;
}

/* bottom nav bar (prev / next) */
.navbar {
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(20,23,28,0) 0%, var(--char-950) 38%);
}
.nav-prev {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; color: var(--ash-soft);
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  padding: 12px 6px; transition: color .2s, transform .15s;
}
.nav-prev:disabled { opacity: 0; pointer-events: none; }
.nav-prev:hover { color: #fff; }
.nav-next {
  flex: 1; max-width: 220px;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Reveal system: content is ALWAYS visible at rest (no transition needed to
   reach it). The entrance is a transient animation applied via .reveal-run,
   which JS removes once it finishes — so a frozen capture/print can never
   strand content at opacity:0. */
.fade-up { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .reveal-run .fade-up { animation: fadeUp .55s cubic-bezier(.2,.7,.2,1) both; }
  .reveal-run .d1 { animation-delay: .04s; } .reveal-run .d2 { animation-delay: .12s; }
  .reveal-run .d3 { animation-delay: .22s; } .reveal-run .d4 { animation-delay: .34s; }
  .reveal-run .d5 { animation-delay: .48s; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-amber, .flame-flicker, .ember-pulse,
  .intro-glow, .flame-halo, .grill-haze, .bed-shimmer {
    animation: none !important;
  }
}