/* =====================================================================
   CURATIO — Abertura animada do logo
   Ritmo suave (curvas longas, sem quiques bruscos), fundo azul-noite da marca,
   traço branco e um brilho azul-claro discreto: científico e acolhedor.
   ===================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 40%, #1F3541 0%, #15252E 45%, #0E1A21 100%);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1), clip-path 1s cubic-bezier(.7, 0, .2, 1);
  clip-path: inset(0 0 0 0 round 0);
}
.intro-active body { overflow: hidden; }
.intro__glow { position: absolute; left: 50%; top: 44%; width: 70vmin; height: 70vmin; transform: translate(-50%, -50%) scale(.6); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(147, 211, 241, .18), rgba(147, 211, 241, 0)); opacity: 0; animation: iGlow 2.6s cubic-bezier(.2, .7, .2, 1) .1s forwards; }
@keyframes iGlow { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.intro__stage { position: relative; display: grid; justify-items: center; gap: 4px; transition: transform 1s cubic-bezier(.7, 0, .2, 1), opacity .6s ease, filter .6s ease; }
.intro__logo { width: clamp(92px, 16vmin, 132px); height: auto; overflow: visible; filter: drop-shadow(0 0 22px rgba(147, 211, 241, .22)); }

/* 1. arco de proteção: desenha de cima para baixo */
.i-lines path { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.i-arc { stroke-width: 2.6; animation: iDraw 1.15s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
/* 2. folhas: o veio nasce da base, depois a folha se preenche */
.i-vein { stroke-width: 1.9; animation: iDraw .85s cubic-bezier(.65, 0, .35, 1) .7s forwards; }
/* a opacidade entra junto com o traço: evita o "pontinho" da ponta arredondada antes de desenhar */
@keyframes iDraw { 0% { opacity: 0; stroke-dashoffset: 1; } 4% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
.i-leaf { fill: #fff; opacity: 0; transform-box: view-box; transform-origin: 50px 90px; transform: scale(.55); animation: iLeaf .8s cubic-bezier(.2, .8, .2, 1) 1.05s forwards; }
@keyframes iLeaf { to { opacity: 1; transform: scale(1); } }
/* 3. esferas: caem em sequência e assentam com suavidade */
.i-dot { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: iDrop .75s cubic-bezier(.3, 1.35, .45, 1) forwards; }
.i-dot--1 { animation-delay: 1.2s; }
.i-dot--2 { animation-delay: 1.38s; }
.i-dot--3 { animation-delay: 1.56s; animation-duration: .85s; }
@keyframes iDrop {
  0% { opacity: 0; transform: translateY(-16px) scale(.35); fill: #93D3F1; }
  55% { opacity: 1; fill: #C9E8F8; }
  100% { opacity: 1; transform: translateY(0) scale(1); fill: #fff; }
}
/* onda ao tocar: o ativo encontrando a pele */
.i-ripple { fill: none; stroke: #93D3F1; stroke-width: .7; opacity: 0; transform-box: fill-box; transform-origin: center; animation: iRipple 1.5s cubic-bezier(.2, .6, .3, 1) 2.05s forwards; }
.i-ripple--2 { animation-delay: 2.3s; stroke-width: .5; }
@keyframes iRipple { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(4.2); } }

/* 4. nome e slogan */
.intro__word { margin-top: 18px; font-family: var(--f-display, 'Marcellus', Georgia, serif); color: #fff; font-size: clamp(28px, 5.4vmin, 44px); line-height: 1;
  letter-spacing: .5em; padding-left: .5em; animation: iTrack 1.5s cubic-bezier(.2, .7, .2, 1) 1.7s forwards; }
.intro__word span { display: inline-block; opacity: 0; transform: translateY(10px); filter: blur(6px);
  animation: iLetter .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(1.7s + var(--i) * 60ms); }
@keyframes iLetter { to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes iTrack { to { letter-spacing: .14em; padding-left: .14em; } }
.intro__slogan { margin: 16px 0 0; font-family: var(--f-body, 'Inter', sans-serif); font-weight: 300; font-size: clamp(13px, 2.1vmin, 15px); letter-spacing: .08em; color: #b6c7d0;
  opacity: 0; transform: translateY(6px); animation: iSlogan .9s cubic-bezier(.2, .7, .2, 1) 2.35s forwards; text-align: center; padding: 0 20px; }
.intro__slogan em { font-style: normal; color: #C9E8F8; }
@keyframes iSlogan { to { opacity: 1; transform: none; } }

.intro__skip { position: absolute; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); font: 500 11px/1 var(--f-body, sans-serif); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: none; cursor: pointer; opacity: 0; animation: iSlogan .6s ease .6s forwards; }
.intro__skip:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }

/* 5. saída: o logo recua e a cortina sobe revelando o site */
.intro--out { pointer-events: none; clip-path: inset(0 0 100% 0 round 0 0 40% 40%); }
.intro--out .intro__stage { transform: translateY(-30px) scale(.94); opacity: 0; filter: blur(4px); }
.intro--out .intro__skip { opacity: 0 !important; transition: opacity .2s; }

/* a home espera a cortina abrir para começar a própria animação */
.intro-active .anim-in, .intro-active .hero__title .w > span, .intro-active .hero__bg, .intro-active .tabbar { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) { .intro { display: none; } }