@charset "utf-8";

/* HERO-MAP.CSS — SHARED LVL2 + LVL3

/* =========================
   BASQUE / GALICIA / CAMINO: HERO MAPS
   ========================= */

.ns-region-hero{
  --ns-rhero-edge:clamp(18px, 4.6vw, 48px);
  --ns-region-overlap:clamp(34px, 6vw, 76px);

  --ns-rhero-stack-terrain-width:90vw;
  --ns-rhero-stack-terrain-top-gap:clamp(58px, 8vw, 88px);
  --ns-rhero-stack-terrain-viewport-bottom-safe:clamp(14px, 2vw, 24px);
  --ns-rhero-stack-copy-gap-ratio:.035;
  --ns-rhero-stack-copy-gap-min:clamp(20px, 2.6vw, 26px);
  --ns-rhero-stack-copy-gap-max:clamp(34px, 4vw, 42px);
  --ns-rhero-stack-copy-top:calc(var(--topbar-h) + 94vw);
  --ns-rhero-stack-bottom-gap:clamp(84px, 10vw, 112px);

  --ns-rhero-desktop-terrain-width:clamp(760px, 62vw, 1120px);
  --ns-rhero-desktop-terrain-top:clamp(72px, 8vh, 92px);
  --ns-rhero-desktop-right-bias:.08;
  --ns-rhero-desktop-right-edge:clamp(14px, 1.8vw, 36px);
  --ns-rhero-desktop-left-edge:clamp(48px, 4.8vw, 92px);
  --ns-rhero-desktop-copy-land-gap:clamp(14px, 1.35vw, 26px);
  --ns-rhero-desktop-copy-left:var(--ns-rhero-desktop-left-edge);
  --ns-rhero-desktop-bottom-gap:clamp(14px, 2vh, 24px);

  position:relative;
  isolation:isolate;
  width:100vw;
  min-height:0;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  background:transparent;
  -webkit-mask-image:none;
  mask-image:none;
}

.ns-region-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  min-height:0;
  margin:0;
  padding:
    var(--ns-rhero-stack-copy-top)
    var(--ns-rhero-edge)
    var(--ns-rhero-stack-bottom-gap);
}

.ns-region-hero__copy{
  position:relative;
  z-index:6;
  width:min(100%, 680px);
  margin:0 auto;
  padding:0;
  text-align:center;
  transform:none;
}

.ns-region-hero__copy .ns-home-scroll-bridge{
  margin-left:auto;
  margin-right:auto;
}

.ns-region-hero__visual{
  position:absolute;
  left:0;
  right:0;
  top:var(--topbar-h);
  bottom:0;
  z-index:1;
  width:100vw;
  max-width:none;
  height:auto;
  margin:0;
  isolation:isolate;
  overflow:visible;
  transform:none;
}

.ns-region-hero__visual::before{
  content:"";
  position:absolute;
  inset:8%;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(
    circle,
    rgba(240,197,111,.11) 0%,
    rgba(240,197,111,.04) 42%,
    rgba(240,197,111,0) 74%
  );
  filter:blur(24px);
}

.ns-region-hero__image-mask{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:visible;
  pointer-events:none;
  -webkit-mask-image:none;
  mask-image:none;
}

.ns-region-hero__image{
  display:block;
  margin:0;
  pointer-events:none;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.38));
}

@media (width < 1440px){

  body:is(
    .ns-region--galicia,
    .ns-region--camino,
    .ns-circuit--galicia,
    .ns-circuit--camino
  ) .ns-rmap__mapimg{
    -webkit-mask-image:linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 82%,
      rgba(0,0,0,.96) 84.4%,
      rgba(0,0,0,.84) 86.7%,
      rgba(0,0,0,.64) 89.6%,
      rgba(0,0,0,.38) 92.4%,
      rgba(0,0,0,.18) 95.3%,
      rgba(0,0,0,.06) 97.6%,
      rgba(0,0,0,0) 100%
    );
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;

    mask-image:linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 82%,
      rgba(0,0,0,.96) 84.4%,
      rgba(0,0,0,.84) 86.7%,
      rgba(0,0,0,.64) 89.6%,
      rgba(0,0,0,.38) 92.4%,
      rgba(0,0,0,.18) 95.3%,
      rgba(0,0,0,.06) 97.6%,
      rgba(0,0,0,0) 100%
    );
    mask-repeat:no-repeat;
    mask-size:100% 100%;
  }
}

