/* Supplementary styles on top of the Tailwind design system (Marine Precision). */

::-webkit-scrollbar { display: none; }

/* Content is visible by default. JS only adds a subtle entrance
   animation when it manages to run in time — it must never be the
   thing that makes content appear in the first place. */
[data-reveal] {
  opacity: 1;
  transform: none;
}

[data-reveal].pre-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-reveal].pre-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#mobileNav.flex { display: flex; }

/* Fluid type for the large fixed-px headline sizes (display-lg 64px,
   headline-xl 48px, headline-lg 32px). These are used bare (without a
   "md:" prefix pairing a smaller mobile class) in several headings, so
   at narrow widths they were overflowing/clipping their containers
   instead of wrapping cleanly. clamp() keeps the original desktop size
   (the max) untouched and only softens it below ~700-770px, so it does
   not affect spots that already pair a "*-mobile" class with "md:". */
/* !important: the Tailwind CDN script injects/rewrites its own
   <style> tag at runtime, after this stylesheet has already loaded,
   so a same-specificity rule here would otherwise lose the cascade. */
.text-display-lg {
  font-size: clamp(2rem, 9vw, 4rem) !important;
}

.text-headline-xl {
  font-size: clamp(1.75rem, 7vw, 3rem) !important;
}

.text-headline-lg {
  font-size: clamp(1.5rem, 6vw, 2rem) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
  }
}