/*
 * PanelLaunch site motion + HTML hero dashboard (2026-10-30). Loaded only with a site skin
 * (App\Support\SiteSkin), after pl-v2.css / pl-v3.css and before the skin's own stylesheet.
 * Every animation sits behind prefers-reduced-motion: no-preference; with reduced motion the page is static.
 * Colours come from the skin tokens (--brand, --on-brand, --acc2-soft, --acc3-soft…).
 */
:root{--mo-ease:cubic-bezier(.16,1,.3,1);--mo-spring:cubic-bezier(.34,1.56,.64,1)}

/* ================================================== hero dashboard (HTML) */
/* --u is one pixel of the 1280px-wide drawing, so the whole thing scales with its box. */
.hdash{container-type:inline-size;background:var(--bg-alt)}
.hd-st{--u:calc(100cqw / 1280);display:flex;aspect-ratio:1280/649;overflow:hidden;background:color-mix(in srgb,var(--bg) 60%,var(--bg-alt));color:var(--text);font-family:var(--font);font-size:calc(var(--u)*13);line-height:1.3;text-align:left}
.hd-st p,.hd-st b{margin:0}
.hd-side{flex:none;display:flex;flex-direction:column;gap:calc(var(--u)*4);width:calc(var(--u)*216);padding:calc(var(--u)*18) calc(var(--u)*14);background:var(--surface);border-right:1px solid var(--line)}
.hd-logo,.hd-mlogo{display:flex;align-items:center;gap:calc(var(--u)*10);font-weight:800;font-size:calc(var(--u)*16);padding:calc(var(--u)*4) calc(var(--u)*8) calc(var(--u)*16)}
.hd-logo i,.hd-mlogo i{display:block;width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:calc(var(--u)*9);background:var(--brand)}
.hd-sh{padding:calc(var(--u)*12) calc(var(--u)*10) calc(var(--u)*6);font-size:calc(var(--u)*10.5);font-weight:700;letter-spacing:.08em;color:var(--faint)}
.hd-nav{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*9) calc(var(--u)*10);border-radius:calc(var(--u)*9);font-size:calc(var(--u)*13.5);font-weight:600;color:var(--muted)}
.hd-nav b{display:block;width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:calc(var(--u)*5);background:var(--line)}
.hd-nav.on{background:var(--brand-soft);color:var(--brand-text)}
.hd-nav.on b{background:var(--brand)}
.hd-main{flex:1;min-width:0;display:flex;flex-direction:column}
.hd-top{flex:none;display:flex;align-items:center;gap:calc(var(--u)*14);height:calc(var(--u)*58);padding:0 calc(var(--u)*22);background:var(--surface);border-bottom:1px solid var(--line)}
.hd-mlogo{display:none}
.hd-search{flex:0 0 calc(var(--u)*300);display:flex;align-items:center;height:calc(var(--u)*36);padding:0 calc(var(--u)*12);border:1px solid var(--line);border-radius:calc(var(--u)*9);background:var(--surface-2);color:var(--faint);font-size:calc(var(--u)*13)}
.hd-qc{margin-left:auto;display:flex;align-items:center;height:calc(var(--u)*36);padding:0 calc(var(--u)*16);border-radius:calc(var(--u)*9);background:var(--brand);color:var(--on-brand,#fff);font-weight:700;font-size:calc(var(--u)*13)}
.hd-av{display:grid;place-items:center;width:calc(var(--u)*34);height:calc(var(--u)*34);border-radius:50%;background:var(--text);color:var(--bg);font-weight:800;font-size:calc(var(--u)*13)}
.hd-body{display:flex;flex-direction:column;gap:calc(var(--u)*16);padding:calc(var(--u)*20) calc(var(--u)*22)}
.hd-hello{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u)*10)}
.hd-hello b{display:block;font-size:calc(var(--u)*21);font-weight:800;letter-spacing:-.02em}
.hd-hello p{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*13);color:var(--muted)}
.hd-sample{flex:none;padding:calc(var(--u)*5) calc(var(--u)*12);border:1px dashed #f59e0b;border-radius:999px;background:#fef3c7;color:#92400e;font-size:calc(var(--u)*12);font-weight:800;letter-spacing:.02em}
.hd-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*14)}
.hd-k{padding:calc(var(--u)*16) calc(var(--u)*18);background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--u)*14)}
.hd-k .l{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*12.5);font-weight:700;color:var(--muted)}
.hd-k .l i{display:block;width:calc(var(--u)*24);height:calc(var(--u)*24);border-radius:calc(var(--u)*7)}
.hd-k .c1{background:var(--brand-soft)}
.hd-k .c2{background:var(--ok-soft)}
.hd-k .c3{background:var(--acc2-soft,var(--bg-alt))}
.hd-k .c4{background:var(--acc3-soft,#fef3c7)}
.hd-k .v{margin-top:calc(var(--u)*10);font-size:calc(var(--u)*27);font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hd-k .s{margin-top:calc(var(--u)*4);font-size:calc(var(--u)*12);color:var(--muted)}
.hd-row{display:grid;grid-template-columns:1.7fr 1fr;gap:calc(var(--u)*14)}
.hd-card{padding:calc(var(--u)*16) calc(var(--u)*18);background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--u)*14)}
.hd-card>b{display:block;font-size:calc(var(--u)*14);font-weight:800}
.hd-card>p{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*12);color:var(--muted)}
.hd-chart{display:flex;align-items:flex-end;gap:calc(var(--u)*10);height:calc(var(--u)*236);margin-top:calc(var(--u)*14);padding-top:calc(var(--u)*10);border-bottom:1px solid var(--line)}
.hd-bar{flex:1;height:var(--h);border-radius:calc(var(--u)*7) calc(var(--u)*7) calc(var(--u)*3) calc(var(--u)*3);background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 60%,var(--surface)),var(--brand));transform-origin:50% 100%}
.hd-bar.today{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--brand) 30%,var(--surface)) 0 calc(var(--u)*5),color-mix(in srgb,var(--brand) 18%,var(--surface)) 0 calc(var(--u)*10))}
.hd-lbls{display:flex;gap:calc(var(--u)*10);margin-top:calc(var(--u)*6)}
.hd-lbls span{flex:1;text-align:center;font-size:calc(var(--u)*10.5);font-weight:600;color:var(--faint)}
.hd-t{display:flex;justify-content:space-between;align-items:baseline;padding:calc(var(--u)*12) 0;border-bottom:1px dashed var(--line)}
.hd-t:last-child{border-bottom:0;padding-bottom:0}
.hd-t span{font-size:calc(var(--u)*13);font-weight:600;color:var(--muted)}
.hd-t b{font-size:calc(var(--u)*18);font-weight:800;font-variant-numeric:tabular-nums}
.hd-t small{margin-left:calc(var(--u)*6);font-size:calc(var(--u)*11.5);font-weight:600;color:var(--muted)}
/* Phone card: the four totals large and the bars, like the old square crop (not for .hd-wide, e.g. the sign-in panel). */
@container (max-width:599px){
  .hdash:not(.hd-wide) .hd-st{--u:calc(100cqw / 400);display:block;aspect-ratio:1/1}
  .hdash:not(.hd-wide) .hd-side,.hdash:not(.hd-wide) .hd-search,.hdash:not(.hd-wide) .hd-qc,.hdash:not(.hd-wide) .hd-av,.hdash:not(.hd-wide) .hd-today,.hdash:not(.hd-wide) .hd-lbls,.hdash:not(.hd-wide) .hd-card>p{display:none}
  .hdash:not(.hd-wide) .hd-top{justify-content:space-between;height:calc(var(--u)*38);padding:0 calc(var(--u)*13)}
  .hdash:not(.hd-wide) .hd-mlogo{display:flex;gap:calc(var(--u)*8);padding:0;font-size:calc(var(--u)*11.5)}
  .hdash:not(.hd-wide) .hd-mlogo i{width:calc(var(--u)*19);height:calc(var(--u)*19);border-radius:calc(var(--u)*6)}
  .hdash:not(.hd-wide) .hd-body{gap:calc(var(--u)*8);padding:calc(var(--u)*11) calc(var(--u)*13)}
  .hdash:not(.hd-wide) .hd-hello b{font-size:calc(var(--u)*13)}
  .hdash:not(.hd-wide) .hd-hello p{font-size:calc(var(--u)*8.5)}
  .hdash:not(.hd-wide) .hd-sample{padding:calc(var(--u)*3) calc(var(--u)*9);font-size:calc(var(--u)*8.5)}
  .hdash:not(.hd-wide) .hd-kpis{grid-template-columns:1fr 1fr;gap:calc(var(--u)*8)}
  .hdash:not(.hd-wide) .hd-k{padding:calc(var(--u)*9) calc(var(--u)*11);border-radius:calc(var(--u)*10)}
  .hdash:not(.hd-wide) .hd-k .l{gap:calc(var(--u)*6);font-size:calc(var(--u)*9)}
  .hdash:not(.hd-wide) .hd-k .l i{width:calc(var(--u)*15);height:calc(var(--u)*15);border-radius:calc(var(--u)*5)}
  .hdash:not(.hd-wide) .hd-k .v{margin-top:calc(var(--u)*5);font-size:calc(var(--u)*22)}
  .hdash:not(.hd-wide) .hd-k .s{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*8.5)}
  .hdash:not(.hd-wide) .hd-row{grid-template-columns:1fr}
  .hdash:not(.hd-wide) .hd-card{padding:calc(var(--u)*9) calc(var(--u)*11);border-radius:calc(var(--u)*10)}
  .hdash:not(.hd-wide) .hd-card>b{font-size:calc(var(--u)*9.5)}
  .hdash:not(.hd-wide) .hd-chart{gap:calc(var(--u)*5);height:calc(var(--u)*70);margin-top:calc(var(--u)*8);padding-top:0;border-bottom:0}
  .hdash:not(.hd-wide) .hd-bar{border-radius:calc(var(--u)*4) calc(var(--u)*4) calc(var(--u)*2) calc(var(--u)*2)}
}

