Tailwind

@import 'tailwindcss';

/* @custom-variant hero (.hero &); */

@theme {
  --font-heading: var(--font-heading-family);
  --font-heading2: var(--font-heading2-family);
  --font-heading3: var(--font-heading3-family);
  --font-body: var(--font-body-family);
  --font-accent: var(--font-accent-family);

  --radius-4xl: 2rem;

  --text-xs: 0.9rem;
  --text-xs--line-height: 1.5;
  --text-sm: 1.1rem;
  --text-sm--line-height: 1.5;
  --text-base: 1.2rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.3rem;
  --text-lg--line-height: 1.5;
  --text-xl: 1.5rem;
  --text-xl--line-height: 1.5;
  --text-2xl: 1.6rem;
  --text-2xl--line-height: 1.3;
  --text-3xl: 1.7rem;
  --text-3xl--line-height: 1.3;
  --text-4xl: 2rem;
  --text-4xl--line-height: 1.3;
  --text-5xl: 2.9rem;
  --text-5xl--line-height: 1.3;
  --text-6xl: 3.2rem;
  --text-6xl--line-height: 1.3;

  /* ── Surface / Background ── */
  --color-body: #ffffff;
  --color-body-light: #faf6f4;
  --color-body-dark: #d9d1ce;
  --color-body2: #f2eae7;

  /* ── Text / Foreground ── */
  --color-contrast: #2f0e0a;
  --color-contrast-light: #53302b;
  --color-contrast-dark: #190705;

  /* ── Overlay (fixed context — image/video scrims) ── */
  --color-overlay: #000000;
  --color-overlay-text: #ffffff;

  /* ── Brand Accent 1 ── */
  --color-accent: #340e0a;
  --color-accent-light: #4b1c18;
  --color-accent-dark: #2f0e0a;
  --color-accent-contrast: #f2eae7;

  --color-accent2: #67422f;
  --color-accent2-light: #8a5a45;
  --color-accent2-dark: #4a2f20;
  --color-accent2-contrast: #f2eae7;

  --color-accent3: #f2ebe1;
  --color-accent3-light: #f9f5f0;
  --color-accent3-dark: #e4dacb;
  --color-accent3-contrast: #2f0e0a;

  --color-accent4: #e9e0d9;
  --color-accent4-light: #c98a7f;
  --color-accent4-dark: #9a5248;
  --color-accent4-contrast: #f2eae7;

  --color-accent5: #dab9b4;
  --color-accent5-light: #ead8d3;
  --color-accent5-dark: #c9a59f;
  --color-accent5-contrast: #2f0e0a;

  --color-accent6: #000000;
  --color-accent6-light: #333333;
  --color-accent6-dark: #000000;
  --color-accent6-contrast: #ffffff;
}

* {
  scroll-margin-top: 40px !important;
}

/* Hide scrollbars while keeping scroll functionality */
@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }

  /* Text stroke/outline effect */
  .text-stroke {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke-width: 1px;
  }
  .text-stroke-body {
    -webkit-text-stroke-color: var(--color-body);
  }
  .text-stroke-contrast {
    -webkit-text-stroke-color: var(--color-contrast);
  }
  .text-stroke-accent {
    -webkit-text-stroke-color: var(--color-accent);
  }

  /* Padding top matching navbar height at different breakpoints */
  /* Navbar: pt-12 sm:pt-16 + logo (~60px mobile, ~80px desktop) + pb-10 */
  .pt-navbar {
    @apply pt-40 sm:pt-48 md:pt-56 lg:pt-60;
  }

  /* Subtle cross pattern background */
  .bg-pattern-cross {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
}

@keyframes move-x {
  0% {
    transform: translateX(var(--move-x-from));
  }
  100% {
    transform: translateX(var(--move-x-to));
  }
}

@keyframes fall-slow {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(600px) rotate(360deg);
    opacity: 0;
  }
}

@keyframes fall-medium {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(550px) rotate(-270deg) translateX(30px);
    opacity: 0;
  }
}

@keyframes fall-fast {
  0% {
    transform: translateY(0) rotate(0deg) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(500px) rotate(180deg) translateX(-20px);
    opacity: 0;
  }
}

@layer utilities {
  .animate-fall-slow {
    animation: fall-slow 8s ease-in-out infinite;
  }
  .animate-fall-medium {
    animation: fall-medium 6s ease-in-out infinite;
    animation-delay: 1s;
  }
  .animate-fall-fast {
    animation: fall-fast 5s ease-in-out infinite;
    animation-delay: 2s;
  }
  .animate-spin-slow-reverse {
    animation: spin-slow-reverse 10s linear infinite;
  }
  .animate-spin-slow {
    animation: spin-slow 20s linear infinite;
  }
  .animate-spin-medium {
    animation: spin-medium 15s linear infinite;
  }
  .animate-spin-medium-reverse {
    animation: spin-medium-reverse 15s linear infinite;
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-medium {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-medium-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@keyframes spin-slow-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Diagonal clip path for hero sections */
.clip-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 65%);
}

/* Confetti explosion and fall animation - plays once */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(120vh) rotate(540deg);
    opacity: 0;
  }
}

@layer utilities {
  .animate-confetti-fall {
    animation: confetti-fall cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }
}