/* Atlantic Road Seaside Housing — homepage scrollytelling ("The Journey")
   Loads after css/main.css, css/chart.css and css/home.css on index.html only.

   Sticky full-viewport visuals + seven chapter cards scrolling over them,
   plus the chart instrument (inline SVG generated by tools/make-chart.py)
   with a route that draws itself and a distance readout, both driven by
   js/story.js. All animated/hidden states are gated on .story.is-enhanced
   so the section stays fully readable without JS.

   How the chart is drawn is NOT here — css/chart.css owns that, shared with
   boats.html. This file only adds what is specific to the journey: the
   chapter-six reveal of the sea leg, and the instrument reductions (the
   generator emits a full label set for large formats; at minimap size most
   of it is hidden). */

.story{
  background:var(--fjord);
  color:var(--linen);
  padding:0;
}
.story .eyebrow{color:var(--brass)}

.story-head{
  text-align:center;
  padding:clamp(5rem,10vw,9rem) clamp(20px,4vw,56px) clamp(3rem,6vw,5rem);
}
.story-head h2{
  font-size:clamp(2rem,4.2vw,3.3rem);
  max-width:20ch;
  margin:0 auto;
}
.story-head h2 em{font-style:italic;color:var(--brass-soft)}
.story-lede{
  max-width:46ch;
  margin:1.4rem auto 0;
  color:rgba(237,231,220,.72);
  font-size:.98rem;
}

/* ---------- Sticky stage + steps ---------- */
.story-scroll{position:relative}
.story-sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
}
.story-steps{
  position:relative;
  z-index:2;
  list-style:none;
  margin-top:-100vh;
  margin-top:-100svh;
}
.story-step{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:3.5rem clamp(20px,4vw,56px);
}

/* ---------- Visual layers ---------- */
.story-visual{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
.story-visual.is-active{opacity:1}
/* Bleed beyond the viewport so the parallax shift never shows edges */
.story-visual .img-slot{position:absolute;inset:-40px 0}
.story-visual .img-slot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Slow settle (Ken Burns) on the active scene */
.story.is-enhanced .story-visual .img-slot img{
  transform:scale(1.06);
  transition:transform 7s var(--ease);
}
.story.is-enhanced .story-visual.is-active .img-slot img{transform:scale(1)}
/* Split visual: winter | summer (chapter five) */
.story-visual--split .img-slot:first-child{right:50%}
.story-visual--split .img-slot:last-child{left:50%;border-left:1px solid var(--brass)}
.story-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(19,43,58,.55) 0%, rgba(19,43,58,.28) 45%, rgba(19,43,58,.72) 100%);
}
@media (prefers-reduced-motion:no-preference){
  .story.is-enhanced .story-visual .img-slot{
    transform:translate3d(0, calc(var(--par, 0) * 1px), 0);
  }
}
.story-credit{
  position:absolute;
  left:clamp(20px,4vw,56px);
  bottom:.85rem;
  z-index:2;
  font-family:var(--accent);
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(237,231,220,.5);
}

