/* css/style.css */
@font-face {
  font-family: 'FahKwang';
  src: url('../assets/fonts/FahKwang.ttc') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: auto; /* Lenis (added in Task 5) handles smooth scroll */
}

body {
  overflow-x: hidden;
}

::selection {
  background: #cba97a;
  color: #0b1712;
}

.gold-frame {
  padding: 3px;
  background: linear-gradient(135deg, rgba(203, 169, 122, 0) 0%, #CBA97A 45%, #A9824F 55%, rgba(169, 130, 79, 0) 100%);
}

.dark-frame {
  padding: 3px;
  background: linear-gradient(135deg, rgba(11, 23, 18, 0) 0%, #0B1712 45%, #172E23 55%, rgba(23, 46, 35, 0) 100%);
}

/* Organic blob border for photo frames — asymmetric radii instead of a
   uniform rounded rectangle, echoing the site's wave-divider motif. */
.organic-frame {
  border-radius: 46% 32% 38% 34% / 34% 42% 32% 44%;
}

.organic-frame-b {
  border-radius: 34% 42% 32% 44% / 42% 34% 44% 32%;
}

.organic-frame-c {
  border-radius: 40% 34% 44% 32% / 32% 44% 34% 40%;
}

/* Trail — fixed vertical guide line, signature element inspired by an
   earlier full design pass (index (1).html). Hidden below lg since a fixed
   left-edge column competes with content on narrower viewports. */
.trail {
  --trail-line: rgba(203, 169, 122, 0.55);
  --trail-mid: #e0bd8a;
  --trail-end: #a9824f;
  --trail-solid: #cba97a;
  --trail-glow: rgba(203, 169, 122, 0.7);
  --trail-glow-soft: rgba(203, 169, 122, 0.4);
  --trail-glow-strong: rgba(203, 169, 122, 0.85);
  position: fixed;
  left: max(1.4rem, 3vw);
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 40;
  pointer-events: none;
}

.trail::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--trail-gradient, var(--trail-line));
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

.trail-fill {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%) scaleY(var(--sp, 0));
  transform-origin: top;
  background: linear-gradient(to bottom, transparent, var(--trail-mid) 12%, var(--trail-end) 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  box-shadow: 0 0 14px var(--trail-glow);
}

.trail-dot {
  position: absolute;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--trail-solid);
  transform: translate(-50%, -50%);
  opacity: 0.55;
  box-shadow: 0 0 6px 1px var(--trail-glow-soft);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.trail-dot.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 0 22px 4px var(--trail-glow-strong);
}

.trail-word {
  position: absolute;
  left: 16px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--trail-mid);
  opacity: 0.6;
  transition: opacity 0.6s ease;
}

.trail-word.on {
  opacity: 1;
  text-shadow: 0 0 12px var(--trail-glow);
}

.trail-d1, .trail-w1 { top: 20%; }
.trail-d2, .trail-w2 { top: 48%; }
.trail-d3, .trail-w3 { top: 74%; }

.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.035;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Localização convenience grid: table-like dividers between categories.
   Mobile stacks 1-col with horizontal rules; sm (3-col) and lg (6-col)
   switch to vertical rules, reset at each row's first column so the line
   never appears on the leading edge of the grid. */
.loc-grid > .loc-cat {
  border-top: 1px solid rgba(244, 241, 232, 0.1);
  padding-top: 1.5rem;
}

.loc-grid > .loc-cat:first-child {
  border-top: 0;
  padding-top: 0;
}

@media (min-width: 640px) {
  .loc-grid > .loc-cat {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid rgba(244, 241, 232, 0.1);
    padding-left: 1.25rem;
  }

  .loc-grid > .loc-cat:nth-child(3n+1) {
    border-left: 0;
    padding-left: 0;
  }
}

@media (min-width: 1024px) {
  .loc-grid > .loc-cat:nth-child(3n+1) {
    border-left: 1px solid rgba(244, 241, 232, 0.1);
    padding-left: 1.25rem;
  }

  .loc-grid > .loc-cat:nth-child(7n+1) {
    border-left: 0;
    padding-left: 0;
  }
}

