#intro[hidden]{display:none}
#intro{position:fixed;inset:0;z-index:10000;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;display:grid;place-items:center;overflow:hidden;opacity:1;transition:opacity .45s ease,visibility .45s;isolation:isolate}
#intro::before{content:'';position:absolute;width:70vw;height:70vw;max-width:1000px;max-height:1000px;border:1px solid #58684c0a;border-radius:50%;pointer-events:none}
#intro.leaving{opacity:0;visibility:hidden;pointer-events:none}
#intro button,#intro a{-webkit-tap-highlight-color:transparent}
#intro button:focus-visible,#intro a:focus-visible{outline:2px solid var(--green);outline-offset:6px}
.intro-brand{position:absolute;top:36px;left:5vw;color:var(--ink);text-decoration:none;font-weight:650;font-size:24px;letter-spacing:-1px}
.intro-brand span{color:var(--green)}
.intro-skip{position:absolute;right:5vw;top:42px;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.intro-center{position:relative;width:min(780px,88vw);padding-bottom:24px}
.intro-kicker{font-size:10px;letter-spacing:2.5px;color:var(--muted);margin:0 0 24px 4px}
.intro-search{display:flex;align-items:center;gap:20px;min-height:90px;padding:20px 24px;background:#fffef9;border:1px solid var(--line);border-radius:17px;box-shadow:0 16px 50px #353d2410;transition:border-color .25s,transform .25s;box-sizing:border-box}
.intro-spark{font-size:31px;color:var(--green);line-height:1}
.intro-text{flex:1;font-size:clamp(16px,2.5vw,25px);line-height:1.5;letter-spacing:-.6px;min-width:0}
.intro-cursor{display:inline-block;width:2px;height:1.05em;background:var(--green);vertical-align:-.1em;margin-left:3px;animation:intro-blink .75s steps(1) infinite}
.intro-enter{display:grid;place-items:center;flex-shrink:0;width:39px;height:35px;border-radius:7px;border:1px solid #ced0c3;background:var(--green-light);color:var(--green);font-size:24px;transition:all .15s}
#intro.submitted .intro-enter{transform:translateY(3px);color:var(--paper);background:var(--green);border-color:var(--green)}
#intro.submitted .intro-search{border-color:var(--green);transform:scale(.992)}
.intro-caption{color:#59614f;font-size:13px;margin:23px 0 0 4px}
.intro-sound{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);padding:10px 17px;background:transparent;border:1px solid #ced0c3;border-radius:30px;color:var(--green);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.intro-progress{position:absolute;bottom:0;left:0;height:2px;background:var(--green);width:0}
@keyframes intro-blink{50%{opacity:0}}
@media(max-width:540px){.intro-brand{top:26px}.intro-skip{top:32px;font-size:12px}.intro-search{gap:12px;padding:18px 16px;min-height:104px}.intro-spark{font-size:25px}.intro-kicker{font-size:9px;letter-spacing:1.6px}.intro-enter{width:30px;height:30px}.intro-text{letter-spacing:-.3px}.intro-caption{font-size:12px}}
@media(prefers-reduced-motion:reduce){#intro{transition:none}.intro-cursor{animation:none}.intro-search,.intro-enter{transition:none}}

/* A barra primeiro recebe um toque suave e se abre; só então a frase começa. */
.intro-search{position:relative;will-change:clip-path,transform;transform-origin:center}
#intro.intro-opening .intro-search{animation:intro-unfold .7s cubic-bezier(.22,1,.36,1) both}
#intro.intro-opening .intro-spark{animation:intro-spark-in .7s cubic-bezier(.22,1,.36,1) both}
#intro.intro-opening .intro-text,#intro.intro-opening .intro-enter{animation:intro-content-in .7s ease both}
#intro.intro-opening .intro-kicker,#intro.intro-opening .intro-caption{animation:intro-label-in .7s ease both}
.intro-search::after{content:'';position:absolute;left:50%;top:50%;width:40px;height:40px;border:1px solid #889773;border-radius:50%;pointer-events:none;opacity:0}
#intro.intro-opening .intro-search::after{animation:intro-touch .7s ease-out both}
@keyframes intro-unfold{0%{clip-path:inset(0 44% round 45px);transform:translateY(12px) scale(.94);opacity:0}18%{clip-path:inset(0 44% round 45px);transform:translateY(0) scale(1);opacity:1}30%{clip-path:inset(0 43% round 45px);transform:scale(.98)}100%{clip-path:inset(-20% -10% round 17px);transform:scale(1);opacity:1}}
@keyframes intro-touch{0%,15%{opacity:0;transform:translate(-50%,-50%) scale(.5)}30%{opacity:.45}100%{opacity:0;transform:translate(-50%,-50%) scale(2.3)}}
@keyframes intro-spark-in{0%,28%{opacity:0;transform:rotate(-35deg) scale(.75)}100%{opacity:1;transform:rotate(0) scale(1)}}
@keyframes intro-content-in{0%,65%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
@keyframes intro-label-in{0%,40%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#intro.intro-opening *,#intro.intro-opening *::after{animation:none!important}.intro-search{will-change:auto}}