/* Beamer — motion layer, Ice & Ember.
   Gated on html.wc-motion (set by landing-motion.js when reduced-motion is off).
   Without it, everything renders in its final state. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ===================== Scroll reveals (staggered) ===================== */
.rv {
  transition:
    opacity 0.75s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rvd, 0ms);
}
html.wc-motion .rv:not(.rv-in) {
  opacity: 0;
  transform: translateY(30px);
}

/* ===================== Headline ember word ===================== */
/* DS-style: an inline gradient sentence (background-clip:text). Inline — not
   inline-block — with a touch of bottom padding so italic descenders ('y' in
   "days") keep their ember fill instead of clipping. */
.js-headline { line-height: 1.1; }
.js-headline .warm-word {
  font-style: italic;
  font-weight: 500;
  white-space: nowrap;
  padding-bottom: 0.08em;
  background: linear-gradient(100deg, var(--spark-1), var(--ember-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 540;
}
html[data-accent="ice"] .js-headline .warm-word {
  background: linear-gradient(100deg, var(--ice-1), #1C7E8E);
  -webkit-background-clip: text;
  background-clip: text;
}
@media (prefers-reduced-motion: no-preference) {
  html.wc-motion .js-headline .warm-word { animation: wc-weight-breathe 7s ease-in-out infinite; }
}
@keyframes wc-weight-breathe {
  0%, 100% { font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 540; }
  50%      { font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 600; }
}

/* ===================== Rocket launch (header mark) ===================== */
@keyframes wc-rocket-launch {
  0%   { transform: translate(-7px, 9px) rotate(-14deg); opacity: 0; }
  60%  { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}
html.wc-motion .site-header .wc-rocket-mark {
  animation: wc-rocket-launch 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* ===================== Work stack (recent builds) ===================== */
.work-stack-wrap { padding-top: var(--space-6); }
.work-stack {
  position: relative;
  aspect-ratio: 10 / 7.2;
  max-width: 560px;
}
.work-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #0B1C24, #06121A);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.7), var(--glass-inset);
  transition:
    transform 0.66s cubic-bezier(0.25, 0.6, 0.2, 1),
    opacity 0.55s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.work-card.is-dragging { transition: opacity 0.55s ease, border-color 0.3s ease; cursor: grabbing; }
.work-card img { pointer-events: none; -webkit-user-drag: none; }
.work-card__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  height: 38px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(5, 18, 22, 0.55);
}
.work-card__dots { display: flex; gap: 6px; }
.work-card__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
}
.work-card__dots i:first-child { background: var(--spark); border-color: var(--spark); box-shadow: 0 0 8px var(--spark); }
.work-card__url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--glass-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-card__shot { position: relative; flex: 1; display: block; background: #06121A; }
.work-card__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.work-card__shot img.is-loaded { opacity: 1; }
.work-card__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5);
}
.work-card__name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-variation-settings: var(--display-axes);
  font-size: var(--text-xl);
  color: var(--glass-text);
  line-height: 1.1;
}
.work-card__dom {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--glass-text-dim);
}

@media (max-width: 960px) {
  .work-stack-wrap { padding-top: var(--space-5); }
  .work-stack { max-width: 480px; }
}