/* ============================================================
   晴空放送 · atmosphere — sky, sakura, characters, shards
   ============================================================ */

/* ─────────── the sky behind everything ─────────── */
.sky{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(70% 46% at 84% -10%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 46% at 8% 2%, rgba(255,190,216,.42) 0%, rgba(255,190,216,0) 62%),
    linear-gradient(180deg,
      var(--sky-zenith) 0%,
      var(--sky-mid) 34%,
      #eef9ff 58%,
      var(--sky-haze) 100%);
}
/* a low sun-flare, top right, like an OP lens flare */
.sky::after{
  content:''; position:absolute; top:-16vh; right:-4vw;
  width:40vw; height:40vw; border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,222,.7) 0%,rgba(255,238,200,.26) 32%,rgba(255,238,200,0) 68%);
  filter:blur(6px);
  animation:flare 14s ease-in-out infinite;
}
@keyframes flare{ 0%,100%{opacity:.75;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} }

/* drifting clouds — three lanes, different speeds */
.clouds{ position:fixed; inset:0 -20vw; z-index:-1; pointer-events:none; overflow:hidden; }
.cloud{
  position:absolute;
  background:radial-gradient(closest-side,rgba(255,255,255,.96),rgba(255,255,255,.62) 62%,rgba(255,255,255,0));
  filter:blur(.5px);
  animation:drift linear infinite;
}
.cloud::before,.cloud::after{
  content:''; position:absolute; border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));
}
.cloud::before{ width:64%; height:150%; left:6%;  top:-52%; }
.cloud::after { width:48%; height:126%; right:8%; top:-32%; }
.cloud--a{ width:340px; height:74px;  top:9vh;  animation-duration:96s;  opacity:.95 }
.cloud--b{ width:230px; height:52px;  top:26vh; animation-duration:132s; opacity:.7  }
.cloud--c{ width:420px; height:88px;  top:52vh; animation-duration:168s; opacity:.5  }
@keyframes drift{ from{ transform:translateX(-42vw) } to{ transform:translateX(122vw) } }

/* the weather canvas covers the whole document: petals by day, stars by night */
#sky-canvas{ position:fixed; inset:0; z-index:2; pointer-events:none; }

/* paper grain so nothing feels flatly digital */
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* ─────────── characters ─────────── */
.chara-layer{
  position:absolute; inset:0; z-index:3;
  pointer-events:none; overflow:visible;
}
.chara-layer--fixed{ position:fixed; }

.chara{
  position:absolute;
  left:var(--x,0); top:var(--y,0);
  width:max-content;
  pointer-events:none;
  --h:320px;
}
.chara__btn{
  display:block; pointer-events:auto; cursor:pointer;
  transform:scaleX(var(--flip,1));
  animation:bob var(--dur,6s) ease-in-out var(--delay,0s) infinite;
  transition:filter .3s;
  -webkit-tap-highlight-color:transparent;
}
.chara__btn:hover{ filter:brightness(1.05) saturate(1.08); }
.chara::after{
  content:''; position:absolute; left:50%; bottom:-5px; translate:-50% 0;
  width:70%; height:13px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(126,158,204,.17),rgba(126,158,204,0) 76%);
  pointer-events:none;
}
.chara__img{
  height:var(--h); width:auto;
  filter:drop-shadow(0 16px 18px rgba(96,128,180,.26));
  user-select:none; -webkit-user-drag:none;
}
@keyframes bob{
  0%,100%{ transform:scaleX(var(--flip,1)) translateY(0) rotate(0deg) }
  50%    { transform:scaleX(var(--flip,1)) translateY(-9px) rotate(.5deg) }
}
.chara.is-poked .chara__btn{ animation:hop .55s cubic-bezier(.3,1.5,.5,1) 1; }
@keyframes hop{
  0%  { transform:scaleX(var(--flip,1)) translateY(0) }
  35% { transform:scaleX(var(--flip,1)) translateY(-24px) rotate(-3deg) }
  60% { transform:scaleX(var(--flip,1)) translateY(0) scale(1.02,.97) }
  100%{ transform:scaleX(var(--flip,1)) translateY(0) }
}