/* ---------- Instrument: chart + readout ---------- */
.story-instrument{
  position:absolute;
  right:clamp(20px,4vw,56px);
  bottom:2rem;
  z-index:3;
  width:clamp(230px,23vw,300px);
  background:rgba(19,43,58,.78);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(177,138,84,.45);
  padding:.7rem .7rem .65rem;
}
.story-instrument .chart{display:block;width:100%;height:auto}
.story-readout{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.1rem .8rem;
  margin-top:.6rem;
  border-top:1px solid rgba(237,231,220,.16);
  padding-top:.55rem;
}
.story-place{
  font-family:var(--accent);
  font-size:.7rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.story-count{
  font-family:var(--accent);
  font-size:.66rem;
  letter-spacing:.3em;
  color:rgba(237,231,220,.62);
  text-align:right;
}
.story-dist{
  grid-column:1 / -1;
  font-size:.86rem;
  color:rgba(237,231,220,.78);
  font-variant-numeric:tabular-nums;
}
.story-dist b{font-weight:500;color:var(--linen)}

/* ---------- Chart: sea leg reveal (chapter six) ----------
   The drawing styles live in css/chart.css, which loads first and leaves
   everything visible by default (so boats.html and no-JS both read). Here
   the sea route and the boat start hidden and fade in when js/story.js puts
   .sea-on on the chart. Scoped to #journey so the shared sheet's default
   stands everywhere else. */
#journey .chart-searoute{opacity:0;transition:opacity 1.2s var(--ease)}
#journey .chart.sea-on .chart-searoute{opacity:1}
#journey .chart-boat{opacity:0;transition:opacity .8s var(--ease)}
#journey .chart.sea-on .chart-boat{opacity:1}

/* Chart: instrument reductions — the full label set is for large formats;
   at minimap size only shape, route and markers stay legible. */
.story-instrument .chart-soundings,
.story-instrument .chart-graticule,
.story-instrument .chart-label,
.story-instrument .chart-rose,
.story-instrument .chart-detour--edge text{display:none}
.story-instrument .chart-frame--inner{display:none}

/* ---------- Step cards ---------- */
.story-card{
  position:relative;
  width:min(30rem, 100%);
  background:rgba(19,43,58,.82);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-left:1px solid var(--brass);
  padding:2.4rem 2.2rem;
}
.story-card::after{
  content:attr(data-num);
  position:absolute;
  top:.9rem;
  right:1.2rem;
  font-family:var(--accent);
  font-size:3rem;
  line-height:1;
  font-weight:300;
  color:rgba(177,138,84,.3);
  pointer-events:none;
}
.story-card .eyebrow{margin-bottom:1rem;margin-right:3.2rem}
.story-card h3{
  font-size:clamp(1.6rem,3vw,2.2rem);
  margin-bottom:1rem;
}
.story-card p{
  color:rgba(237,231,220,.82);
  font-size:.96rem;
}
.story-card p + p{margin-top:.9rem}

.story-facts{list-style:none;margin:.4rem 0 .6rem}
.story-facts li{
  padding:.55rem 0;
  border-bottom:1px solid rgba(237,231,220,.14);
  font-size:.92rem;
  color:rgba(237,231,220,.85);
}
.story-facts li strong{font-weight:500;color:var(--linen)}

.story-links{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.8rem;
  margin-top:1.4rem;
}
.story-link{
  font-family:var(--accent);
  font-size:.74rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--linen);
  border-bottom:1px solid var(--brass);
  padding-bottom:.3em;
  transition:color .3s;
}
.story-link:hover{color:var(--brass-soft)}
.story-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.4rem;
  margin-top:1.8rem;
}

/* ---------- Enhanced-only fade-ins (staggered) ---------- */
.story.is-enhanced .story-card .fade{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.story.is-enhanced .story-card.in .fade{opacity:1;transform:none}
.story-card .fade:nth-child(2){transition-delay:.1s}
.story-card .fade:nth-child(3){transition-delay:.2s}
.story-card .fade:nth-child(4){transition-delay:.3s}
.story-card .fade:nth-child(5){transition-delay:.4s}

/* ---------- Layout: cards left, instrument right (desktop) ---------- */
@media (min-width:821px){
  .story-card{margin-right:auto}
}

@media (max-width:820px){
  .story-card{margin:0 auto;padding:2rem 1.6rem}
  /* padding-top keeps tall cards clear of the top-right instrument */
  .story-step{align-items:flex-end;padding-top:11rem;padding-bottom:6.2rem}
  .story-instrument{
    right:14px;
    top:4.6rem;
    bottom:auto;
    width:128px;
    padding:.45rem .45rem .4rem;
  }
  .story-readout{margin-top:.4rem;padding-top:.35rem;gap:.05rem .4rem}
  .story-place{font-size:.56rem;letter-spacing:.18em}
  .story-count{display:none}
  .story-dist{font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .story-credit{bottom:.5rem;font-size:.56rem}
}

@media (prefers-reduced-motion:reduce){
  .story.is-enhanced .story-card .fade{opacity:1;transform:none}
  .story-visual{opacity:1}
  .story-visual:not(.is-active){visibility:hidden}
  .story.is-enhanced .story-visual .img-slot img{transform:none}
  .chart-wp.is-current .halo{animation:none}
  /* Must out-specify the #journey reveal rules above, not just chart.css */
  #journey .chart-searoute,#journey .chart-boat{opacity:1;transition:none}
}