/* Track Record timeline */
.track-viewport {
  position: relative;
  width: 100%;
}

.track-track {
  margin-top: -50px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 6vw;
  height: 700px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.track-track::-webkit-scrollbar {
  height: 6px;
}
.track-track::-webkit-scrollbar-thumb {
  background: rgba(203, 169, 122, 0.4);
  border-radius: 3px;
}

.track-card {
  scroll-snap-align: center;
  flex: 0 0 auto;
  width: 280px;
  height: 1px;
  position: relative;
  z-index: 1;
  padding: 0 44px;
  opacity: 0;
  transform: scale(0.92) translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.track-card.track-card--visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .track-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* .track-card collapses to a 1px anchor so align-items:center on .track-track
   pins that exact point to the shared timeline line, regardless of how tall
   the panel/marker content is. .track-panel and .track-marker are then
   positioned absolutely off that anchor, each extending away from it with a
   fixed gap — so the dot/line always land in empty space between them, never
   across the photo or text, no matter how a given card's content wraps. */
.track-panel {
  position: absolute;
  left: 44px;
  right: 44px;
  background: #FFFFFF;
  border-radius: 1.25rem;
  padding: 0.75rem;
  box-shadow: 0 10px 30px rgba(11, 23, 18, 0.09);
}
.track-card[data-row="top"] .track-panel {
  bottom: 10px;
}
.track-card[data-row="bottom"] .track-panel {
  top: 10px;
}

.track-marker {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
.track-card[data-row="top"] .track-marker {
  top: 10px;
}
.track-card[data-row="bottom"] .track-marker {
  bottom: 10px;
}

.track-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.85rem;
  display: block;
}

.track-photo-fallback {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.85rem;
  background: linear-gradient(160deg, #172E23, #0B1712);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}

.track-pill {
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
}

.track-line {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, transparent, rgba(169, 130, 79, 0.4) 4%, rgba(169, 130, 79, 0.4) 96%, transparent);
  pointer-events: none;
  z-index: 0;
}

.track-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #A9824F;
  box-shadow: 0 0 0 4px #F4F1E8;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.track-card.track-highlight .track-panel {
  background: linear-gradient(180deg, #FFFDF6, #FFFFFF);
  outline: 2px solid #CBA97A;
  outline-offset: 3px;
  box-shadow: 0 14px 34px rgba(169, 130, 79, 0.28);
}

img[src*="17-aguas-do-cerrado.png"] {
    object-fit: contain;
}

@media (min-width: 1024px) {
  .track-track {
    scroll-snap-type: none;
  }
}

/* Below the desktop pin breakpoint, navigation happens only via the
   prev/next buttons — swipe/scroll is disabled. overflow-x: hidden still
   allows JS-driven scrollLeft/scrollBy, just not user-initiated scrolling. */
@media (max-width: 1023.98px) {
  .track-track {
    overflow-x: hidden;
    touch-action: pan-y;
    height: 440px;
    margin-top: 0;
    /* align-items: center (the desktop default) would force the timeline
       anchor to sit at the exact vertical midpoint, splitting the reserved
       space 50/50 above and below it. The panel (below) needs far more room
       than the status pill (above), so anchor near the top instead and push
       each card down by hand to where the line should sit. */
    align-items: flex-start;
  }

  .track-card {
    margin-top: 64px;
  }

  .track-line {
    top: 64px;
  }

  /* No zig-zag on mobile: every card sits in the same row (panel below the
     line, status pill above it), regardless of its data-row. */
  .track-card[data-row="top"] .track-panel,
  .track-card[data-row="bottom"] .track-panel {
    top: 10px;
    bottom: auto;
  }

  .track-card[data-row="top"] .track-marker,
  .track-card[data-row="bottom"] .track-marker {
    bottom: 10px;
    top: auto;
  }
}