/* =========================================================================
   NUTRICOOL — Motion primitives (v2)
   Driven by nutricool-motion.js. Everything is opt-in through attributes and
   only hides content when JS is running (html.nc-js). Reduced-motion users get
   the final state with no movement.
   ========================================================================= */

/* ---- Page curtain ------------------------------------------------------- */
.nc-curtain {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    --drip: var(--berry);
}
.nc-curtain__panel {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 22px;
    background:
        radial-gradient(60% 50% at 50% 40%, rgba(255, 125, 176, .6), transparent 70%),
        var(--berry);
}
.nc-curtain .nc-drip { height: clamp(60px, 9vw, 120px); }
.nc-curtain__logo { width: min(190px, 46vw); height: auto; animation: nc-curtain-logo .9s var(--ease) both; }
.nc-curtain__bar { position: relative; width: 120px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.nc-curtain__bar span { position: absolute; inset: 0; background: #fff; transform-origin: left; animation: nc-curtain-bar 1.2s var(--ease) forwards; }

/* without JS the curtain never shows */
html:not(.nc-js) .nc-curtain { display: none; }

.nc-curtain { transition: transform .9s var(--ease), visibility 0s linear .9s; }
html.nc-ready .nc-curtain { transform: translateY(calc(-100% - 130px)); visibility: hidden; }
html.nc-leaving .nc-curtain { transform: none; visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
html.nc-leaving .nc-curtain__logo,
html.nc-leaving .nc-curtain__bar span { animation: none; }

@keyframes nc-curtain-logo { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes nc-curtain-bar { from { transform: scaleX(0); } }

/* ---- Reading progress ---------------------------------------------------- */
.nc-progress {
    position: fixed;
    left: 0; top: 0;
    z-index: 200;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--berry), var(--saffron));
    transform-origin: left;
    transform: scaleX(var(--p, 0));
    pointer-events: none;
}

/* ---- Scroll reveal ------------------------------------------------------- */
.nc-js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 34px, 0);
    transition: opacity .9s var(--ease), transform 1s var(--ease);
    transition-delay: var(--d, 0ms);
}
.nc-js [data-reveal="left"] { transform: translate3d(-44px, 0, 0); }
.nc-js [data-reveal="right"] { transform: translate3d(44px, 0, 0); }
.nc-js [data-reveal="zoom"] { transform: scale(.94) translateY(24px); }
.nc-js [data-reveal="mask"] {
    opacity: 1;
    transform: none;
    clip-path: inset(100% 0 0 0 round 999px 999px 28px 28px);
    transition: clip-path 1.3s var(--ease);
}
.nc-js [data-reveal="mask"] img { transform: scale(1.18); transition: transform 1.6s var(--ease); }
.nc-js [data-reveal].is-in { opacity: 1; transform: none; }
.nc-js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0 round 0); }
.nc-js [data-reveal="mask"].is-in img { transform: none; }

/* ---- Split headings (words rise from a mask) ----------------------------- */
.nc-words .nc-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.nc-words .nc-w__i {
    display: inline-block;
    transform: translateY(110%) rotate(6deg);
    transform-origin: left bottom;
    transition: transform 1s var(--ease);
    transition-delay: calc(var(--split-delay, 0ms) + var(--i) * 55ms);
}
.nc-words.is-split-in .nc-w__i { transform: none; }
/* serif accents keep their own block layout */
.nc-display em .nc-w, .nc-footer__title em .nc-w { padding-bottom: .12em; }

