/* ============================================================
   JOVANA MEDICAL — Aionios mode (additive overlay styles)
   Loaded AFTER styles-landing.css so any shared root vars
   defined here only extend, never override, the cyber-neon
   palette. All selectors are scoped to .nav-aionios* /
   .brush-* / .aionios-* / .enter-* / .decor* — no collision
   with existing landing classes.
   ============================================================ */
:root{
  --ff-doodle:"Fredoka",system-ui,sans-serif;
}

/* ============== AIONIOS TOGGLE — small nav pill ============== */
@keyframes aionios-spin{to{transform:rotate(360deg)}}

.nav-aionios{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 14px 8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.03);
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#f4f3ff;cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s,box-shadow .2s;
  margin-right:12px;
}
.nav-aionios::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from 0deg,
    #ff6ec7,#ffa861,#ffe87a,#7eff8e,#5be7ff,#7aa8ff,#c97aff,#ff6ec7);
  opacity:0;transition:opacity .25s;
}
.nav-aionios::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;z-index:-1;
  background:rgba(10,10,35,.92);
}
.nav-aionios:hover{
  transform:translateY(-1px);
  border-color:transparent;
  box-shadow:0 6px 24px rgba(154,107,255,.4);
}
.nav-aionios:hover::before{opacity:1}
.nav-aionios-icon{
  width:14px;height:14px;border-radius:50%;
  background:conic-gradient(from 0deg,
    #ff6ec7,#ffa861,#ffe87a,#7eff8e,#5be7ff,#7aa8ff,#c97aff,#ff6ec7);
  animation:aionios-spin 4s linear infinite;
  box-shadow:0 0 6px rgba(255,255,255,.35);
}
.nav-aionios-label{display:inline-block;line-height:1}

/* ============== BRUSH TRANSITION — layered curtain ==============
   Three z-layers (bottom → top):
     1. .brush-curtain  inky backdrop + painted stripes
                        (fades in fast, peels off as one)
     2. .brush-flash    radial bloom at the swap moment
     3. .decor-layer    sparkles that linger above the curtain
   ============================================================ */
.brush-overlay{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  overflow:hidden;
}

/* ---- CURTAIN ---- */
.brush-curtain{
  position:absolute;inset:-2px;z-index:1;
  /* Wavy, ribbon-like bottom edge — static polygon (no clip-path
     interpolation). Top + sides reach past the viewport so the
     curtain has no visible top seam while painting in. */
  clip-path:polygon(
    -2% -2%, 102% -2%, 102% 92%,
    97% 96%, 93% 99%, 88% 97%, 84% 100%, 80% 96%, 75% 99%,
    71% 95%, 66% 98%, 62% 96%, 57% 100%, 53% 96%, 48% 99%,
    44% 95%, 39% 98%, 35% 96%, 30% 99%, 26% 95%, 21% 98%,
    17% 96%, 12% 99%, 7% 96%, 3% 99%, -2% 96%);
  opacity:0;
  transform:translateY(0);
  animation:
    curtain-in .18s ease-out forwards,
    curtain-out 1.2s cubic-bezier(.6,.04,.2,1) 1.55s forwards;
  will-change:opacity,transform;
}
@keyframes curtain-in{
  0%  {opacity:0;transform:translateY(-2%)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes curtain-out{
  0%  {transform:translateY(0) rotate(0)}
  100%{transform:translateY(118%) rotate(-1.5deg)}
}

/* Inky base layer — a painterly wash that mediates between V1's dark
   neon palette and V2's pastel sky. NOT pure black; bruised
   purple-navy with subtle radial bloom. */
.brush-curtain-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 28% 18%, rgba(255,138,200,.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 78% 78%, rgba(122,168,255,.22), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 50%, #2a1556 0%, #150836 55%, #0a041e 100%);
}

/* Painted stripes — bright rainbow ribbons over the inky base.
   Decorative now (the inky bg is the actual coverage). */
.brush-stripes{
  position:absolute;inset:0;
  mix-blend-mode:screen;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.18));
}
.stripe{
  position:absolute;top:-1%;width:12.7vw;height:102%;
  transform:scaleY(0);
  animation:stripe-paint .7s cubic-bezier(.5,0,.25,1) forwards;
  will-change:transform;
}
.stripe:nth-child(odd) {transform-origin:top center}
.stripe:nth-child(even){transform-origin:bottom center}
@keyframes stripe-paint{
  0%  {transform:scaleY(0)}
  70% {transform:scaleY(1.02)}   /* tiny overshoot — wet paint settle */
  100%{transform:scaleY(1)}
}
.stripe-svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- FLASH ---- */
.brush-flash{
  position:absolute;inset:0;z-index:2;
  background:radial-gradient(circle at 50% 48%,
    rgba(255,255,255,.55) 0%, rgba(255,232,255,.18) 25%, transparent 55%);
  opacity:0;
  animation:flash-pulse 1.1s cubic-bezier(.4,0,.6,1) .85s forwards;
  mix-blend-mode:screen;
  pointer-events:none;
}
@keyframes flash-pulse{
  0%  {opacity:0; transform:scale(.6)}
  40% {opacity:1; transform:scale(1)}
  100%{opacity:0; transform:scale(1.4)}
}

/* ---- DECOR ---- */
.decor-layer{position:absolute;inset:0;z-index:3;pointer-events:none}
.decor{
  position:absolute;display:inline-flex;
  transform:translate(-50%,-50%) scale(0);
  transform-origin:center;
  opacity:0;
  animation:decor-pop 1.9s cubic-bezier(.34,1.56,.64,1) forwards;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  will-change:transform,opacity;
}
.decor-svg{width:100%;height:100%;display:block}
@keyframes decor-pop{
  0%  {opacity:0; transform:translate(-50%,-50%) scale(0)   rotate(-25deg)}
  18% {opacity:1; transform:translate(-50%,-50%) scale(1.25) rotate(8deg)}
  35% {opacity:1; transform:translate(-50%,-50%) scale(1)   rotate(0)}
  75% {opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(-4deg)}
  100%{opacity:0; transform:translate(-50%,-58%) scale(.6)  rotate(6deg)}
}

/* ============== V2 — AIONIOS DREAMLAND ============== */
.aionios{
  position:fixed;inset:0;z-index:1;overflow:hidden;
  /* Static gradient fills the letterbox in colors matching the
     dreamland image (sky → lavender → pink). Zero GPU cost. */
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%,
      rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg,
      #a3cef0 0%,
      #c2c1ea 40%,
      #d8b8de 70%,
      #e8b8d0 100%);
}
.aionios-img{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}

.aionios-back{
  position:absolute;top:24px;left:24px;z-index:6;
  padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
  backdrop-filter:blur(12px) saturate(160%);
  border:1px solid rgba(255,255,255,.4);
  font-family:var(--ff-doodle);font-weight:500;font-size:13px;color:#fff;
  letter-spacing:.06em;
  white-space:nowrap;cursor:pointer;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  transition:transform .2s,background .2s,border-color .2s;
}
.aionios-back:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.32);
  border-color:rgba(255,255,255,.65);
}

