/* ===== Animação de abertura =====
   Textos e cores: public/config/marca.js (seção "abertura"). As cores abaixo são o padrão, usadas se o marca.js não carregar.
   Montagem das letras e folhas: assets/js/intro.js. A linha do tempo (8,2 s) fica toda nos keyframes daqui.
   Tudo só anima depois que o intro.js põe a classe .play, para letras, folhas e cortinas começarem juntas. */
#intro{
  --i-fundo:#EFFFF6;--i-texto:#063D2E;--i-principal:#00A86B;--i-folha:#3CBF83;
  --i-clara:#98F5C5;--i-brilho:#C4FFD9;--i-caule:#228E62;
  --i-folha-escura:color-mix(in srgb,var(--i-principal) 83%,black);
  display:none;position:fixed;z-index:1000;inset:0;place-items:center;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(ellipse at 50% 48%,white 0%,color-mix(in srgb,var(--i-fundo) 60%,white) 34%,color-mix(in srgb,var(--i-fundo) 88%,var(--i-clara)) 100%),
    var(--i-fundo)
}
html.intro-on #intro{display:grid}
html.intro-on,html.intro-on body{overflow:hidden}
#intro *{box-sizing:border-box}

#intro .intro-aura{position:absolute;width:min(75vw,820px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--i-clara) 28%,transparent),color-mix(in srgb,var(--i-brilho) 10%,transparent) 43%,transparent 70%);
  filter:blur(8px);pointer-events:none}

/* barra de progresso no rodapé */
#intro .progress-track{position:absolute;z-index:40;right:0;bottom:0;left:0;height:3px;overflow:hidden;background:color-mix(in srgb,var(--i-texto) 8%,transparent)}
#intro .progress-fill{width:0;height:100%;background:linear-gradient(90deg,var(--i-folha),var(--i-principal),var(--i-brilho));box-shadow:0 0 12px color-mix(in srgb,var(--i-principal) 35%,transparent)}
#intro.play .progress-fill{animation:progress-grow 8.21s linear forwards}

/* ----- nome, broto na letra, vinha e assinatura ----- */
#intro .brand-lockup{position:absolute;z-index:10;inset:0;width:100%;height:100%;margin:0;text-align:center;pointer-events:none}
#intro .wordmark-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:.14em .04em .1em}
#intro .wordmark{position:relative;margin:0;color:var(--i-texto);font-family:"Bricolage Grotesque","Arial Rounded MT Bold",system-ui,sans-serif;
  font-size:clamp(3.5rem,11.4vw,9.4rem);font-weight:800;line-height:.98;letter-spacing:-.075em;white-space:nowrap;text-align:center;-webkit-font-smoothing:antialiased}
#intro .wordmark::after{content:attr(data-shine);position:absolute;inset:0;display:block;color:transparent;text-align:inherit;white-space:pre;
  background:linear-gradient(105deg,transparent 22%,color-mix(in srgb,var(--i-principal) 0%,transparent) 34%,color-mix(in srgb,var(--i-clara) 20%,transparent) 41%,
    rgba(255,255,255,.95) 48%,color-mix(in srgb,var(--i-clara) 55%,transparent) 54%,color-mix(in srgb,var(--i-principal) 0%,transparent) 64%,transparent 75%);
  background-size:240% 100%;background-position:120% 0;-webkit-background-clip:text;background-clip:text;opacity:0;pointer-events:none}
#intro.play .wordmark::after{animation:word-shine 2.25s 3.3s ease-in-out both}
#intro .glyph{position:relative;display:inline-block;vertical-align:baseline}
#intro .glyph-mask{display:block;overflow:hidden;padding:0 .012em .06em;margin-bottom:-.06em}
#intro .glyph-inner{display:block;transform:translateY(118%);opacity:0}
#intro.play .glyph-inner{animation:letter-rise .76s var(--rise-delay,1.1s) cubic-bezier(.2,.78,.19,1) forwards,letter-exit .58s var(--exit-delay,6.2s) cubic-bezier(.68,0,.84,.2) forwards}
#intro .word-space{display:inline-block;width:.28em}
#intro .glyph-broto{isolation:isolate}
#intro .letter-bud{position:absolute;z-index:3;top:-.42em;left:50%;width:.48em;height:.48em;overflow:visible;transform:translateX(-45%);pointer-events:none}
#intro .bud-stem{fill:none;stroke:var(--i-principal);stroke-width:2.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
#intro.play .bud-stem{animation:stem-draw .87s 2.16s ease-out forwards,stem-retract .48s 6.28s ease-in forwards}
#intro .bud-leaf{fill:url(#intro-leaf);stroke:var(--i-caule);stroke-width:.8;opacity:0;transform-box:fill-box;transform-origin:50% 90%}
#intro.play .bud-leaf{animation:bud-bloom .54s 2.68s cubic-bezier(.2,.8,.2,1) forwards,bud-fold .44s 6.23s ease-in forwards}

