/* WP-Journeys scroll hero - styles
   Everything is scoped under .wpj-hero. No global selectors, no resets outside the component.
   Sizes are driven by the viewport (vh/vw) on purpose: the composition must not depend on the theme's container width. */
.wpj-hero{
  --sky-top:#5f86b3; --sky-mid:#8fb0d2; --sky-low:#ecd6c2; --sky-horizon:#f7dfc4;
  --ink:#18202c;
  --can-white:#ffffff; --can-blue:#1e9bff;   /* flag blue, lifted so it separates from the dark rock and the sky */ --can-yellow:#ffcc00;   /* Canary Islands flag */
  --page:#ffffff;                                                  /* colour of the section below the hero */
}
.wpj-hero,.wpj-hero *,.wpj-hero *::before,.wpj-hero *::after{box-sizing:border-box}
.wpj-hero{color:var(--ink);font-family:Barlow,system-ui,sans-serif;line-height:1.2}
.wpj-hero h1,.wpj-hero h2,.wpj-hero p{margin:0;padding:0;color:inherit}
.wpj-hero img{max-width:none;border:0;border-radius:0;box-shadow:none}   /* themes love to restyle img */

.wpj-hero{position:relative;height:360vh;width:100%;--wpj-top:0px}   /* --wpj-top = height of a sticky site header, if any */
.wpj-stage{position:sticky;top:var(--wpj-top);height:calc(100vh - var(--wpj-top));height:calc(100svh - var(--wpj-top));overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-low) 84%,var(--sky-horizon) 100%)}
/* The scene is the stage itself. Every layer is sized from the viewport HEIGHT and pinned to its own edge,
   so the side ranges can never slide out of frame and Teide's summit never leaves the screen. */
