/* melloworks.io: the flight (owner, 2026-10-05). The page follows the bee
   from the header's tulip through five landings; each product sits in a
   glass window on the side away from the flower, and the bee works the
   flower while it is read.

   Two modes, both built from the same markup:
   - html.film (desktop, fine pointer, motion allowed): film.js plays the
     flight full screen behind the page, scroll-timed, forward on the way
     down and a separate return flight on the way up.
   - everyone else: each stop shows its landing as a still behind its glass.

   Colours come from the page's own tokens so both themes hold. */

:root{
  --glass-tint:color-mix(in srgb,var(--ground) 37%,transparent);
  --glass-ts:0 1px 2px rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.35);
  --glass-blur:30px;
  --glass-edge:rgba(255,255,255,.26);
  --glass-hi:rgba(255,255,255,.42);
  --glass-lo:rgba(0,0,0,.28);
  --glass-shadow:0 40px 90px -40px rgba(0,0,0,.75),0 12px 30px -18px rgba(0,0,0,.55);
  --veil:color-mix(in srgb,var(--ground) 62%,transparent);
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --glass-tint:color-mix(in srgb,var(--ground) 47%,transparent);
    --glass-ts:0 1px 1px rgba(255,255,255,.7),0 0 10px rgba(255,255,255,.55);
    --glass-blur:34px;
    --glass-edge:rgba(255,255,255,.7);
    --glass-hi:rgba(255,255,255,.9);
    --glass-lo:rgba(80,60,30,.16);
    --glass-shadow:0 40px 90px -40px rgba(60,40,10,.45),0 12px 30px -18px rgba(60,40,10,.3);
    --veil:color-mix(in srgb,var(--ground) 58%,transparent);
  }
}
:root[data-theme="light"]{
  --glass-tint:color-mix(in srgb,var(--ground) 47%,transparent);
    --glass-ts:0 1px 1px rgba(255,255,255,.7),0 0 10px rgba(255,255,255,.55);
    --glass-blur:34px;
  --glass-edge:rgba(255,255,255,.7);
  --glass-hi:rgba(255,255,255,.9);
  --glass-lo:rgba(80,60,30,.16);
  --glass-shadow:0 40px 90px -40px rgba(60,40,10,.45),0 12px 30px -18px rgba(60,40,10,.3);
  --veil:color-mix(in srgb,var(--ground) 58%,transparent);
}

/* ---------- the glass: one embossed bubble per section, like the new
   iOS icons: frosted, the valley showing through, a bright rim catching the
   light along the top and a darker one underneath. */
