/* HOE Interior Ltd — custom styles for things Tailwind utilities can't express cleanly */

/* Leave extra room above the bottom sticky bar so the a11y FAB doesn't collide on mobile */
:root { --a11y-bottom: 80px; }
@media (min-width: 768px){ :root { --a11y-bottom: 24px; } }

/* Marquee strip — brand phrases drifting right to left */
.marquee { position: relative; }
.marquee-track { animation: marquee 38s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Hero headline fade-in (single, gentle animation) */
@media (prefers-reduced-motion: no-preference) {
  .hero-fade {
    opacity: 0;
    transform: translateY(8px);
    animation: hero-in 0.7s ease-out 0.1s forwards;
  }
  .hero-svg {
    opacity: 0;
    animation: hero-in 0.9s ease-out 0.25s forwards;
  }
}
@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Selection color — terracotta on sand */
::selection { background: #B3672B; color: #F5EFE4; }

/* Slightly tighter serif rendering */
.font-serif { font-feature-settings: "liga", "dlig"; }