/* =========================================================
   Abertura — a logo se constrói
   1. pétalas do lótus traçadas de baixo para cima e preenchidas
   2. "Ludmilla" / "Lewinsohn" letra a letra, saindo do desfoque
   3. "Dra." e "Médica" com o espaçamento se fechando
   4. a cortina verde sobe e revela a capa
   Só aparece com html.intro-on (definido no <head>: a cada carregamento,
   exceto com âncora na URL ou "reduzir movimento"). Sem JS, nunca aparece.
   ========================================================= */
.intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on .intro{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:#303723;color:#e9dfca;
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s cubic-bezier(.77,0,.18,1);
}
.intro-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 55% at 50% 46%,#7e8a7533 0%,transparent 70%),
             radial-gradient(120% 80% at 50% 120%,#252c1d 0%,transparent 60%);
  opacity:0;animation:intro-fade 1.6s ease forwards}
.intro-stage{position:relative;display:grid;justify-items:center;gap:26px;
  transition:transform 1.05s cubic-bezier(.77,0,.18,1),opacity .7s ease}
.intro-logo{width:min(460px,72vw);height:auto;overflow:visible;stroke:none;fill:currentColor}

/* 1 · Lótus: traço → preenchimento */
.intro .ip{
  fill:currentColor;fill-opacity:0;
  stroke:#e9dfca;stroke-width:.8;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:intro-draw .9s cubic-bezier(.65,0,.35,1) forwards,
            intro-fill .55s ease forwards;
  animation-delay:calc(.08s + var(--i) * 32ms),calc(.72s + var(--i) * 16ms);
}
@keyframes intro-draw{to{stroke-dashoffset:0}}
@keyframes intro-fill{to{fill-opacity:1;stroke-opacity:0}}

/* 2 · Letras saindo do desfoque */
.intro .il{opacity:0;transform-box:fill-box;transform-origin:50% 100%;
  animation:intro-letter .65s cubic-bezier(.22,1,.36,1) forwards}
.intro .il-a{animation-delay:calc(.82s + var(--i) * 45ms)}
.intro .il-b{animation-delay:calc(1.02s + var(--i) * 40ms)}
.intro .il-c{animation-delay:calc(.78s + var(--i) * 45ms)}
@keyframes intro-letter{
  from{opacity:0;transform:translateY(7px) scale(.96)}
  to{opacity:1;transform:none}
}
/* 3 · "Médica": espaçamento se fechando */
.intro .il-d{animation:intro-track 1s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:calc(1.32s + var(--i) * 30ms)}
.intro .il-d:nth-child(1){--dx:-14px}.intro .il-d:nth-child(2){--dx:-8px}.intro .il-d:nth-child(3){--dx:-3px}
.intro .il-d:nth-child(4){--dx:3px}.intro .il-d:nth-child(5){--dx:8px}.intro .il-d:nth-child(6){--dx:14px}
@keyframes intro-track{
  from{opacity:0;transform:translateX(var(--dx,0))}
  to{opacity:1;transform:none}
}

/* Linha fina que se abre sob a logo */
.intro-line{display:block;width:120px;height:1px;background:linear-gradient(90deg,transparent,#d9c8ac99,transparent);
  transform:scaleX(0);animation:intro-line 1.2s cubic-bezier(.22,1,.36,1) 2.1s forwards}
@keyframes intro-line{to{transform:scaleX(1)}}
@keyframes intro-fade{to{opacity:1}}

.intro-skip{position:absolute;right:28px;bottom:26px;border:0;background:none;
  font:400 12px/1 var(--sans,Poppins,sans-serif);letter-spacing:.06em;color:#d9c8ac99;cursor:pointer;
  opacity:0;animation:intro-fade .6s ease .6s forwards}
.intro-skip:hover{color:#e9dfca}


@media (max-width:700px){
  .intro-logo{width:min(300px,78vw)}
  .intro-skip{right:20px;bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  html.intro-on .intro{display:none}
  html.intro-on{overflow:auto}
}

/* =========================================================
   Encaixe no menu + entrada da capa em cascata
   Escondido enquanto html.intro-on sem .intro-reveal;
   ao revelar, cada parte entra com seu atraso.
   ========================================================= */
html.intro-on .site-header .brand img{opacity:0}
.intro-logo{transform-origin:50% 50%;will-change:transform}

html.intro-on:not(.intro-reveal) .main-nav a,
html.intro-on:not(.intro-reveal) .header-cta{opacity:0;translate:0 -18px}
html.intro-on:not(.intro-reveal) .hero-stage .hero-cutout{clip-path:inset(100% 0 0 0);opacity:0}
html.intro-on:not(.intro-reveal) .hero-stage .hero-name{translate:0 22%;clip-path:inset(-20% -5% 100% -5%)}
html.intro-on:not(.intro-reveal) .hero-statement,
html.intro-on:not(.intro-reveal) .hero-actions,
html.intro-on:not(.intro-reveal) .hero-facts>div{opacity:0;translate:0 34px}
html.intro-on:not(.intro-reveal) .hero-light{opacity:0}
html.intro-on:not(.intro-reveal) .hero-scroll,
html.intro-on:not(.intro-reveal) .floating-whatsapp{opacity:0;scale:.6}

html.intro-reveal .main-nav a,html.intro-reveal .header-cta{transition:opacity .7s ease,translate .9s cubic-bezier(.19,1,.22,1)}
html.intro-reveal .main-nav a:nth-child(1){transition-delay:.05s}
html.intro-reveal .main-nav a:nth-child(2){transition-delay:.11s}
html.intro-reveal .main-nav a:nth-child(3){transition-delay:.17s}
html.intro-reveal .main-nav a:nth-child(4){transition-delay:.23s}
html.intro-reveal .main-nav a:nth-child(5){transition-delay:.29s}
html.intro-reveal .header-cta{transition-delay:.35s}
html.intro-reveal .hero-light{transition:opacity 1.1s ease}
html.intro-reveal .hero-stage .hero-cutout{transition:clip-path 1.3s cubic-bezier(.77,0,.18,1) .1s,opacity .6s ease .1s}
html.intro-reveal .hero-stage .hero-name{transition:translate 1.2s cubic-bezier(.19,1,.22,1) .35s,clip-path 1.2s cubic-bezier(.19,1,.22,1) .35s}
html.intro-reveal .hero-statement{transition:opacity .8s ease .55s,translate 1s cubic-bezier(.19,1,.22,1) .55s}
html.intro-reveal .hero-actions{transition:opacity .8s ease .7s,translate 1s cubic-bezier(.19,1,.22,1) .7s}
html.intro-reveal .hero-facts>div{transition:opacity .8s ease,translate 1s cubic-bezier(.19,1,.22,1)}
html.intro-reveal .hero-facts>div:nth-child(1){transition-delay:.6s}
html.intro-reveal .hero-facts>div:nth-child(2){transition-delay:.72s}
html.intro-reveal .hero-facts>div:nth-child(3){transition-delay:.84s}
html.intro-reveal .hero-scroll,html.intro-reveal .floating-whatsapp{transition:opacity .6s ease 1.1s,scale .8s cubic-bezier(.34,1.56,.64,1) 1.1s}

/* Sem pontinhos antes do traço começar: o contorno fica invisível até a animação dele */
.intro .ip{stroke-opacity:0;stroke-dashoffset:1.02}
@keyframes intro-draw{from{stroke-dashoffset:1.02;stroke-opacity:1}to{stroke-dashoffset:0;stroke-opacity:1}}
.intro-line{display:none!important}