/* ============================================================
   ARLO — Visit (component)
   Calm, editorial info section, RTL-first: a typographic intro, a
   full-bleed cinematic map band (stylised text-free SVG on paper texture),
   then address / hours / contact separated by hairlines.
   ============================================================ */

.visit {
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink);
}

/* ---------- Centered intro ---------- */
.visit__top {
  padding-top: clamp(5rem, 12vh, 8.5rem);
}

.visit__header {
  position: relative; /* anchors the quiet ARLO watermark */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
}
/* Quiet ARLO watermark behind the centered intro */
.visit__header::before {
  content: "ARLO";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-brand);
  font-size: clamp(6rem, 18vw, 12rem);
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--color-ink);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.visit__header > * {
  position: relative;
  z-index: 1;
}

.visit__label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-latin);
  font-size: clamp(0.6875rem, 0.625rem + 0.3125vw, 0.8125rem);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.visit__rule {
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.visit__title {
  font-weight: 400;
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 1.35;
  text-wrap: balance;
}

/* ---------- Full-bleed map band ----------
   A cinematic strip: paper tone and dot texture on the container, the SVG
   covering it with xMidYMid slice so the marker stays centered at every
   width. The drawing is a whole neighbourhood in inline SVG — blocks, park,
   pond, square, bazaar, metro, walking route, crosswalks, compass, scale.
   Every moving part is transform and opacity, and holds still until the
   section reveals (see the play-state block at the end). */
.visit__map {
  position: relative;
  overflow: hidden;
  height: clamp(14rem, 26vh + 12vw, 26rem);
  border-block: 1px solid var(--color-line);
  background-color: #f2ebdd;
  background-image: radial-gradient(#e1d3b5 1.3px, transparent 1.4px);
  background-size: 26px 26px;
  background-position: 1.5px 1.5px;
}
.visit__map-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* ---- The café marker: two sonar rings and a breathing bloom ---- */
.visit__map-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: visit-pulse var(--dur-pulse) var(--ease-out) infinite;
}
.visit__map-pulse--2 {
  animation-delay: 1.7s;
}
@keyframes visit-pulse {
  0% {
    transform: scale(1);
    opacity: 0.45;
  }
  70%,
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.visit__map-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: visit-map-glow var(--dur-glow) var(--ease-in-out) infinite alternate;
}
@keyframes visit-map-glow {
  from { opacity: 0.55; transform: scale(0.97); }
  to   { opacity: 1;    transform: scale(1.04); }
}

/* ARLO brand marker on the map — same brand face + tracking as the
   site wordmark, so it reads as the café's mark at the location */
.visit__map-art .visit__map-art-brand {
  font-family: var(--font-brand);
  font-weight: 500;
  letter-spacing: var(--wordmark-ls);
  text-transform: uppercase;
}

/* ---- The walking route: dashes travelling from the metro to the café.
        stroke-dasharray is 8 + 7, so one loop is two dash cycles. ---- */
.visit__map-route {
  animation: visit-map-route var(--dur-march) linear infinite;
}
@keyframes visit-map-route {
  to { stroke-dashoffset: -30; }
}

/* ---- Water: quiet rings opening across the pond and the fountain ---- */
.visit__map-ripple {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: visit-map-ripple var(--dur-pulse) ease-out infinite;
}
.visit__map-ripple--2 {
  animation-delay: 1.8s;
}
@keyframes visit-map-ripple {
  0%   { opacity: 0;    transform: scale(0.55); }
  15%  { opacity: 0.55; }
  100% { opacity: 0;    transform: scale(1.9); }
}

/* ---- Traffic: a few cars crossing the map in both directions ----
   The inner group only places and turns the car; this outer layer
   carries it across, so a vertical car still slides in world space. */
.visit__map-car {
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.visit__map-car--south      { animation-name: visit-map-south; animation-duration: 12s; animation-delay: -3s; }
.visit__map-car--north      { animation-name: visit-map-north; animation-duration: 15s; animation-delay: -9s; }
.visit__map-car--east       { animation-name: visit-map-east;  animation-duration: 14s; animation-delay: -2s; }
.visit__map-car--west       { animation-name: visit-map-west;  animation-duration: 17s; animation-delay: -11s; }
.visit__map-car--south-slow { animation-name: visit-map-south; animation-duration: 26s; animation-delay: -14s; }

@keyframes visit-map-south {
  0%   { opacity: 0; transform: translate(0, -70px); }
  5%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 510px); }
}
@keyframes visit-map-north {
  0%   { opacity: 0; transform: translate(0, 510px); }
  5%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translate(0, -70px); }
}
@keyframes visit-map-east {
  0%   { opacity: 0; transform: translate(-90px, 0); }
  4%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { opacity: 0; transform: translate(1290px, 0); }
}
@keyframes visit-map-west {
  0%   { opacity: 0; transform: translate(1290px, 0); }
  4%   { opacity: 1; }
  93%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-90px, 0); }
}

