@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html { scroll-behavior: smooth; }
    body { @apply bg-warm-white font-sans text-ink antialiased; text-rendering: optimizeLegibility; }
    h1, h2, h3 { @apply font-display font-normal; }
    a, button, input, select, textarea { @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ink focus-visible:ring-offset-2; }
    [x-cloak] { display: none !important; }
}

@layer components {
    .shell { @apply mx-auto max-w-[1400px] px-5 sm:px-8 lg:px-12; }
    .section-space { @apply py-20 md:py-28 lg:py-24; }
    .display-1 { @apply font-display text-[clamp(2.25rem,4vw,3.75rem)] leading-[1.05] tracking-[-.02em]; }
    .display-2 { @apply font-display text-[clamp(1.75rem,2.8vw,2.75rem)] leading-[1.15] tracking-[-.015em]; }
    .editorial-statement { @apply font-display text-[clamp(1.5rem,2vw,1.75rem)] leading-[1.3] tracking-[-.01em]; }
    .body-lg { @apply text-lg leading-8 text-grey-600 md:text-xl md:leading-9; }
    .editorial-card { @apply border border-grey-200 bg-ivory p-7 transition duration-300 hover:-translate-y-1 hover:bg-white md:p-9; }
}

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.partner-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.partner-logo-track {
    display: flex;
    width: max-content;
    animation: partner-scroll 48s linear infinite;
    will-change: transform;
}

.partner-logo-set {
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
    padding-right: 1rem;
}

.partner-marquee:hover .partner-logo-track,
.partner-marquee:focus-within .partner-logo-track { animation-play-state: paused; }

@keyframes partner-scroll {
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
    [data-reveal] { opacity: 1; transform: none; }
    .partner-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
    .partner-logo-set[aria-hidden='true'] { display: none; }
}