@media (width >= 1440px){

  body:is(
    .ns-region--galicia,
    .ns-region--camino,
    .ns-circuit--galicia,
    .ns-circuit--camino
  ) .ns-region-hero__image-mask{
    -webkit-mask-image:linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 82%,
      rgba(0,0,0,.96) 84.4%,
      rgba(0,0,0,.84) 86.7%,
      rgba(0,0,0,.64) 89.6%,
      rgba(0,0,0,.38) 92.4%,
      rgba(0,0,0,.18) 95.3%,
      rgba(0,0,0,.06) 97.6%,
      rgba(0,0,0,0) 100%
    );
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;

    mask-image:linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,1) 82%,
      rgba(0,0,0,.96) 84.4%,
      rgba(0,0,0,.84) 86.7%,
      rgba(0,0,0,.64) 89.6%,
      rgba(0,0,0,.38) 92.4%,
      rgba(0,0,0,.18) 95.3%,
      rgba(0,0,0,.06) 97.6%,
      rgba(0,0,0,0) 100%
    );
    mask-repeat:no-repeat;
    mask-size:100% 100%;
  }
}

.ns-rmap__svg-use{
  --ns-map-outline-width:clamp(.7px, .08vw, 2px);
  --ns-map-province-width:clamp(.525px, .06vw, 1.5px);
}

.ns-region-hero__pins{
  position:absolute;
  inset:0;
  z-index:5;
  width:100%;
  height:100%;
  pointer-events:none;
}

@keyframes nsMobileMapMarkerPulse{
  0%,
  100%{
    box-shadow:
      0 10px 18px rgba(0,0,0,.78),
      0 0 26px rgba(255,226,158,.78),
      0 0 48px rgba(240,197,111,.34),
      0 0 72px rgba(240,197,111,.12),
      inset 0 1px 0 rgba(255,255,255,.14);
  }

  50%{
    box-shadow:
      0 10px 18px rgba(0,0,0,.78),
      0 0 38px rgba(255,226,158,.98),
      0 0 72px rgba(240,197,111,.60),
      0 0 108px rgba(240,197,111,.24),
      inset 0 1px 0 rgba(255,255,255,.14);
  }
}

@keyframes nsMobileMapRingPulseOuter{
  0%,
  100%{
    opacity:.88;
    transform:translate(-50%, -50%) scale(1);
  }

  50%{
    opacity:.62;
    transform:translate(-50%, -50%) scaleX(.72) scaleY(.82);
  }
}

@keyframes nsMobileMapRingPulseInner{
  0%,
  100%{
    opacity:.96;
    transform:translate(-50%, -50%) scale(1);
  }

  50%{
    opacity:.72;
    transform:translate(-50%, -50%) scaleX(.78) scaleY(.86);
  }
}

@keyframes nsMobileMapIconPulse{
  0%,
  100%{
    filter:
      drop-shadow(0 5px 8px rgba(0,0,0,.84))
      drop-shadow(0 0 18px rgba(255,226,158,.64))
      drop-shadow(0 0 30px rgba(240,197,111,.24));
  }

  50%{
    filter:
      drop-shadow(0 5px 8px rgba(0,0,0,.84))
      drop-shadow(0 0 24px rgba(255,226,158,.82))
      drop-shadow(0 0 42px rgba(240,197,111,.34));
  }
}

@keyframes nsCaminoPinMetalShine{
  0%{
    opacity:0;
    background-position:145% 0;
  }

  3%{
    opacity:1;
    background-position:125% 0;
  }

  18%{
    opacity:1;
    background-position:-45% 0;
  }

  19%{
    opacity:0;
    background-position:-45% 0;
  }

  100%{
    opacity:0;
    background-position:-45% 0;
  }
}

/* RESPONSIVE MAP DESTINATION CARD */

.ns-region-hero__mobile-card{
  position:relative;
  z-index:7;
  display:grid;
  grid-template-columns:35% minmax(0, 1fr);
  align-items:stretch;
  gap:clamp(12px, 3.2vw, 16px);
  width:min(78vw, 360px);
  min-height:66px;
  margin:
    clamp(18px, 3vw, 28px)
    auto
    0;
  padding:0 clamp(14px, 3.6vw, 18px) 0 0;
  color:inherit;
  text-decoration:none;
  border:0;
  border-radius:8px;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.94) 0%,
    rgba(6,6,6,.94) 100%
  );
  box-shadow:
    0 10px 22px rgba(0,0,0,.28);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  overflow:hidden;
  isolation:isolate;
  transform:none;
}

