/* ==========================================================================
   SPECIAL ATTRACTIONS – "Honeycomb lens"
   Site palette & type only. The lens magnifies from 1/φ (0.618) at the edges
   to φ (1.618) under the pointer; the detail view splits 1.618 : 1. Spacing
   uses the Fibonacci scale 5 · 8 · 13 · 21 · 34 · 55 · 89 px.
   ========================================================================== */
.hc,
.sa-list {
  --g1: 5px;
  --g2: 8px;
  --g3: 13px;
  --g4: 21px;
  --g5: 34px;
  --g6: 55px;
  --g7: 89px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.hc {
  position: relative;
  height: 25vh;                          /* a band, not the whole screen */
  height: 25svh;
  min-height: 220px;
  overflow: hidden;
  isolation: isolate;                    /* keep the comb below the menu bar and its dropdowns */
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 60% at 50% 55%, rgba(211, 239, 103, 0.22), transparent 70%),
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(255, 255, 255, 0.55), transparent 75%),
    var(--color-cream);
}

.hc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hc-icons { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Field
   -------------------------------------------------------------------------- */
.hc-field {
  position: absolute;
  inset: 0;
  touch-action: none;
  user-select: none;
  outline: none;
}

.hc-field.is-dragging { cursor: grabbing; }
.hc-field:focus-visible { box-shadow: inset 0 0 0 3px var(--color-green); }

.hc-field::after {                        /* the comb fades out at the edges, like a lens */
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(237, 238, 223, 0.94), transparent 10%, transparent 90%, rgba(237, 238, 223, 0.94));
}

.hc-world { position: absolute; inset: 0; }

/* Every cell of the comb: placed and scaled by attractions.js */
.hc-bubble,
.hc-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--d, 140px);
  height: var(--d, 140px);
  margin: calc(var(--d, 140px) * -0.5) 0 0 calc(var(--d, 140px) * -0.5);
  padding: 0;
  border-radius: 50%;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) scale(var(--s, 1));
  will-change: transform;
}

/* --------------------------------------------------------------------------
   Attraction bubbles
   -------------------------------------------------------------------------- */
.hc-bubble {
  display: block;
  cursor: pointer;
  transition: filter 0.5s ease, opacity 0.5s ease;
}

.hc-bubble__img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-green-dark);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.92),
    0 var(--g3) var(--g5) calc(var(--g3) * -1) rgba(6, 95, 70, 0.55);
  transition: box-shadow 0.35s ease;
}

.hc-bubble__img::after {                  /* soft glassy highlight */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.35), transparent 42%);
  pointer-events: none;
}

.hc-bubble__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}

.hc-bubble:hover .hc-bubble__img,
.hc-bubble:focus-visible .hc-bubble__img {
  box-shadow:
    0 0 0 4px var(--color-lime),
    0 var(--g4) var(--g6) calc(var(--g4) * -1) rgba(6, 95, 70, 0.7);
}

.hc-bubble:hover .hc-bubble__img img,
.hc-bubble:focus-visible .hc-bubble__img img { transform: scale(1.12); }
.hc-bubble:focus-visible { outline: none; }

.hc-bubble__num {
  position: absolute;
  top: 4%;
  right: 4%;
  display: grid;
  place-items: center;
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: var(--color-lime);
  color: var(--color-dark);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: calc(var(--d, 140px) * 0.1);
  box-shadow: 0 2px 6px rgba(6, 95, 70, 0.25);
}

/* Name pill: appears on bubbles under the lens, kept at a steady text size */
.hc-bubble__label {
  position: absolute;
  left: 50%;
  bottom: 10%;                           /* inside the bubble, so the band never clips it */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: var(--g1) var(--g3);
  border-radius: var(--g3);
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 var(--g2) var(--g4) calc(var(--g2) * -1) rgba(6, 95, 70, 0.4);
  opacity: var(--lo, 0);
  transform: translateX(-50%) scale(var(--ls, 1));
  transform-origin: 50% 100%;
  pointer-events: none;
}

.hc-bubble__label strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-green-dark);
}

.hc-bubble__label em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}