/* ---- Hello stage intro --------------------------------------------------- */
.nc-js .nc-hello__pack,
.nc-js .nc-hello__arch,
.nc-js .nc-hello__chip,
.nc-js .nc-hello__ring { opacity: 0; }
.nc-hello.is-in .nc-hello__arch { animation: nc-rise-arch 1.1s var(--ease) both; }
.nc-hello.is-in .nc-hello__ring { animation: nc-fade 1s .3s both, nc-spin 26s linear infinite; }
.nc-hello.is-in .nc-hello__pack--c { animation: nc-drop .95s .25s var(--ease-spring) both, nc-float 6s 1.4s ease-in-out infinite; }
.nc-hello.is-in .nc-hello__pack--l { animation: nc-drop .95s .4s var(--ease-spring) both, nc-float 7s 1.5s ease-in-out infinite; }
.nc-hello.is-in .nc-hello__pack--r { animation: nc-drop .95s .5s var(--ease-spring) both, nc-float 6.5s 1.7s ease-in-out infinite; }
.nc-hello.is-in .nc-hello__chip--a { animation: nc-pop .6s .9s var(--ease-spring) both; }
.nc-hello.is-in .nc-hello__chip--b { animation: nc-pop .6s 1.05s var(--ease-spring) both; }

@keyframes nc-rise-arch { from { opacity: 0; transform: translateY(40px) scaleY(.6); transform-origin: bottom; } to { opacity: 1; transform: none; } }
@keyframes nc-drop { from { opacity: 0; transform: translateY(-60px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes nc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes nc-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes nc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Doodles ------------------------------------------------------------- */
.nc-doodle {
    position: absolute;
    width: var(--s);
    height: var(--s);
    color: var(--c, var(--berry));
    pointer-events: none;
    animation: nc-doodle var(--t, 6s) ease-in-out var(--delay, 0s) infinite;
}
.nc-doodle svg { width: 100%; height: 100%; display: block; }
.nc-doodle--spin svg { animation: nc-spin 14s linear infinite; }
@media (max-width: 575.98px) { .nc-doodle--hide-sm { display: none; } }
@keyframes nc-doodle {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-12px) rotate(10deg); }
}

/* pause looping work in sections that are off-screen */
.nc-offscreen .nc-doodle,
.nc-offscreen .nc-doodle svg,
.nc-offscreen .nc-ribbon__track,
.nc-offscreen .nc-picker__halo,
.nc-offscreen .nc-picker__pack img,
.nc-offscreen .nc-fr__glow,
.nc-offscreen .nc-fr__visual img,
.nc-offscreen .nc-ticket { animation-play-state: paused; }

/* ---- Tilt cards (fine pointers) ------------------------------------------ */
[data-tilt].is-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px);
    transition: transform .12s linear, box-shadow .4s var(--ease);
}
.nc-tilt-glare {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45), transparent 55%);
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    mix-blend-mode: soft-light;
}
[data-tilt].is-tilting .nc-tilt-glare { opacity: 1; }

/* ---- Flavour picker swap ------------------------------------------------- */
.nc-picker__pack img.is-out { animation: nc-pack-out .26s var(--ease) forwards; }
.nc-picker__pack img.is-in { animation: nc-pack-in .75s var(--ease-spring) both, nc-bob 5s .75s ease-in-out infinite; }
.nc-picker__name.is-swap,
.nc-picker__tag.is-swap,
.nc-picker__word.is-swap { animation: nc-text-in .6s var(--ease) both; }
@keyframes nc-pack-out { to { opacity: 0; transform: translateY(-14%) rotate(-12deg) scale(.88); } }
@keyframes nc-pack-in { from { opacity: 0; transform: translateY(22%) rotate(10deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes nc-text-in { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
.nc-picker__word.is-swap { animation-name: nc-word-in; }
@keyframes nc-word-in { from { opacity: 0; letter-spacing: .02em; } to { opacity: .28; } }

/* products filter */
.nc-prod.is-entering { animation: nc-card-in .55s var(--ease) both; animation-delay: var(--fd, 0ms); }
@keyframes nc-card-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { 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;
    }
    html { scroll-behavior: auto; }
    .nc-curtain { display: none; }
    .nc-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
    .nc-js [data-reveal="mask"] img { transform: none; }
    .nc-js .nc-hello__pack, .nc-js .nc-hello__arch, .nc-js .nc-hello__chip, .nc-js .nc-hello__ring { opacity: 1; }
    .nc-ribbon__track { animation: none; }
}