/* name plate under a character, on hover only */
.chara__tag{
  position:absolute; left:50%; bottom:-4px; translate:-50% 0;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em;
  padding:.2em .6em; border-radius:999px;
  background:rgba(255,255,255,.85); color:var(--ink-2);
  border:1px solid var(--line);
  opacity:0; transition:opacity .25s, translate .25s;
  pointer-events:none; white-space:nowrap;
}
.chara__btn:hover + .chara__tag{ opacity:1; translate:-50% -8px; }

/* ─────────── speech bubbles ─────────── */
.bubble{
  position:absolute; z-index:6;
  left:var(--bx,50%); top:var(--by,-10px);
  translate:-50% -100%;
  max-width:min(19rem,64vw);
  padding:.72em 1em .78em;
  border-radius:18px 18px 18px 6px;
  background:rgba(255,255,255,.96);
  border:1.5px solid var(--line-warm);
  box-shadow:var(--sh-2);
  font-family:var(--f-hand);
  font-size:.9rem; line-height:1.65; color:var(--ink);
  pointer-events:none;
  opacity:0; transform-origin:20% 100%;
  animation:pop .42s cubic-bezier(.2,1.6,.4,1) forwards;
}
.bubble--right{ border-radius:18px 18px 6px 18px; transform-origin:80% 100%; }
.bubble::after{
  content:''; position:absolute; bottom:-8px; left:22px;
  width:13px; height:13px; rotate:45deg;
  background:rgba(255,255,255,.96);
  border-right:1.5px solid var(--line-warm);
  border-bottom:1.5px solid var(--line-warm);
}
.bubble--right::after{ left:auto; right:22px; }
.bubble b{ color:var(--sakura); font-weight:700; }
.bubble.is-out{ animation:popout .3s ease forwards; }
@keyframes pop{
  0%  { opacity:0; scale:.6; translate:-50% -84% }
  70% { opacity:1; scale:1.03 }
  100%{ opacity:1; scale:1; translate:-50% -100% }
}
@keyframes popout{ to{ opacity:0; scale:.86; translate:-50% -110% } }

