/* ============================================================
   StoryChef Media v3 — Shared base
   Pulls tokens from the canonical design-system CSS.
   ============================================================ */

@import url('./colors_and_type.css');

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }

/* ===== Scroll-reveal — fade up on intersection ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track, .pulse, .blink { animation: none !important; }
}

/* ===== Marquee — endless horizontal scroll ===== */
.marquee {
  position: relative;
  overflow: hidden;
  --marquee-duration: 60s;
}
.marquee-track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: sc-marquee var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes sc-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== Ambient pulse on the hero glow ===== */
.pulse { animation: sc-pulse 8s ease-in-out infinite; }
@keyframes sc-pulse {
  0%, 100% { opacity: 0.9; transform: translate(-50%, 0) scale(1); }
  50%      { opacity: 1.0; transform: translate(-50%, 0) scale(1.06); }
}

/* ===== REC blink ===== */
.blink { animation: sc-blink 1.4s steps(2, end) infinite; }
@keyframes sc-blink {
  0%, 60%   { opacity: 1; }
  60.01%, 100% { opacity: 0.15; }
}

/* ===== Shared button styles ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  border-radius: 6px;
  transition: all 200ms var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--sc-red); color: #fff; }
.btn-primary:hover { background: var(--sc-red-hover); transform: translateY(-1px); }
.btn-large { padding: 18px 32px; font-size: 16px; border-radius: 8px; }
.btn-ghost {
  background: transparent; color: var(--fg-1);
  border: 1px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--sc-red); color: var(--sc-red); }

.btn .arrow { transition: transform 200ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }