/* ============================================================================
   FRAME — homepage motion layer (Phase 1)
   Loaded by index.html only. Nothing here touches the live generator canvas,
   frame.js or any shared stylesheet's behaviour on other pages.

   Every moving rule is gated on classes the inline <head> script sets before
   first paint:
     .hm-motion   motion allowed (prefers-reduced-motion is not "reduce")
     .hm-sda      + native CSS scroll-driven animations (scrubbed to scroll)
     .hm-io       + no scroll timelines: home-motion.js steps the how-to story
                    with IntersectionObserver and CSS transitions instead
   Without them (reduced motion, JS disabled) the page is the static layout:
   every element visible in its final state, the how-to story stacked.

   Only transform (translate/scale) and opacity move on scroll. One recurring
   accent line (--hm-line) is the motion signature: the story's progress
   segments, the step markers and the download-ready line.
   ========================================================================= */

:root{
  --hm-ease-out:cubic-bezier(.16,1,.3,1);     /* settle: fast start, long calm finish */
  --hm-ease-std:cubic-bezier(.2,.8,.2,1);     /* matches the accordion motion */
  --hm-ease-pop:cubic-bezier(.34,1.32,.64,1); /* the one restrained overshoot: success check */
  --hm-line:#5FD6C4;
  --hm-navy:#0F2233;
}

/* ------------------------------------------------------------ 1. header */
/* The bar's white surface and its hairline live on two pseudo layers so they
   can fade with scroll (opacity only) instead of snapping at 20px. */
#page-home .nav::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(150%) blur(8px);backdrop-filter:saturate(150%) blur(8px);
  opacity:0;
}
#page-home .nav::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:rgba(15,34,51,.09);
  box-shadow:0 10px 24px -14px rgba(15,34,51,.24);
  opacity:0;
}
#page-home .nav.scrolled::before,
#page-home .nav.scrolled::after{opacity:1;}
#page-home .nav.scrolled{
  background:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-bottom-color:transparent!important;
}
.hm-motion #page-home .nav::before,
.hm-motion #page-home .nav::after{transition:opacity .3s var(--hm-ease-std);}

/* -------------------------------------------- 2. how-to story: the stage */
/* One product object that evolves: content -> design -> export. The same
   markup appears once pinned (desktop) and once per step (stacked flow);
   data-s="1|2|3" sets its state. The QR art is a real, scannable code for
   https://qrcode-frame.com, pre-rendered as static SVG (no QR generation). */
#page-home .howto-step-visual,
#page-home .howto-step-visual:hover{
  padding:0;border:0;background:none;min-height:0;display:block;
}
#page-home .hs-pin{display:none;}

.hs-stage{
  --q:clamp(150px,15vw,200px);
  position:relative;width:100%;max-width:560px;margin-inline:auto;
  background:linear-gradient(180deg,#14304A 0%,#112739 100%);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;
  padding:20px 22px 22px;color:#C9D6E0;
  font-family:'Inter',sans-serif;text-align:left;
  box-shadow:0 30px 60px -32px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05);
}
.hs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.hs-labels{display:grid;overflow:hidden;height:24px;min-width:0;}
.hs-label,.hs-l2w{grid-area:1/1;display:flex;align-items:center;}
.hs-label{
  gap:9px;white-space:nowrap;
  font-family:'Manrope',sans-serif;font-size:14px;font-weight:700;color:#fff;
}
.hs-label b{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--hm-line);color:var(--hm-navy);font-size:11px;font-weight:800;
}
.hs-live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#8FA6B8;white-space:nowrap;}
.hs-live i{width:6px;height:6px;border-radius:50%;background:var(--hm-line);}

.hs-prog{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 18px;}
.hs-prog span{height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;}
.hs-prog i{display:block;height:100%;background:var(--hm-line);transform-origin:0 50%;scale:0 1;}
.hs-prog .hs-seg1{scale:1 1;}

