/* pages-premium.css — premium polish + minimal motion for Status, Refill, More, Tutorial, 404.
 * Pure CSS, no layout/markup/script changes, honours prefers-reduced-motion.
 * Remove the <link> on a page to revert it. */
:root{--pp-ease:cubic-bezier(.22,.8,.24,1)}

@keyframes pp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pp-fade{from{opacity:0}to{opacity:1}}
@keyframes pp-pop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes pp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pp-glow{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes pp-line{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes pp-shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.nav{animation:pp-fade .5s var(--pp-ease) backwards}
.nav-links a{transition:background-color .2s ease,color .2s ease,transform .2s var(--pp-ease)}
.nav-links a:hover{transform:translateY(-1px)}

/* ── Hero: aurora glow + floating icon + staggered text ───────────────────── */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;left:0;right:0;margin:0 auto;top:6px;width:min(340px,86%);height:200px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(185,31,209,.20),rgba(79,46,242,.10) 55%,transparent 75%);filter:blur(10px);
  animation:pp-glow 7s ease-in-out infinite}
.hero .ss-hero-icon{animation:pp-rise .7s var(--pp-ease) .05s backwards,pp-float 6s ease-in-out .8s infinite}
.hero h1{text-wrap:balance;animation:pp-rise .7s var(--pp-ease) .15s backwards}
.hero p{text-wrap:balance;animation:pp-rise .7s var(--pp-ease) .25s backwards}

/* ── Cards: hairline accent, soft lift, entrance ──────────────────────────── */
main.container>.card,.t-card{position:relative;animation:pp-rise .7s var(--pp-ease) .32s backwards;transition:box-shadow .5s var(--pp-ease)}
main.container>.card::before{content:"";position:absolute;left:26px;right:26px;top:0;height:2px;border-radius:0 0 4px 4px;pointer-events:none;
  background:linear-gradient(90deg,#4F2EF2,#B91FD1,#FF2D78,#B91FD1,#4F2EF2);background-size:200% 100%;animation:pp-line 9s linear infinite;opacity:.9}
main.container>.card:hover,.t-card:hover{box-shadow:0 1px 2px rgba(29,14,43,.05),0 34px 70px -34px rgba(110,30,180,.42)!important}

/* ── Inputs & buttons ─────────────────────────────────────────────────────── */
.card input,.card textarea{transition:border-color .2s ease,box-shadow .25s ease,background-color .2s ease}
.card input:focus,.card textarea:focus{outline:none!important;border-color:rgba(185,31,209,.55)!important;box-shadow:0 0 0 4px rgba(185,31,209,.12)!important}
.btn:not(.ghost){position:relative;overflow:hidden;isolation:isolate;transition:transform .2s var(--pp-ease),box-shadow .3s ease,filter .3s ease}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-130%) skewX(-18deg);transition:transform .8s var(--pp-ease)}
.btn:not(.ghost):hover{transform:translateY(-2px);filter:saturate(1.08)}
.btn:not(.ghost):hover::after{transform:translateX(130%) skewX(-18deg)}
.btn:active{transform:translateY(0) scale(.985)}
.alert{animation:pp-pop .3s var(--pp-ease) backwards}

/* ── Status: result card + rows reveal when shown ─────────────────────────── */
#result>div{animation:pp-rise .55s var(--pp-ease) backwards}
#kvs>*{animation:pp-rise .5s var(--pp-ease) backwards}
#kvs>*:nth-child(1){animation-delay:.05s}#kvs>*:nth-child(2){animation-delay:.1s}#kvs>*:nth-child(3){animation-delay:.15s}
#kvs>*:nth-child(4){animation-delay:.2s}#kvs>*:nth-child(5){animation-delay:.25s}#kvs>*:nth-child(n+6){animation-delay:.3s}

/* ── Refill: dynamic panels ───────────────────────────────────────────────── */
#rf-mount>*{animation:pp-rise .55s var(--pp-ease) backwards}

/* ── More: social tiles stagger in ────────────────────────────────────────── */
.soc-grid>*{animation:pp-rise .55s var(--pp-ease) backwards;transition:transform .25s var(--pp-ease),box-shadow .3s ease}
.soc-grid>*:nth-child(1){animation-delay:.38s}.soc-grid>*:nth-child(2){animation-delay:.44s}.soc-grid>*:nth-child(3){animation-delay:.5s}
.soc-grid>*:nth-child(4){animation-delay:.56s}.soc-grid>*:nth-child(5){animation-delay:.62s}.soc-grid>*:nth-child(n+6){animation-delay:.68s}

/* ── Tutorial: language panels fade in on switch, tabs + policy cards ─────── */
.lang-tab{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .2s var(--pp-ease),box-shadow .3s ease}
.lang-tab:hover{transform:translateY(-1px)}
.lang-tab:active{transform:scale(.97)}
.policy-card{transition:transform .25s var(--pp-ease),box-shadow .3s ease}
.policy-card:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(29,14,43,.04),0 18px 34px -18px rgba(110,30,180,.45)}
@supports (animation-timeline:view()){
  @keyframes pp-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .policy-card,.info-block{animation:pp-reveal linear backwards;animation-timeline:view();animation-range:entry 0% entry 40%}
}

/* ── Footer: link underline sweep ─────────────────────────────────────────── */
.footer .ss-foot nav a{position:relative;transition:color .2s ease}
.footer .ss-foot nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,#B91FD1,#FF2D78);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--pp-ease)}
.footer .ss-foot nav a:hover::after{transform:scaleX(1)}
.footer .ss-foot img{transition:transform .5s var(--pp-ease)}
.footer .ss-foot img:hover{transform:rotate(-6deg) scale(1.06)}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.nf{position:relative;isolation:isolate}
.nf::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:min(460px,92vw);height:340px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(185,31,209,.22),rgba(255,45,120,.10) 55%,transparent 76%);filter:blur(12px);animation:pp-glow 7s ease-in-out infinite}
.nf .ss-404-icon{animation:pp-rise .7s var(--pp-ease) backwards,pp-float 6s ease-in-out .8s infinite}
.nf h1{background:linear-gradient(90deg,#4F2EF2,#B91FD1,#FF2D78,#B91FD1,#4F2EF2);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
  animation:pp-rise .7s var(--pp-ease) .12s backwards,pp-shimmer 8s linear 1s infinite}
.nf p{animation:pp-rise .7s var(--pp-ease) .22s backwards}
.nf .btn{animation:pp-rise .7s var(--pp-ease) .32s backwards}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}