/* ============================================================
   The Quiet Current — styles
   Base reset + keyframes are lifted verbatim from the original
   design; the blocks below the divider power the vanilla-JS
   reimplementation of the runtime bindings.
   ============================================================ */
html, body { margin:0; padding:0; background:#f6efe0; overflow-x:hidden; }
    html { scroll-behavior:smooth; }
    a { color:#4b5166; }
    a:hover { color:#b06a48; }
    @keyframes introOut { to { transform: translateY(-101%); } }
    @keyframes introRise { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform: translateY(0); } }
    @keyframes ruleGrow { from { width:0; } to { width:120px; } }
    @keyframes bobY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
    @keyframes bobY2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    @keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-34px); } }
    @keyframes birdDrift { from { transform: translateX(-12vw); } to { transform: translateX(112vw); } }
    @keyframes barDance1 { 0%,100% { height:6px; } 50% { height:16px; } }
    @keyframes barDance2 { 0%,100% { height:14px; } 50% { height:5px; } }
    @keyframes barDance3 { 0%,100% { height:9px; } 50% { height:15px; } }
    @keyframes letterPop { from { opacity:0; transform: translateY(0.6em) rotate(7deg) scale(0.6); } }
    @keyframes introLetter { from { opacity:0; transform: translateY(0.7em) rotate(8deg) scale(0.7); } }
    @keyframes heroPanel { from { opacity:0; transform: translateX(-70px) rotate(-4deg); } }
    @keyframes driftX { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
    @keyframes fall { to { stroke-dashoffset: -60; } }
    @keyframes rockBoat { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2.2deg); } }
    @keyframes bobRock { 0%,100% { transform: translateY(0) rotate(-1.6deg); } 50% { transform: translateY(-7px) rotate(1.8deg); } }
    @keyframes sparkleFade { from { opacity:1; transform: rotate(45deg) scale(1); } to { opacity:0; transform: translate(var(--dx,0px), -36px) rotate(230deg) scale(0.1); } }
    @keyframes pulseGlow { 0%,100% { opacity:0.22; transform: scale(1); } 50% { opacity:0.5; transform: scale(1.2); } }
    @keyframes twinkle { 0%,100% { opacity:0.1; transform: scale(0.5); } 50% { opacity:0.95; transform: scale(1.15); } }
    @keyframes ripplePop { 0% { opacity:0.9; transform: scale(0.5); } 100% { opacity:0; transform: scale(1.45); } }
    @keyframes sway { from { transform: rotate(-0.4deg); } to { transform: rotate(0.5deg); } }
    @keyframes zRise { 0% { opacity:0; transform: translate(0,0) scale(0.5); } 18% { opacity:0.95; } 100% { opacity:0; transform: translate(16px,-52px) scale(1.3); } }
    @keyframes breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.02,1.05); } }

/* ---- static-site additions (replacing the dc-runtime bindings) ---- */

/* equalizer bars in the ambient-sound button */
.eq-bar { animation-play-state: paused; }
.eq-bar.playing { animation-play-state: running; }

/* sleeping bear: eyes-open art is hidden until you wake him */
.bear-eye-open { display: none; }

/* hover states (were style-hover="…" in the design) applied via app.js,
   but declare a smooth transition so they feel intentional */
[data-hover] { transition: transform 0.15s ease, opacity 0.15s ease,
  background 0.15s ease, box-shadow 0.15s ease, border-bottom-color 0.15s ease; }

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   Responsive layer
   The illustration was authored on a 1500x1000 canvas with
   inline styles, so these overrides use !important to win.
   ============================================================ */

/* svh avoids the mobile URL-bar resize jump (falls back to the
   inline 100vh where unsupported) */
#hero { height: 100svh !important; }

/* --- Portrait / squarish windows: show the WHOLE scene -------------
   Each parallax layer is a 1500x1000 SVG that center-crops on narrow
   windows, hiding most of the illustration. Instead, on portrait
   windows every scene layer is resized to the artwork's own aspect
   ratio (3:2) at full viewport width — so the entire scene is
   visible — and vertically centered a touch below middle. The hero
   background continues the art's own top (sky pink) and bottom
   (grass green) colors above and below the band, so the section
   still fills the screen edge-to-edge. The 28px side bleed absorbs
   the parallax / cloud-drift shifts without exposing gaps. */
@media (max-aspect-ratio: 1/1) {
  #hero {
    background: linear-gradient(180deg, #f2cbc5 70vh, #93a088 70vh) !important;
    background: linear-gradient(180deg, #f2cbc5 70svh, #93a088 70svh) !important;
  }
  /* full canvas, exactly edge-to-edge — no side bleed needed because
     the band is frozen in place in fit mode (app.js) and the two
     root-level svg drift/sway animations are disabled below */
  #hero .scene-layer {
    inset: calc(56vh - 100vw / 3) auto auto 0 !important;
    inset: calc(56svh - 100vw / 3) auto auto 0 !important;
    width: 100vw !important;
    height: calc(100vw / 1.5) !important;
  }
  /* clouds driftX / plants sway animate the whole svg element; with a
     zero-bleed band they would expose gaps at the screen edges */
  #hero .scene-layer > svg { animation: none !important; }

  /* soft haze along the band's top and bottom edges, so shapes that
     bleed off the canvas (tree canopy, clifftop, foreground plants)
     melt into the sky / grass instead of ending in a hard cut line */
  #hero::before, #hero::after {
    content: ""; position: absolute; left: 0; right: 0;
    z-index: 50; pointer-events: none;
  }
  /* the title / caption panels must float above the haze */
  #hero [data-depth]:not(.scene-layer) { z-index: 55; }
  #hero::before {
    top: calc(56vh - 100vw / 3);
    top: calc(56svh - 100vw / 3);
    height: 64px;
    background: linear-gradient(180deg, #f2cbc5 0, #f2cbc5 6px, rgba(242,203,197,0) 100%);
  }
  #hero::after {
    top: calc(56vh + 100vw / 3 - 48px);
    top: calc(56svh + 100vw / 3 - 48px);
    height: 48px;
    background: linear-gradient(0deg, #93a088 0, #93a088 6px, rgba(147,160,136,0) 100%);
  }
}

/* --- Small screens -------------------------------------------------- */
@media (max-width: 760px) {
  header { padding: 14px 12px !important; gap: 10px !important; justify-content: center !important; }
  header nav {
    flex-wrap: wrap !important; justify-content: center !important;
    gap: 8px 16px !important; padding: 9px 14px !important;
  }
  header nav a { font-size: 11px !important; letter-spacing: 0.16em !important; }

  .title-panel { top: 22% !important; max-width: 78vw !important; padding: 22px 24px !important; }

  .caption-panel {
    left: 4% !important; right: 4% !important; bottom: 12% !important;
    width: auto !important; max-width: none !important; padding: 14px 16px !important;
  }

  /* the fixed boat-progress rail crowds a phone screen */
  .voyage-rail { display: none !important; }

  /* intro overlay tagline: tighten tracking so it fits and centers */
  .intro-overlay { padding: 0 22px !important; text-align: center !important; }
  .intro-overlay > div:last-child { letter-spacing: 0.16em !important; font-size: 13px !important; }

  #bear-bubble { left: 4% !important; }

  /* tighter section rhythm */
  #story { padding: 70px 18px 60px !important; }
  #flow { padding: 0 18px 70px !important; }
  #efficiency { padding: 0 18px 30px !important; }
  #begin { padding: 50px 18px 80px !important; }
  #begin > div { padding: 38px 22px !important; }
  footer { padding: 28px 20px !important; justify-content: center !important; text-align: center !important; }
}