.hs-tabs{display:flex;gap:6px;overflow:hidden;}
.hs-tab{
  display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:8px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  font-size:12px;font-weight:600;color:#C9D6E0;
}
.hs-tab.is-on{background:var(--hm-line);border-color:var(--hm-line);color:var(--hm-navy);}
.hs-field{
  display:flex;align-items:center;gap:8px;height:38px;margin-top:10px;padding:0 12px;
  border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(95,214,196,.45);
  font-size:12.5px;color:#E6EDF3;min-width:0;
}
.hs-field svg{width:14px;height:14px;flex-shrink:0;color:var(--hm-line);}
.hs-field span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.hs-body{
  display:grid;grid-template-columns:var(--q) minmax(0,1fr);gap:26px;align-items:center;
  margin:24px 0 26px;padding:0 0 8px 7px;
}
.hs-tile{
  position:relative;width:var(--q);aspect-ratio:1;border-radius:14px;background:#fff;
  box-shadow:0 22px 44px -22px rgba(0,0,0,.7);
}
.hs-qr{display:block;width:100%;height:100%;}
.hs-q-design{opacity:0;}
.hs-logo{opacity:0;scale:.55;transform-box:fill-box;transform-origin:center;}
.hs-ring{
  position:absolute;inset:-7px;border:2px solid var(--hm-line);border-radius:20px;
  opacity:0;pointer-events:none;
}
.hs-caption{
  position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);translate:0 8px;opacity:0;
  background:var(--hm-line);color:var(--hm-navy);white-space:nowrap;
  font-family:'Manrope',sans-serif;font-size:11px;font-weight:800;
  padding:4px 12px;border-radius:999px;
}
.hs-zbw{opacity:.3;min-width:0;}
.hs-row{display:flex;align-items:center;gap:8px;}
.hs-row + .hs-row{margin-top:14px;}
.hs-k{width:46px;flex-shrink:0;font-size:11.5px;color:#8FA6B8;}
.hs-sw{width:20px;height:20px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
.hs-sw-grad{background:linear-gradient(135deg,#0B3A4F,#2449D8);}
.hs-sw-navy{background:var(--hm-navy);}
.hs-sw-teal{background:#0E7C6B;}
.hs-sw.is-on{outline:2px solid var(--hm-line);outline-offset:2px;}
.hs-chip{
  display:grid;place-items:center;width:24px;height:24px;border-radius:7px;flex-shrink:0;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
}
.hs-chip::before{content:'';width:9px;height:9px;background:#C9D6E0;}
.hs-chip-dot::before{border-radius:50%;}
.hs-chip.is-on{background:var(--hm-line);border-color:var(--hm-line);}
.hs-chip.is-on::before{background:var(--hm-navy);}
.hs-pill{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:11.5px;font-weight:600;color:#5FE0A6;
  background:rgba(60,200,140,.14);border:1px solid rgba(60,200,140,.35);
  padding:4px 9px;border-radius:999px;
}
.hs-pill svg{width:12px;height:12px;}

.hs-zc{opacity:.3;}
.hs-export{display:flex;gap:8px;}
.hs-res{
  flex:1;min-width:0;display:flex;align-items:center;height:38px;padding:0 12px;
  border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  font-size:12.5px;color:#C9D6E0;white-space:nowrap;
}
.hs-dl,.hs-dl-on{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:700;white-space:nowrap;
}
.hs-dl{
  position:relative;flex-shrink:0;height:38px;padding:0 16px;border-radius:9px;overflow:hidden;
  border:1px solid rgba(95,214,196,.5);color:var(--hm-line);
}
.hs-dl-on{position:absolute;inset:-1px;background:var(--hm-line);color:#0A2A24;opacity:0;}
.hs-dl svg,.hs-dl-on svg{width:14px;height:14px;}
.hs-ready{display:flex;align-items:center;gap:10px;margin-top:14px;}
.hs-ready-track{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden;}
.hs-ready-line{display:block;height:100%;background:var(--hm-line);transform-origin:0 50%;scale:0 1;}
.hs-ready-check{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--hm-line);color:var(--hm-navy);opacity:0;scale:.5;
}
.hs-ready-check svg{width:12px;height:12px;}
.hs-ready-txt{font-size:12px;font-weight:600;color:#E6EDF3;white-space:nowrap;opacity:0;}

/* state 2 — design */
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-l1{opacity:0;translate:0 -60%;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-l2{opacity:1;translate:none;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-za{opacity:.38;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-zbw{opacity:1;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-q-plain{opacity:0;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-q-design{opacity:1;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-logo{opacity:1;scale:1;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-ring{opacity:1;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-caption{opacity:1;translate:none;}
.hs-stage:is([data-s="2"],[data-s="3"]) .hs-seg2{scale:1 1;}
/* state 3 — export */
.hs-stage[data-s="3"] .hs-l2w{opacity:0;translate:0 -60%;}
.hs-stage[data-s="3"] .hs-l3{opacity:1;translate:none;}
.hs-stage[data-s="3"] .hs-zb{opacity:.38;}
.hs-stage[data-s="3"] .hs-zc{opacity:1;}
.hs-stage[data-s="3"] .hs-seg3{scale:1 1;}
.hs-stage[data-s="3"] .hs-dl-on{opacity:1;}
.hs-stage[data-s="3"] .hs-ready-line{scale:1 1;}
.hs-stage[data-s="3"] .hs-ready-check{opacity:1;scale:1;}
.hs-stage[data-s="3"] .hs-ready-txt{opacity:1;}
.hs-stage[data-s="3"] .hs-tile{translate:0 -4px;}
/* labels 2/3 start below their mask window */
.hs-l2,.hs-l3{opacity:0;translate:0 60%;}

/* state changes ease (stacked flow on scroll-in, and the observer fallback) */
.hm-motion .hs-stage :is(.hs-label,.hs-l2w,.hs-za,.hs-zbw,.hs-zb,.hs-zc,.hs-q-plain,.hs-q-design,.hs-logo,.hs-ring,.hs-caption,.hs-dl-on,.hs-ready-txt,.hs-tile){
  transition:opacity .42s var(--hm-ease-out),translate .42s var(--hm-ease-out),scale .42s var(--hm-ease-out);
}
.hm-motion .hs-stage :is(.hs-prog i,.hs-ready-line){transition:scale .5s var(--hm-ease-std);}
.hm-motion .hs-stage :is(.hs-ready-check){transition:opacity .3s var(--hm-ease-std),scale .36s var(--hm-ease-pop);}
.hm-motion .hs-stage:is([data-s="2"],[data-s="3"]) .hs-logo{transition-delay:.1s;}
.hm-motion .hs-stage:is([data-s="2"],[data-s="3"]) :is(.hs-ring,.hs-caption){transition-delay:.18s;}
.hm-motion .hs-stage[data-s="3"] .hs-ready-line{transition-delay:.12s;}
.hm-motion .hs-stage[data-s="3"] :is(.hs-ready-check,.hs-ready-txt){transition-delay:.5s;}

/* stacked flow (mobile, tablet, reduced motion): text first, then its visual */
@media (max-width:1180px){
  #page-home .howto-step-text,#page-home .howto-step-rev .howto-step-text{order:1;}
  #page-home .howto-step-visual,#page-home .howto-step-rev .howto-step-visual{order:2;}
}
@media (max-width:560px){
  .hs-stage{--q:128px;padding:16px 16px 18px;border-radius:16px;}
  .hs-body{gap:18px;margin:20px 0 22px;}
  .hs-tab:nth-child(5){display:none;}
  .hs-k{width:42px;}
  .hs-label{font-size:13px;}
}
@media (max-width:380px){
  .hs-stage{--q:116px;}
  .hs-body{gap:14px;}
  .hs-live{display:none;}
}

/* ------------------------------------- 3. trust strip: no endless marquee */
/* Default (mobile, reduced motion, no scroll timelines): a calm, static,
   wrapped row. The duplicate marquee row is hidden. */
#page-home .trust-strip-track{
  animation:none;display:block;width:auto;
  -webkit-mask-image:none;mask-image:none;
}
#page-home .trust-strip-row{flex-wrap:wrap;justify-content:center;gap:12px 30px;padding-right:0;max-width:920px;margin:0 auto;}
#page-home .trust-strip-row[aria-hidden="true"]{display:none;}
@media (max-width:640px){
  #page-home .trust-strip-row{gap:10px 20px;}
  #page-home .trust-mark{font-size:14px;}
}

/* ---------------------------------------- 4. desktop pinned how-to story */
@media (min-width:1024px){
  .hm-motion #page-home .howto-steps{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    column-gap:clamp(40px,6vw,96px);row-gap:0;margin-bottom:40px;
    timeline-scope:--hs1,--hs2,--hs3;
  }
  .hm-motion #page-home .hs-pin{display:block;grid-column:2;grid-row:1 / span 3;}
  .hm-motion #page-home .hs-pin-sticky{position:sticky;top:max(96px,calc(50svh - 260px));}
  .hm-motion #page-home .hs-pin .hs-stage{margin-inline:auto 0;}
  .hm-motion #page-home .howto-steps > .howto-step{
    grid-column:1;display:flex;align-items:center;min-height:max(440px,74svh);
  }
  .hm-motion #page-home .howto-steps > .howto-step .howto-step-visual{display:none;}
  .hm-motion #page-home .howto-step:nth-of-type(1){view-timeline-name:--hs1;}
  .hm-motion #page-home .howto-step:nth-of-type(2){view-timeline-name:--hs2;}
  .hm-motion #page-home .howto-step:nth-of-type(3){view-timeline-name:--hs3;}
  /* step marker: the accent line draws in as each step reaches focus */
  .hm-motion #page-home .howto-steps .howto-step-num::before{
    content:'';display:inline-block;vertical-align:middle;width:28px;height:2px;margin:-2px 12px 0 0;
    background:var(--hm-line);border-radius:2px;transform-origin:0 50%;scale:0 1;
  }
  .hm-io #page-home .howto-step-num::before{transition:scale .5s var(--hm-ease-std);}
  .hm-io #page-home .howto-step.is-reached .howto-step-num::before{scale:1 1;}
}

/* ------------------------------------------ 5. scroll-driven (native) only */
@supports (animation-timeline:view()){

  /* hero -> workspace focus (desktop): copy drifts up, the band softens,
     the workspace settles 12px and gains depth. The workspace is never
     scaled and stays clickable; the live QR canvas is not animated. */
  @media (min-width:1024px){
    .hm-sda #page-home .hero-head{
      animation:hm-hero-copy linear both;animation-timeline:scroll(root);animation-range:0px 320px;
    }
    .hm-sda #page-home .hero::before{
      animation:hm-hero-band linear both;animation-timeline:scroll(root);animation-range:0px 320px;
    }
    .hm-sda #page-home .studio{
      position:relative;
      animation:hm-studio-settle var(--hm-ease-std) both;animation-timeline:scroll(root);animation-range:0px 320px;
    }
    .hm-sda #page-home .studio::after{
      content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
      box-shadow:0 36px 72px -36px rgba(6,32,40,.45),0 10px 24px -14px rgba(6,32,40,.18);
      animation:hm-show linear both;animation-timeline:scroll(root);animation-range:0px 320px;
    }
  }

  /* header surface + hairline follow the first 40px of scroll */
  .hm-sda #page-home .nav::before,
  .hm-sda #page-home .nav::after{
    transition:none;
    animation:hm-show linear both;animation-timeline:scroll(root);animation-range:0px 40px;
  }

  /* hand-off: the navy story surface opens from a rounded inner panel to
     full width as the section enters (one layer, transform + radius) */
  .hm-sda #page-home .howto{background:transparent;position:relative;isolation:isolate;}
  .hm-sda #page-home .howto::before{
    content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:var(--ws-navy,#0F2233);transform-origin:50% 0;
    animation:hm-handoff linear both;animation-timeline:view();animation-range:entry 0% entry 55%;
  }
  @media (max-width:767px){
    .hm-sda #page-home .howto::before{animation-name:hm-handoff-sm;}
  }

  /* pinned story, scrubbed by each step's own view timeline */
  @media (min-width:1024px){
    .hm-sda #page-home .hs-pin .hs-stage *{transition:none;}
    .hm-sda #page-home .hs-pin-sticky{
      animation:hm-stage-in var(--hm-ease-std) both;animation-timeline:--hs1;animation-range:entry 0% entry 85%;
    }
    .hm-sda #page-home .hs-pin :is(.hs-l1,.hs-l2w,.hs-za,.hs-zb,.hs-zbw,.hs-zc,.hs-q-plain,.hs-q-design,.hs-logo,.hs-ring,.hs-caption,.hs-l2,.hs-l3,.hs-seg2,.hs-seg3,.hs-dl-on,.hs-ready-line,.hs-ready-check,.hs-ready-txt,.hs-tile){
      animation-fill-mode:both;animation-timing-function:var(--hm-ease-std);
    }
    .hm-sda #page-home .hs-pin .hs-seg1{animation:hm-fill linear both;animation-timeline:--hs1;animation-range:cover 20% cover 45%;}
    /* -> design */
    .hm-sda #page-home .hs-pin .hs-l1{animation-name:hm-label-out;animation-timeline:--hs2;animation-range:cover 28% cover 38%;}
    .hm-sda #page-home .hs-pin .hs-l2{animation-name:hm-label-in;animation-timeline:--hs2;animation-range:cover 34% cover 46%;}
    .hm-sda #page-home .hs-pin .hs-za{animation-name:hm-dim;animation-timeline:--hs2;animation-range:cover 28% cover 44%;}
    .hm-sda #page-home .hs-pin .hs-zbw{animation-name:hm-undim;animation-timeline:--hs2;animation-range:cover 28% cover 44%;}
    .hm-sda #page-home .hs-pin .hs-seg2{animation-name:hm-fill;animation-timeline:--hs2;animation-range:cover 26% cover 46%;}
    .hm-sda #page-home .hs-pin .hs-q-plain{animation-name:hm-hide;animation-timeline:--hs2;animation-range:cover 32% cover 46%;}
    .hm-sda #page-home .hs-pin .hs-q-design{animation-name:hm-show;animation-timeline:--hs2;animation-range:cover 32% cover 46%;}
    .hm-sda #page-home .hs-pin .hs-logo{animation-name:hm-logo-in;animation-timeline:--hs2;animation-range:cover 38% cover 50%;animation-timing-function:var(--hm-ease-out);}
    .hm-sda #page-home .hs-pin .hs-ring{animation-name:hm-show;animation-timeline:--hs2;animation-range:cover 40% cover 50%;}
    .hm-sda #page-home .hs-pin .hs-caption{animation-name:hm-rise-in;animation-timeline:--hs2;animation-range:cover 42% cover 52%;}
    /* -> export */
    .hm-sda #page-home .hs-pin .hs-l2w{animation-name:hm-label-out;animation-timeline:--hs3;animation-range:cover 28% cover 38%;}
    .hm-sda #page-home .hs-pin .hs-l3{animation-name:hm-label-in;animation-timeline:--hs3;animation-range:cover 34% cover 46%;}
    .hm-sda #page-home .hs-pin .hs-zb{animation-name:hm-dim;animation-timeline:--hs3;animation-range:cover 28% cover 44%;}
    .hm-sda #page-home .hs-pin .hs-zc{animation-name:hm-undim;animation-timeline:--hs3;animation-range:cover 28% cover 44%;}
    .hm-sda #page-home .hs-pin .hs-seg3{animation-name:hm-fill;animation-timeline:--hs3;animation-range:cover 26% cover 46%;}
    .hm-sda #page-home .hs-pin .hs-tile{animation-name:hm-lift;animation-timeline:--hs3;animation-range:cover 30% cover 46%;}
    .hm-sda #page-home .hs-pin .hs-dl-on{animation-name:hm-show;animation-timeline:--hs3;animation-range:cover 34% cover 44%;}
    .hm-sda #page-home .hs-pin .hs-ready-line{animation-name:hm-fill;animation-timeline:--hs3;animation-range:cover 34% cover 44%;}
    .hm-sda #page-home .hs-pin .hs-ready-check{animation-name:hm-pop;animation-timeline:--hs3;animation-range:cover 42% cover 48%;animation-timing-function:var(--hm-ease-pop);}
    .hm-sda #page-home .hs-pin .hs-ready-txt{animation-name:hm-show;animation-timeline:--hs3;animation-range:cover 43% cover 49%;}
    /* step markers in the text column */
    .hm-sda #page-home .howto-step:nth-of-type(1) .howto-step-num::before{animation:hm-fill var(--hm-ease-std) both;animation-timeline:--hs1;animation-range:cover 22% cover 44%;}
    .hm-sda #page-home .howto-step:nth-of-type(2) .howto-step-num::before{animation:hm-fill var(--hm-ease-std) both;animation-timeline:--hs2;animation-range:cover 22% cover 44%;}
    .hm-sda #page-home .howto-step:nth-of-type(3) .howto-step-num::before{animation:hm-fill var(--hm-ease-std) both;animation-timeline:--hs3;animation-range:cover 22% cover 44%;}

    /* trust strip: drifts only while the reader scrolls past it. The timeline
       is named on the section because the track's own overflow:hidden parent
       would otherwise capture view(). */
    .hm-sda #page-home .trust-strip{view-timeline-name:--hm-trust;}
    .hm-sda #page-home .trust-strip .wrap{
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
      mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    }
    .hm-sda #page-home .trust-strip-track{
      display:flex;width:max-content;
      animation:hm-drift linear both;animation-timeline:--hm-trust;animation-range:cover 0% cover 100%;
    }
    .hm-sda #page-home .trust-strip-row{flex-wrap:nowrap;max-width:none;margin:0;gap:44px;padding-right:44px;}
    .hm-sda #page-home .trust-strip-row[aria-hidden="true"]{display:flex;}
  }
}

/* ------------------------------------------------------ 6. title reveals */
/* Section H2s below the hero: a short masked wipe, once. The hidden start
   state only exists after home-motion.js has added .hm-titles, so headings
   are readable whenever the script is absent or fails. */
.hm-titles #page-home .hm-title:not(.is-in){clip-path:inset(-.25em -.25em 100% -.25em);}
.hm-titles #page-home .hm-title.is-in{animation:hm-title .72s var(--hm-ease-out) backwards;}
@media (max-width:767px){
  .hm-titles #page-home .hm-title.is-in{animation-name:hm-title-sm;animation-duration:.6s;}
}

/* --------------------------------------------------------- 7. keyframes */
@keyframes hm-hero-copy{to{translate:0 -18px;}}
@keyframes hm-hero-band{to{opacity:.72;}}
@keyframes hm-studio-settle{from{translate:0 12px;}to{translate:none;}}
@keyframes hm-show{from{opacity:0;}to{opacity:1;}}
@keyframes hm-hide{from{opacity:1;}to{opacity:0;}}
@keyframes hm-dim{from{opacity:1;}to{opacity:.38;}}
@keyframes hm-undim{from{opacity:.3;}to{opacity:1;}}
@keyframes hm-fill{from{scale:0 1;}to{scale:1 1;}}
@keyframes hm-label-in{from{opacity:0;translate:0 60%;}to{opacity:1;translate:none;}}
@keyframes hm-label-out{from{opacity:1;translate:none;}to{opacity:0;translate:0 -60%;}}
@keyframes hm-logo-in{from{opacity:0;scale:.55;}to{opacity:1;scale:1;}}
@keyframes hm-rise-in{from{opacity:0;translate:0 8px;}to{opacity:1;translate:none;}}
@keyframes hm-pop{from{opacity:0;scale:.5;}to{opacity:1;scale:1;}}
@keyframes hm-lift{from{translate:none;}to{translate:0 -4px;}}
@keyframes hm-stage-in{
  from{opacity:.5;transform:perspective(1400px) rotateX(9deg) translateY(28px) scale(.965);}
  to{opacity:1;transform:none;}
}
@keyframes hm-handoff{
  from{transform:scaleX(.955);border-radius:32px 32px 0 0;}
  to{transform:none;border-radius:0;}
}
@keyframes hm-handoff-sm{
  from{transform:scaleX(.97);border-radius:20px 20px 0 0;}
  to{transform:none;border-radius:0;}
}
@keyframes hm-drift{from{transform:translateX(0);}to{transform:translateX(-22%);}}
@keyframes hm-title{
  from{clip-path:inset(-.25em -.25em 100% -.25em);translate:0 .34em;}
  to{clip-path:inset(-.25em);translate:none;}
}
@keyframes hm-title-sm{
  from{clip-path:inset(-.25em -.25em 100% -.25em);translate:0 .2em;}
  to{clip-path:inset(-.25em);translate:none;}
}

/* --------------------------------------- 8. safety: reduced motion, print */
@media (prefers-reduced-motion:reduce){
  #page-home .hero-head,#page-home .hero::before,#page-home .studio,#page-home .studio::after,
  #page-home .nav::before,#page-home .nav::after,#page-home .howto::before,
  #page-home .hs-stage,#page-home .hs-stage *,#page-home .hs-pin-sticky,
  #page-home .trust-strip-track,#page-home .howto-step-num::before,#page-home .hm-title{
    animation:none!important;transition:none!important;
  }
  #page-home .hm-title{clip-path:none!important;}
}
@media print{
  #page-home .hm-title{clip-path:none!important;animation:none!important;}
}