#intro .brand-vine{position:absolute;top:calc(50% + clamp(3.7rem,6.5vw,5.8rem));left:50%;display:block;width:clamp(260px,57vw,600px);height:auto;margin:0;transform:translateX(-50%);overflow:visible}
#intro .vine-path{fill:none;stroke:var(--i-caule);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#intro.play .vine-path{animation:stem-draw 1.26s 2.1s cubic-bezier(.3,.7,.2,1) forwards,stem-retract .61s 6.28s ease-in forwards}

#intro .brand-signature{position:absolute;top:calc(50% + clamp(8rem,13vw,11.7rem));left:50%;margin:0;color:color-mix(in srgb,var(--i-texto) 68%,transparent);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:clamp(.58rem,1.2vw,.78rem);font-weight:700;letter-spacing:.48em;text-indent:.48em;white-space:nowrap;
  opacity:0;transform:translate(-50%,9px)}
#intro.play .brand-signature{animation:signature-in .7s 2.28s cubic-bezier(.2,.7,.2,1) forwards,signature-out .42s 6.22s ease-in forwards}

/* ----- folhagem dos cantos e folhas caindo ----- */
#intro .flora-corner{position:absolute;z-index:2;width:clamp(220px,36vw,455px);height:auto;overflow:visible;pointer-events:none}
#intro .flora-tl{top:-2.5vh;left:-2.5vw}
#intro .flora-tr{top:-2.5vh;right:-2.5vw;transform:scaleX(-1)}
#intro .flora-bl{bottom:-2.5vh;left:-2.5vw;transform:scaleY(-1)}
#intro .flora-br{right:-2.5vw;bottom:-2.5vh;transform:scale(-1)}
#intro .stem-path{fill:none;stroke:var(--i-caule);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
#intro.play .stem-path{animation:stem-draw 1.87s .16s cubic-bezier(.35,.7,.2,1) forwards,stem-retract .78s 6.3s ease-in forwards}
#intro .leaf-anchor{pointer-events:none}
#intro .leaf-core{opacity:0;transform-box:fill-box;transform-origin:0% 0%}
#intro.play .leaf-core{animation:leaf-pop .62s var(--leaf-delay,.87s) cubic-bezier(.18,.85,.2,1) both,leaf-sway 4s calc(var(--leaf-delay,.87s) + .7s) ease-in-out infinite,leaf-retract .62s 6.28s ease-in forwards}
#intro .leaf-shape{fill:url(#intro-leaf);stroke:var(--i-caule);stroke-width:1.05;stroke-linejoin:round}
#intro .leaf-vein{fill:none;stroke:color-mix(in srgb,var(--i-texto) 70%,transparent);stroke-width:.9;stroke-linecap:round}
#intro .falling-leaves{position:absolute;z-index:4;inset:0;overflow:hidden;pointer-events:none}
#intro .falling-leaf{position:absolute;top:-9vh;left:var(--fall-x);width:var(--fall-size);height:auto;opacity:0}
#intro.play .falling-leaf{animation:leaf-fall var(--fall-duration) var(--fall-delay) ease-in infinite}
#intro .falling-leaf path:first-child{fill:url(#intro-leaf);stroke:color-mix(in srgb,var(--i-caule) 62%,transparent);stroke-width:1}
#intro .falling-leaf path:last-child{fill:none;stroke:color-mix(in srgb,var(--i-texto) 58%,transparent);stroke-width:.85;stroke-linecap:round}
#intro .leaf-g1{stop-color:var(--i-brilho)}#intro .leaf-g2{stop-color:var(--i-folha)}#intro .leaf-g3{stop-color:var(--i-folha-escura)}