/* ---- Compass rose — a quiet landmark at the desktop edge ---- */
.visit__map-compass {
  opacity: 0.8;
}
.visit__map-compass-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: visit-map-spin var(--dur-spin) linear infinite;
}
@keyframes visit-map-spin {
  to { transform: rotate(360deg); }
}

/* ---- Motion only while the band is on screen ----
   Until the section reveals, the map holds still — the cars parked
   mid-street — which keeps the page quiet and cheap on modest hardware.
   Without JavaScript the band never reveals, and the map simply stays a
   drawing, which is exactly right. */
.visit__map-pulse,
.visit__map-glow,
.visit__map-route,
.visit__map-ripple,
.visit__map-car,
.visit__map-compass-ring {
  animation-play-state: paused;
}
.visit.is-visible .visit__map-pulse,
.visit.is-visible .visit__map-glow,
.visit.is-visible .visit__map-route,
.visit.is-visible .visit__map-ripple,
.visit.is-visible .visit__map-car,
.visit.is-visible .visit__map-compass-ring {
  animation-play-state: running;
}

/* ---------- Info cards ----------
   The three essential facts, each on its own deck of paper: a warm card
   with an icon in a tinted circle, the ledger index, and a bloom of dots.
   Hovering lifts the card and strengthens the accent hairline. This is the
   site's reusable "info card" pattern. */
.visit__bottom {
  padding-block: clamp(3rem, 6vh, 4.5rem) clamp(5rem, 10vh, 7rem);
}

/* Three equal decks, one per fact. They share a single height — the
   tallest card sets it, the other two close on the same line — so the
   row reads as one ledger instead of three slips of different lengths.
   Content stays top-aligned inside every card, so the icon heads and
   the titles line up straight across the row. */
.visit__info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

.visit__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: content starts from the right */
  gap: 0.7rem;
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(34, 27, 18, 0.04),
    0 14px 30px -24px rgba(34, 27, 18, 0.28);
  transition:
    transform var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out);
}

/* Accent hairline across the top — drawn quietly, deepened on hover */
.visit__card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(154, 91, 50, 0), var(--color-accent), rgba(154, 91, 50, 0));
  opacity: 0.45;
  transition: opacity var(--dur-med) var(--ease-out);
}

/* A warm bloom of dots in the back corner, the site's paper motif
   (physical placement on purpose: it is a printed corner, not text) */
.visit__card::after {
  content: "";
  position: absolute;
  left: -1.5rem;
  bottom: -1.5rem;
  width: 6.5rem;
  height: 6.5rem;
  background-image: radial-gradient(rgba(154, 91, 50, 0.26) 1px, transparent 1.1px);
  background-size: 12px 12px;
  mask-image: radial-gradient(circle at 0% 100%, black, transparent 66%);
  opacity: 0.6;
  pointer-events: none;
}

@media (hover: hover) {
  .visit__card:hover {
    transform: translateY(-4px);
    border-color: rgba(154, 91, 50, 0.3);
    box-shadow:
      0 1px 2px rgba(34, 27, 18, 0.05),
      0 24px 42px -26px rgba(34, 27, 18, 0.34);
  }
  .visit__card:hover::before {
    opacity: 1;
  }
  .visit__card:hover .visit__card-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
    transform: translateY(-1px);
  }
}

.visit__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.visit__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(154, 91, 50, 0.18);
  background: rgba(154, 91, 50, 0.07);
  color: var(--color-accent);
  transition:
    background var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out),
    color var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.visit__card-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.visit__card-num {
  font-family: var(--font-num);
  font-variant-numeric: lining-nums;
  font-size: clamp(0.8rem, 0.76rem + 0.25vw, 0.9rem);
  letter-spacing: 0.24em;
  color: var(--color-accent);
}

