/* PALBON: the live hero of the public home page (frappe/www/suite.html), loaded on that page only.
   Colours come from the palette (palbon_palette.css) and the site variables (palbon_site.css): no literal here.
   Motion is driven by palbon_hero.js through custom properties and classes, and stops for prefers-reduced-motion. */

.ps-hero--live{position:relative;overflow:hidden;isolation:isolate}
.ps-hero--live .ps-hero__grid{position:relative;z-index:1;transform:translateY(calc(var(--hero-scroll,0) * -60px));opacity:calc(1 - var(--hero-scroll,0) * .7)}

/* ---------- the sky: aurora light and drifting product marks ---------- */
.ps-hero__sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.ps-aurora{position:absolute;width:52vw;height:52vw;max-width:760px;max-height:760px;border-radius:50%;filter:blur(80px);opacity:.38;mix-blend-mode:screen;animation:ps-aurora 22s ease-in-out infinite alternate}
.ps-aurora--a{top:-22%;left:-12%;background:radial-gradient(circle,var(--pb-glow-1),transparent 65%)}
.ps-aurora--b{top:10%;right:-18%;background:radial-gradient(circle,var(--pb-glow-2),transparent 65%);animation-duration:27s;animation-delay:-6s}
.ps-aurora--c{bottom:-35%;left:30%;background:radial-gradient(circle,var(--pb-glow-3),transparent 65%);opacity:.22;animation-duration:31s;animation-delay:-12s}
@keyframes ps-aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vw,4vh,0) scale(1.12)}100%{transform:translate3d(-4vw,8vh,0) scale(.94)}}

.ps-orbit{position:absolute;inset:0;transform:translate3d(calc(var(--px,0) * -26px),calc(var(--py,0) * -18px),0);transition:transform .9s var(--ease)}
.ps-orbit__mark{position:absolute;left:var(--x);top:var(--y);width:40px;height:40px;border-radius:12px;
	background:color-mix(in srgb,var(--pb-band-surface) 70%,transparent);border:1px solid color-mix(in srgb,var(--pb-band-text) 12%,transparent);
	display:grid;place-items:center;opacity:.16;animation:ps-float-up calc(18s + var(--i) * 1.7s) ease-in-out infinite;animation-delay:calc(var(--i) * -2.3s)}
.ps-orbit__mark img{width:26px;height:26px;border-radius:7px}
.ps-orbit__mark:nth-child(odd){opacity:.12}
@keyframes ps-float-up{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}33%{transform:translate3d(14px,-38px,0) rotate(4deg)}66%{transform:translate3d(-12px,-16px,0) rotate(-2deg)}}

/* ---------- the headline: words rise in, the coloured words shimmer ---------- */
.ps-hero--live .ps-hero__title .ps-word{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(8px);
	animation:ps-word-in .9s var(--ease) forwards;animation-delay:calc(.12s + var(--w) * .07s)}
@keyframes ps-word-in{to{opacity:1;transform:none;filter:none}}
.ps-hero--live .ps-hero__title em{background:linear-gradient(100deg,var(--pb-band-accent) 0%,var(--pb-band-highlight) 40%,var(--pb-band-accent) 80%);background-size:220% 100%;
	-webkit-background-clip:text;background-clip:text;color:transparent;animation:ps-shimmer 7s linear infinite}
