@charset "UTF-8";

/* ------------------------------------------------------------------------------- */
/* CSS Variables - Design System */
/* ------------------------------------------------------------------------------- */
:root {
  /* Color Palette */
  --color-primary: #82A686;
  --color-primary-dark: #5C8B5F;
  --color-primary-light: #B8D4BB;
  --color-primary-lightest: #EDF5EA;

  --color-text-primary: #000;
  --color-text-secondary: #333;
  --color-text-tertiary: #666;
  --color-text-lightest: #CCC;

  --color-bg-primary: #FCFAF8;

  --color-map-water: #F8F4EE;
  --color-map-land: #EDF5EA;
  --color-map-nation-boundaries: #82A686;
  --color-map-state-boundaries: #B8D4BB;

  /* Spacing Scale (4px base unit) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 50%;

  /* Shadows - Brown-tinted with directional lighting from top-left */
  --shadow-sm: 1px 3px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 1px 4px 14px rgba(0, 0, 0, 0.15);
  --shadow-lg: 1px 5px 20px rgba(0, 0, 0, 0.2);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  --card-sliding-overlay-color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------------------------- */
/* Reset */
/* ------------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color: var(--color-text-primary);
  font-size: 16px;

  @media (max-width: 767px) {
    font-size: 14px;
  }
}

body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  letter-spacing: -0.5px;
  font-weight: 400;
  min-height: 100vh;
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  margin: 0 0 10px 0;
}

/* ------------------------------------------------------------------------------- */
/* Layout */
/* ------------------------------------------------------------------------------- */
.top,
.boxed,
.site-footer {
  width: 100%;
  max-width: 1020px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 0;
}

@media (max-width: 1023px) {
  .top,
  .boxed,
  .site-footer {
    width: calc(100% - 80px);
  }
}

@media (max-width: 767px) {
  .top,
  .site-footer {
    padding: 10px 0;
  }
}

/* ------------------------------------------------------------------------------- */
/* Header */
/* ------------------------------------------------------------------------------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.top__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.top__counter {
  font-weight: 600;
  color: var(--color-text-lightest);
  letter-spacing: 0.5px;
}

.top__counter-visited {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  display: inline-block;
  transition: transform var(--transition-fast);
  border-radius: 50%;
  padding: 2px 6px;
}

/* Subtle flourish animation when counter completes */
@keyframes counterComplete {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(130, 166, 134, 0), inset 0 0 0 0 rgba(130, 166, 134, 0);
  }
  15% {
    transform: scale(1.15);
    box-shadow: 0 0 20px 8px rgba(130, 166, 134, 0.6), inset 0 0 16px 4px rgba(130, 166, 134, 0.4);
  }
  30% {
    transform: scale(0.95);
    box-shadow: 0 0 12px 4px rgba(130, 166, 134, 0.3), inset 0 0 8px 2px rgba(130, 166, 134, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(130, 166, 134, 0), inset 0 0 0 0 rgba(130, 166, 134, 0);
  }
}

.top__counter-visited.complete {
  animation: counterComplete 2s ease-out;
}

.top__replay-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-primary);
  padding: 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.top__replay-btn:hover {
  opacity: 1;
  transform: rotate(-30deg);
}

.top__replay-btn:disabled {
  opacity: 0.25;
  cursor: default;
  transform: none;
}

.top__counter-separator {
  margin: 0 4px;
}

.top__counter-text-visited {
  @media (max-width: 479px) {
    display: none;
  }
}

.top__avatar {
  width: 60px;
  height: 60px;
  object-fit: cover;

  @media (max-width: 767px) {
    width: 40px;
    height: 40px;
  }
}