.glass{position:relative;border-radius:48px;isolation:isolate;text-shadow:var(--glass-ts);
  background:linear-gradient(155deg,color-mix(in srgb,#fff 9%,var(--glass-tint)) 0%,var(--glass-tint) 46%,color-mix(in srgb,#000 5%,var(--glass-tint)) 100%);
  -webkit-backdrop-filter:blur(var(--glass-blur,22px)) saturate(150%);backdrop-filter:blur(var(--glass-blur,22px)) saturate(150%);
  border:1px solid color-mix(in srgb,var(--glass-edge) 60%,transparent);
  /* Raised and rounded: a lit bevel along the top and left, a shaded one
     along the bottom and right, a soft glow inside, and a lift off the page. */
  box-shadow:
    inset 0 3px 2px -1px var(--glass-hi),
    inset 3px 0 3px -2px color-mix(in srgb,var(--glass-hi) 60%,transparent),
    inset 0 -5px 9px -3px var(--glass-lo),
    inset -3px 0 6px -3px var(--glass-lo),
    inset 0 0 28px color-mix(in srgb,var(--glass-hi) 10%,transparent),
    inset 0 40px 70px -50px var(--glass-hi),
    var(--glass-shadow)}
/* The specular sheen across the top-left of the bubble. */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(110% 55% at 16% -10%,color-mix(in srgb,var(--glass-hi) 38%,transparent) 0%,transparent 55%),
             radial-gradient(70% 36% at 94% 110%,color-mix(in srgb,var(--glass-hi) 14%,transparent) 0%,transparent 60%)}
/* The rim: a thin ring of light, brightest at the top-left and fading round
   to the bottom-right, like the edge of a glass bead. */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:2px;
  background:linear-gradient(150deg,var(--glass-hi) 0%,color-mix(in srgb,var(--glass-hi) 30%,transparent) 30%,transparent 55%,color-mix(in srgb,var(--glass-hi) 22%,transparent) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass > .wrap{max-width:none;padding:clamp(28px,4vw,52px)}

/* Inside the glass, the old section furniture gives way to the bubble. */
.stop .case,.stop-cont .case{border-top:none;padding:0}
.stop .case + .case{margin-top:48px}
section.stop,section.stop-cont,footer.stop-cont,#work{border-top:none}

/* ---------- stills mode (phones, tablets, reduced motion, no script):
   each stop stands in front of its own landing. */
/* The landing sits across the top of the stop, framed on the flower (which
   is on the side away from the glass), and melts into the page below it;
   the glass rides up over its lower edge. */
.stop{position:relative;--still-h:min(62vh,520px);--still-x:50%;
  padding:calc(var(--still-h) - 90px) 14px 40px;
  background:linear-gradient(180deg,transparent 55%,var(--ground) 100%) top/100% var(--still-h) no-repeat,
    var(--still) var(--still-x) top/auto var(--still-h) no-repeat}
.stop[data-side="left"]{--still-x:82%}
.stop[data-side="right"]{--still-x:18%}
.stop > .glass{z-index:1}
section.stop,section.stop-cont{padding-left:14px;padding-right:14px}
footer.stop-cont{padding-left:14px;padding-right:14px}
footer.stop-cont > .glass{position:relative;z-index:1}
#work{padding-top:0;padding-bottom:0}

@media (min-width:900px){
  .stop{--still-h:56.25vw;padding:calc(56.25vw - 34vh) 4vw 64px;
    background-size:100% var(--still-h),100% auto;background-position:top,top}
  .stop > .glass,.stop-cont > .glass{width:min(64vw,880px)}
  .stop[data-side="right"] > .glass,.stop-cont[data-side="right"] > .glass{margin-left:auto}
}

/* ---------- CoreMello */
.cm-case{display:block}
.cm-case h3{font-size:1.7rem}
.cm-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cm-hero{margin:26px 0 0}
.cm-hero img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.cm-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.cm-strip img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.cm-reel{margin-top:34px}
.cm-reel p{margin-bottom:12px}
.cm-reel video{display:block;width:100%;aspect-ratio:16/9;border-radius:16px;background:#000}
.cm-crest{display:flex;align-items:center;gap:14px;margin-top:30px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink)}
.cm-crest img{border-radius:14px}
.cm-crest em{font-style:italic;color:var(--amber)}
@media (max-width:620px){.cm-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Inside a bubble on a tablet there is room for one column, not two. */
@media (max-width:1100px){.stop .case{grid-template-columns:1fr;gap:26px}}

/* ---------- film mode (desktop): scenes
   The page itself no longer scrolls. Each landing is a fixed scene: the film
   behind, and the product's glass bubble floating on the far side of the
   flower. Scrolling moves the bubble's contents; at its end the bubble lifts
   away past the menu bar and the flight to the next flower plays. */
html.film,html.film body,html.film-boot,html.film-boot body{overflow:hidden;height:100%}
html.film-boot [data-stop],html.film-boot #studio,html.film-boot #contact{visibility:hidden}
/* The first frame of the scenes appears without any transition. */
html.film-init .scene,html.film-init .film-stage video{transition:none!important}
html.film body{background:var(--ground)}
html.film .film-stage{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;background:#0b0907;
  transform-origin:0 0;will-change:transform,opacity;
  /* While it grows out of the header its edges are feathered (--fe is 1 at
     the start, 0 once it fills the window). */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--fe,0) * 60%),#000 100%),linear-gradient(180deg,#000 0,#000 calc(100% - var(--fe,0) * 48%),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--fe,0) * 60%),#000 100%),linear-gradient(180deg,#000 0,#000 calc(100% - var(--fe,0) * 48%),transparent 100%);
  mask-composite:intersect}
html.film .film-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
html.film .film-stage video.on{opacity:1}
html.film .film-stage.xfade video{transition:opacity var(--xf,.4s) ease-in-out}
html.film .nav{z-index:50}
/* The page no longer scrolls, so the menu bar takes its frosted, scrolled
   look as soon as the header has lifted away. */
html.film.away .nav{background:color-mix(in srgb, var(--ground) 72%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
/* The header: its ground opens and its bee hands over to the film as the
   first flight starts; its words lift away like a scroll. */
html.film .hero{z-index:2;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--ground) calc(100% - var(--hf,0) * 100%),transparent) 0%,
    color-mix(in srgb,var(--ground) calc(100% - var(--hf,0) * 100%),transparent) 42%,
    color-mix(in srgb,var(--ground) calc(100% - max(var(--hs,0),var(--hf,0)) * 100%),transparent) 74%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%)}
