/*
Theme Name: AstaRapida Coming Soon
Theme URI: https://www.astarapida.com
Author: AstaRapida
Description: Pagina singola "sito in costruzione" animata per AstaRapida.com. Nessun plugin richiesto.
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: astarapida
*/

:root{
  --navy:#00366a; --navy-2:#0b4a86;
  --teal:#17b8c4; --teal-soft:#86cdc8; --teal-pale:#e6f6f7;
  --gold:#f9bf3b; --gold-d:#e09512;
  --ink:#0d2540; --mute:#5b6f85;
  --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0; min-height:100vh; color:var(--ink); overflow-x:clip;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  background:
    radial-gradient(900px 500px at 12% 8%, rgba(23,184,196,.16), transparent 60%),
    radial-gradient(800px 520px at 92% 30%, rgba(249,191,59,.18), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(0,54,106,.12), transparent 60%),
    #fff;
}
.screen-reader-text{position:absolute;left:-9999px}

/* ---- nastro di cantiere ---- */
.tape{
  position:fixed; left:0; right:0; height:16px; z-index:5;
  background:repeating-linear-gradient(-45deg,var(--gold) 0 18px,var(--navy) 18px 36px);
  background-size:51px 100%; animation:tape 2.2s linear infinite;
  box-shadow:0 2px 10px rgba(0,54,106,.25);
}
.tape.top{top:0}.tape.bottom{bottom:0;animation-direction:reverse}
@keyframes tape{to{background-position:51px 0}}

/* ---- monete che cadono ---- */
.coins{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.coin{
  position:absolute; top:-60px; width:var(--s); height:var(--s); border-radius:50%;
  display:grid; place-items:center; font-weight:800; font-size:calc(var(--s)*.55);
  color:#8a5a00; opacity:.0;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold) 55%,var(--gold-d));
  box-shadow:inset 0 0 0 3px rgba(224,149,18,.55), 0 4px 10px rgba(0,54,106,.15);
  animation:fall var(--d) linear var(--w) infinite;
}
@keyframes fall{
  0%{transform:translate3d(0,-60px,0) rotateY(0);opacity:0}
  8%{opacity:.85}
  50%{transform:translate3d(var(--x),55vh,0) rotateY(540deg)}
  92%{opacity:.85}
  100%{transform:translate3d(calc(var(--x)*-.5),112vh,0) rotateY(1080deg);opacity:0}
}

/* ---- layout ---- */
.wrap{
  position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:56px 20px 64px;
}

/* logo */
.logo-btn{
  display:block; position:relative;
  width:min(380px,72vw,40vh); min-width:230px; aspect-ratio:1/1;
  animation:enter .9s cubic-bezier(.2,.9,.3,1.2) both, float 5s ease-in-out .9s infinite;
}
.logo-btn img{width:100%;height:100%;display:block;
  filter:drop-shadow(0 18px 24px rgba(0,54,106,.18))}
@keyframes enter{from{opacity:0;transform:translateY(40px) scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-14px) rotate(.8deg)}}

/* testi */
.badge{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  background:var(--navy); color:#fff; font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; padding:9px 18px; border-radius:99px;
  opacity:0; animation:fadeup .8s ease .5s forwards;
}
.badge i{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(249,191,59,.8)}60%{box-shadow:0 0 0 9px rgba(249,191,59,0)}}
h1{
  margin:18px 0 10px; font-size:clamp(30px,6vw,56px); line-height:1.08; color:var(--navy);
  letter-spacing:-.02em; opacity:0; animation:fadeup .8s ease .7s forwards;
}
h1 em{font-style:normal;color:var(--teal);position:relative;white-space:nowrap}
h1 em::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:8px;border-radius:6px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;animation:underline .8s ease 1.5s forwards;z-index:-1}
@keyframes underline{to{transform:scaleX(1)}}
.lead{max-width:620px;margin:0 auto;font-size:clamp(16px,2.2vw,19px);color:var(--mute);
  opacity:0;animation:fadeup .8s ease .9s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* barra lavori */
.build{width:min(520px,100%);margin:30px auto 0;opacity:0;animation:fadeup .8s ease 1.1s forwards}
.build-top{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.bar{height:20px;border-radius:99px;background:#fff;border:2px solid var(--navy);overflow:hidden;position:relative;
  box-shadow:0 4px 14px rgba(0,54,106,.12)}
.bar b{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:repeating-linear-gradient(-45deg,var(--gold) 0 14px,#ffd466 14px 28px);
  background-size:40px 100%;
  animation:fill 2.4s cubic-bezier(.3,.8,.2,1) 1.4s forwards, stripes 1s linear infinite;
}
@keyframes fill{to{width:var(--p,80%)}}
@keyframes stripes{to{background-position:40px 0}}

/* parole chiave */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px;
  opacity:0;animation:fadeup .8s ease 1.3s forwards}
.chip{background:#fff;border:2px solid var(--teal);color:var(--navy);font-weight:700;font-size:14px;
  padding:8px 16px;border-radius:99px;transition:transform .2s,background .2s}
.chip:hover{transform:translateY(-3px) rotate(-1.5deg);background:var(--teal-pale)}

.foot{margin-top:40px;font-size:12.5px;color:var(--mute);opacity:0;animation:fadeup .8s ease 1.8s forwards}
.foot a{color:var(--navy);font-weight:700;text-decoration:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
  .coins{display:none}
  .bar b{width:var(--p,80%)}
  .badge,h1,.lead,.build,.chips,.foot{opacity:1}
}