/* ============================================================
   Erie Steelhead Guide — flash layer
   Vanilla CSS only. Quiet, print-shop discipline: a static
   topographic texture on the hero, a live-conditions ticker,
   gentle scroll reveal. Honors prefers-reduced-motion.
   Loaded after each page's own styles.
   ============================================================ */

/* ---------- Homepage hero: static topographic texture ---------- */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1.5'%3E%3Cpath d='M-20 70 C90 20 190 120 300 70 S450 40 500 80'/%3E%3Cpath d='M-20 130 C90 80 190 180 300 130 S450 100 500 140'/%3E%3Cpath d='M-20 200 C110 140 210 250 320 190 S460 170 500 210'/%3E%3Cpath d='M-20 280 C100 220 200 330 310 270 S450 240 500 290'/%3E%3Cpath d='M-20 360 C110 300 210 410 320 350 S460 320 500 370'/%3E%3Cpath d='M-20 430 C100 380 200 480 310 420 S450 400 500 440'/%3E%3C/g%3E%3C/svg%3E");
  background-size:480px 480px;
  background-position:0 var(--py,0px);
  pointer-events:none;
}
.hero .w{ position:relative; z-index:2; }

/* ---------- Live-conditions ticker (homepage) ---------- */
.gg-ticker{
  background:#162a21;
  border-bottom:3px solid #e07b2a;
  overflow:hidden;
  padding:10px 0;
}
.gg-ticker-track{
  display:flex; width:max-content;
  animation:ggTick 32s linear infinite;
}
.gg-ticker:hover .gg-ticker-track{ animation-play-state:paused; }
.gg-tick-group{ display:flex; align-items:center; }
.gg-tick-item{
  color:#dfe7e4; font-weight:700; font-size:13.5px;
  letter-spacing:.05em; text-transform:uppercase; white-space:nowrap;
  padding:0 16px;
}
.gg-tick-item b{ color:#e07b2a; }
.gg-tick-item a{ color:#dfe7e4; text-decoration:none; }
.gg-tick-item a:hover{ color:#fff; }
.gg-tick-sep{ color:#5c6f75; font-size:11px; }
@keyframes ggTick{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* ---------- Scroll reveal (JS adds .rv, observer adds .in) ---------- */
html.fx .rv{
  opacity:0; transform:translateY(12px);
  transition:opacity .55s ease, transform .55s ease;
}
html.fx .rv.in{
  opacity:1; transform:none;
  transition:opacity .55s ease, transform .18s ease; /* snappier transform = tilt stays responsive */
}

/* ---------- Card hover (JS tilt transform comes from flash.js) ---------- */
.card, .prod, .river, .feature{
  transition:transform .18s ease, box-shadow .25s ease;
}
@media (hover:hover){
  .card:hover, .prod:hover{
    box-shadow:0 10px 22px rgba(22,42,33,.10);
  }
}

/* ---------- STEELHEAD FIGHT banner ---------- */
.gg-banner{
  position:relative; overflow:hidden;
  background:#162a21;
  border-top:3px solid #e07b2a; border-bottom:3px solid #e07b2a;
  margin:32px 0;
}
.gg-banner-in{
  max-width:1120px; margin:0 auto; padding:26px 20px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.gg-kick{
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:#e07b2a;
}
.gg-banner h2{
  color:#fff; font-family:'Fraunces',Georgia,serif;
  font-size:clamp(24px,4vw,34px); font-weight:900; line-height:1.12; margin:4px 0 6px;
}
.gg-banner p{ color:#dfe7e4; font-size:15px; max-width:540px; line-height:1.55; }
.gg-play{
  margin-left:auto;
  background:#a8540f; color:#fff; text-decoration:none;
  font-weight:900; font-size:17px; letter-spacing:.02em;
  padding:15px 26px; border-radius:8px; text-align:center;
  box-shadow:0 4px 0 #7c3d08;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.gg-play span{
  display:block; font-size:11.5px; font-weight:700;
  letter-spacing:.05em; opacity:.85; margin-top:3px;
}
.gg-play:hover{ background:#8a430b; text-decoration:none; }
.gg-play:active{ transform:translateY(2px); box-shadow:0 2px 0 #7c3d08; }
@media (max-width:640px){ .gg-play{ margin-left:0; width:100%; } }

/* Narrow variant — matches the Living Rivers Pass page measure */
.gg-banner--amber .gg-banner-in{ max-width:760px; }

/* ---------- Reduced motion: everything settles ---------- */
@media (prefers-reduced-motion: reduce){
  .gg-ticker-track{ animation:none; width:auto; flex-wrap:wrap; }
  html.fx .rv{ opacity:1; transform:none; transition:none; }
  .card, .prod, .river, .feature{ transition:none; }
}