html.film .hero .bee{filter:opacity(calc(1 - var(--hs,0)))}
html.film .hero .sweep{filter:opacity(calc(1 - var(--hf,0)))}
html.film .hero-in{opacity:calc(1 - var(--hf,0) * 1.4);transform:translateY(calc(var(--hf,0) * -26vh))}
html.film.away .hero{pointer-events:none}
html.film .foot-bg,html.film .rail{display:none}
html.film #work{padding:0;border:0;min-height:0}
/* The veil: the valley fades toward the glass so the bubble reads as part of
   the scene rather than a card laid over it. */
html.film .film-veil{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease,background .6s ease}
html.film .film-veil.left{background:linear-gradient(90deg,var(--veil) 0%,color-mix(in srgb,var(--veil) 55%,transparent) 42%,transparent 70%)}
html.film .film-veil.right{background:linear-gradient(270deg,var(--veil) 0%,color-mix(in srgb,var(--veil) 55%,transparent) 42%,transparent 70%)}
html.film .film-veil.on{opacity:1}
/* The golden light over landings and take-offs: it rises over about 0.3s,
   peaks while the shots change, and dies away by 1.1s. Screen blending only
   ever brightens, warmly, like sunlight. */
html.film .film-glow{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;mix-blend-mode:screen;overflow:hidden}
/* The bright core on the bee itself. */
html.film .film-glow .fg-core{position:absolute;left:var(--bx,70%);top:var(--by,45%);width:46vmin;height:46vmin;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,205,.95) 0%,rgba(255,214,140,.8) 14%,rgba(240,169,63,.55) 34%,rgba(214,140,40,.18) 62%,transparent 75%)}
/* The light streaming from the bee at 45 degrees toward the product window:
   brightest at the bee, feathered along its length and at its sides. */
html.film .film-glow .fg-beam{position:absolute;left:var(--bx,70%);top:var(--by,45%);width:115vmax;height:34vmin;
  transform-origin:0 50%;transform:translateY(-50%) rotate(var(--ang,-135deg));
  background:radial-gradient(ellipse 100% 50% at 0% 50%,rgba(255,226,170,.85) 0%,rgba(240,169,63,.6) 22%,rgba(214,140,40,.28) 50%,rgba(201,130,28,.08) 78%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 100%)}
html.film .film-glow.on{animation:filmGlow 1.25s cubic-bezier(.3,0,.3,1) forwards}
html.film .film-glow.on .fg-beam{animation:fgBeam 1.25s cubic-bezier(.3,0,.3,1) forwards}
/* Leaving and returning to the header: a bigger, brighter burst from the bee. */
html.film .film-glow.big .fg-core{width:70vmin;height:70vmin}
html.film .film-glow.big .fg-beam{width:150vmax;height:50vmin}
html.film .film-glow.big.on{animation:filmGlowBig 1.6s cubic-bezier(.3,0,.3,1) forwards}
html.film .film-glow.big.on .fg-beam{animation:fgBeam 1.6s cubic-bezier(.3,0,.3,1) forwards}
@keyframes filmGlow{0%{opacity:0}26%{opacity:.9}50%{opacity:.9}100%{opacity:0}}
@keyframes filmGlowBig{0%{opacity:0}30%{opacity:1}52%{opacity:1}100%{opacity:0}}
/* The beam grows out from the bee as the light comes up. */
@keyframes fgBeam{0%{transform:translateY(-50%) rotate(var(--ang,-135deg)) scaleX(.35)}45%{transform:translateY(-50%) rotate(var(--ang,-135deg)) scaleX(1)}100%{transform:translateY(-50%) rotate(var(--ang,-135deg)) scaleX(1.12)}}
/* On paper, over a bright meadow, the softer greys inside a bubble go a
   step darker so the words still read through the clearer glass. */