/* ─────────── shards: the hidden collectibles ─────────── */
.shard{
  position:absolute; z-index:5;
  width:34px; height:34px;
  display:grid; place-items:center;
  pointer-events:auto; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.shard::before{
  content:''; width:16px; height:16px;
  background:conic-gradient(from 45deg,var(--lemon),#fff 25%,var(--sakura-mid) 50%,#fff 75%,var(--mizu-mid));
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 7px rgba(255,213,120,.95));
  animation:glint var(--gd,4.5s) ease-in-out var(--gdelay,0s) infinite;
}
.shard:hover::before{ animation-play-state:paused; opacity:1; scale:1.6 }
@keyframes glint{
  0%,100%{ opacity:.2;  transform:rotate(0deg)   scale(.78) }
  46%    { opacity:.3;  transform:rotate(90deg)  scale(.9)  }
  52%    { opacity:1;   transform:rotate(110deg) scale(1.35) }
  62%    { opacity:.28; transform:rotate(140deg) scale(.85) }
}
.shard.is-taken{ display:none; }

/* sparkle burst on pickup */
.burst{ position:fixed; z-index:70; width:0; height:0; pointer-events:none; }
.burst i{
  position:absolute; left:0; top:0; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle,#fff,var(--lemon) 45%,rgba(255,190,120,0));
  animation:spark .78s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes spark{
  0%  { opacity:1; transform:translate(0,0) scale(1) }
  100%{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(.3) }
}

/* the shard that flies into the counter */
.flyer{
  position:fixed; z-index:71; width:18px; height:18px; pointer-events:none;
  background:conic-gradient(from 45deg,var(--lemon),#fff,var(--sakura-mid),#fff,var(--mizu-mid));
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 9px rgba(255,213,120,.9));
  transition:left .85s cubic-bezier(.5,-.25,.6,1), top .85s cubic-bezier(.5,-.25,.6,1),
             scale .85s ease-in, opacity .3s .6s;
}

/* ─────────── unlock ceremony ─────────── */
.rite{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 46%,rgba(255,255,255,.95),rgba(255,231,241,.9) 45%,rgba(210,238,255,.88));
  animation:fadein .5s ease;
  text-align:center; padding:var(--gut);
}
.rite__card{
  background:var(--paper); border-radius:var(--r-xl);
  border:1.5px solid var(--line-warm);
  box-shadow:var(--sh-3),var(--sh-glow);
  padding:clamp(26px,5vw,50px);
  max-width:32rem;
  animation:pop-card .7s cubic-bezier(.2,1.5,.4,1) both;
}
.rite__star{
  width:76px; height:76px; margin:0 auto 16px;
  background:conic-gradient(from 45deg,var(--lemon),#fff 25%,var(--sakura-mid) 50%,#fff 75%,var(--mizu-mid));
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 22px rgba(255,205,120,.85));
  animation:spin 9s linear infinite;
}
@keyframes spin{ to{ rotate:360deg } }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
@keyframes pop-card{ from{ opacity:0; scale:.86; translate:0 18px } to{ opacity:1; scale:1; translate:0 0 } }

/* ─────────── toasts ─────────── */
.toasts{
  position:fixed; z-index:80; left:50%; translate:-50% 0; bottom:26px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none;
}
.toast{
  display:flex; align-items:center; gap:.6em;
  padding:.62em 1.15em;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:1.5px solid var(--line-warm);
  box-shadow:var(--sh-2);
  font-family:var(--f-round); font-weight:700; font-size:.9rem;
  color:var(--ink);
  animation:toast-in .42s cubic-bezier(.2,1.5,.4,1), toast-out .4s ease 3.1s forwards;
}
.toast em{ font-family:var(--f-mono); font-style:normal; color:var(--sakura); }
@keyframes toast-in{ from{ opacity:0; translate:0 16px; scale:.9 } }
@keyframes toast-out{ to{ opacity:0; translate:0 -10px } }

@media (max-width:900px){
  .chara{ --h:150px; }
  .chara[data-mobile="hide"]{ display:none; }
  .bubble{ font-size:.82rem; }
}

/* ─────────── the corridor band where the cast stands ─────────── */
.parade{
  position:relative; z-index:4;
  height:clamp(160px,23vw,268px);
  margin-top:clamp(26px,4vw,52px);
}
.parade::before{
  content:''; position:absolute; left:1%; right:1%; bottom:2%; height:38%;
  border-radius:50%;
  background:radial-gradient(58% 100% at 50% 100%,rgba(255,236,246,.95),rgba(255,236,246,0) 72%);
}
.parade::after{
  content:''; position:absolute; left:0; right:0; bottom:13%; height:1.5px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,143,180,.45) 18%,
             rgba(70,184,239,.4) 78%,rgba(255,255,255,0));
}
/* a shorter ledge, for pages that only need someone perched at the end */
.parade--sm{ height:clamp(112px,16vw,178px) }
@media (max-width:900px){ .parade{ height:clamp(130px,30vw,180px) } .parade--sm{ height:clamp(96px,22vw,130px) } }

/* the last few pixels of a cutout are where stray floor pixels hide —
   dissolve them so everyone stands on the page instead of on a white smudge */
.chara__img{
  -webkit-mask-image:linear-gradient(to top,transparent 0,rgba(0,0,0,.55) 2%,#000 4.5%);
          mask-image:linear-gradient(to top,transparent 0,rgba(0,0,0,.55) 2%,#000 4.5%);
}