.ps-hero--live .ps-hero__title em .ps-word{background:inherit;background-size:inherit;-webkit-background-clip:text;background-clip:text;animation:ps-word-in .9s var(--ease) forwards,ps-shimmer 7s linear infinite;animation-delay:calc(.12s + var(--w) * .07s),0s}
@keyframes ps-shimmer{to{background-position:-220% 0}}
.ps-hero--live .ps-hero__pill,.ps-hero--live .ps-hero__lead,.ps-hero--live .ps-hero__actions,.ps-hero--live .ps-hero__points{animation:ps-rise .9s var(--ease) both}
.ps-hero--live .ps-hero__lead{animation-delay:.55s}.ps-hero--live .ps-hero__actions{animation-delay:.7s}.ps-hero--live .ps-hero__points{animation-delay:.85s}
@keyframes ps-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ps-hero--live .ps-btn--gold{position:relative;overflow:hidden}
.ps-hero--live .ps-btn--gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,color-mix(in srgb,var(--pb-band-text) 45%,transparent) 50%,transparent 70%);transform:translateX(-120%);animation:ps-sheen 4.5s ease-in-out 1.6s infinite}
@keyframes ps-sheen{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ---------- the showcase: six windows that slide, tilting with the pointer ---------- */
.ps-showcase{position:relative;animation:ps-rise 1.1s var(--ease) .3s both}
.ps-stage--slides{padding:18px 0 58px;perspective:1600px}
.ps-slides{position:relative;height:468px;transform-style:preserve-3d;transform:rotateY(calc(-7deg + var(--tx,0) * 6deg)) rotateX(calc(3deg - var(--ty,0) * 5deg));transition:transform .6s var(--ease)}
.ps-stage--slides .ps-window{position:absolute;inset:0;transform:none;display:flex;flex-direction:column}
.ps-slide{opacity:0;visibility:hidden;transform:translate3d(14%,0,-140px) rotateY(-14deg)!important;transition:opacity .8s var(--ease),transform .9s var(--ease),visibility 0s linear .9s}
.ps-slide.is-active{opacity:1;visibility:visible;transform:none!important;transition:opacity .8s var(--ease),transform .9s var(--ease),visibility 0s}
.ps-slide.is-leaving{opacity:0;visibility:visible;transform:translate3d(-14%,0,-140px) rotateY(14deg)!important}
.ps-slide .ps-window__main{flex:1;align-content:start}
.ps-slide__head{display:flex;align-items:center;gap:8px}
.ps-slide__head .ps-mark{--mark:30px;border-radius:9px}
.ps-slide__head b{margin-left:4px;font-size:13px;font-weight:700;color:var(--on-dark)}
.ps-kpis--two{grid-template-columns:repeat(2,1fr)}
.ps-slide.is-active .ps-kpi{animation:ps-rise .7s var(--ease) both}
.ps-slide.is-active .ps-kpi:nth-child(2){animation-delay:.08s}.ps-slide.is-active .ps-kpi:nth-child(3){animation-delay:.16s}
.ps-draw{stroke-dasharray:1;stroke-dashoffset:0}
.ps-slide.is-active .ps-draw{animation:ps-draw 1.6s var(--ease) .2s both}
@keyframes ps-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

.ps-bars{display:flex;align-items:flex-end;gap:10px;height:92px;margin-top:10px}
.ps-bars i{flex:1;height:var(--h);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--pb-band-accent),color-mix(in srgb,var(--pb-band-accent) 25%,transparent));transform-origin:bottom}
.ps-bars--wide{height:84px;gap:7px}
.ps-slide.is-active .ps-bars i{animation:ps-grow .9s var(--ease) both}
.ps-bars i:nth-child(2){animation-delay:.06s}.ps-bars i:nth-child(3){animation-delay:.12s}.ps-bars i:nth-child(4){animation-delay:.18s}
.ps-bars i:nth-child(5){animation-delay:.24s}.ps-bars i:nth-child(6){animation-delay:.3s}.ps-bars i:nth-child(7){animation-delay:.36s}
@keyframes ps-grow{from{transform:scaleY(0)}to{transform:none}}

.ps-funnel{display:grid;gap:7px;margin-top:10px}
.ps-funnel p{position:relative;display:flex;justify-content:space-between;width:var(--w);min-width:42%;margin:0;padding:8px 12px;border-radius:10px;font-size:12px;color:var(--on-dark);
	background:linear-gradient(90deg,color-mix(in srgb,var(--pb-glow-1) 55%,transparent),color-mix(in srgb,var(--pb-glow-2) 35%,transparent))}
.ps-funnel b{font-weight:800}
.ps-slide.is-active .ps-funnel p{animation:ps-slide-in .8s var(--ease) both}
.ps-funnel p:nth-child(2){animation-delay:.08s}.ps-funnel p:nth-child(3){animation-delay:.16s}.ps-funnel p:nth-child(4){animation-delay:.24s}
@keyframes ps-slide-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}