/* Over a moving meadow the softer greys need more contrast than on a plain
   page (owner, 2026-10-06): inside a bubble, dark mode's greys go lighter
   and light mode's go darker. */
.scene{--ink2:#E2D8CB;--ink3:#BCAE9E}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .scene{--ink2:#3A3128;--ink3:#54483B}}
:root[data-theme="light"] .scene{--ink2:#3A3128;--ink3:#54483B}
:root[data-theme="dark"] .scene{--ink2:#E2D8CB;--ink3:#BCAE9E}
/* The small amber and mono labels (product line, "Recorded in the live
   product", chips) were the hardest to read over the meadow: heavier, and in
   light mode a deeper amber on a slightly more solid glass. */
.scene .role,.scene .demo-lab,.scene .ex-role,.scene .sec-head .n,.scene .opt-fine,.scene .est-fine{font-weight:700}
.scene .demo-lab,.scene .demo-cap{color:var(--ink2)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .scene{--amber:#8A4F00;--amber2:#6E3F00}
  :root:not([data-theme="dark"]) .scene .glass{--glass-tint:color-mix(in srgb,var(--ground) 62%,transparent)}}
:root[data-theme="light"] .scene{--amber:#8A4F00;--amber2:#6E3F00}
:root[data-theme="light"] .scene .glass{--glass-tint:color-mix(in srgb,var(--ground) 62%,transparent)}
/* On paper the veil washed the valley out, so light mode goes without it:
   the bubble's own glass carries the words (owner, 2026-10-06). */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .film-veil{display:none}}
:root[data-theme="light"] .film-veil{display:none}
/* A scene's bubble: a fixed column on the side away from the flower whose
   contents scroll inside it, fading at its top and bottom edges. */
html.film .scene{position:fixed;z-index:3;top:calc(var(--navh,64px) + 18px);bottom:18px;width:min(42vw,740px);
  margin:0;padding:6px 10px 40px;box-sizing:border-box;background:none;min-height:0;display:block;
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 46px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 46px),transparent 100%);
  visibility:hidden;opacity:0;transform:translateY(70px) scale(.95);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,1.2,.3,1),visibility 0s linear .9s}
html.film .scene::-webkit-scrollbar{display:none}
html.film .scene[data-side="left"]{left:4vw}
html.film .scene[data-side="right"]{right:4vw}
html.film .scene::after{display:none}
html.film .scene.on{visibility:visible;opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,1.2,.3,1),visibility 0s}
/* Taking off: the bubble lifts away past the menu bar (or sinks, flying back). */
html.film .scene.up{transform:translateY(-75vh) scale(.97);opacity:0;transition:opacity .55s ease-in,transform .7s cubic-bezier(.5,0,.75,0),visibility 0s linear .7s}
html.film .scene.down{transform:translateY(75vh) scale(.97);opacity:0;transition:opacity .55s ease-in,transform .7s cubic-bezier(.5,0,.75,0),visibility 0s linear .7s}
html.film .scene.from-top{transform:translateY(-60px) scale(.95)}
html.film .scene .glass{width:auto;margin:0}
html.film .scene .glass + .glass,html.film .scene > section + section,html.film .scene > section + footer{margin-top:22px}
html.film .scene > section,html.film .scene > footer{padding:0;border:0;background:none;min-height:0}
/* Everything inside a bubble is simply there: the bubble's own arrival is
   the reveal, so its contents never fade in late. */
