/* Small custom layer on top of Tailwind utility classes */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/*
 * Wider layout on large monitors / TVs.
 * Default Tailwind max-w-7xl (1280px) feels squeezed on ultrawide screens.
 */
.max-w-7xl {
  max-width: min(1680px, calc(100% - 2rem)) !important;
}

.max-w-5xl {
  max-width: min(1280px, calc(100% - 2rem)) !important;
}

@media (min-width: 1920px) {
  .max-w-7xl {
    max-width: min(1840px, calc(100% - 3rem)) !important;
  }

  .max-w-5xl {
    max-width: min(1400px, calc(100% - 3rem)) !important;
  }
}

@media (min-width: 2560px) {
  .max-w-7xl {
    max-width: min(2200px, calc(100% - 4rem)) !important;
  }

  .max-w-5xl {
    max-width: min(1600px, calc(100% - 4rem)) !important;
  }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
.reveal.delay-4 { transition-delay: .4s; }

/* Blob background shapes */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

/* Date field — entire control opens the native calendar picker */
.date-field__input {
  position: relative;
}
.date-field__input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

/* Full-bleed video hero */
.video-hero {
  background: #0a0f1a;
}

.video-hero__media {
  transform: scale(1.04);
  animation: hero-video-drift 28s ease-in-out infinite alternate;
}

.video-hero__overlay {
  background:
    linear-gradient(180deg, rgba(8, 12, 20, 0.55) 0%, rgba(8, 12, 20, 0.45) 40%, rgba(8, 12, 20, 0.72) 100%),
    rgba(8, 12, 20, 0.35);
}

@keyframes hero-video-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); }
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-fade {
  opacity: 0;
  animation: hero-fade-up 0.9s cubic-bezier(.22, 1, .36, 1) forwards;
}

.hero-fade--1 { animation-delay: 0.12s; }
.hero-fade--2 { animation-delay: 0.24s; }
.hero-fade--3 { animation-delay: 0.36s; }

@keyframes hero-scroll-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.75; }
  50% { transform: translate(-50%, 6px); opacity: 1; }
}

.hero-scroll {
  animation: hero-scroll-bob 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .video-hero__media,
  .hero-fade,
  .hero-scroll {
    animation: none !important;
  }
  .hero-fade { opacity: 1; }
}

/* Floating animation for hero badge cards */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.float-slow {
  animation: floaty 6s ease-in-out infinite;
}

.float-slow.delay {
  animation-delay: 1.5s;
}

/* Marquee for trust logos (optional use) */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.animate-marquee {
  animation: marquee 28s linear infinite;
}

/* Tab panels */
.panel { display: none; }
.panel.active { display: block; animation: fadeUp .45s ease; }

/* Read more (collapsed by default) */
.read-more-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.read-more-body > * {
  overflow: hidden;
}

.read-more.is-open .read-more-body {
  grid-template-rows: 1fr;
}

.read-more.is-open .read-more-btn .label-more {
  display: none;
}

.read-more.is-open .read-more-btn .label-less {
  display: inline;
}

.read-more.is-open .read-more-btn i {
  transform: rotate(180deg);
}

details summary::-webkit-details-marker {
  display: none;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Header shadow intensify on scroll */
#siteHeader.scrolled {
  box-shadow: 0 16px 45px -12px rgba(15, 23, 42, 0.22);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F9FAFB; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* Hero image mask shape */
.hero-shape {
  border-radius: 2.5rem 2.5rem 2.5rem 0;
}

/* Section numbering badge */
.num-badge {
  font-family: "Plus Jakarta Sans", sans-serif;
  -webkit-text-stroke: 1px #E2E8F0;
  color: transparent;
}