/* ============================================================
   FYON — premium motion pass. Same cream/spruce identity,
   richer choreography: word-blur hero, stacked act slides,
   scroll-lit statements, liquid-press buttons.
   Loaded only by fyon.html, after styles.css.
   ============================================================ */

/* ============================================================
   LESREG ORBIT MARK — the real company logo (nav + footer)
   ============================================================ */
.lesmark{ display:inline-block; width:22px; height:22px; flex:none; }
.lesmark svg{ width:100%; height:100%; display:block; }
.lesmark .lm-s{ fill:var(--ink); opacity:.9; }
.lesmark .lm-c{ fill:var(--terra); }
.lesmark.lg{ width:26px; height:26px; }
/* satellites breathe in turn — quiet, alive */
.lesmark .lm-s{ transform-box:fill-box; transform-origin:center; animation:lmBreath 4.4s ease-in-out infinite; }
.lesmark .lm-s:nth-of-type(2){ animation-delay:.5s; }
.lesmark .lm-s:nth-of-type(3){ animation-delay:1s; }
.lesmark .lm-s:nth-of-type(4){ animation-delay:1.5s; }
@keyframes lmBreath{ 0%,100%{ opacity:.9; transform:scale(1); } 50%{ opacity:.45; transform:scale(.84); } }
.brand:hover .lesmark{ transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .lesmark .lm-s{ animation:none; } }

/* ============================================================
   FOOTER — a proper company footer, not a generic strip
   ============================================================ */
.footer{ position:relative; z-index:1; margin-top:clamp(20px,4vw,60px);
  border-top:1px solid rgba(33,29,24,.1); background:linear-gradient(180deg, rgba(233,224,208,0), rgba(233,224,208,.5));
  content-visibility:auto; contain-intrinsic-size:auto 260px; }
.footer-inner{ max-width:var(--maxw,1080px); margin:0 auto; padding:clamp(44px,6vw,72px) clamp(20px,4vw,40px) clamp(30px,3vw,44px);
  display:flex; justify-content:space-between; gap:clamp(32px,5vw,72px); flex-wrap:wrap; }
.foot-brand{ max-width:340px; }
.footer .foot-lockup{ font-family:var(--sora); font-weight:600; letter-spacing:-.02em; font-size:22px; display:inline-flex; align-items:center; gap:11px; color:var(--ink); }
.foot-tag{ margin:16px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink-soft); }
.foot-tag b{ color:var(--ink); font-weight:600; }
.foot-cols{ display:flex; gap:clamp(40px,6vw,76px); flex-wrap:wrap; }
.foot-col{ display:flex; flex-direction:column; gap:12px; }
.foot-h{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terra); margin-bottom:3px; }
.foot-col a{ font-size:14.5px; color:var(--ink-soft); width:max-content;
  transition:color .2s ease, transform .2s cubic-bezier(.2,.85,.25,1); }