.ns-region-hero__mobile-card::before{
  content:"";
  position:absolute;
  top:-55%;
  left:-55%;
  z-index:2;
  width:36%;
  height:220%;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.9) 47%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.9) 53%,
    rgba(255,255,255,0) 62%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(12px);
  transform:translateX(0) rotate(16deg);
  transform-origin:center center;
  animation:nsBtnDarkShine 6s cubic-bezier(.22,.61,.36,1) infinite;
}

.ns-region-hero__mobile-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  padding:.40px;
  border-radius:8px;
  background:linear-gradient(
    135deg,
    rgba(150,109,29,.78) 0%,
    rgba(255,232,176,.90) 22%,
    rgba(240,197,111,.86) 50%,
    rgba(255,244,214,.90) 66%,
    rgba(188,141,53,.78) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}

.ns-region-hero__mobile-card > *{
  position:relative;
  z-index:1;
}

.ns-region-hero__mobile-card-media,
.ns-region-hero__mobile-card-copy,
.ns-region-hero__mobile-card-jp,
.ns-region-hero__mobile-card-name,
.ns-region-hero__mobile-card-subline,
.ns-region-hero__mobile-card-subtitle,
.ns-region-hero__mobile-card-media img{
  transition:opacity .32s cubic-bezier(.22,.61,.36,1);
  will-change:opacity;
}

.ns-region-hero__mobile-card-media{
  position:relative;
  display:block;
  align-self:stretch;
  width:100%;
  height:calc(100% - 2px);
  min-height:calc(100% - 2px);
  margin:1px 0 1px 1px;
  overflow:hidden;
  border-radius:7px 0 0 7px;
  background:#080808;
  border-right:1px solid rgba(240,197,111,.12);
  box-shadow:none;
}

.ns-region-hero__mobile-card-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  object-position:center;
  box-shadow:none;
}

.ns-region-hero__mobile-card-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  gap:2px;
  padding:6px 0;
  text-align:center;
}

html:lang(en) .ns-region-hero__mobile-card-copy,
html:lang(en-GB) .ns-region-hero__mobile-card-copy{
  transform:translateY(-1px);
}

html:lang(ja) .ns-region-hero__mobile-card-copy{
  gap:4px;
  padding:0;
}

.ns-region-hero__mobile-card-jp{
  display:block;
  max-width:100%;
  margin-bottom:4px;
  overflow:hidden;
  font-family:"Shippori Mincho", var(--font-display), serif;
  font-size:clamp(8.5px, 2.3vw, 10.5px);
  font-weight:400;
  line-height:1.24;
  letter-spacing:.055em;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:center;
  background:var(--gold-gradient-text);
  background-size:100% 1lh;
  background-position:0 0;
  background-repeat:repeat-y;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transform:translateY(-4px);
}

html:lang(en) .ns-region-hero__mobile-card-jp,
html:lang(en-GB) .ns-region-hero__mobile-card-jp{
  display:none;
}

html:lang(ja) .ns-region-hero__mobile-card-jp{
  display:none;
}

.ns-region-hero__mobile-card-name{
  display:block;
  max-width:100%;
  overflow:hidden;
  font-family:"Cormorant Garamond", var(--font-display-primary), serif;
  font-size:clamp(14px, 3.85vw, 16.5px);
  font-weight:700;
  line-height:1.03;
  letter-spacing:.035em;
  white-space:nowrap;
  text-overflow:ellipsis;
  text-align:center;
  color:var(--gold);
  transform:translateY(-4px);
}

html:lang(ja) .ns-region-hero__mobile-card-name{
  background:var(--gold-gradient-text);
  background-size:100% 1lh;
  background-position:0 0;
  background-repeat:repeat-y;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transform:none;
}

html:lang(en) .ns-region-hero__mobile-card-name,
html:lang(en-GB) .ns-region-hero__mobile-card-name{
  transform:none;
}

.ns-region-hero__mobile-card-subline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px, 1.8vw, 10px);
  width:100%;
  margin-top:2px;
}

html:lang(ja) .ns-region-hero__mobile-card-subline{
  margin-top:0;
}

