/* The Bleya landing page (index.html), loaded after style.css and overriding it: the two page themes,
   the hero wordmark (the long sheep with the name inside, mix M1 of docs/explorations/bleya/index-mix.html),
   the head looking over the phone, and the grass band with its sheep. js/bleya.js draws them and moves them.
   Taken from docs/explorations/bleya/landing-page-bleya.html (3 October 2026).
   The page follows the device setting; ?theme=light|dark forces one (a testing hook, set by js/bleya.js). */

/* ---- bleya themes: light = paper (S / 03), dark = forest (the S / 01 and S / 03 icon).
   Meadow is no longer a ground, only the tint of the background glow. ---- */
body{--page:#EFEFDF;--ink:#294735;--ink-2:rgba(41,71,53,.78);--ink-3:rgba(41,71,53,.6);--a:#294735;--b:#EFEFDF;
  --orb-1:#97C785;--orb-2:#FFFFFF;--orb-3:#C9DDB4;--orb-op:.55;--badge-bg:#294735;--badge-ink:#FFF8E6;--badge-line:#294735;--badge-hover:#33573F;
  --grass:#97C785;--grass-2:#7FB26D;--grass-3:#AFD69F;--blk:#294735}
@media (prefers-color-scheme:dark){body:not([data-theme=light]){--page:#294735;--ink:#FFF8E6;--ink-2:rgba(255,248,230,.76);--ink-3:rgba(255,248,230,.55);--a:#FFF8E6;--b:#294735;
  --orb-1:#97C785;--orb-2:#3E6B4E;--orb-3:#E9B44C;--orb-op:.22;--badge-bg:rgba(255,248,230,.1);--badge-ink:#FFF8E6;--badge-line:rgba(255,248,230,.18);--badge-hover:rgba(255,248,230,.18);
  --grass:#4C7D57;--grass-2:#3F6B4A;--grass-3:#5E9468;--blk:#1B2F23}}
body[data-theme=dark]{--page:#294735;--ink:#FFF8E6;--ink-2:rgba(255,248,230,.76);--ink-3:rgba(255,248,230,.55);--a:#FFF8E6;--b:#294735;
  --orb-1:#97C785;--orb-2:#3E6B4E;--orb-3:#E9B44C;--orb-op:.22;--badge-bg:rgba(255,248,230,.1);--badge-ink:#FFF8E6;--badge-line:rgba(255,248,230,.18);--badge-hover:rgba(255,248,230,.18);
  --grass:#4C7D57;--grass-2:#3F6B4A;--grass-3:#5E9468;--blk:#1B2F23}
.lp-body{background:var(--page);transition:background .3s}
.lp-minimal__brand.bl-brand{width:210px;aspect-ratio:307/145;background:none;-webkit-text-fill-color:initial;margin-bottom:22px}
.bl-brand svg,.bl-peek svg{display:block;width:100%;height:100%;overflow:visible}
/* without js/bleya.js the box keeps the plain wordmark, light or dark with the page */
.bl-brand img{display:block;width:100%;height:100%;object-fit:contain}
.lp-minimal__subtitle{color:var(--ink-2);max-width:30em}
/* the grass band and its sheep: behind the content, so the phone stands on it */
.bl-field{position:absolute;left:0;right:0;bottom:0;height:104px;z-index:1;pointer-events:none}
.bl-ground{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.bl-sheep{position:absolute;left:0;bottom:var(--y);width:var(--w)}
.bl-sheep svg{display:block;width:100%;height:auto;overflow:visible}
.bl-sheep.flip svg{transform:scaleX(-1)}
@media (max-width:1023px){.lp-minimal{padding-bottom:104px}}
@media (max-width:700px){.bl-field{height:88px}.bl-sheep{width:calc(var(--w)*.85)}}
/* the head from 18a, looking over the top edge of the phone, from behind it */
.lp-minimal__phone-wrap{padding-top:66px}
.bl-peek{position:absolute;z-index:-1;bottom:calc(100% - 1px);right:15%;width:30%;aspect-ratio:100/82;overflow:hidden;pointer-events:none}
.bl-peek svg{transform:translateY(100%)}
.bl-peek.up svg{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
/* the bell on the wordmark swings once */
.play .an{transform-box:fill-box;transform-origin:50% 0}
.play .ring{animation:bl-ring 1.5s ease-in-out .5s both}
@keyframes bl-ring{0%{transform:none}15%{transform:rotate(18deg)}35%{transform:rotate(-14deg)}55%{transform:rotate(9deg)}75%{transform:rotate(-5deg)}100%{transform:none}}
@media (min-width:1024px){
  .lp-minimal__brand.bl-brand{width:250px;margin-bottom:26px}
  .lp-minimal__phone-wrap{padding-top:76px}
  .lp-minimal__text{max-width:540px}
}
@media (max-width:640px){.lp-minimal__brand.bl-brand{width:190px}.lp-minimal__phone-wrap{padding-top:54px}}
/* style.css scales the phone 1.35x from 1600x800. The 76px the head needs above the phone push the scaled phone
   down: on a window under 964px high it ran under the footer links (at 1600x800 its nav pill was 42px off the page).
   Scale only as far as the height allows: 1.2 clears the links from 862px, 1.35 from 964px, at every width from
   1600 to 2560 (measured with the page's fonts loaded; a few px to spare). */
@media (min-width:1600px) and (min-height:800px){.lp-minimal__phone-wrap{scale:1.1}}
@media (min-width:1600px) and (min-height:865px){.lp-minimal__phone-wrap{scale:1.2}}
@media (min-width:1600px) and (min-height:968px){.lp-minimal__phone-wrap{scale:1.35}}
@media (prefers-reduced-motion:reduce){.bl-peek svg{transform:none}.play .ring{animation:none}}