.wpj-scene{position:absolute;inset:0}
.wpj-layer{position:absolute;inset:0;will-change:transform;transform:translate3d(0,102%,0);pointer-events:none}
.wpj-fit{position:absolute;bottom:var(--b,0);width:var(--w);aspect-ratio:2000/1116}
.wpj-fit img,.wpj-fit svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Teide: summit sits at ~75-83% of the screen height on any aspect ratio. Far slopes fade out softly. */
.wpj-hero [data-layer=teide] .wpj-fit{--w:clamp(185vh,100vw,205vh);left:50%;transform:translateX(-50%)}
/* masks go on the picture and the line, not on the box - otherwise they would clip the peak labels */
.wpj-hero [data-layer=teide] .wpj-fit>img,.wpj-hero [data-layer=teide] .wpj-fit>svg{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.wpj-hero [data-layer=teide] img{filter:saturate(1.28) contrast(1.16)}
/* Los Gigantes: pinned to the LEFT edge (nudged 5% out and a touch down) */
.wpj-hero [data-layer=gigantes] .wpj-fit{--w:min(127vh,78vw);left:calc(var(--w) * -.05);--b:calc(var(--w) * -.03)}
/* Anaga + Roque de Taborno: pinned to the RIGHT edge (nudged 5% out) */
.wpj-hero [data-layer=anaga] .wpj-fit,.wpj-hero [data-layer=bridge] .wpj-fit{--w:min(122vh,85vw);right:calc(var(--w) * -.05)}
/* Anaga's left photo edge: short fade only - the foreground outcrop (bridge layer) sits on top of it */
.wpj-hero [data-layer=anaga] .wpj-fit>img,.wpj-hero [data-layer=anaga] .wpj-fit>svg{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%);mask-image:linear-gradient(90deg,transparent 0,#000 8%)}
/* BRIDGE: foreground element locked to Anaga's box, so it covers the junction at every window size */
.wpj-hero [data-layer=bridge] .wpj-fit img{inset:auto;left:-28%;bottom:-3%;width:62%;height:auto}
/* Clouds: always full width, always covering the same share of the screen */
.wpj-hero [data-layer=clouds] .wpj-fit{--w:max(100vw,125vh);--cover:63vh;aspect-ratio:2000/1131;left:50%;transform:translateX(-50%);--b:calc(var(--cover) - var(--w) * .2432)}

/* square-ish windows */
@media (max-aspect-ratio:6/5){
  .wpj-hero [data-layer=gigantes] .wpj-fit{--w:min(127vh,105vw);left:calc(var(--w) * -.25)}
  .wpj-hero [data-layer=anaga] .wpj-fit,.wpj-hero [data-layer=bridge] .wpj-fit{--w:min(122vh,105vw);right:calc(var(--w) * -.10)}
}
/* tablets, portrait */
@media (max-aspect-ratio:3/4){
  .wpj-hero [data-layer=gigantes] .wpj-fit{--w:125vh;left:calc(var(--w) * -.52)}
  .wpj-hero [data-layer=anaga] .wpj-fit,.wpj-hero [data-layer=bridge] .wpj-fit{--w:110vh;right:calc(var(--w) * -.125)}
  .wpj-hero [data-layer=clouds] .wpj-fit{--cover:56vh}
}
/* phones, portrait */
@media (max-aspect-ratio:9/16){
  .wpj-hero [data-layer=gigantes] .wpj-fit{left:calc(var(--w) * -.62)}
  .wpj-hero [data-layer=anaga] .wpj-fit,.wpj-hero [data-layer=bridge] .wpj-fit{right:calc(var(--w) * -.175)}
}
.wpj-ridge,.wpj-halo{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.wpj-halo{opacity:.45}
.wpj-head{opacity:0;transition:opacity .25s}
.wpj-head.on{opacity:1}

.wpj-hero [data-layer=teide]{--line:var(--can-white)}
.wpj-hero [data-layer=gigantes]{--line:var(--can-blue)}
/* the blue line runs over dark basalt: give it a white halo and a slightly heavier core so it never merges with the cliff */
.wpj-hero [data-layer=gigantes] .wpj-halo{stroke:#fff;opacity:.6}
.wpj-hero [data-layer=gigantes] .wpj-ridge{filter:drop-shadow(0 0 1.5px rgba(255,255,255,.9))}
.wpj-hero [data-layer=anaga]{--line:var(--can-yellow)}
.wpj-ridge,.wpj-halo{stroke:var(--line)}
.wpj-head circle:first-child{fill:var(--line);opacity:.28}
.wpj-head circle:last-child{fill:#fff;stroke:var(--line)}

.wpj-haze{position:absolute;left:0;right:0;bottom:0;height:58%;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,226,205,0) 0%,rgba(247,226,205,.5) 60%,rgba(255,255,255,.75) 100%)}
.wpj-hero [data-layer=clouds] img{filter:contrast(1.12) brightness(1.06)}
/* soft ground mist for the headline + a clean hand-off into the next section (fades in with the text) */

/* PEAK LABELS: same typeface as the headline, no box. Name + elevation sit on a short bar in the line's own flag colour;
   a hairline stem drops to a dot on the summit - so every label reads as the end of its ridge line. */
.wpj-label{position:absolute;left:var(--lx);top:var(--ly);transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;
  opacity:0;will-change:opacity,transform;white-space:nowrap;z-index:2;color:#fff;text-shadow:0 1px 2px rgba(10,18,34,.85),0 0 10px rgba(10,18,34,.7),0 0 26px rgba(10,18,34,.55)}
.wpj-label .pill{display:flex;flex-direction:column;align-items:center;font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;
  font-size:clamp(.95rem,1.35vw,1.45rem);letter-spacing:.09em;line-height:1;text-transform:uppercase}
.wpj-label .pill::after{content:"";order:1;width:100%;height:3px;margin:.38em 0 .34em;border-radius:2px;background:var(--line);box-shadow:0 1px 6px rgba(12,22,40,.35)}
.wpj-label .pill i{order:2;font-style:normal;font-family:Barlow,system-ui,sans-serif;font-weight:500;font-size:.62em;letter-spacing:.14em;opacity:.92}
.wpj-label .stem{width:2px;box-shadow:0 0 6px rgba(10,18,34,.55);height:var(--stem,4.5vh);margin-top:.45em;background:linear-gradient(180deg,rgba(255,255,255,.95),var(--line))}
.wpj-label .dot{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--line);margin-bottom:-5px;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.wpj-hero [data-layer=teide]   {--lx:50.6%;--ly:27.8%;--stem:3vh}
.wpj-hero [data-layer=anaga]   {--lx:72.7%;--ly:8.4%}
/* Los Gigantes steps DOWN to the right, so its label hangs to the right of the stem (over open air, never over the rock),
   and the stem stands in the middle of a ledge - well clear of the vertical step next to it */
.wpj-hero [data-layer=gigantes]{--lx:23.6%;--ly:8.3%;--tx:-1px}
.wpj-hero [data-layer=gigantes] .wpj-label,.wpj-hero [data-layer=gigantes] .wpj-label .pill{align-items:flex-start}
.wpj-hero [data-layer=gigantes] .wpj-label .dot{margin-left:-5.5px}
@media (max-aspect-ratio:6/5){.wpj-hero [data-layer=gigantes]{--lx:41.5%;--ly:24%}}
@media (max-aspect-ratio:3/4){.wpj-hero [data-layer=gigantes]{--lx:56.5%;--ly:40.8%}}
@media (max-aspect-ratio:9/16){.wpj-hero [data-layer=gigantes]{--lx:64.5%;--ly:45.9%}.wpj-label .pill i{display:none}}

.wpj-mist{position:absolute;left:0;right:0;bottom:0;height:42vh;opacity:0;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.72) 45%,rgba(255,255,255,.94) 78%,var(--page) 100%)}

.wpj-copy{position:absolute;left:0;right:0;bottom:6vh;z-index:6;text-align:center;padding:0 6vw;opacity:0;transform:translate3d(0,24px,0);will-change:opacity,transform}
.wpj-copy h1,.wpj-copy h2{font-family:"Barlow Condensed",Impact,sans-serif;font-weight:700;font-size:clamp(2.4rem,6vw,5.4rem);line-height:.95;letter-spacing:-.01em;text-wrap:balance}
.wpj-copy p{margin-top:.9rem;font-size:clamp(1rem,1.3vw,1.2rem);font-weight:500;opacity:.8}

@media (prefers-reduced-motion:reduce){.wpj-hero{height:100vh}}