.ns-region-hero__mobile-card-subline::before,
.ns-region-hero__mobile-card-subline::after{
  content:"";
  flex:1 1 auto;
  min-width:18px;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(240,197,111,0) 0%,
    rgba(240,197,111,.74) 100%
  );
  opacity:.9;
}

.ns-region-hero__mobile-card-subline::after{
  background:linear-gradient(
    90deg,
    rgba(240,197,111,.74) 0%,
    rgba(240,197,111,0) 100%
  );
}

.ns-region-hero__mobile-card-subtitle{
  display:block;
  max-width:100%;
  overflow:hidden;
  font-family:"Cormorant Garamond", var(--font-display-primary), serif;
  font-size:clamp(11px, 3vw, 13px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:.02em;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:rgba(255,224,158,.92);
}

.ns-region-hero__mobile-card-subtitle:empty,
.ns-region-hero__mobile-card-subtitle:empty + *{
  display:none;
}

.ns-region-hero__mobile-card.is-swapping .ns-region-hero__mobile-card-media,
.ns-region-hero__mobile-card.is-swapping .ns-region-hero__mobile-card-copy,
.ns-region-hero__mobile-card.is-swapping .ns-region-hero__mobile-card-jp,
.ns-region-hero__mobile-card.is-swapping .ns-region-hero__mobile-card-name,
.ns-region-hero__mobile-card.is-swapping .ns-region-hero__mobile-card-subline,
.ns-region-hero__mobile-card.is-swapping .ns-region-hero__mobile-card-subtitle,
.ns-region-hero__mobile-card.is-swapping .ns-region-hero__mobile-card-media img{
  opacity:0;
}

@media (width < 768px){
  .ns-region-hero{
    min-height:100svh;
  }

  .ns-region-hero__inner{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    box-sizing:border-box;
    min-height:100svh;
    padding:
      var(--ns-rhero-stack-copy-top)
      var(--ns-rhero-edge)
      max(var(--space-5), env(safe-area-inset-bottom));
  }

  .ns-region-hero__copy{
    width:min(100%, 680px);
    margin:0 auto;
  }

  body:is(
    .ns-region--basque,
    .ns-circuit--basque
  ) .ns-region-hero{
    --ns-rhero-stack-terrain-width:95vw;
    --ns-rhero-stack-terrain-top-gap:calc(
      clamp(58px, 8vw, 88px) + var(--space-5)
    );
  }

  body:is(
    .ns-region--galicia,
    .ns-region--camino,
    .ns-circuit--galicia,
    .ns-circuit--camino
  ) .ns-region-hero{
    --ns-rhero-stack-terrain-width:95vw;
    --ns-rhero-stack-terrain-top-gap:clamp(26px, 3.5vw, 34px);
  }
}

@media (768px <= width < 1440px){
  .ns-region-hero__mobile-card{
    grid-template-columns:36% minmax(0, 1fr);
    grid-template-rows:minmax(0, 1fr);
    gap:12px;
    width:min(44vw, 360px);
    height:61px;
    min-height:0;
    max-height:61px;
    margin:
      clamp(18px, 2.2vw, 24px)
      auto
      0;
    padding-right:14px;
    transform:none;
  }

  .ns-region-hero__mobile-card-copy{
    gap:1px;
    padding:5px 0;
  }

  .ns-region-hero__mobile-card-jp{
    margin-bottom:3px;
    font-size:clamp(9px, 1.15vw, 10.5px);
  }

  .ns-region-hero__mobile-card-name{
    font-size:clamp(14px, 1.9vw, 17px);
  }

  .ns-region-hero__mobile-card-subtitle{
    font-size:clamp(10.5px, 1.45vw, 12.5px);
  }
}

@media (width >= 1440px){
  .ns-region-hero__mobile-card{
    position:relative;
    left:auto;
    top:auto;
    grid-template-columns:39% minmax(0, 1fr);
    grid-template-rows:minmax(0, 1fr);
    gap:clamp(12px, .9vw, 16px);
    width:clamp(365px, 21.5vw, 440px);
    height:clamp(67px, 4vw, 78px);
    min-height:0;
    max-height:clamp(67px, 4vw, 78px);
    margin:clamp(18px, 1.8vw, 26px) 0 0;
    padding-right:clamp(14px, 1vw, 18px);
    transform:none;
  }

  .ns-region-hero__mobile-card-copy{
    gap:1px;
    padding:5px 0;
  }

  .ns-region-hero__mobile-card-jp{
    margin-bottom:4px;
    font-size:clamp(9.5px, .66vw, 11px);
  }

  .ns-region-hero__mobile-card-name{
    font-size:clamp(17px, 1.18vw, 21px);
  }

  .ns-region-hero__mobile-card-subtitle{
    font-size:clamp(11px, .78vw, 13.5px);
  }
}

@media (width < 1440px){
  .ns-region-hero__copy .ns-home-scroll-bridge{
    position:relative;
    left:auto;
    right:auto;
    width:min(440px, 100%);
    margin:
      clamp(26px, 4vw, 36px)
      auto
      0;
    transform:none;
  }
}

@media (width >= 1440px){
  .ns-region-hero{
    --ns-rhero-edge:clamp(48px, calc(5.357vw - 6.857px), 96px);
    --ns-region-overlap:clamp(76px, calc(7.143vw + 2.857px), 140px);
    min-height:100svh;
    height:100svh;
  }

  body:is(
    .ns-region--galicia,
    .ns-circuit--galicia
  ) .ns-region-hero__image-mask,
  body:is(
    .ns-region--galicia,
    .ns-circuit--galicia
  ) .ns-region-hero__pins{
  }

  .ns-region-hero__inner{
    min-height:100%;
    height:100%;
    padding:0;
  }

  .ns-region-hero__copy{
    position:absolute;
    left:max(
      var(--ns-rhero-desktop-left-edge),
      calc(
        25vw -
        clamp(160px, 15.5vw, 290px) +
        clamp(22px, 1.4vw, 34px)
      )
    );
    top:calc(
      var(--topbar-h) +
      ((100svh - var(--topbar-h)) / 2)
    );
    width:clamp(320px, 31vw, 580px);
    margin:0;
    text-align:left;
    transform:translateY(-50%);
  }

	.ns-region-hero__copy .ns-home-scroll-bridge{
    margin-left:0;
    margin-right:0;
  }
}

/* =========================
   REGION: MAP
   ========================= */
.ns-region-hero .ns-rmap__maplayer{
  position:absolute;
  left:0;
  right:0;
  top:var(--topbar-h);
  bottom:0;
  width:100vw;
  max-width:none;
  height:auto;
  margin:0;
  overflow:visible;
  transform:none;
}

.ns-rmap__mapimg{
  position:absolute;
  left:var(--ns-rmap-layout-left, 0px);
  top:var(--ns-rmap-layout-top, 0px);
  display:block;
  width:var(--ns-rmap-layout-width, 100vw);
  max-width:none;
  height:var(--ns-rmap-layout-height, calc(100vw * 0.5007906));
  margin:0;
  object-fit:fill;
  object-position:center;
  filter:drop-shadow(0 0 28px rgba(0,0,0,.45));
  opacity:1;
  transform:none;
  will-change:left, top, width, height;
  pointer-events:none;
}

/* =========================
   HERO SCROLL BRIDGE — SHARED
   ========================= */

.ns-region-hero .ns-region-hero__copy .ns-home-scroll-bridge{
  position:relative;
  left:0;
  right:auto;
  top:auto;
  bottom:auto;
  display:block;
  width:min(440px, 100%);
  margin:
    clamp(26px, 4vw, 36px)
    auto
    0;
  filter:
    drop-shadow(0 2px 2px rgba(0,0,0,.82))
    drop-shadow(0 6px 9px rgba(0,0,0,.58));
  transform:none;
}

.ns-region-hero .ns-home-scroll-line{
  position:absolute;
  top:25px;
  display:block;
  height:1px;
  transform:none;
}

.ns-region-hero .ns-home-scroll-line--left{
  left:0;
  width:calc(50% - 48px);
}

.ns-region-hero .ns-home-scroll-line--right{
  right:0;
  width:calc(50% - 48px);
}

.ns-region-hero .ns-home-scroll-indicator{
  position:absolute;
  left:50%;
  top:0;
  bottom:auto;
  transform:translateX(-50%);
}

@media (width >= 1440px){
  .ns-region-hero .ns-region-hero__copy .ns-home-scroll-bridge{
    left:0;
    width:min(460px, 100%);
    margin-left:0;
    margin-right:0;
    transform:none;
  }
}