/* ----- cortinas de saída: primeiro a clara, depois a escura; o fim da escura encerra a abertura ----- */
#intro .curtain{position:absolute;z-index:50;inset:0;transform:translateY(112%);pointer-events:none}
#intro .curtain::before{content:"";position:absolute;top:-9vh;left:-15%;width:130%;height:18vh;border-radius:50% 50% 0 0/52% 52% 0 0;background:inherit}
#intro .curtain-light{background:linear-gradient(165deg,color-mix(in srgb,var(--i-clara) 40%,white),var(--i-clara) 72%,color-mix(in srgb,var(--i-clara) 85%,var(--i-principal)))}
#intro .curtain-green{z-index:51;background:linear-gradient(150deg,color-mix(in srgb,var(--i-texto) 85%,var(--i-principal)),var(--i-texto) 66%,color-mix(in srgb,var(--i-texto) 70%,black));
  box-shadow:0 -18px 45px color-mix(in srgb,var(--i-texto) 10%,transparent)}
#intro.play .curtain-light{animation:curtain-rise 1.22s 6.74s cubic-bezier(.76,0,.2,1) forwards}
#intro.play .curtain-green{animation:curtain-rise 1.16s 7.05s cubic-bezier(.76,0,.2,1) forwards}
/* borda de baixo da cortina escura em curva (igual à de cima): é ela que desenha a revelação do app */
#intro .curtain-green::after{content:"";position:absolute;bottom:-9vh;left:-15%;width:130%;height:18vh;border-radius:0 0 50% 50%/0 0 52% 52%;
  background:linear-gradient(90deg,var(--i-texto),color-mix(in srgb,var(--i-texto) 70%,black));
  -webkit-mask-image:linear-gradient(transparent,black 50%);mask-image:linear-gradient(transparent,black 50%)} /* entra aos poucos: sem emenda com a cortina */
/* .revelar (intro.js): a cortina escura já cobre a tela; fundo e desenhos somem e só ela continua subindo sobre o app */
#intro.revelar{background:transparent;pointer-events:none}
#intro.revelar>:not(.curtain-green){visibility:hidden}

@keyframes stem-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes stem-retract{from{stroke-dashoffset:0}to{stroke-dashoffset:1}}
@keyframes letter-rise{0%{transform:translateY(118%);opacity:0}75%{transform:translateY(-5%);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes letter-exit{from{transform:translateY(0);opacity:1}to{transform:translateY(-128%);opacity:0}}
@keyframes leaf-pop{0%{opacity:0;scale:.08}72%{opacity:1;scale:1.13}100%{opacity:1;scale:1}}
@keyframes leaf-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes leaf-retract{0%{opacity:1;scale:1}100%{opacity:0;scale:.12}}
@keyframes bud-bloom{0%{opacity:0;transform:scale(.08) rotate(-20deg)}70%{opacity:1;transform:scale(1.12) rotate(5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes bud-fold{to{opacity:0;transform:scale(.1) rotate(-18deg)}}
@keyframes signature-in{from{opacity:0;transform:translate(-50%,9px);letter-spacing:.62em}to{opacity:1;transform:translate(-50%,0);letter-spacing:.48em}}
@keyframes signature-out{to{opacity:0;transform:translate(-50%,-8px)}}
@keyframes word-shine{0%{opacity:0;background-position:120% 0}12%{opacity:.9}65%{opacity:.9}100%{opacity:0;background-position:-120% 0}}
@keyframes leaf-fall{0%{opacity:0;transform:translate3d(0,-3vh,0) rotate(-20deg)}12%{opacity:.72}78%{opacity:.58}100%{opacity:0;transform:translate3d(48px,112vh,0) rotate(250deg)}}
@keyframes curtain-rise{0%{transform:translateY(112%)}100%{transform:translateY(-115%)}}
@keyframes progress-grow{from{width:0}to{width:100%}}

/* ----- telas menores ----- */
@media (max-width:640px){
  #intro .flora-corner{width:clamp(170px,54vw,260px)}
  #intro .flora-bl,#intro .flora-br{display:none}
  #intro .wordmark{font-size:clamp(3.2rem,14.2vw,6rem);letter-spacing:-.08em}
  #intro .brand-vine{top:calc(50% + clamp(2.9rem,10vw,3.5rem));width:clamp(235px,73vw,420px)}
  #intro .brand-signature{top:calc(50% + clamp(6.35rem,20vw,8rem));letter-spacing:.37em;text-indent:.37em}
  #intro .falling-leaf:nth-child(n+6){display:none}
}
@media (max-width:380px){
  #intro .wordmark{font-size:13.6vw}
  #intro .brand-vine{top:calc(50% + 2.8rem);width:70vw}
  #intro .brand-signature{top:calc(50% + 6rem)}
}