/*
 * V5 map draw-in animation ("Drawn By Hand" / amber-pen variant).
 *
 * Shared stylesheet: used by the homepage map section and reusable on the
 * destination hero. Scoped entirely under [data-v5-map-draw] so it can never
 * reach another page's SVG.
 *
 * The --v5-* tokens live in pages/homepage.css and are NOT global, so every
 * token below carries an explicit fallback.
 *
 * Only stroke-dashoffset and fill are animated: no blur, no transform, no layout.
 */

[data-v5-map-draw] svg a.map-area path,
[data-v5-map-draw] svg a.map-area polygon {
  transform-box: fill-box;
  transform-origin: center;
}

/* Undrawn state: outline hidden, no fill. Painted once before the pen starts. */
[data-v5-map-draw].is-map-prep svg a.map-area path,
[data-v5-map-draw].is-map-prep svg a.map-area polygon,
[data-v5-map-draw].is-map-drawing svg a.map-area path,
[data-v5-map-draw].is-map-drawing svg a.map-area polygon {
  fill: transparent;
  stroke: var(--v5-amber, #fcb913);
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-dasharray: var(--v5-map-len);
  stroke-dashoffset: var(--v5-map-len);
}

/* The pen: outline is drawn, then the region settles into ivory + olive.
   The amber stroke is what makes this the C2 variant; it costs nothing extra
   because it is the same property already being animated. */
[data-v5-map-draw].is-map-drawing svg a.map-area path,
[data-v5-map-draw].is-map-drawing svg a.map-area polygon {
  will-change: stroke-dashoffset;
  animation:
    v5MapDraw var(--v5-map-dur, 1200ms) linear both,
    v5MapFill 620ms ease-out both;
  animation-delay:
    var(--v5-map-delay, 0ms),
    calc(var(--v5-map-delay, 0ms) + var(--v5-map-dur, 1200ms) * 0.55);
}

@keyframes v5MapDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes v5MapFill {
  0% {
    fill: rgba(250, 249, 246, 0);
    stroke: var(--v5-amber, #fcb913);
  }
  45% {
    stroke: var(--v5-amber, #fcb913);
  }
  100% {
    fill: var(--v5-ivory, #faf9f6);
    stroke: var(--v5-olive-900, #33421f);
  }
}

/* Settled state: plain static map, nothing animating, no compositing layer. */
[data-v5-map-draw].is-map-drawn svg a.map-area path,
[data-v5-map-draw].is-map-drawn svg a.map-area polygon {
  fill: var(--v5-ivory, #faf9f6);
  stroke: var(--v5-olive-900, #33421f);
  stroke-width: 1.1;
  will-change: auto;
}

/* ── The active region (destination pages only) ──────────────────────────────
   banner_map-modern marks the current region with .active-region (green in
   style.css). That rule is a single class, so both the fill animation and the
   settled state above would override it and the highlight would vanish the
   moment the map finished drawing. These heavier selectors keep the existing
   behaviour: the pen draws the region like any other, but it inks in green. */
[data-v5-map-draw].is-map-drawing svg a.map-area path.active-region,
[data-v5-map-draw].is-map-drawing svg a.map-area polygon.active-region {
  animation:
    v5MapDraw var(--v5-map-dur, 1200ms) linear both,
    v5MapFillActive 620ms ease-out both;
  animation-delay:
    var(--v5-map-delay, 0ms),
    calc(var(--v5-map-delay, 0ms) + var(--v5-map-dur, 1200ms) * 0.55);
}

@keyframes v5MapFillActive {
  0% {
    fill: rgba(149, 193, 31, 0);
    stroke: var(--v5-amber, #fcb913);
  }
  45% {
    stroke: var(--v5-amber, #fcb913);
  }
  100% {
    fill: #95c11f;
    stroke: var(--v5-olive-900, #33421f);
  }
}

[data-v5-map-draw].is-map-drawn svg a.map-area path.active-region,
[data-v5-map-draw].is-map-drawn svg a.map-area polygon.active-region {
  fill: #95c11f;
}

/* ── The pins and place names (#Livello_3 and #Livello_4) ────────────────────
   Everything the cartographer writes on top once the coastline exists. They are
   two separate groups: Livello_3 holds the dots, Livello_4 holds the 70 town
   names. Both have to be held back, or the names sit over an empty sea while
   the outline is still being drawn.

   They arrive between the pen and the shading, so the section tells one story:
   the outline is drawn, the places are named, the shading settles. A short rise
   rather than a plain fade, as though the sheet were laid down.

   Animated as two layers rather than 70 individual labels: staggering each name
   would set off seventy animations at once and read as flicker.

   Scoped to this wrapper: the same SVG is used by other pages. */
[data-v5-map-draw] svg #Livello_3,
[data-v5-map-draw] svg #Livello_4 {
  opacity: 0;
}

[data-v5-map-draw].is-map-drawn svg #Livello_3,
[data-v5-map-draw].is-map-drawn svg #Livello_4 {
  animation: v5MapLabels 820ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

/* The names follow the pins by a beat, so the dots land first. */
[data-v5-map-draw].is-map-drawn svg #Livello_4 {
  animation-delay: 180ms;
}

@keyframes v5MapLabels {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── The relief shading (.stt3) ──────────────────────────────────────────────
   The masked group under the regions paints the map's shadow and texture. It is
   part of the artwork, not of the pen, so it has no business being visible while
   the outline is still being drawn: on the way in it read as a dark smudge
   floating over the photograph with no map inside it yet.

   Held back until the regions have settled, then faded up. Scoped to this
   wrapper because .stt3 is shared with the other pages that carry this SVG. */
[data-v5-map-draw] .stt3 {
  opacity: 0;
}

/* Last in, and only once the names have landed: the shading is what makes the
   finished map sit on the photograph, so it should settle over a map that is
   already complete. */
[data-v5-map-draw].is-map-drawn .stt3 {
  opacity: 1;
  transition: opacity 900ms ease-out 820ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-v5-map-draw] svg a.map-area path,
  [data-v5-map-draw] svg a.map-area polygon {
    animation: none !important;
    fill: var(--v5-ivory, #faf9f6) !important;
    stroke: var(--v5-olive-900, #33421f) !important;
    stroke-dashoffset: 0 !important;
  }
  /* No pen to wait for, so the pins, the names and the shading are simply there. */
  [data-v5-map-draw] svg #Livello_3,
  [data-v5-map-draw] svg #Livello_4,
  [data-v5-map-draw] .stt3 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* The current region keeps its green highlight (destination pages). */
  [data-v5-map-draw] svg a.map-area path.active-region,
  [data-v5-map-draw] svg a.map-area polygon.active-region {
    fill: #95c11f !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Banner arrow — drawn by the same pen as the map
   ───────────────────────────────────────────────────────────────────────
   Replaces the old images/arrow.png. Two paths, so it costs less than the
   raster it replaces and stays sharp on retina screens.

   The stroke is drawn in amber and settles to white, exactly as the map
   regions do, so the arrow reads as part of the same gesture rather than
   a separate object sitting on top of the photo.

   Path lengths are hardcoded below: the shape is fixed, so there is no
   reason to make the browser measure it.
   ═══════════════════════════════════════════════════════════════════════ */

/* The map occupies the left half of the banner (col-lg-6), so its inner edge
   sits at the 50% line. Anchoring the arrow there keeps its tip the same
   distance from the map at every width.

   The old PNG used `margin-right: 20%`, a percentage of the full viewport, so
   the gap between arrow and map grew from ~55px at 1024 to ~510px at 1920 and
   the arrow drifted off towards empty space. Measured, not assumed. */
.banner-map-arrow {
    display: block;
    width: 250px;
    height: auto;
    overflow: visible;
    position: relative;
    /* The map SVG is left-aligned in its column at a FIXED width (591px here,
       549px below 1200), so its right edge lands at the same x on every screen.
       Anchoring the arrow to that fixed edge keeps the tip a constant distance
       from the coast.

       The old PNG used `margin-right: 20%` — a percentage of the full viewport —
       so the gap swung from ~55px at 1024 to ~510px at 1920 and the arrow
       drifted off into empty water. Measured, not assumed. */
    margin: 20px 0 0 600px;
}

.banner-map-arrow path {
    fill: none;
    stroke: #fff;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* The photo behind is unpredictable, so the arrow carries its own contrast. */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

.banner-map-arrow__tail { --v5-arrow-len: 248; }
.banner-map-arrow__head { --v5-arrow-len: 60; }

/* Undrawn until the pen reaches it, so it cannot appear before the map does. */
.banner-map-arrow path {
    stroke-dasharray: var(--v5-arrow-len);
    stroke-dashoffset: var(--v5-arrow-len);
}

/* Drawn once the map is nearly complete, so the two read as one hand.
   The tail leads, the head follows and lands last. */
.banner-map-arrow.is-arrow-drawing .banner-map-arrow__tail {
    animation: v5ArrowDraw 900ms cubic-bezier(0.4, 0.5, 0.2, 1) 0ms both;
}

.banner-map-arrow.is-arrow-drawing .banner-map-arrow__head {
    animation: v5ArrowDraw 320ms cubic-bezier(0.4, 0.5, 0.2, 1) 780ms both;
}

.banner-map-arrow.is-arrow-drawn path {
    stroke-dashoffset: 0;
    stroke: #fff;
}

@keyframes v5ArrowDraw {
    0% {
        stroke-dashoffset: var(--v5-arrow-len);
        stroke: var(--v5-amber, #fcb913);
    }
    60% {
        stroke: var(--v5-amber, #fcb913);
    }
    100% {
        stroke-dashoffset: 0;
        stroke: #fff;
    }
}

/* Below 1200 the map itself narrows to 549px, so the anchor follows it. */
@media screen and (max-width: 1250px) {
    .banner-map-arrow {
        width: 200px;
        margin-left: 570px;
    }
}

/* Matches the old arrow: below this the banner stacks and there is no
   longer a map sitting beside the copy for it to point at. */
@media screen and (max-width: 991px) {
    .banner-map-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .banner-map-arrow path {
        animation: none !important;
        stroke-dashoffset: 0 !important;
        stroke: #fff !important;
    }
}

/* Scrim radial pernah dicoba di sini (4 Aug 2026) dan DITOLAK bos — pada
   slide bernuansa gelap (Venice) ia jadi noda besar. Solusi final: feather
   text-shadow yang lebih pekat di style.css. Jangan pasang scrim lagi. */

/* ─────────────────────────────────────────────────────────────────────────
   Hero title sequence (boss's pick, 4 Aug 2026): headline rises first, the
   subline follows — the same soft gesture as the tour V5 hero. ARM pattern:
   the text is visible by default; the .is-seq class (added by an inline
   script in banner_map.blade.php, so no-JS/crawlers see everything) runs a
   `backwards`-filled animation — never `both` (rule-wajib gotcha).
   ───────────────────────────────────────────────────────────────────────── */
.choose-region.is-seq .text-shadowed,
.choose-region.is-seq .hero-subline {
    animation: ivs-banner-rise var(--ivs-anim-duration, 650ms)
        var(--ivs-anim-ease, cubic-bezier(0.22, 0.61, 0.36, 1)) backwards;
}
.choose-region.is-seq .text-shadowed { animation-delay: 120ms; }
.choose-region.is-seq .hero-subline { animation-delay: 420ms; }

@keyframes ivs-banner-rise {
    from {
        opacity: 0;
        transform: translateY(var(--ivs-anim-rise, 16px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .choose-region.is-seq .text-shadowed,
    .choose-region.is-seq .hero-subline {
        animation: none;
    }
}