/* MeLyssi74 motion layer — Phase 1: scroll reveals.

   Ported from the approved prototype (honey-motion.html). Deliberately no
   library: the prototype's note about GSAP was only because an artifact cannot
   load one. Everything here is CSS transitions driven by IntersectionObserver,
   which is lighter than GSAP, needs no third-party script in the cookie policy,
   and produces the same result.

   Everything is gated on body.motion, which motion.js adds. If JavaScript is
   off the class is never added, no rule below applies, and the page renders
   exactly as it did before this file existed — nothing is hidden by default.
   That ordering matters: reveal-on-scroll implemented the other way round
   (hide in CSS, show in JS) leaves a no-JS visitor with a blank page. */

/* ---------- 1. Section reveals ---------- */
body.honey-page.motion .rv {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity .8s cubic-bezier(.2, .7, .3, 1),
                transform .8s cubic-bezier(.2, .7, .3, 1);
}

body.honey-page.motion .rv.in {
    opacity: 1;
    transform: none;
}

/* ---------- 2. Product photos "pour" in, top to bottom ----------
   The card itself rides the .rv reveal above; the photo additionally wipes
   down via clip-path and settles out of a slight zoom. */
body.honey-page.motion .honey-product-card .honey-imgwrap img {
    clip-path: inset(0 0 100% 0);
    transform: scale(1.1);
    transition: transform 1.1s cubic-bezier(.2, .7, .3, 1),
                clip-path 1.1s cubic-bezier(.2, .7, .3, 1) .12s;
}

body.honey-page.motion .honey-product-card.in .honey-imgwrap img {
    clip-path: inset(0);
    transform: scale(1);
}

/* ---------- 3. Hero headline, word by word ----------
   Each word sits in a .hw mask with overflow:hidden; .hwi is the word itself,
   parked below the mask and slid up. The padding/negative-margin pair stops
   descenders (g, y, p) being clipped by the mask. */
.honey-page .hw {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}

.honey-page .hwi { display: inline-block; }

body.honey-page.motion .hwi {
    transform: translateY(115%);
    transition: transform 1s cubic-bezier(.16, .85, .3, 1);
}

body.honey-page.motion .lifted .hwi { transform: none; }

/* Eyebrow, standfirst and CTA fade up behind the headline. */
body.honey-page.motion .hero-fade {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}

body.honey-page.motion .hero-fade.in {
    opacity: 1;
    transform: none;
}

/* ---------- 4. Product card lift ---------- */
body.honey-page.motion .honey-product-card {
    transition: transform .38s cubic-bezier(.2, .7, .3, 1),
                box-shadow .38s, border-color .38s;
}

body.honey-page.motion .honey-product-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 22px 44px rgba(44, 28, 13, .18);
    border-color: #cfb682;
}

body.honey-page.motion .honey-product-card:hover .honey-imgwrap img {
    transform: scale(1.07);
}

/* ---------- 5. The bee ----------
   One bee, once, when the section arrives: it crosses the section, lands on the
   daisy at the right, rests, and turns into a jar of honey. It follows a CSS
   offset-path, which also rotates it to face along the curve (offset-rotate:
   auto) — so the flight is a single declaration rather than a scripted loop.
   motion.js writes the path itself (measured, so the landing is always on the
   flower) and drives the three states: .fly on the stage, then .landed, then
   .morph.

   The whole thing is wrapped in @supports: where offset-path is unavailable the
   bee would otherwise sit in the top-left corner and fade in and out on the
   spot, which looks like a bug. Better it simply never appears — and with no
   bee there is nothing for the daisy and the jar to be the end of, so they are
   inside the same guard. */
.honey-page .bee-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.honey-page .bee,
.honey-page .bee-perch { display: none; }

/* The daisy's box. The flower's centre inside it is declared on the element as
   data-fx/data-fy — keep those in step with any change to size or artwork. */
.honey-page .bee-perch {
    position: absolute;
    width: 150px;
    height: 230px;
    right: clamp(20px, 7%, 150px);
    top: clamp(90px, 26%, 300px);
    transform-origin: 50% 100%;
    z-index: 1;
}

/* Stacking, not DOM order: the bee is written first in the template (it owns
   the shared <defs>), but it flies in front of the flower and must sit on top
   of it when it lands, and the jar comes up in front of everything. */
.honey-page .bee { z-index: 3; }
.honey-page .bee-dust { z-index: 4; }
.honey-page .bee-jar { z-index: 5; }

.honey-page .bee-daisy {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
}