.top__brand {
  font-size: 1.25rem;
  font-weight: bold;
  background: var(--color-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  @media (max-width: 479px) {
    font-size: 0.9rem;
  }
}

/* ------------------------------------------------------------------------------- */
/* Footer */
/* ------------------------------------------------------------------------------- */
.site-footer {
  font-size: 1rem;
  color: var(--color-text-secondary);
  opacity: 0;
}

/* ------------------------------------------------------------------------------- */
/* Map Container */
/* ------------------------------------------------------------------------------- */
.wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------------------------- */
/* D3 Map Visualization */
/* ------------------------------------------------------------------------------- */
svg {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

image.place {
  touch-action: none;
  cursor: pointer;
  transition: opacity 0.4s ease;
  filter: url(#inset-shadow);
}

image.place.visited {
  filter: url(#drop-shadow);
}

#content {
  background: var(--color-map-water);
}

#content svg {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.outline {
  fill: var(--color-map-land);
  stroke: var(--color-map-nation-boundaries);
}

.mesh {
  fill: none;
  stroke-width: 0.5px;
  stroke: var(--color-map-state-boundaries);
}

/* ------------------------------------------------------------------------------- */
/* Tooltip */
/* ------------------------------------------------------------------------------- */
.tooltip {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  display: none;
  z-index: 2000;
  --tx: 0px;
  --ty: 0px;
  transform: translate(var(--tx), var(--ty));
  will-change: transform;
}

.tooltip__content {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  padding: 8px;
}

.tooltip img {
  display: block;
  width: 120px;
  height: 120px;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  filter: drop-shadow(1px 2px 0 #9B7760);
}

.tooltip__name {
  color: var(--color-text-primary);
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  width: 120px;
  max-width: 90vw;
  text-wrap-style: balance;
  text-wrap-mode: wrap;
}

.tooltip.flip-x {
  transform: translate(calc(var(--tx) - 100%), var(--ty));
}

.tooltip.flip-y {
  transform: translate(var(--tx), calc(var(--ty) - 100%));
}

.tooltip.flip-x.flip-y {
  transform: translate(calc(var(--tx) - 100%), calc(var(--ty) - 100%));
}

/* ------------------------------------------------------------------------------- */
/* Stats Line */
/* ------------------------------------------------------------------------------- */
#stats-line {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
  padding-bottom: var(--spacing-xl);
}

/* ------------------------------------------------------------------------------- */
/* Visits Table */
/* ------------------------------------------------------------------------------- */
.visits-year-group {
  margin-bottom: 32px;
}

/* Shared card styles */
.card {
  background: #FFFFFF;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  height: 92px;
  /* Creates an isolated stacking context to prevent compositing layer changes
     in one card from causing repaints in other cards. Without this, animating
     a card can trigger opacity flickering in adjacent cards on mobile devices
     due to browser compositor optimizations. Alternative of using
     `transform: translateZ(0)` would work but is less semantic. */
  isolation: isolate;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

.year-image-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.visits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  align-items: stretch;

  @media (max-width: 1023px) {
    grid-template-columns: repeat(2, 1fr);
  }

  /*@media (max-width: 479px) {*/
  /*  grid-template-columns: repeat(1, 1fr);*/
  /*}*/
}

.visit-card {
  display: flex;
  padding: 6px;
  --bg-image-offset: calc(80px + 12px); /* cancellation image width + padding */
}

/* background image container */
.visit-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--bg-image-offset);
  background-image: var(--visit-bg-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: 0;
  z-index: 0;
  filter: blur(1px);
  transition: filter var(--transition-base);
  animation: fadeIn var(--transition-base);
}

.visit-card:hover::before {
  filter: blur(0px);
}

/* Wrapper for image and content */
.visit-card__wrapper {
  display: flex;
  gap: 6px;
  position: relative;
  z-index: 3;
  flex: 1;
}

/* Sliding gradient overlay */
.visit-card__wrapper::after {
  content: '';
  position: absolute;
  top: -12px;
  bottom: -12px;
  width: 200%;
  background: linear-gradient(to right, var(--card-sliding-overlay-color) 0%, var(--card-sliding-overlay-color) 50%, transparent 100%);
  z-index: -1;
  transform-origin: right;
  pointer-events: none;
  transition: transform var(--transition-base);
  /* GPU acceleration optimizations to prevent mobile flickering:
     - will-change: Hints browser to create compositor layer upfront, avoiding
       mid-animation layer promotion that causes visual glitches
     - translate3d(0,0,0): Forces GPU compositing from initial render. Simple
       2D transforms (translateX) use CPU rendering which causes jank when
       upgrading to GPU during animation. This "null transform" hack ensures
       consistent hardware acceleration throughout the animation lifecycle. */
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.visit-card:hover .visit-card__wrapper::after {
  /* Use translate3d instead of translateX to maintain consistent GPU compositing.
     Mixing 2D and 3D transforms would cause the browser to switch rendering modes. */
  transform: translate3d(-100%, 0, 0);
}

.visit-card__image {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
  animation: fadeIn var(--transition-base);
}

.visit-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xs);
  min-width: 0;
  padding-left: var(--spacing-xs);
  flex: 1;
}

.visit-card__park {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: opacity var(--transition-base);
}

.visit-card__date {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  text-align: center;
  transition: opacity var(--transition-base);
}

.visit-card:hover .visit-card__park,
.visit-card:hover .visit-card__date {
  opacity: 0;
}

@media (max-width: 767px) {
  .visits-year-group {
    margin-bottom: 16px;
  }
  .visits-grid {
    gap: 8px;
  }

  .card {
    height: 72px;
  }

  .visit-card {
    padding: 6px;
    --bg-image-offset: calc(60px + 12px);  /* cancellation image width + left padding + a bit more */
  }

  .visit-card__image {
    width: 60px;
    height: 60px;
  }

  .visit-card__park {
    font-size: 0.9rem;
  }

  .visit-card__date {
    font-size: 0.8rem;
  }
}

@media (max-width: 479px) {
  .card {
    height: 46px;
  }

  .visit-card {
    padding: 3px;
    --bg-image-offset: calc(40px + 6px);  /* cancellation image width + left padding + a bit more */
  }

  .visit-card__wrapper {
    gap: 3px;
  }

  .visit-card__content {
    gap: 0;
  }

  .visit-card__image {
    width: 40px;
    height: 40px;
  }

  .visit-card__park {
    font-size: 0.6rem;
  }

  .visit-card__date {
    font-size: 0.5rem;
  }
}