/* --------------------------------------------------------------------------
   Decorative icon bubbles that fill the rest of the comb
   -------------------------------------------------------------------------- */
.hc-fill {
  display: grid;
  place-items: center;
  pointer-events: none;
  background: var(--fill-bg, rgba(6, 95, 70, 0.1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 var(--g2) var(--g4) calc(var(--g3) * -1) rgba(6, 95, 70, 0.35);
}

.hc-fill svg {
  width: 34%;
  height: 34%;
  fill: none;
  stroke: var(--fill-ink, var(--color-green));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.hc-fill--green { --fill-bg: linear-gradient(145deg, #0d7a5b, #044332); --fill-ink: var(--color-lime); }
.hc-fill--lime  { --fill-bg: linear-gradient(145deg, #e3f59a, #c9e65c); --fill-ink: var(--color-green-dark); }
.hc-fill--cream { --fill-bg: linear-gradient(145deg, #ffffff, #e6e7d6); --fill-ink: var(--color-green); }
.hc-fill--gold  { --fill-bg: linear-gradient(145deg, #e7c47a, #d5a84b); --fill-ink: #5a3f10; }
.hc-fill--mist  { --fill-bg: linear-gradient(145deg, rgba(6, 95, 70, 0.16), rgba(6, 95, 70, 0.06)); --fill-ink: var(--color-green); }

/* Photo fillers (every circle except the 13 attractions): gallery animals in soft greyscale */
.hc-fill--photo {
  overflow: hidden;
  background: #d9dad0;
}
.hc-fill--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* thumbnails are already greyscale (static/images/gallery/thumbs-grey) */
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Listing below the comb: photo 1 : text 1.618, alternating sides
   -------------------------------------------------------------------------- */
.sa-list {
  padding: var(--g7) 0;
  background-color: var(--color-cream);
}

.sa-list__kicker {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-green);
}

.sa-list__title {
  margin: var(--g2) 0 var(--g6);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  color: var(--color-green-dark);
}

.sa-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
  gap: var(--g6);
  align-items: center;
  padding: var(--g6) 0;
  scroll-margin-top: var(--g7);
}

.sa-row--flip { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); }
.sa-row--flip .sa-row__media { order: 2; }

/* Entry you jumped to from a bubble: its paper sheet takes a soft lime tint */
.sa-row:target .sa-row__media::before { background: linear-gradient(170deg, #f3f9d8, #e6f2b4); }

.sa-row__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--g4);
  background: var(--color-green-dark);
  box-shadow: 0 var(--g4) var(--g6) calc(var(--g4) * -1) rgba(6, 95, 70, 0.45);
  transition: box-shadow 0.4s ease;
}

.sa-row__media img { width: 100%; height: 100%; object-fit: cover; }

.sa-row__meta { display: flex; align-items: center; gap: var(--g2); }

.sa-row__num {
  display: grid;
  place-items: center;
  width: var(--g5);
  height: var(--g5);
  border-radius: 50%;
  background: var(--color-lime);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-dark);
}

.sa-row__tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.sa-row__title {
  margin: var(--g3) 0 var(--g2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.1;
  color: var(--color-green-dark);
}

/* Text of each row */
.hc-teaser {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-dark);
}

.hc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g2);
  margin: var(--g3) 0 var(--g4);
  list-style: none;
}

.hc-chips li {
  padding: var(--g1) var(--g3);
  border-radius: 9999px;
  background: rgba(6, 95, 70, 0.08);
  border: 1px solid rgba(6, 95, 70, 0.12);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-green-dark);
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s var(--ease);
}

.hc-chips li:hover { background: var(--color-green); color: var(--color-white); transform: translateY(-2px); }

.hc-facts { list-style: none; counter-reset: fact; }

.hc-facts li {
  position: relative;
  padding: var(--g2) var(--g3) var(--g2) var(--g5);
  border-radius: var(--g2);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-muted);
  counter-increment: fact;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.4s var(--ease);
}

.hc-facts li::before {
  content: counter(fact, decimal-leading-zero);
  position: absolute;
  left: var(--g2);
  top: var(--g2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  line-height: 1.6rem;
  color: var(--color-green);
}

/* Hovering a fact: no highlight, just darker text */
.hc-facts li:hover { color: var(--color-dark); }

/* Mouse interactions on the listing: photo tilts towards the cursor with a glare */
.sa-row__media {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.35s ease-out, box-shadow 0.4s ease;
}

.sa-row__media img { transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 0.35s ease-out; }

.sa-row__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 280px at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.35), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sa-row__media:hover::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Torn-paper mount: the photo sits on a cream sheet with ragged, notched
   edges; a darker second sheet peeks out behind it at an angle. The glare
   moves to the photo frame so both pseudo-elements can be paper.
   -------------------------------------------------------------------------- */
.sa-row__media {
  overflow: visible;
  aspect-ratio: auto;
  padding: 16px 16px 20px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 18px 20px rgba(6, 95, 70, 0.22)) drop-shadow(0 2px 3px rgba(18, 24, 21, 0.12));
}
.sa-row__media::before,
.sa-row__media::after {
  content: '';
  position: absolute;
  pointer-events: none;
  mix-blend-mode: normal;
  opacity: 1;
  border-radius: 0;
}
/* Front sheet */
.sa-row__media::before {
  inset: 0;
  z-index: -1;
  background: linear-gradient(170deg, #f6f5ec, #efeee2);
  clip-path: polygon(0% 3%, 7% 1.2%, 17% 2.6%, 29% 0.6%, 31% 4.2%, 33% 1%, 45% 2.2%, 58% 0.4%, 71% 2.4%, 84% 0.8%, 86% 4.6%, 88% 1.2%, 100% 0%,
    99.3% 28%, 100% 54%, 99.4% 78%, 100% 100%, 87% 98.8%, 69% 100%, 51% 98.6%, 34% 100%, 17% 98.9%, 0% 100%, 0.7% 72%, 0% 44%, 0.6% 20%);
}
/* Back sheet: darker, rotated, peeking above and to the side */
.sa-row__media::after {
  inset: -14px -6px 6px 10px;
  z-index: -2;
  background: linear-gradient(170deg, #e4e4d6, #d9dacb);
  transform: rotate(-2.2deg);
  clip-path: polygon(4% 6%, 22% 0%, 24% 5%, 47% 2%, 70% 4.5%, 72% 0.5%, 96% 3%, 100% 18%, 98.8% 60%, 100% 96%, 60% 100%, 20% 98%, 0% 100%, 1.4% 50%);
  transition: none;
}
.sa-row--flip .sa-row__media::after { inset: -14px 10px 6px -6px; transform: rotate(2.2deg); }
.sa-row__media:hover::after { opacity: 1; }

/* Photo inside the paper: keeps the zoom/parallax clipped to its own box */
.sa-row__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-green-dark);
}
.sa-row__frame::after {               /* glare follows the pointer (vars set by attractions.js) */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 280px at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.35), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.sa-row__media:hover .sa-row__frame::after { opacity: 1; }

/* Rows rise in as they scroll into view */
.sa-row.is-pending { opacity: 0; transform: translateY(var(--g6)); }
.sa-row { transition: opacity 0.8s ease, transform 0.9s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .sa-row,
  .sa-row__media,
  .sa-row__media img { transition-duration: 0.01s; }
  .sa-row.is-pending { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hc-bubble__label strong { font-size: 0.85rem; }
  .sa-row,
  .sa-row--flip { grid-template-columns: 1fr; gap: var(--g4); }
  .sa-row--flip .sa-row__media { order: 0; }
  .sa-row__media { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-bubble,
  .hc-bubble__img,
  .hc-bubble__img img,
  .hc-bubble__img img { transition-duration: 0.01s; }
}

/* --------------------------------------------------------------------------
   Footsteps between the listing photos (built by attractions.js): light
   terracotta shoe prints in the gap beside each entry, shown as you scroll
   -------------------------------------------------------------------------- */
.sa-list .container { position: relative; }
.sa-row { position: relative; z-index: 1; }
.sa-steps {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.sa-steps path {
  fill: #c97a55;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sa-steps path.is-on { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .sa-steps path { transition: none; } }