.visit__card-title {
  font-size: clamp(0.8125rem, 0.75rem + 0.3125vw, 0.9375rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
}

.visit__card-text {
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.95;
  text-wrap: pretty; /* a wrapped address breaks on a whole word */
}
/* English numerals (times & phone) in the classic elegant Latin face */
.visit__card-text[dir="ltr"],
.visit__hours-row span[dir="ltr"] {
  font-family: var(--font-num);
  font-variant-numeric: lining-nums;
}
.visit__card-text[dir="ltr"] {
  font-weight: 500;
}

/* Opening hours — a ledger note, two rows on a dotted rule */
.visit__hours {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.visit__hours-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.35rem;
  font-size: clamp(0.9375rem, 0.875rem + 0.3125vw, 1.0625rem);
}
.visit__hours-row + .visit__hours-row {
  border-block-start: 1px dashed var(--color-line);
  padding-block-start: 0.6rem;
}
.visit__hours-row span:first-child {
  color: var(--color-ink-soft);
}
.visit__hours-row span:last-child {
  font-weight: 500;
}
/* Weekend row — the longer evening hours get a quiet accent */
.visit__hours-row:last-child span:last-child {
  color: var(--color-accent-deep);
}

/* The same note line closes every card — the quiet aside the Contact page
   carries too. It hangs on a dotted rule, and an auto margin seats it on
   the card's bottom edge, so the row closes on one line. */
.visit__card-note {
  width: 100%;
  margin-block-start: auto;
  padding-block-start: 0.7rem;
  border-block-start: 1px dashed var(--color-line);
  font-size: clamp(0.76rem, 0.72rem + 0.25vw, 0.84rem);
  font-weight: 300;
  line-height: 1.9;
  color: var(--color-muted);
  text-wrap: pretty;
}

/* ---------- Reveal on scroll (JS adds .js-reveal, then .is-visible) ---------- */
.visit [data-reveal] {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform 0.9s var(--ease-out),
    filter 0.9s var(--ease-out);
}
.visit.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  filter: blur(6px);
}
.visit.js-reveal .visit__header { transition-delay: 0.05s; }
.visit.js-reveal .visit__map    { transition-delay: 0.15s; }
.visit.js-reveal .visit__card:nth-child(1) { transition-delay: 0.2s; }
.visit.js-reveal .visit__card:nth-child(2) { transition-delay: 0.3s; }
.visit.js-reveal .visit__card:nth-child(3) { transition-delay: 0.4s; }
/* `filter: none`, not `blur(0)`: both look the same through the transition,
   but only `none` drops the filter once the reveal is over. A filter keeps
   the element and its subtree in one render surface, and the map band below
   is full of transform loops that need the compositor. */
.visit.js-reveal.is-visible [data-reveal] {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ============================================================
   Responsive
   Desktop (60rem up): three decks across, one shared height.
   Tablet (40–59.99rem): two decks a row with the hours ledger full width.
   Mobile (39.99rem down): one deck a row.
   ============================================================ */
@media (min-width: 39.99rem) and (max-width: 59.99rem) {
  .visit__info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The two single-line decks share the first row — address at the
     reading start, phone beside it — and the hours ledger, the wide one,
     takes the row underneath. Placement is explicit, so the spanning
     ledger can never push the phone into a row of its own and leave a
     hole beside the address. */
  .visit__card:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .visit__card:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  /* The wide ledger opens out: its two entries sit side by side, each
     with its label over its value, divided by the dotted rule — no
     squeezed pairs, no wrapped lines */
  .visit__hours {
    flex-direction: row;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  .visit__hours-row {
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .visit__hours-row + .visit__hours-row {
    border-block-start: 0;
    border-inline-start: 1px dashed var(--color-line);
    padding-block-start: 0.35rem;
    padding-inline-start: clamp(1.25rem, 3vw, 2.5rem);
  }
}

/* Mobile — one deck a row, same internal rhythm */
@media (max-width: 39.99rem) {
  .visit__top {
    padding-top: clamp(4rem, 10vh, 6rem);
  }
  .visit__map {
    height: clamp(12rem, 30vh + 10vw, 16rem);
  }
  .visit__bottom {
    padding-block: 3rem 5rem;
  }
  .visit__info {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .visit__hours-row {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 0.75rem;
  }
}