/* ─── Animations ────────────────────────────────────────────────────────── */

@keyframes fade-up {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}

/* Hero entrance — load-time, sequenced via [animation-delay:Xms] */
.animate-fade-up {
    animation: none; /* visible by default (reduced-motion / no-JS) */
}

@media (prefers-reduced-motion: no-preference) {
    .animate-fade-up {
        animation: fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    /* Scroll reveals — hidden only when JS is loaded */
    .js .reveal {
        opacity: 0;
        translate: 0 18px;
        transition:
            opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
            translate 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .js .reveal.is-visible {
        opacity: 1;
        translate: 0 0;
    }
}

/* Card hover lift — uses individual `translate` property so it composes
   safely with the reveal translate without conflicting transforms */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .card {
        transition:
            translate    0.22s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow   0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .card:hover {
        translate: 0 -3px;
        box-shadow: 0 8px 28px -6px oklch(26.8% 0.028 258.34 / 0.10);
    }
}

/* ─── Custom utilities ──────────────────────────────────────────────────── */

/* Display serif — Cormorant Garamond for headings */
.font-display {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Eyebrow label — small caps, wide tracking */
.eyebrow {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    line-height: 1;
}

/* ─── ECHN theme ────────────────────────────────────────────────────────── */

[data-theme="echn"] {
    color-scheme: light;
    --color-base-100: oklch(99.2% 0.006 85.12);
    --color-base-200: oklch(97.2% 0.008 85.87);
    --color-base-300: oklch(92.4% 0.012 85.77);
    --color-base-content: oklch(26.8% 0.028 258.34);
    --color-primary: oklch(50.2% 0.092 70.31);
    --color-primary-content: oklch(17.8% 0.018 259.12);
    --color-secondary: oklch(38.6% 0.041 255.8);
    --color-secondary-content: oklch(98.8% 0.003 84.21);
    --color-accent: oklch(50.2% 0.092 70.31);
    --color-accent-content: oklch(17.8% 0.018 259.12);
    --color-neutral: oklch(21.4% 0.028 258.87);
    --color-neutral-content: oklch(97.8% 0.004 84.94);
    --color-info: oklch(39.7% 0.072 247.59);
    --color-info-content: oklch(98.8% 0.003 84.21);
    --color-success: oklch(62% 0.126 152.52);
    --color-success-content: oklch(16.8% 0.018 159.4);
    --color-warning: oklch(84.7% 0.119 86.21);
    --color-warning-content: oklch(20.7% 0.021 76.42);
    --color-error: oklch(64.2% 0.176 24.54);
    --color-error-content: oklch(97.8% 0.004 84.94);
    --radius-selector: 0.25rem;
    --radius-field: 0.25rem;
    --radius-box: 0.25rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 0;
    --noise: 0;
}