/* ============================================================
   arran-map.css
   ============================================================
   The map is an illustration. On load:
     • Coastline, Holy Isle, Pladda and mountain ridge lines
       draw themselves via stroke-dashoffset.
     • Everything else fades in via opacity.
   The map root carries a [data-tint] attribute that sets the
   wash + terrain + mountain + Holy Isle colours.
   Click Holy Isle OR either raven to cycle through tints.
   ============================================================ */

/* ─── Tint palette ──────────────────────────────────
   Each palette stop defines:
     --wash      light surface colour (sea)
     --terrain   darker inland tone (the island mass)
     --mountain  deepest tone (mountain marks + Holy Isle)
   Tints are addressed by [data-tint="..."] on .map-svg.
   ─────────────────────────────────────────────────── */
.map-svg {
  --wash: rgba(245, 195, 145, 0.45);
  --terrain: rgba(212, 138, 88, 0.45);
  --mountain: rgba(170, 90, 50, 0.85);
  --ink: #1a1a1a;
}

.map-svg[data-tint="apricot"] {
  --wash: rgba(245, 195, 145, 0.50);
  --terrain: rgba(212, 138, 88, 0.55);
  --mountain: rgba(170, 90, 50, 0.85);
}
.map-svg[data-tint="sage"] {
  --wash: rgba(190, 200, 188, 0.55);
  --terrain: rgba(120, 145, 120, 0.60);
  --mountain: rgba(75, 105, 75, 0.85);
}
.map-svg[data-tint="heather"] {
  --wash: rgba(132, 116, 175, 0.45);
  --terrain: rgba(85, 70, 130, 0.55);
  --mountain: rgba(55, 40, 95, 0.85);
}
.map-svg[data-tint="sandstone"] {
  --wash: rgba(220, 165, 130, 0.55);
  --terrain: rgba(180, 105, 70, 0.60);
  --mountain: rgba(125, 65, 40, 0.85);
}
.map-svg[data-tint="mist"] {
  --wash: rgba(170, 200, 204, 0.55);
  --terrain: rgba(110, 145, 155, 0.55);
  --mountain: rgba(60, 95, 110, 0.85);
}
.map-svg[data-tint="rose"] {
  --wash: rgba(220, 170, 175, 0.50);
  --terrain: rgba(180, 110, 120, 0.55);
  --mountain: rgba(125, 65, 80, 0.85);
}


/* ─── Illustrate-in animation ──────────────────────
   Most elements start at opacity 0 and gently fade up
   when .drawing is added to the root. The coastline,
   Holy Isle, Pladda and mountain ridge lines draw via stroke.
   ─────────────────────────────────────────────────── */
.arran-wash,
.arran-terrain,
.arran-sketch,
.arran-mountains,
.raven,
.ann-link {
  opacity: 0;
  transition: opacity 1.4s ease-out, fill 0.7s ease-out;
}

.map-svg.drawing .arran-wash      { opacity: 1; transition-delay: 0.05s; }
.map-svg.drawing .arran-terrain   { opacity: 1; transition-delay: 0.25s; }
.map-svg.drawing .arran-sketch    { opacity: 0.55; transition-delay: 0.65s; }
.map-svg.drawing .arran-mountains { opacity: .8; transition-delay: 1.05s; }
.map-svg.drawing .raven-1         { opacity: 1; transition-delay: 3.3s; }
.map-svg.drawing .raven-2         { opacity: 1; transition-delay: 3.6s; }
.map-svg.drawing .ann-duthchas    { opacity: 1; transition-delay: 1.8s; }
.map-svg.drawing .ann-house       { opacity: 1; transition-delay: 3s; }
.map-svg.drawing .ann-pioneer     { opacity: 1; transition-delay: 2.6s; }
.map-svg.drawing .ann-greenmap    { opacity: 1; transition-delay: 2.2s; }


/* ─── Line-draw animations ─────────────────────── */

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

/* Coastline */
.arran-outline {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.map-svg.drawing .arran-outline {
  animation: draw 3.6s cubic-bezier(0.4, 0, 0.2, 1) 0.45s forwards;
}

/* Pladda — tiny so a short dasharray + quick draw */
.pladda-outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.map-svg.drawing .pladda-outline {
  animation: draw 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}

/* Holy Isle — outline draws, fill fades in after */
.holy-isle-outline {
  fill: var(--mountain);
  fill-opacity: 0;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  cursor: pointer;
  transition: fill 0.6s ease, fill-opacity 1s ease 1.5s, transform 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.map-svg.drawing .holy-isle-outline {
  animation: draw 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.85s forwards;
  fill-opacity: 1;
}
.holy-isle-outline:focus {
  outline: none;
}


/* ─── Element styling ───────────────────────────── */

.arran-wash {
  fill: var(--wash);
  stroke: none;
}

.arran-terrain {
  fill: var(--terrain);
  stroke: none;
}

.arran-outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.arran-sketch {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Mountain marks fill; mountain lines draw */
.arran-mountains .mountain-mark {
  fill: var(--mountain);
  stroke: none;
}

.arran-mountains .mountain-line {
  fill: none;
  stroke: var(--mountain);
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}
.map-svg.drawing .arran-mountains .mountain-line {
  animation: draw 3s cubic-bezier(0.4, 0, 0.2, 1) 1.5s forwards;
}

/* Ravens — solid ink, clickable to cycle colour */
.raven {
  cursor: pointer;
}
.raven path {
  fill: var(--ink);
  stroke: none;
  transition: fill 0.3s ease;
}
.raven:hover path,
.raven:focus path {
  fill: var(--mountain);
}
.raven:focus {
  outline: none;
}


/* ─── Annotations & link styling ─────────────────── */

.ann-link {
  cursor: pointer;
  transition: opacity 1.4s ease-out;
}

.ann-link:hover .ann-text,
.ann-link:hover .ann-text-white {
  fill: var(--mountain);
}

.ann-link:focus { outline: none; }

.ann-text {
  fill: var(--ink);
  font-family: 'Inter', 'Inter fallback', Arial, sans-serif;
  font-weight: 500;
  font-size: 15.681px;
  transition: fill 0.3s ease;
}

.ann-text-white {
  fill: #ffffff;
  transition: fill 0.3s ease;
}

.ann-rect {
  fill: var(--mountain);
  fill-opacity: 0.85;
  transition: fill 0.4s ease, fill-opacity 0.3s ease;
}

.ann-greenmap:hover .ann-rect {
  fill-opacity: 1;
}

.ann-greenmap:hover .ann-text-white {
  fill: #ffffff;
}

/* The tiny house paths and pioneer sprout — use ink */
.ann-house path,
.ann-pioneer path {
  fill: var(--ink);
}


/* ─── Reduced motion ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .arran-wash,
  .arran-terrain,
  .arran-outline,
  .arran-sketch,
  .holy-isle-outline,
  .pladda-outline,
  .arran-mountains,
  .raven,
  .ann-link {
    opacity: 1 !important;
    fill-opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
  .arran-outline,
  .pladda-outline,
  .holy-isle-outline,
  .arran-mountains .mountain-line {
    stroke-dashoffset: 0 !important;
  }
  .arran-sketch { opacity: 0.55 !important; }
}