@supports (offset-path: path("M 0 0 L 1 1")) {
    .honey-page .bee {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 76px;
        height: 76px;
        opacity: 0;
        filter: drop-shadow(0 3px 6px rgba(44, 28, 13, .22));
        /* Placeholder only — motion.js replaces this with a measured path that
           ends on the flower. It is here so the bee is never pathless. */
        offset-path: path("M -60 240 C 180 120, 330 340, 560 200 S 900 90, 1180 220 S 1420 300, 1600 150");
        offset-rotate: auto;
        offset-distance: 0%;
        transition: opacity .5s ease .1s, filter .5s ease .1s;
    }

    .honey-page .bee-perch { display: block; }

    /* Eases out of the left edge, cruises, and decelerates onto the flower —
       not the symmetric ease-in-out, which crawls at both ends and makes the
       middle of the crossing look rushed. */
    body.honey-page.motion .bee-stage.fly .bee {
        animation: beefly 11s cubic-bezier(.34, 0, .28, 1) forwards;
    }
}

@keyframes beefly {
    0%   { offset-distance: 0%;   opacity: 0; }
    6%   { opacity: 1; }
    100% { offset-distance: 100%; opacity: 1; }
}

/* Wings beat independently of the flight path, and never stop while visible. */
.honey-page .bee .wing  { transform-origin: 56% 45%; animation: flap  .075s ease-in-out infinite alternate; }
.honey-page .bee .wing2 { transform-origin: 56% 45%; animation: flap2 .075s ease-in-out infinite alternate; }

@keyframes flap  { 0% { transform: rotate(-24deg) scaleY(.6);  } 100% { transform: rotate(12deg) scaleY(1); } }
@keyframes flap2 { 0% { transform: rotate(-14deg) scaleY(.55); } 100% { transform: rotate(16deg) scaleY(1); } }

/* ---------- 5b. The daisy, the landing and the jar ----------
   The whole sequence, in the order the visitor sees it:

     0.0s  the bee sets off across the section
     7.6s  the daisy opens, about three seconds ahead of the bee
    11.0s  the bee lands; the stem takes its weight and settles
    14.6s  bee and flower come apart into a drifting cloud of gold
    17.0s  the cloud gathers below and the jar rises out of it
    28.2s  the jar lifts and fades, leaving the section as it was

   Every duration below is CSS; motion.js only marks the four states. */
.honey-page .bee-daisy {
    opacity: 0;
    transform: scale(.35) translateY(30px);
    transform-origin: 50% 100%;
    transition: opacity 1s ease, transform 1.6s cubic-bezier(.16, 1, .3, 1);
}

/* The bloom is late on purpose: the flower has to arrive before the bee, but
   only just, or the visitor stops reading it as the bee's destination. */
body.honey-page.motion .bee-stage.fly .bee-daisy {
    opacity: 1;
    transform: none;
    transition-delay: 7.6s;
}

body.honey-page.motion .bee-stage.fly .bee-perch {
    animation: sway 5s ease-in-out 9.2s infinite alternate;
}

@keyframes sway {
    from { transform: rotate(-1.8deg); }
    to   { transform: rotate(1.8deg); }
}

/* Landed: the wings settle to a slow idle and the flower dips under the bee,
   then recovers. */
body.honey-page.motion .bee-stage.landed .bee .wing,
body.honey-page.motion .bee-stage.landed .bee .wing2 {
    animation: flapidle 2.4s ease-in-out infinite alternate;
}

@keyframes flapidle {
    0%   { transform: rotate(-9deg) scaleY(.86); }
    100% { transform: rotate(2deg)  scaleY(1); }
}

/* Settle first, then hand the stem back to the sway — the sway's delay covers
   exactly the settle, and the later animation in the list wins the transform
   once it starts. */
body.honey-page.motion .bee-stage.landed .bee-perch {
    animation: settle 1.6s cubic-bezier(.25, .9, .3, 1.1) forwards,
               sway 5s ease-in-out 1.6s infinite alternate;
}

@keyframes settle {
    0%   { transform: rotate(0deg); }
    35%  { transform: rotate(4.5deg) translateY(5px); }
    70%  { transform: rotate(-1.5deg) translateY(-1px); }
    100% { transform: rotate(1deg); }
}

/* ---------- The change ----------
   Bee and flower both go into the same point and the jar comes out of it: that
   single shared point is the whole trick, so nothing here may move off it.

   The bee shrinks towards the flower's centre; the flower folds in after it
   (its transform-origin moves to the flower head only now, which is invisible
   because it is still unscaled at that instant); the puff covers the swap; the
   jar rises. */
/* The bee does not shrink and it does not travel — either reads as the bee
   moving, and the whole point is that it stops being a bee. It softens out
   while the dust that replaces it is already rising. */
body.honey-page.motion .bee-stage.morph .bee {
    opacity: 0;
    filter: blur(3px) drop-shadow(0 3px 6px rgba(44, 28, 13, 0));
}

