/* Lakes Region AI: graph-paper backdrop and the drafted schematics (see schematic.js).
   Rule of thumb: the drawing is felt more than seen. Keep the line opacities low. */

.blueprint{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background-color:var(--night);
  background-image:
    linear-gradient(rgba(246,242,234,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(246,242,234,.08) 1px,transparent 1px);
  background-size:48px 48px,48px 48px}

/* The drawing lives in the right-hand margin, vertically centered */
.bp-stage{position:absolute;right:clamp(8px,2.5vw,56px);top:50%;transform:translateY(-46%);width:min(40vw,700px);aspect-ratio:600/440}
.bp-fig{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.bp-fig.on{opacity:1}
.bp-fig svg{width:100%;height:auto;overflow:visible}

/* Pencil lines */
.bp-fig .ln{fill:none;stroke:rgba(246,242,234,.31);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1}
.bp-fig .ln.ac{stroke:rgba(255,177,98,.55)}
.bp-fig .ln.dash{stroke-dasharray:.012 .02;stroke-dashoffset:0;opacity:0;transition:opacity .4s}
.bp-fig .lb{fill:rgba(246,242,234,.38);font-family:"Bradley Hand","Segoe Print","Noteworthy","Comic Neue",cursive;font-size:17px;font-style:italic;opacity:0}
.bp-fig .lb.ac{fill:rgba(255,177,98,.6)}
.bp-fig .lb.nm{font-style:normal;font-size:13px}
.bp-title{position:absolute;right:0;bottom:-8px;text-align:right;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(246,242,234,.32);opacity:0;transition:opacity .6s ease .3s}

/* Drafting: each stroke draws on in turn, labels follow */
.bp-fig.on .ln{animation:bp-draw 1.1s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d,0s)}
.bp-fig.on .ln.dash{animation:none;opacity:1;transition-delay:var(--d,0s)}
.bp-fig.on .lb{animation:bp-ink .6s ease forwards;animation-delay:calc(var(--d,0s) + .25s)}
.bp-fig.on .bp-title{opacity:1}
@keyframes bp-draw{to{stroke-dashoffset:0}}
@keyframes bp-ink{to{opacity:1}}

/* Let the graph paper show through the page.
   Sections that used to be solid become translucent; the hero keeps its heavy left-side shade for the text. */
.has-blueprint .hero-photo:not(.has-photo),
.has-blueprint .season-photo:not(.has-photo){background:transparent}
.has-blueprint .band.alt,
.has-blueprint .spec{background:rgba(42,49,64,.72)}
.has-blueprint .closing{background:radial-gradient(ellipse at 50% 0%,rgba(193,108,57,.22),transparent 60%)}
.has-blueprint .hero-shade::after{display:none}   /* the page grid replaces the hero-only grid */
/* Keep the dark shade behind the hero text, but let the right side (where the drawing is) breathe */
.has-blueprint .hero-shade{background:linear-gradient(90deg,rgba(27,38,50,.92) 0%,rgba(27,38,50,.85) 40%,rgba(27,38,50,.15) 62%,rgba(27,38,50,0) 75%)}
@media (max-width:640px){.has-blueprint .hero-shade{background:linear-gradient(180deg,rgba(27,38,50,.88),rgba(27,38,50,.7) 70%,rgba(27,38,50,.3))}}

/* Below 1500px the content fills most of the width, so the drawing steps back a little.
   Wider than that, it has its own margin and can show at full strength. */
.bp-stage{opacity:.9}
@media (min-width:1500px){.bp-stage{width:min(38vw,760px);opacity:1}}

/* Tablets and phones: smaller, quieter, tucked to the bottom so headlines stay clean */
@media (max-width:980px){
  .bp-stage{top:auto;bottom:4vh;right:-6vw;transform:none;width:min(70vw,520px);opacity:.65}
}
/* Phones have no margin to spare: the drawing would sit under paragraphs, so phones get the graph paper only */
@media (max-width:640px){
  .bp-stage{display:none}
}

/* Reduced motion: no drafting, drawings simply swap */
@media (prefers-reduced-motion:reduce){
  .bp-fig .ln{stroke-dashoffset:0}
  .bp-fig .lb,.bp-fig .ln.dash{opacity:1}
  .bp-fig.on .ln,.bp-fig.on .lb{animation:none}
  .bp-fig{transition:none}
}

/* FIG. 7 stars: small orange stars pop onto each city, then the gold Lakes Region star rises out of the lake */
.bp-fig .st{fill:rgba(255,177,98,.22);stroke:rgba(255,177,98,.6);stroke-width:1.4;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(0)}
.bp-fig .rise{fill:rgba(229,165,43,.2);stroke:rgba(229,165,43,.85);stroke-width:1.8;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:center;opacity:0;transform:translate(var(--fx),var(--fy)) scale(.15)}
.bp-fig .lb.gold{fill:rgba(229,165,43,.75)}
.bp-fig.on .st{animation:bp-pop .55s cubic-bezier(.3,1.7,.5,1) forwards;animation-delay:var(--d,0s)}
.bp-fig.on .rise{animation:bp-rise 1.3s cubic-bezier(.2,.9,.3,1.15) forwards;animation-delay:var(--d,0s)}
@keyframes bp-pop{0%{opacity:0;transform:scale(0) rotate(-40deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes bp-rise{0%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.15)}25%{opacity:1}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .bp-fig .st,.bp-fig .rise{opacity:1;transform:none}
  .bp-fig.on .st,.bp-fig.on .rise{animation:none}
}