/* ================================================== payments marquee (built by pl-motion.js) */
.mo-mq{flex:1 1 320px;min-width:0;overflow:hidden;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.pays .mo-mq ul.mo-mq-t{flex-wrap:nowrap;gap:0;width:max-content}
.mo-mq-t>li{flex:none;margin-inline-end:8px}
@media (min-width:861px){.v3-pay .pays{flex-wrap:nowrap}}

/* ================================================== motion */
@media (prefers-reduced-motion:no-preference){
  /* hero: one orchestrated entrance */
  .v3-hero .eyebrow{animation:mo-rise .8s var(--mo-ease) .05s both}
  .v3-hero h1{animation:mo-line 1.05s var(--mo-ease) .12s both}
  .v3-hero .lede{animation:mo-rise .8s var(--mo-ease) .32s both}
  .v3-hero .hero-cta{animation:mo-rise .8s var(--mo-ease) .44s both}
  .v3-hero .trust{animation:mo-rise .8s var(--mo-ease) .56s both}
  .v3-hero .v3-shot{animation:mo-shot 1.3s var(--mo-ease) .2s both}
  .v3-hero .v3-live{animation:mo-pop .7s var(--mo-spring) 1.2s both}
  .hd-k{animation:mo-rise .7s var(--mo-ease) calc(.75s + var(--i) * .08s) both}
  .hd-bar{animation:mo-grow 1s var(--mo-ease) calc(.95s + var(--i) * .045s) both}
  .hd-nav.on{animation:mo-fade .6s ease .7s both}

  /* pointer tilt on the dashboard (pl-motion.js sets --rx/--ry; fine pointers only) */
  .mo-tilt .v3-frame{transform:perspective(1500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--mo-ease);will-change:transform}

  /* scroll reveals: longer, deeper, and siblings cascade (pl-motion.js numbers them with --i) */
  :root.rv-on .rv{transition:opacity .85s var(--mo-ease) calc(var(--i,0) * 90ms),transform .85s var(--mo-ease) calc(var(--i,0) * 90ms),box-shadow .45s var(--mo-ease),border-color .3s}
  :root.rv-on .rv:not(.in){opacity:0;transform:translateY(36px)}
  :root.rv-on .sec-h.rv:not(.in){transform:translateY(24px)}

  /* steps: the connector draws, the number pops */
  :root.rv-on .v3-step::after{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--mo-ease) .55s}
  :root[dir="rtl"].rv-on .v3-step::after{transform-origin:100% 50%}
  :root.rv-on .v3-step.in::after{transform:none}
  :root.rv-on .v3-step.in .n{animation:mo-pop .7s var(--mo-spring) calc(.2s + var(--i,0) * 90ms) both}

  /* cards answer the pointer */
  .v3-feat,.v3-step,.plan{transition:transform .45s var(--mo-ease),box-shadow .45s var(--mo-ease),border-color .3s}
  .v3-feat:hover,.v3-step:hover,.plan:hover{transform:translateY(-5px)}
  .v3-feat:hover .i{animation:mo-wiggle .7s var(--mo-spring)}

  /* primary buttons: a light sweep and the arrow nudges */
  .btn-p{position:relative;overflow:hidden;isolation:isolate}
  .btn-p::after{content:"";position:absolute;z-index:-1;inset-block:-2px;inset-inline-start:-60%;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:inset-inline-start .75s var(--mo-ease);pointer-events:none}
  .btn-p:hover::after{inset-inline-start:130%}
  .btn .ico{transition:translate .3s var(--mo-ease)}
  .btn:hover .ico:has(> use[href="#i-arrow"]){translate:4px 0}
  [dir="rtl"] .btn:hover .ico:has(> use[href="#i-arrow"]){translate:-4px 0}

  /* the logo's spark takes off on hover (Launch Grid mark) */
  .brand svg .bm-s{transform-box:fill-box;transform-origin:50% 50%;transition:transform .6s var(--mo-spring)}
  .brand:hover svg .bm-s{transform:translate(2px,-2px) rotate(90deg) scale(1.12)}
  .brand svg .bm-t{transition:transform .4s var(--mo-ease)}
  .brand:hover svg .bm-t:nth-of-type(3){transform:translate(.5px,.5px)}

  /* payments strip scrolls; it stops under the pointer */
  .mo-mq-t{animation:mo-mq var(--mq-dur,30s) linear infinite}
  .mo-mq:hover .mo-mq-t{animation-play-state:paused}

  /* dark bands breathe */
  .final::before{animation:mo-drift 16s ease-in-out infinite alternate}
}

@keyframes mo-rise{from{opacity:0;transform:translateY(22px)}}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-line{from{opacity:0;transform:translateY(.45em);clip-path:inset(100% -5% -25% -5%)}to{opacity:1;transform:none;clip-path:inset(-25% -5% -25% -5%)}}
@keyframes mo-shot{from{opacity:0;transform:perspective(1600px) translateY(48px) rotateX(16deg) scale(.94)}}
@keyframes mo-pop{from{opacity:0;transform:scale(.55) rotate(-8deg)}}
@keyframes mo-grow{from{transform:scaleY(0)}}
@keyframes mo-wiggle{30%{transform:rotate(-10deg) scale(1.1)}60%{transform:rotate(6deg) scale(1.04)}}
@keyframes mo-flame{to{transform:scaleY(1.7)}}
@keyframes mo-mq{to{transform:translateX(-50%)}}
@keyframes mo-drift{to{transform:translate(-6%,8%) scale(1.15)}}
@keyframes mo-spin{to{transform:rotate(360deg)}}
@keyframes mo-blink{50%{opacity:0}}
@keyframes mo-mark{from{background-size:0% 100%}to{background-size:100% 100%}}