/* ============================================================
   Cafe Codex — Animations
   ============================================================ */

/* ---------- Keyframes ---------- */
@keyframes loadBar {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(360%); }
}
@keyframes scrollLine {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(0); }
    100% { transform: translateX(100%); }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes flashIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes kenburns {
    0%   { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Hero intro (runs on load) ---------- */
.hero__media img { animation: kenburns 2.4s var(--ease) both; }
.hero .hero__label  { animation: fadeUp 1s var(--ease) .25s both; }
.hero .hero__title  { animation: fadeUp 1.2s var(--ease) .45s both; }
.hero .hero__desc   { animation: fadeUp 1s var(--ease) .7s both; }
.hero .hero__actions{ animation: fadeUp 1s var(--ease) .9s both; }
.hero__scroll       { animation: fadeUp 1s var(--ease) 1.1s both; }

/* When the loader is enabled, delay hero content slightly */
body.is-loading .hero .hero__label,
body.is-loading .hero .hero__title,
body.is-loading .hero .hero__desc,
body.is-loading .hero .hero__actions { animation-play-state: paused; }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(.94); }

[data-reveal-delay="1"] { transition-delay: .12s; }
[data-reveal-delay="2"] { transition-delay: .24s; }
[data-reveal-delay="3"] { transition-delay: .36s; }
[data-reveal-delay="4"] { transition-delay: .48s; }
[data-reveal-delay="5"] { transition-delay: .6s; }

/* ---------- Image mask reveal ---------- */
.reveal-img { position: relative; overflow: hidden; }
.reveal-img img { transform: scale(1.18); transition: transform 1.5s var(--ease); }
.reveal-img::after {
    content: ""; position: absolute; inset: 0; background: var(--paper);
    transform: translateY(0); transition: transform 1.1s var(--ease);
    z-index: 2;
}
.section--dark .reveal-img::after { background: var(--espresso); }
.section--cream .reveal-img::after { background: var(--cream); }
.reveal-img.is-visible::after { transform: translateY(101%); }
.reveal-img.is-visible img { transform: scale(1); }

/* ---------- Text mask reveal (line by line) ---------- */
.line-reveal { display: block; overflow: hidden; }
.line-reveal > span {
    display: block; transform: translateY(105%);
    transition: transform 1.1s var(--ease);
}
.line-reveal.is-visible > span { transform: translateY(0); }
.line-reveal:nth-child(2) > span { transition-delay: .12s; }
.line-reveal:nth-child(3) > span { transition-delay: .24s; }

/* ---------- Words fade-in ---------- */
.word-reveal > span {
    display: inline-block; opacity: 0; transform: translateY(.5em);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.word-reveal.is-visible > span { opacity: 1; transform: none; }

/* ---------- Parallax helper ---------- */
[data-parallax] { will-change: transform; }

/* ---------- Card foot fallback for touch ---------- */
@media (hover: none) {
    .card__foot { opacity: 1; transform: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .reveal-img::after { display: none; }
    .line-reveal > span { transform: none !important; }
    .word-reveal > span { opacity: 1 !important; transform: none !important; }
    .hero__media img { animation: none !important; transform: none !important; }
}

/* ---------- Floating decorative element ---------- */
.floaty { animation: floaty 6s ease-in-out infinite; }