/* Centered glass button — single line, no descriptions, no halo.
   Vertically nudged into the gap between the upper-right creature and
   the bottom winged sheep so the button doesn't clip either one. */
.enter-wrap{
  position:absolute;left:50%;top:66%;z-index:5;
  transform:translate(-50%,-50%);
  animation:enterFloat 5s ease-in-out infinite;
  transition:opacity .25s,transform .25s;
}
.enter-wrap--pressed{
  opacity:0;
  transform:translate(-50%,-50%) scale(.95) !important;
}
@keyframes enterFloat{
  0%,100%{transform:translate(-50%,-50%)}
  50%   {transform:translate(-50%,calc(-50% - 8px))}
}
.enter-btn{
  display:inline-block;
  padding:16px 48px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  backdrop-filter:blur(10px) saturate(160%);
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
  font-family:var(--ff-doodle);font-weight:500;
  font-size:22px;letter-spacing:.04em;
  cursor:pointer;
  text-shadow:0 2px 10px rgba(0,0,0,.45),0 0 24px rgba(255,255,255,.25);
  box-shadow:
    0 14px 40px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.08);
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
  white-space:nowrap;
}
.enter-btn:hover{
  background:rgba(255,255,255,.36);
  border-color:rgba(255,255,255,.85);
  transform:scale(1.04);
  box-shadow:
    0 18px 50px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 60px rgba(255,255,255,.25);
}
.enter-btn:active{transform:scale(.98)}

@media(max-width:980px){
  .nav-aionios{padding:7px 12px 7px 9px;font-size:10px;letter-spacing:.15em;margin-right:8px}
  .nav-aionios-icon{width:12px;height:12px}
  .enter-btn{font-size:17px;padding:14px 32px}
  .aionios-back{top:16px;left:16px;font-size:12px;padding:8px 14px}
}

/* ============== WARP — V2 → dashboard transition ==============
   Smooths the click on "Enter the Aionios": a pastel sky-bloom
   curtain fades in from the button origin (~50% / 66%), reaches
   full coverage, then bridges navigation. The destination page
   paints the same curtain inline in <head> via sessionStorage,
   then peels it off once auth + content are ready. The two halves
   share the same gradient so the user sees a single continuous
   wash, not a flash-of-loading.
   The fallback definition is inlined into dashboard.html so the
   curtain paints BEFORE this stylesheet finishes loading; the
   version here is the canonical one used on the landing side and
   for cached repeat visits. */
