/* Page transition: a lavender ink wash that lifts over the page while Vidia
   swims through it. Purely decorative — everything below is skipped when the
   visitor prefers reduced motion (see PageTransition.tsx). */
.page-transition{position:fixed;inset:0;z-index:999;pointer-events:none;visibility:hidden}
.page-transition[data-state="in"],
.page-transition[data-state="out"]{visibility:visible;pointer-events:auto}

.pt-wash{position:absolute;inset:0;transform:translateY(101%);
  background:linear-gradient(160deg,#efe7ff 0%,#d9c9fb 42%,#b79bf0 100%)}
.pt-wash::after{content:"";position:absolute;left:0;right:0;top:-1px;height:120px;transform:translateY(-100%);
  background:radial-gradient(120% 100% at 50% 100%,#efe7ff 0%,rgba(239,231,255,.75) 45%,rgba(239,231,255,0) 72%)}

.pt-mascot{position:absolute;left:50%;bottom:0;width:min(230px,36vw);
  transform:translate(-50%,140%) rotate(-6deg);opacity:0;filter:drop-shadow(0 26px 42px rgba(58,32,110,.34))}
.pt-mascot img{width:100%;height:auto;display:block}

.pt-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(14px);
  text-align:center;opacity:0;color:#3a206e;padding:0 24px;width:min(560px,88vw)}
.pt-label small{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#6c4bab;margin-bottom:10px}
.pt-label strong{display:block;font-size:clamp(30px,5.2vw,50px);line-height:1.04;
  letter-spacing:-.02em;font-weight:700}

.pt-bubble{position:absolute;bottom:-40px;border-radius:50%;opacity:0;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.92),rgba(255,255,255,.28) 62%,rgba(255,255,255,0) 70%)}

/* Cover: the wash rises, Vidia rides up with it. */
.page-transition[data-state="in"] .pt-wash{animation:pt-wash-in .26s cubic-bezier(.4,0,.2,1) forwards}
.page-transition[data-state="in"] .pt-mascot{animation:pt-mascot-in .3s cubic-bezier(.22,1,.36,1) forwards}
.page-transition[data-state="in"] .pt-bubble{animation:pt-bubble-up .62s ease-out forwards}
.page-transition[data-state="in"] .pt-label{animation:pt-label-in .34s cubic-bezier(.22,1,.36,1) .08s forwards}

/* Reveal: the wash keeps travelling upward and Vidia trails off with it. */
.page-transition[data-state="out"] .pt-wash{transform:translateY(0);
  animation:pt-wash-out .32s cubic-bezier(.4,0,.2,1) forwards}
.page-transition[data-state="out"] .pt-mascot{opacity:1;transform:translate(-50%,8%) rotate(0deg);
  animation:pt-mascot-out .28s cubic-bezier(.4,0,.2,1) forwards}
.page-transition[data-state="out"] .pt-label{opacity:1;transform:translate(-50%,-50%);
  animation:pt-label-out .24s cubic-bezier(.4,0,.2,1) forwards}

@keyframes pt-wash-in{from{transform:translateY(101%)}to{transform:translateY(0)}}
@keyframes pt-wash-out{from{transform:translateY(0)}to{transform:translateY(-101%)}}
@keyframes pt-mascot-in{
  0%{opacity:0;transform:translate(-50%,140%) rotate(-6deg)}
  55%{opacity:1}
  100%{opacity:1;transform:translate(-50%,8%) rotate(2deg)}
}
@keyframes pt-mascot-out{
  0%{opacity:1;transform:translate(-50%,8%) rotate(2deg)}
  100%{opacity:0;transform:translate(-50%,-150%) rotate(-5deg)}
}
@keyframes pt-label-in{
  from{opacity:0;transform:translate(-50%,-50%) translateY(14px)}
  to{opacity:1;transform:translate(-50%,-50%)}
}
@keyframes pt-label-out{
  from{opacity:1;transform:translate(-50%,-50%)}
  to{opacity:0;transform:translate(-50%,-50%) translateY(-16px)}
}
@keyframes pt-bubble-up{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  18%{opacity:.85}
  100%{opacity:0;transform:translateY(-64vh) scale(1.1)}
}

@media(max-width:620px){.pt-mascot{width:46vw}.pt-label{top:44%}}
@media(prefers-reduced-motion:reduce){.page-transition{display:none}}