html.film .scene .rv{opacity:1!important;transform:none!important;transition:none}
html.film .scene .ex-grid.in .ex,html.film .scene .svc-grid.in .svc{animation:none;opacity:1;transform:none}
/* Wide content folds to fit half the screen. */
html.film .case{grid-template-columns:1fr;gap:26px}
html.film .vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
html.film .fvdemo{grid-template-columns:1fr 186px}
html.film .fvdemo .fvsplit{grid-column:1/-1}
html.film .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- film mode on phones and narrow windows (owner, 2026-10-07)
   The film fills the screen, drawn larger than it and panned by film.js so
   the bee stays in view in the upper part; the product is a glass card on
   the lower half that scrolls under the finger. */
html.film.film-phone .film-stage video{object-fit:fill;inset:auto;left:var(--vx,0);top:var(--vy,0);
  width:var(--vw,100%);height:var(--vh,100%);will-change:left,top}
html.film.film-phone .scene{left:10px;right:10px;width:auto;top:auto;bottom:max(10px,env(safe-area-inset-bottom));
  height:calc(100svh - var(--navh,64px) - 22svh);padding:4px 4px 90px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 110px),transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 16px,#000 calc(100% - 110px),transparent 100%);
  -webkit-overflow-scrolling:touch}
html.film.film-phone .scene[data-side="left"],html.film.film-phone .scene[data-side="right"]{left:10px;right:10px}
html.film.film-phone .scene .glass{border-radius:28px}
html.film.film-phone .scene .glass > .wrap{padding:20px 18px}
html.film.film-phone .scene.up{transform:translateY(-110svh) scale(.97)}
html.film.film-phone .scene.down{transform:translateY(70svh) scale(.97)}
/* Phones (owner, 2026-10-07): the product card fills most of the screen,
   from about a quarter of the way down; a soft fade rises from it toward the
   top, and its bottom fades out. The bee can be covered while the card is
   read; it shows again when the card lifts away and the flight begins. */
html.film.film-phone .film-veil,html.film.film-phone .film-veil.left,html.film.film-phone .film-veil.right{
  background:linear-gradient(0deg,color-mix(in srgb,var(--veil) 82%,transparent) 0%,color-mix(in srgb,var(--veil) 76%,transparent) 55%,color-mix(in srgb,var(--veil) 48%,transparent) 70%,color-mix(in srgb,var(--veil) 18%,transparent) 82%,transparent 90%)}
/* On a phone the film's own tulip and bee sit low behind the header, under
   a veil of the page's ground that keeps the words readable; the veil lifts
   away as the bee takes off, and returns as it lands back on the tulip. */
html.film.film-phone .hero{min-height:100svh;box-sizing:border-box;-webkit-mask-image:none;mask-image:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--ground) calc(94% - var(--hf,0) * 94%),transparent) 0%,
    color-mix(in srgb,var(--ground) calc(88% - var(--hf,0) * 88%),transparent) 28%,
    color-mix(in srgb,var(--ground) calc(58% - var(--hf,0) * 58%),transparent) 44%,
    color-mix(in srgb,var(--ground) calc(26% - var(--hf,0) * 26%),transparent) 58%,
    color-mix(in srgb,var(--ground) calc(30% - var(--hf,0) * 30%),transparent) 74%,
    color-mix(in srgb,var(--ground) calc(55% - var(--hf,0) * 55%),transparent) 100%)}
/* The words over the tulip keep a soft shadow so they stay readable. */
html.film.film-phone .hero-in .sub{text-shadow:0 1px 3px color-mix(in srgb,var(--ground) 90%,transparent),0 0 14px color-mix(in srgb,var(--ground) 80%,transparent)}
/* The menu bar stays frosted over the film on a phone, so the logo reads. */
html.film.film-phone .nav{background:color-mix(in srgb, var(--ground) 72%, transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
html.film.film-phone .film-glow .fg-core{width:60vmin;height:60vmin}
html.film.film-phone .film-glow .fg-beam{width:120vmax;height:40vmin}
html.film.film-phone .cm-reel{position:relative}
.cm-play{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:10px 18px;border-radius:999px;cursor:pointer;
  font:700 .82rem/1 "Instrument Sans",system-ui,sans-serif;color:#181206;background:var(--amber);border:0;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}