.aionios-warp{
  position:fixed;inset:0;z-index:10000;pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(ellipse 110% 80% at 50% 60%,
      rgba(255,255,255,.62) 0%,
      rgba(255,232,242,.25) 30%,
      rgba(216,184,222,.0) 65%),
    linear-gradient(180deg,
      #a3cef0 0%,
      #c2c1ea 40%,
      #d8b8de 70%,
      #e8b8d0 100%);
  opacity:0;
  transform-origin:50% 66%;
}
.aionios-warp::after{
  /* Drifting sparkle veil — adds magic without GPU cost. */
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle 1.6px at 12% 18%, rgba(255,255,255,.95) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 78% 24%, rgba(255,255,255,.85) 0%, transparent 100%),
    radial-gradient(circle 2.0px at 32% 78%, rgba(255,255,255,.90) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 86% 64%, rgba(255,255,255,.80) 0%, transparent 100%),
    radial-gradient(circle 1.2px at 50% 12%, rgba(255,255,255,.85) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 22% 52%, rgba(255,255,255,.75) 0%, transparent 100%),
    radial-gradient(circle 1.6px at 68% 84%, rgba(255,255,255,.85) 0%, transparent 100%),
    radial-gradient(circle 1.0px at 8%  72%, rgba(255,255,255,.70) 0%, transparent 100%),
    radial-gradient(circle 1.3px at 92% 38%, rgba(255,255,255,.80) 0%, transparent 100%);
  animation:warpSparkle 2.4s ease-in-out infinite;
  opacity:.7;
  pointer-events:none;
}
/* Landing-side: fade in from the button origin. */
.aionios-warp.is-entering{
  animation:warpEnter 520ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes warpEnter{
  0%   {opacity:0; transform:scale(.55); filter:blur(14px)}
  55%  {opacity:1}
  100% {opacity:1; transform:scale(1);   filter:blur(0)}
}
/* Dashboard-side: starts fully covered (no animation), then peels. */
.aionios-warp.is-holding{
  opacity:1;
  transform:scale(1);
  animation:warpHold 2.2s ease-in-out infinite;
}
@keyframes warpHold{
  0%,100%{filter:brightness(1)   saturate(1)}
  50%   {filter:brightness(1.04) saturate(1.06)}
}
.aionios-warp.is-revealing{
  animation:warpReveal 950ms cubic-bezier(.55,.06,.2,1) forwards;
}
@keyframes warpReveal{
  0%   {opacity:1; transform:scale(1);    filter:blur(0)}
  40%  {opacity:1; transform:scale(1.08); filter:blur(3px)}
  100% {opacity:0; transform:scale(1.22); filter:blur(10px)}
}
@keyframes warpSparkle{
  0%,100%{opacity:.55}
  50%   {opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .aionios-warp.is-entering,
  .aionios-warp.is-revealing{
    animation-duration:200ms;
    filter:none !important;
  }
  .aionios-warp::after{animation:none;opacity:.5}
}

/* ============== WARP PROGRESS — rainbow loader ==============
   Lives inside .aionios-warp (landing) and .warp-curtain
   (dashboard, inline-defined in dashboard.html). Reuses the same
   .warp-progress* class names so the two halves of the transition
   present an identical loading affordance. The fill is a wide
   rainbow gradient with a continuous background-position drift so
   the colour band keeps moving even when the percentage is held;
   the percentage above the bar is updated via rAF in JS, with no
   CSS transition on width so JS-driven motion stays exact. */
.warp-progress{
  position:absolute;left:50%;top:78%;
  transform:translate(-50%,-50%);
  z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:"Fredoka",system-ui,sans-serif;
  color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.22),0 0 18px rgba(255,255,255,.22);
  pointer-events:none;user-select:none;
  opacity:0;
  animation:warpProgressIn 380ms cubic-bezier(.2,.8,.2,1) forwards;
}
.warp-progress-label{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;
  opacity:.88;
}
.warp-progress-pct{
  font-size:22px;letter-spacing:.04em;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.warp-progress-bar{
  width:min(320px,60vw);height:8px;
  background:rgba(255,255,255,.32);
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
}
.warp-progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,
    #ff6fa8 0%, #ffa15a 14%, #ffd84a 28%,
    #6fd97c 42%, #5fc4ff 56%, #7a8aff 70%,
    #b87aff 84%, #ff6fa8 100%);
  background-size:200% 100%;
  animation:warpRainbow 2.6s linear infinite;
  border-radius:inherit;
  box-shadow:0 0 12px rgba(255,255,255,.55),0 0 24px rgba(255,200,240,.35);
}
@keyframes warpRainbow{
  0%   {background-position:0%   0%}
  100% {background-position:200% 0%}
}
@keyframes warpProgressIn{
  0%   {opacity:0; transform:translate(-50%, calc(-50% + 8px))}
  100% {opacity:1; transform:translate(-50%, -50%)}
}
.aionios-warp.is-revealing .warp-progress,
.warp-curtain.is-revealing .warp-progress{
  animation:warpProgressOut 380ms ease-out forwards;
}
@keyframes warpProgressOut{
  0%   {opacity:1; transform:translate(-50%, -50%)}
  100% {opacity:0; transform:translate(-50%, calc(-50% - 12px))}
}
@media (prefers-reduced-motion: reduce){
  .warp-progress{animation-duration:120ms}
  .warp-progress-fill{animation:none;background-position:0% 0%}
}