/* Leopanto Labs studio ident v017. Bright from the first frame. Top-anchored height chain
   (no inset:0 + solid body bg), safe-area aware. Motion is transform/opacity, plus the finale's
   mask/band driven by two registered custom properties on the overlay element. */
.leopanto-intro{
  --lp-sat:env(safe-area-inset-top,0px);--lp-sar:env(safe-area-inset-right,0px);
  --lp-sab:env(safe-area-inset-bottom,0px);--lp-sal:env(safe-area-inset-left,0px);
  --lp-ink:#131d25;--lp-day:#fffaf0;
  position:fixed;left:0;right:0;top:0;bottom:auto;width:100%;
  height:100%;height:100vh;height:100dvh;height:100lvh;height:max(var(--app-h,0px),100lvh);
  z-index:200;overflow:hidden;margin:0;box-sizing:border-box;
  padding-top:var(--lp-sat);padding-bottom:var(--lp-sab);
  background-color:var(--lp-day);
  background-image:radial-gradient(125% 90% at 42% 44%,#fffefa 0%,#fff9ee 46%,#fdf0da 100%);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  cursor:pointer;contain:layout paint style;isolation:isolate
}
.leopanto-intro.lp-skipping{transition:opacity .3s cubic-bezier(.33,0,.2,1)}
.leopanto-intro:focus{outline:none}
.leopanto-intro:focus-visible{outline:3px solid #f86745;outline-offset:-8px}
.leopanto-intro[hidden]{display:none!important}

/* Content uses the launch frame and safe-area measurements captured by the controller. */
.leopanto-content{position:absolute;left:0;right:0;top:0;height:100%;height:var(--lp-frame-h,100dvh);z-index:2;display:grid;place-items:center;box-sizing:border-box;
  padding:calc(var(--lp-frame-top,var(--lp-sat)) + 12px) calc(var(--lp-sar) + 16px) calc(var(--lp-frame-bottom,var(--lp-sab)) + 12px) calc(var(--lp-sal) + 16px)}
.leopanto-content svg,.leopanto-content .lp-logo{display:block;
  width:min(84%,820px);
  width:min(84%,820px,calc((var(--lp-frame-h,100dvh) - var(--lp-frame-top,var(--lp-sat)) - var(--lp-frame-bottom,var(--lp-sab)) - 24px) * 1.25));
  height:auto;aspect-ratio:1257.6203002929688 / 602;overflow:visible}
.leopanto-content .lp-logo{position:relative;top:calc(var(--lp-frame-h,100vh) * -.02);left:-1.5%}
.leopanto-content .lp-logo svg{position:relative;z-index:3;width:100%;height:100%;shape-rendering:geometricPrecision}

/* Stage: soft sunlight around the burst and a warm full-screen wash (finishing beat). */
.lp-stage{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;--lp-bx:30%;--lp-by:46%}
.lp-sun,.lp-wash{position:absolute;inset:0;will-change:opacity}
.lp-sun{background:radial-gradient(circle at var(--lp-bx) var(--lp-by),rgba(255,214,120,.42) 0,rgba(255,224,150,.22) 18vmax,rgba(255,236,196,0) 46vmax)}
.lp-wash{opacity:0;background:radial-gradient(circle at var(--lp-bx) var(--lp-by),rgba(255,246,222,.95) 0,rgba(255,232,178,.6) 30vmax,rgba(255,240,206,.35) 80vmax)}

/* Light around the burst centre (505,363 in the SVG viewBox = 24.33% / 47.67%). */
.lp-halo,.lp-ring{position:absolute;left:24.33%;top:47.67%;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.lp-halo{z-index:1;width:84%;height:0;padding-bottom:84%;margin:-42% 0 0 -42%;opacity:0;
  background:radial-gradient(circle,rgba(255,226,150,.7) 0%,rgba(255,208,120,.34) 26%,rgba(255,196,110,.12) 48%,rgba(255,196,110,0) 68%)}
.lp-ring{z-index:2;width:60%;height:0;padding-bottom:60%;margin:-30% 0 0 -30%;opacity:0;
  background:radial-gradient(circle,rgba(255,236,190,0) 46%,rgba(255,214,128,.5) 58%,rgba(255,248,226,.85) 64%,rgba(255,206,120,.4) 69%,rgba(255,214,128,0) 78%)}

/* Finale (default shimmer): one angular light band sweeps clockwise out of the sunburst centre
   across the whole screen while the intro dissolves behind it, revealing the app.
   Two registered custom properties drive it (animated by the controller with one shared timing):
   --lp-sweep (<angle>) is the band's leading edge; --lp-seam (<number>) is the weight of the soft
   fan that keeps the line where the sweep started continuous until the band comes round again.
   Mask layer 1 (the dissolve): a 120deg smoothstep feather, opaque 40deg behind the leading edge.
   Mask layer 2 (the seam fan): opaque on the start line, fading over 64deg, scaled by --lp-seam,
   which follows layer 1's own profile so the two always meet without an edge.
   Mask layer 3 (the core): a small radial softening where every angle converges (the burst centre).
   Both layers are full-screen gradients on this one element: no blur filter, nothing is re-laid out. */
.leopanto-intro.lp-sweeping{--lp-sweep:0deg;--lp-seam:1;--lp-sweep-from:144deg;
  --lp-mask-seam:conic-gradient(from var(--lp-sweep-from) at var(--lp-bx,30%) var(--lp-by,46%),
    rgba(0,0,0,var(--lp-seam)) 0deg,rgba(0,0,0,calc(var(--lp-seam) * .9)) 8deg,rgba(0,0,0,calc(var(--lp-seam) * .65)) 20deg,
    rgba(0,0,0,calc(var(--lp-seam) * .35)) 34deg,rgba(0,0,0,calc(var(--lp-seam) * .1)) 50deg,rgba(0,0,0,0) 64deg);
  --lp-mask-sweep:conic-gradient(from var(--lp-sweep-from) at var(--lp-bx,30%) var(--lp-by,46%),
    rgba(0,0,0,0) calc(var(--lp-sweep) - 160deg),rgba(0,0,0,.1) calc(var(--lp-sweep) - 136deg),rgba(0,0,0,.35) calc(var(--lp-sweep) - 112deg),
    rgba(0,0,0,.65) calc(var(--lp-sweep) - 88deg),rgba(0,0,0,.9) calc(var(--lp-sweep) - 64deg),#000 calc(var(--lp-sweep) - 40deg));
  --lp-mask-core:radial-gradient(circle at var(--lp-bx,30%) var(--lp-by,46%),rgba(0,0,0,var(--lp-seam)) 0,
    rgba(0,0,0,calc(var(--lp-seam) * .55)) 3vmin,rgba(0,0,0,0) 8vmin);
  -webkit-mask-image:var(--lp-mask-core),var(--lp-mask-seam),var(--lp-mask-sweep);mask-image:var(--lp-mask-core),var(--lp-mask-seam),var(--lp-mask-sweep)}
/* The light band: a wide, bell-shaped falloff (about 155deg end to end) that wraps cleanly
   past the start line (repeating, one 360deg period). Its overall brightness eases in and out. */
.lp-sweep{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;will-change:opacity;
  background:repeating-conic-gradient(from var(--lp-sweep-from) at var(--lp-bx,30%) var(--lp-by,46%),
    rgba(255,246,224,0) calc(var(--lp-sweep) - 90deg),rgba(255,247,228,.16) calc(var(--lp-sweep) - 62deg),
    rgba(255,249,234,.5) calc(var(--lp-sweep) - 38deg),rgba(255,251,241,.82) calc(var(--lp-sweep) - 18deg),
    rgba(255,252,244,.94) calc(var(--lp-sweep) - 5deg),rgba(255,246,222,.86) calc(var(--lp-sweep) + 10deg),
    rgba(255,236,190,.52) calc(var(--lp-sweep) + 27deg),rgba(255,232,180,.18) calc(var(--lp-sweep) + 45deg),
    rgba(255,236,190,0) calc(var(--lp-sweep) + 65deg),rgba(255,246,224,0) calc(var(--lp-sweep) + 270deg))}

/* Reduced motion and static fallback: calm finished logo, no moving light. */
.lp-reduced .lp-ring,.lp-reduced .lp-wash,.lp-static .lp-ring,.lp-static .lp-wash{display:none}
.lp-reduced .lp-halo,.lp-static .lp-halo{opacity:.75}

/* Failsafe: before the controller arms the overlay, show the bright stage; if it never
   arms (script failed to load), reveal the static logo after one second. */
.leopanto-intro:not(.lp-armed) .leopanto-content{opacity:0;animation:lp-failsafe-in .5s ease 1s forwards}
@keyframes lp-failsafe-in{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.leopanto-intro:not(.lp-armed) .leopanto-content{animation:none;opacity:1}}

/* ---- Standalone demo page only ---- */
html.demo-root{height:100%;background:#97d2ec}
.demo-body{margin:0;min-height:100%;background:#97d2ec;color:#2b1712;font-family:system-ui,-apple-system,sans-serif;overflow:hidden}
.demo-background{position:fixed;left:0;top:0;width:100%;height:100%;height:100lvh;display:block}
.demo-controls{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;z-index:1}
.demo-controls button{font:800 16px system-ui,sans-serif;color:#2b1712;background:#fff4e0;border:3px solid #2b1712;border-radius:14px;padding:10px 18px;min-height:46px;box-shadow:0 4px 0 #2b1712;cursor:pointer}
.demo-controls button.demo-small{font-size:13px;padding:8px 12px;min-height:40px}
.demo-controls button[aria-pressed="true"]{background:#ffd68a}
.demo-controls p{font-size:12px;max-width:230px;color:#2b1712;background:#fff4e0e8;padding:7px 10px;border-radius:8px;margin:0}
@media(max-width:500px){.demo-controls{gap:8px}.demo-controls p{max-width:100%;font-size:11px;text-align:center}}