@import "tailwindcss";
@font-face {
  font-family: "Switzer Variable";
  src: url("/font/Switzer-Variable.ttf") format("truetype");
  font-weight: 100 900; /* Full variable range */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mium Regular";
  src: url("/font/miumAccess-Regular.ttf") format("truetype");
  font-weight: 300; /* Full variable range */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("/font/PlayfairDisplay-Italic-VariableFont_wght.ttf")
    format("truetype");
  font-weight: 300; /* Full variable range */
  font-style: normal;
  font-display: swap;
}
@theme inline {
  --font-switzer: "Switzer Variable", system-ui, sans-serif;
  --font-mium-reg: "Mium Regular", system-ui, sans-serif;
  --font-playfair: "Playfair Display", Georgia, serif;

  /* === HEADINGS === */
  --text-h-1-96: 96px;
  --text-h-2-60: 60px;
  --text-h-3-40: 40px;
  --text-h-4-34: 34px;
  --text-h-5-28: 28px;
  --text-h-6-38: 38px;
  --text-h-7-24: 24px;
  --text-h-mobile-30: 30px;
  --text-hero-mobile: 56px;

  --leading-h1: 90px;
  --leading-h2: 63px;
  --leading-h3: 48px;
  --leading-h4: 42px;
  --leading-h5: 30px;
  --leading-mobile: 38px;

  /* === BODY TEXT === */
  --text-b-1-20: 20px;
  --text-b-2-17: 17px;
  --text-b-3-16: 16px;
  --text-b-4-14: 14px;

  --leading-b1: 25px;
  --leading-b2: 26px;
  --leading-b3: 23px;
  --leading-b4: 16px;

  --color-background: #f8f8ff;
  --color-light-100: #d5ffdc;
  --color-light-200: #ecf9db;
  --color-light-300: #d5ffdc33;
  --color-brand: #274b2d;
  --color-hover: #2f5a36;
  --color-btn: #274b2d;

  --color-border: #3a6f43;

  --color-secondary: #636369;
  --color-gray: #423f3f;

  --breakpoint-xl: 1600px;
  --breakpoint-lg: 1400px;
  --breakpoint-md: 1024px;
  --breakpoint-tab: 767px;
  --breakpoint-sm: 320px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* Base marquee container */
.marquee {
  display: flex;
  gap: var(--gap);
  animation: marquee var(--duration) linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee {
  display: flex;
  gap: var(--gap);
  animation: marquee var(--duration) linear infinite;
}

/* Reverse direction support */
.marquee.reverse {
  animation-direction: reverse;
}

/* Pause on hover */
.group:hover .marquee.pause {
  animation-play-state: paused;
}
/* === PAGE TRANSITION FIX === */

.overlay {
  grid-area: 1 / 1 / 2 / 2;
  position: fixed; /* instead of relative — ensures full viewport coverage */
  top: 0;
  left: 0;
  width: 100vw; /* use viewport units explicitly */
  height: 100vh;
  z-index: 1000;
  pointer-events: none;
}

.overlay__path {
  fill: var(--color-brand, #274b2d);
  stroke: none;
  vector-effect: non-scaling-stroke;
}

.view {
  position: relative;
  grid-area: 1 / 1 / 2 / 2;
  display: grid;
  place-items: center;
}

.view--2 {
  background: var(--color-bg-view-2, #cbb37e);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.view--open {
  pointer-events: auto;
  opacity: 1;
}