.foot-col a:hover{ color:var(--ink); transform:translateX(3px); }
.foot-base{ max-width:var(--maxw,1080px); margin:0 auto; padding:18px clamp(20px,4vw,40px) clamp(30px,4vw,44px);
  border-top:1px solid rgba(33,29,24,.08); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.foot-copy,.foot-legal{ font-size:12.5px; color:var(--ink-faint); letter-spacing:.01em; }
.foot-legal{ font-family:var(--mono); letter-spacing:.06em; }
@media(max-width:680px){
  .footer-inner{ flex-direction:column; gap:34px; }
  .foot-brand{ max-width:none; }
  .foot-cols{ gap:44px; }
  .foot-base{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* ---------- blur-text: word-by-word hero reveal ---------- */
.bt{ display:flex; flex-wrap:wrap; justify-content:center; row-gap:.06em; }
.bt em{ display:contents; }
.bt .btw{ display:inline-block; margin-right:.24em; opacity:0; filter:blur(10px); transform:translateY(50px);
  will-change:transform,filter,opacity; }
.bt .btw:last-child{ margin-right:0; }
.bt.bt-go .btw{ animation:btwIn .7s cubic-bezier(.25,.46,.45,.94) both; animation-delay:var(--d,0s); }
@keyframes btwIn{
  0%{ opacity:0; filter:blur(10px); transform:translateY(50px); }
  50%{ opacity:.5; filter:blur(5px); transform:translateY(-5px); }
  100%{ opacity:1; filter:blur(0); transform:translateY(0); }
}
/* gradient words inside <em> re-apply the clip per word (display:contents drops the em box) */
#fyon-hero h1.bt em .btw{ font-style:italic; background:linear-gradient(96deg,#34a596,#1f857a 42%,#2b7b86);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- the three acts as stacked slides ---------- */
.fw-stack{ position:relative; margin-top:72px; }
.fw-stack .pj-slot{ position:sticky; top:0; min-height:96vh; }
.pj-slot.fw1{ z-index:1; padding-top:86px; }
.pj-slot.fw2{ z-index:2; padding-top:110px; }
.pj-slot.fw3{ z-index:3; padding-top:134px; }
.pj-card.fw{ position:relative; display:flex; flex-direction:column; justify-content:center;
  background:#fbf5ea; border:1.5px solid rgba(33,29,24,.15); border-radius:clamp(28px,3.6vw,52px);
  padding:clamp(22px,3.4vw,48px); transform-origin:top center; will-change:transform;
  box-shadow:0 34px 90px -42px rgba(70,45,25,.5); }
.pj-card.fw .wd-act{ margin-top:0; }
.fw-num{ position:absolute; top:clamp(16px,2.2vw,28px); right:clamp(22px,3vw,40px); font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); }
@media(max-width:820px){
  .fw-stack .pj-slot{ position:relative; min-height:0; padding-top:0 !important; margin-bottom:26px; }
}

/* ============================================================
   THE FLOW — pinned film: the 3D phone plays the real app,
   then the manifesto speaks line by line, spotlight-read.
   ============================================================ */
.ktrack{ height:420vh; position:relative; }
.kstick{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:90px clamp(18px,4vw,48px) 40px; }
.kx-k{ margin:0 0 clamp(14px,2.4vh,24px); font-family:var(--mono); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--terra-deep,#166b62); }
.kduo{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; }
.ph3d-wrap{ perspective:1500px; will-change:transform,opacity; }
.ph3d{ position:relative; width:min(280px,58vw); aspect-ratio:9/19; transform-style:preserve-3d;
  transform:rotateY(-96deg) rotateX(-9deg) scale(.86); will-change:transform; }
.ph-body{ position:absolute; inset:0; border-radius:clamp(30px,9vw,42px);
  background:linear-gradient(155deg,#33333a,#17171b 60%,#0e0e11);
  box-shadow:inset 0 0 0 3px #43434c, inset 0 0 0 6px #202026,
    0 70px 130px -55px rgba(31,27,22,.6), 0 24px 50px -30px rgba(31,27,22,.4); }
.ph-screen{ position:absolute; inset:9px; border-radius:clamp(24px,7.4vw,34px); overflow:hidden;
  background:radial-gradient(130% 100% at 50% 20%, rgba(31,133,122,.16), transparent 60%),
    linear-gradient(168deg,#15110d,#0b0806); }
.ph-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  pointer-events:none; transform:translateZ(0); backface-visibility:hidden; }
.ph-fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ph-fname{ font-family:var(--serif); font-style:italic; font-size:30px; color:#f6efe6; }
.ph-notch{ position:absolute; top:16px; left:50%; transform:translateX(-50%); width:26%; height:9px; border-radius:999px; background:#0a0a0c; z-index:3; }
.ph-glare{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
  background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.09) 50%, transparent 58%); }
.kman{ position:absolute; left:calc(50% + clamp(30px,4vw,70px)); top:50%; transform:translateY(-50%);
  width:min(460px,42vw); text-align:left; display:flex; flex-direction:column; gap:clamp(10px,1.7vh,18px); }
.kml{ margin:0; opacity:0; transform:translateY(22px); will-change:transform,opacity,filter;
  font-family:var(--serif); font-size:clamp(16.5px,1.65vw,22px); line-height:1.4; color:var(--ink); }
.kml.lead{ font-style:italic; font-size:clamp(20px,2.1vw,28px); line-height:1.25; }
.kml em{ font-style:italic; background:linear-gradient(96deg,#34a596,#1f857a 42%,#2b7b86);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.kx-cta{ margin-top:clamp(16px,3vh,28px); display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center;
  opacity:0; pointer-events:none; will-change:transform,opacity; }
.fy-flowlink{ font-size:15.5px; font-weight:500; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.fy-flowlink .ar{ color:var(--terra); transition:transform .3s; } .fy-flowlink:hover .ar{ transform:translateX(4px); }
@media(max-width:820px){
  .kman{ left:50%; transform:translate(-50%,-50%); top:42%; width:min(86vw,420px); text-align:center; }
  .kml{ font-size:16px; } .kml.lead{ font-size:19px; }
  /* pin the CTAs to the bottom of the pinned frame so the phone's layout height
     can never push them off-screen (matters on shorter phones) */
  .kx-cta{ position:absolute; left:0; right:0; bottom:clamp(26px,7vh,64px); margin-top:0; }
}
@media(max-height:700px){ .ph3d{ width:min(220px,52vw); } }
@media (prefers-reduced-motion: reduce){
  .ktrack{ height:auto; }
  .kstick{ position:relative; height:auto; overflow:visible; }
  .ph3d{ transform:none; }
  .kman{ position:relative; left:auto; top:auto; transform:none; width:auto; margin-top:26px; text-align:center; }
  .kduo{ flex-direction:column; }
  .kml{ opacity:1; transform:none; filter:none; }
  .kx-cta{ opacity:1; pointer-events:auto; }
}

/* ============================================================
   THE INTELLIGENCE FILM — self-playing 16:9, beside the story.
   Autoplays + loops while on screen (JS); paper backdrop matches
   the page, framed like a soft product still.
   ============================================================ */
/* the story beside the film — the film takes the bigger share of the stage */
.wf-grid{ display:grid; grid-template-columns:0.68fr 1.32fr; gap:clamp(24px,3.4vw,54px); align-items:center; }
.wf-side{ min-width:0; }
.wf-side .lede{ margin-top:20px; }
.wf-film{ min-width:0; }
/* no frame — the film floats directly on the page's paper */
.film{ position:relative; width:100%; aspect-ratio:16/9; overflow:visible;
  background:transparent; border:0; box-shadow:none; }
.film .entry-veil{ position:absolute; inset:0; pointer-events:none; background:transparent; }
.film .stage{ position:absolute; inset:0; }
.film .stage svg{ width:100%; height:100%; display:block; }
@media(max-width:900px){
  .wf-grid{ grid-template-columns:1fr; gap:clamp(6px,2vw,18px); }
  .wf-side{ order:-1; }
}
/* on phones the film goes full-bleed so it's as large as the screen allows */
@media(max-width:600px){
  .wf-film{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
}

/* ---------- persistent mobile CTA (phone-first) ---------- */
.fab-partner{ display:none; }
@media(max-width:760px){
  /* the ChatGPT-style Chat pill — icon left, text right — in Fyon spruce glass.
     Bottom-right, like a real chat widget: it covers only the corner, never a
     whole line of body text. */
  .fab-partner{ position:fixed; z-index:95; right:14px; left:auto; bottom:calc(16px + env(safe-area-inset-bottom,0px));
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px 14px 18px; border-radius:999px; font-size:16px; font-weight:650; letter-spacing:-.01em;
    color:#fff; white-space:nowrap;
    background:linear-gradient(158deg,#3aad9d,#13635a);
    -webkit-backdrop-filter:blur(8px) saturate(160%); backdrop-filter:blur(8px) saturate(160%);
    box-shadow:inset 0 1.5px 1px rgba(224,248,243,.7), inset 0 0 0 1px rgba(150,222,211,.32),
      0 18px 38px -12px rgba(15,90,82,.66), 0 3px 10px -4px rgba(15,90,82,.5);
    opacity:0; transform:translateY(16px); pointer-events:none;
    animation:fabIn .5s cubic-bezier(.2,.85,.25,1) .6s forwards;
    transition:opacity .35s ease, transform .2s cubic-bezier(.2,.85,.25,1); }
  .fab-partner svg{ width:21px; height:21px; flex:none; }
  .fab-partner:active{ transform:translateY(0) scale(.96); transition-duration:.1s;
    box-shadow:inset 0 2px 6px rgba(10,60,54,.4), inset 0 0 0 1px rgba(150,222,211,.3), 0 8px 18px -10px rgba(15,90,82,.6); }
  /* hide it when the partner section itself is on screen — the real CTA is right there */
  .fab-partner.hide{ opacity:0 !important; transform:translateY(18px) !important; pointer-events:none !important; }
  @keyframes fabIn{ to{ opacity:1; transform:translateY(0); pointer-events:auto; } }
}
@media(max-width:760px) and (prefers-reduced-motion: reduce){
  .fab-partner{ animation:none; opacity:1; transform:translateY(0); pointer-events:auto; }
}

/* ---------- the difference: everything else vs Fyon ---------- */
.wdiff{ margin:0 0 clamp(40px,5vw,60px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,26px); }
.wd-col{ border-radius:22px; padding:clamp(24px,3vw,38px); }
.wd-col.hype{ background:rgba(33,29,24,.035); box-shadow:inset 0 0 0 1px rgba(33,29,24,.08); }
.wd-col.fyon{ position:relative; isolation:isolate; overflow:hidden;
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(11px) saturate(170%); backdrop-filter:blur(11px) saturate(170%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(31,133,122,.3),
    0 18px 44px -28px rgba(15,90,82,.4), 0 2px 6px -3px rgba(70,45,25,.2); }
.wd-col.fyon::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background:radial-gradient(260px circle at 26% 0%, rgba(52,165,150,.16), transparent 62%); }
.wd-col > *{ position:relative; z-index:1; }
.wd-k{ display:inline-flex; align-items:center; gap:9px; margin-bottom:18px;
  font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.wd-col.hype .wd-k{ color:var(--ink-faint); }
.wd-col.fyon .wd-k{ color:var(--terra-deep); }
.wd-x,.wd-c{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; font-size:12px; font-weight:700; }
.wd-x{ background:rgba(33,29,24,.08); color:var(--ink-faint); }
.wd-c{ background:linear-gradient(158deg,#34a596,#13635a); color:#fff; box-shadow:0 4px 12px -5px rgba(15,90,82,.5); }
.wd-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.wd-col li{ position:relative; padding-left:22px; font-size:15.5px; line-height:1.5; }
.wd-col li::before{ content:""; position:absolute; left:4px; top:9px; width:6px; height:6px; border-radius:50%; }
.wd-col.hype li{ color:var(--ink-soft); } .wd-col.hype li::before{ background:var(--ink-faint); opacity:.5; }
.wd-col.fyon li{ color:var(--ink); } .wd-col.fyon li::before{ background:var(--terra); }
.wd-col li em{ font-style:italic; color:var(--terra); }
@media(max-width:720px){ .wdiff{ grid-template-columns:1fr; } }

/* ---------- daily band: not a trial, a life ---------- */
.daily-band{ width:100%; margin:clamp(60px,8vw,104px) 0 0; border-radius:24px; padding:clamp(26px,3.4vw,44px);
  display:grid; grid-template-columns:minmax(200px,.86fr) 1.14fr; gap:clamp(20px,3vw,46px); align-items:center; text-align:left; }
.db-k{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terra); }
.db-dot{ width:7px; height:7px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 4px rgba(31,133,122,.14); }
.db-side h3{ font-family:var(--serif); font-weight:500; font-size:clamp(25px,3.2vw,40px); line-height:1.05;
  letter-spacing:-.01em; margin:12px 0 0; color:var(--ink); }
.db-side h3 em{ font-style:italic; color:var(--terra); }
.db-body p{ font-size:16px; line-height:1.64; color:var(--ink-soft); margin:0 0 18px; }
.db-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.db-chip{ font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--terra-deep);
  padding:7px 13px; border-radius:999px; background:rgba(31,133,122,.09); box-shadow:inset 0 0 0 1px rgba(31,133,122,.22); }
@media(max-width:760px){ .daily-band{ grid-template-columns:1fr; gap:16px; } }

/* ---------- scroll-lit statements ---------- */
.lit span{ transition:opacity .18s linear; }

/* ---------- liquid press — the glass gives, then springs back ---------- */
.btn:active, .fh-btn:active, .btn-primary:active{ transform:scale(.94); transition-duration:.09s; }
.btn-primary:active{ box-shadow:inset 0 2px 8px rgba(14,64,58,.4), inset 0 1px 1px rgba(224,245,242,.5); }

@media (prefers-reduced-motion: reduce){
  .bt .btw{ opacity:1; filter:none; transform:none; animation:none !important; }
  .lit span{ opacity:1 !important; transition:none; }
  .fw-stack .pj-slot{ position:relative; min-height:0; padding-top:0 !important; margin-bottom:26px; }
}