.ps-rings{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ps-ring{display:grid;justify-items:center;gap:4px;padding:12px 6px;border-radius:12px;background:color-mix(in srgb,var(--pb-band-text) 6%,transparent);border:1px solid color-mix(in srgb,var(--pb-band-text) 12%,transparent)}
.ps-ring svg{width:76px;height:76px;transform:rotate(-90deg)}
.ps-ring circle{fill:none;stroke:color-mix(in srgb,var(--pb-band-text) 14%,transparent);stroke-width:3.4}
.ps-ring .ps-ring__value{stroke:var(--pb-band-accent);stroke-linecap:round;stroke-dasharray:var(--v) 100}
.ps-slide.is-active .ps-ring__value{animation:ps-ring 1.4s var(--ease) both}
@keyframes ps-ring{from{stroke-dasharray:0 100}}
.ps-ring b{margin-top:-58px;margin-bottom:28px;font-size:15px;font-weight:800;color:var(--on-dark)}
.ps-ring span{font-size:11px;color:var(--on-dark-soft)}

.ps-insight{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:stretch}
.ps-donut{position:relative;display:grid;place-items:center;align-content:center;border-radius:12px;background:color-mix(in srgb,var(--pb-band-text) 6%,transparent);border:1px solid color-mix(in srgb,var(--pb-band-text) 12%,transparent)}
.ps-donut::before{content:"";width:104px;height:104px;border-radius:50%;
	background:conic-gradient(var(--pb-band-accent) 0 64%,var(--pb-band-highlight) 64% 82%,color-mix(in srgb,var(--pb-band-text) 14%,transparent) 82% 100%);
	-webkit-mask:radial-gradient(circle,transparent 58%,var(--pb-band-text) 59%);mask:radial-gradient(circle,transparent 58%,var(--pb-band-text) 59%)}
.ps-slide.is-active .ps-donut::before{animation:ps-spin-in 1.3s var(--ease) both}
@keyframes ps-spin-in{from{transform:rotate(-120deg) scale(.6);opacity:0}}
.ps-donut b{position:absolute;top:calc(50% - 18px);font-size:20px;font-weight:800;color:var(--on-dark)}
.ps-donut span{position:absolute;top:calc(50% + 6px);font-size:11px;color:var(--on-dark-soft)}

.ps-stage--slides .ps-float--a{top:-8px;right:-10px}
.ps-stage--slides .ps-float--b{bottom:-4px;left:-30px}
.ps-stage--slides .ps-float--c{bottom:-4px;right:-26px;animation-delay:-4.6s}

/* the controls: one tab per window with its progress, and a pause button */
.ps-slides-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:6px}
.ps-dot{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:5px;padding:6px 8px;border:0;border-radius:10px;background:none;
	color:var(--on-dark-soft);font:600 11.5px/1 var(--font);cursor:pointer}
.ps-dot i{display:block;width:44px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--pb-band-text) 18%,transparent);overflow:hidden}
.ps-dot i::after{content:"";display:block;height:100%;width:0;background:var(--pb-band-highlight)}
.ps-dot.is-active{color:var(--on-dark)}
.ps-dot.is-active i::after{width:100%}
.ps-showcase.is-playing .ps-dot.is-active i::after{animation:ps-progress var(--slide-ms,5600ms) linear both}
.ps-showcase.is-paused .ps-dot.is-active i::after{animation-play-state:paused}
@keyframes ps-progress{from{width:0}to{width:100%}}
.ps-dot:hover,.ps-dot:focus-visible{color:var(--on-dark);background:color-mix(in srgb,var(--pb-band-text) 8%,transparent);outline:none}
.ps-pause{display:grid;place-items:center;width:30px;height:30px;margin-left:4px;border-radius:50%;border:1px solid color-mix(in srgb,var(--pb-band-text) 22%,transparent);
	background:none;color:var(--on-dark);cursor:pointer}
.ps-pause:hover,.ps-pause:focus-visible{background:color-mix(in srgb,var(--pb-band-text) 10%,transparent);outline:none}

@media (max-width:980px){.ps-slides{height:452px}.ps-stage--slides .ps-float{display:none}}
@media (max-width:560px){.ps-slides{height:500px}.ps-insight{grid-template-columns:1fr}.ps-donut{min-height:150px}.ps-dot span{display:none}.ps-dot{padding:6px 4px}.ps-dot i{width:30px}.ps-orbit{display:none}}

@media (prefers-reduced-motion:reduce){
	.ps-aurora,.ps-orbit__mark,.ps-hero--live .ps-hero__title em,.ps-hero--live .ps-btn--gold::after{animation:none}
	.ps-hero--live .ps-hero__title .ps-word,.ps-hero--live *{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
	.ps-slides,.ps-orbit,.ps-hero--live .ps-hero__grid{transform:none!important;opacity:1!important}
}