/* Hero art sizing */
.hero-art svg {
  display: block;
  max-width: 400px;
  width: 100%;
  height: auto;
}

/* Sailboat: sketch-in, then gentle bob */
#hull, #mast, #sail {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: draw-in 2.5s ease-out forwards, bob var(--duration-slow) ease-in-out 2.5s infinite;
}
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Wind lines: drifting dashes */
.wind-line {
  stroke-dasharray: 20 10;
  animation: drift var(--duration-medium) linear infinite;
}
@keyframes drift { to { stroke-dashoffset: -30; } }

/* Reduced motion: everything static */
.reduced-motion #hull, .reduced-motion #mast, .reduced-motion #sail {
  stroke-dashoffset: 0;
  animation: none;
}
.reduced-motion .wind-line { animation: none; }

/* Title: words blow in like a sail catching wind */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateX(-40px) rotate(-3deg);
  animation: blow-in 1.2s ease-out forwards;
}
.hero h1 .word:nth-child(2) { animation-delay: 0.2s; }
.hero h1 .word:nth-child(3) { animation-delay: 0.4s; }
@keyframes blow-in {
  60% { transform: translateX(4px) rotate(1deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}
.reduced-motion .hero h1 .word {
  opacity: 1; transform: none; animation: none;
}

/* Reduced motion must not depend on JS: replicate the .reduced-motion
   overrides in a plain media query (belt and suspenders with reduced-motion.js). */
@media (prefers-reduced-motion: reduce) {
  #hull, #mast, #sail {
    stroke-dashoffset: 0;
    animation: none;
  }
  .wind-line { animation: none; }
  .hero h1 .word {
    opacity: 1; transform: none; animation: none;
  }
}

#ambient-toggle {
  background: var(--color-surface-pale);
  color: var(--color-text-primary);
  border: 1px solid var(--color-text-primary);
  border-radius: 999px;
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
}
#ambient-toggle[aria-pressed="true"] {
  background: var(--color-text-primary);
  color: var(--color-canvas);
}

/* Latest highlight reel slot: designed empty state until reels ship */
.latest-reel { margin-block: var(--space-4); }
.empty-state-card {
  background: var(--color-surface-pale);
  border: 1px solid var(--color-surface-foam);
  border-radius: 8px;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.empty-state-art {
  display: block;
  width: 180px;
  height: auto;
  flex-shrink: 0;
}
.empty-state-card p { margin: 0; flex: 1 1 20rem; }

/* Gull: floating accent beside the At the Helm heading */
.gull-accent {
  position: absolute;
  top: calc(-1 * var(--space-3));
  right: 0;
  width: 80px;
  height: auto;
  opacity: 0.8;
}

/* Media cards (Task 8) */
.media-card {
  margin-block: var(--space-3);
  max-width: 600px;
  border: 1px solid var(--color-surface-foam);
  border-radius: 8px;
  padding: var(--space-2);
}
.media-card img,
.chapter-media img {
  /* Layout-reserving placeholder tint while images load */
  min-height: 200px;
  background: var(--color-surface-pale);
}
.media-card img { width: 100%; height: auto; border-radius: 4px; }
.ad-button {
  background: var(--color-canvas);
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
  border-radius: 4px;
  padding: var(--space-1);
  margin-block-start: var(--space-1);
  cursor: pointer;
}
.ad-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Chapter split-panel layout (Task 10) */
.chapter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  align-items: start;
  margin-block: var(--space-4);
}
/* sticky is a positioned element, so it also anchors the absolute .gull-accent */
.chapter-text { position: sticky; top: var(--space-2); }
.chapter-media img { width: 100%; height: auto; margin-block-end: var(--space-2); }
.chapter .divider { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .chapter { grid-template-columns: 1fr; }
  /* relative (not static) so the absolute .gull-accent stays anchored on mobile */
  .chapter-text { position: relative; top: auto; }
}