/* The flower goes the same way: it loosens and fades rather than folding to a
   point, so bee and daisy dissolve as one event. */
body.honey-page.motion .bee-stage.morph .bee-daisy {
    transform-origin: 50% 22.6%;
    animation: daisyfade .85s ease-in .1s forwards;
}

@keyframes daisyfade {
    0%   { opacity: 1; transform: none; filter: blur(0); }
    45%  { opacity: .75; }
    100% { opacity: 0; transform: scale(.9) rotate(-3deg); filter: blur(4px); }
}

/* The stem stops swaying the moment the flower starts to go: a stem that keeps
   rocking under a jar it is no longer holding is the tell. */
body.honey-page.motion .bee-stage.morph .bee-perch {
    animation: none;
}

/* ---------- The dust ----------
   motion.js spawns the particles; this only says what one looks like. They are
   drawn as soft radial dots rather than solid circles so a dozen of them
   overlapping still read as suspended pollen, not as confetti. */
.honey-page .bee-dust {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.honey-page .bee-dust i {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    /* A lit core inside deep gold, not a flat dot: the white centre is what
       makes it read as catching the light rather than as a coloured circle. */
    background: radial-gradient(circle at 36% 32%,
        #fffdf2 0%, #ffe89b 22%, #ffc63c 46%, #e39408 66%, rgba(184, 112, 6, 0) 78%);
    box-shadow: 0 0 7px rgba(255, 198, 60, .55), 0 0 16px rgba(240, 168, 30, .28);
    will-change: transform, opacity, filter;
}

/* The translate puts the jar's base on the flower's centre, less --jar-drop so
   it stands down among the petals. It has to survive into every keyframe below
   or the jar walks off the flower as it animates. */
.honey-page .bee-jar {
    position: absolute;
    width: 248px;
    height: 310px;
    /* The drop below the flower is applied by motion.js to this element's top,
       not here: the dust has to gather at the same place, and one number in one
       file is the only way those two stay together. */
    --jar-drop: 0px;
    opacity: 0;
    transform: translate(-50%, calc(-100% + var(--jar-drop))) scale(.08);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 8px 14px rgba(44, 28, 13, .3));
}

body.honey-page.motion .bee-stage.morph .bee-jar {
    animation: jarpop 1.3s cubic-bezier(.16, 1, .3, 1) 3.3s forwards;
}

/* Rises with a little weight in it — heavier at the top of the arc, then it
   settles. Not a bounce: a jar is glass and full. */
@keyframes jarpop {
    0%   { opacity: 0; transform: translate(-50%, calc(-100% + var(--jar-drop))) scale(.08) rotate(-10deg); }
    30%  { opacity: 1; }
    72%  { transform: translate(-50%, calc(-100% + var(--jar-drop))) scale(1.06) rotate(1.5deg); }
    100% { opacity: 1; transform: translate(-50%, calc(-100% + var(--jar-drop))) scale(1) rotate(0deg); }
}

/* ---------- Leaving ----------
   The jar lifts a little and dissolves, rather than being switched off. Nothing
   is left on the stage afterwards. */
body.honey-page.motion .bee-stage.fade .bee-jar {
    animation: jargo 2.4s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes jargo {
    0%   { opacity: 1; transform: translate(-50%, calc(-100% + var(--jar-drop))) scale(1); filter: drop-shadow(0 8px 14px rgba(44, 28, 13, .3)) blur(0); }
    100% { opacity: 0; transform: translate(-50%, calc(-118% + var(--jar-drop))) scale(.94); filter: drop-shadow(0 8px 14px rgba(44, 28, 13, 0)) blur(3px); }
}

/* ---------- 6. Reduced motion ----------
   Two layers: kill the durations globally, then explicitly park every animated
   element in its finished state. The second part is the important one — without
   it an element that starts at opacity:0 would simply stay invisible. */
@media (prefers-reduced-motion: reduce) {
    body.honey-page.motion .rv {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body.honey-page.motion .honey-product-card .honey-imgwrap img {
        clip-path: none !important;
        transform: none !important;
        transition: none !important;
    }

    /* The headline must never be left parked below its mask. */
    body.honey-page.motion .hwi,
    body.honey-page.motion .hero-fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    body.honey-page.motion .honey-product-card,
    body.honey-page.motion .honey-product-card:hover {
        transform: none !important;
        transition: none !important;
    }

    /* No bee at all — a wandering insect is exactly what reduced motion is for.
       The daisy and the jar go with it: they are the end of a flight that never
       happens, and a jar appearing on its own says nothing. */
    .honey-page .bee,
    .honey-page .bee-perch,
    .honey-page .bee-dust,
    .honey-page .bee-jar { display: none !important; }
}