/* SpaceKey FX · docs/design/FX.md · anima só transform/opacity/clip-path/mask (+ grid-template-rows do acordeão) */
:root{--fx-gold:#ffc400;--fx-amber:#ff9d00;--fx-black:#0b0906;--fx-night:#100d09;--fx-ink:#f2ede4;--fx-muted:#b3aa9b;--fx-line:rgb(242 237 228/.12);--fx-error:#ff8a78;--fx-ease:cubic-bezier(.22,.61,.36,1);--fx-out:cubic-bezier(.16,1,.3,1)}

.fx-reveal.is-pre{opacity:0;transform:translate3d(0,18px,0)}
.fx-reveal--clip.is-pre{transform:none;clip-path:inset(0 0 100% 0)}
.fx-reveal.is-pre.is-in{opacity:1;transform:none;clip-path:inset(0);transition:opacity .7s var(--fx-out),transform .7s var(--fx-out),clip-path .9s var(--fx-out);transition-delay:calc(min(var(--fx-i,0),6)*70ms)}

.fx-chars .fx-word{display:inline-block;white-space:nowrap;clip-path:inset(-.35em -.1em -.3em)}
.fx-chars .fx-char{display:inline-block;opacity:0;transform:translate3d(0,1.1em,0)}
.fx-chars.is-in .fx-char{animation:fx-rise .8s var(--fx-out) calc(min(var(--i),48)*18ms - var(--fx-t,0ms)) both}
@keyframes fx-rise{from{opacity:0;transform:translate3d(0,1.1em,0)}to{opacity:1;transform:none}}

.fx-count{font-variant-numeric:tabular-nums}

.fx-magnetic{translate:var(--fx-mx,0) var(--fx-my,0);transition:translate .45s var(--fx-out)}
.fx-tilt{transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));transition:transform .5s var(--fx-out)}
.fx-tilt:hover{will-change:transform}

.fx-spotlight-card{--mx:50%;--my:0%;position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--fx-line);border-radius:var(--radius-md,12px);background:linear-gradient(180deg,#18130c,var(--fx-night));color:var(--fx-ink)}
.fx-spotlight-card::before,.fx-spotlight-card::after{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--fx-ease);content:""}
.fx-spotlight-card::before{z-index:-1;background:radial-gradient(280px circle at var(--mx) var(--my),rgb(255 196 0/.15),transparent 65%)}
.fx-spotlight-card::after{padding:1px;background:radial-gradient(200px circle at var(--mx) var(--my),rgb(255 196 0/.75),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fx-spotlight-card:is(:hover,:focus-within)::before,.fx-spotlight-card:hover::after{opacity:1}

.fx-aurora{position:relative;isolation:isolate;overflow:hidden;background:var(--fx-black);color:var(--fx-ink)}
.fx-aurora::before{position:absolute;inset:-35%;z-index:-2;pointer-events:none;background:radial-gradient(38% 30% at 30% 32%,rgb(255 196 0/.15),transparent 70%),radial-gradient(34% 28% at 70% 66%,rgb(255 140 0/.1),transparent 72%),radial-gradient(26% 22% at 58% 22%,rgb(255 226 140/.06),transparent 70%);animation:fx-aurora 26s ease-in-out infinite alternate;content:""}
@keyframes fx-aurora{0%{transform:translate3d(-3%,2%,0) rotate(0)}50%{transform:translate3d(2%,-2%,0) rotate(5deg) scale(1.06)}to{transform:translate3d(4%,1%,0) rotate(-3deg)}}

.fx-cursor-grid{--mx:50%;--my:40%;position:relative;isolation:isolate}
.fx-cursor-grid::after{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgb(255 196 0/.2) 1px,transparent 0) 0 0/40px 40px,linear-gradient(rgb(255 196 0/.2) 1px,transparent 0) 0 0/40px 40px;-webkit-mask:radial-gradient(240px circle at var(--mx) var(--my),#000,transparent 72%);mask:radial-gradient(240px circle at var(--mx) var(--my),#000,transparent 72%);opacity:.35;transition:opacity .5s var(--fx-ease);content:""}
.fx-cursor-grid.fx-lit:hover::after{opacity:1}
.fx-aurora.is-paused::before,.fx-marquee.is-paused .fx-marquee__track,.fx-marquee.is-held .fx-marquee__track,.fx-marquee:is(:hover,:focus-within) .fx-marquee__track{animation-play-state:paused}

.fx-marquee{display:flex;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marquee__track{display:flex;flex:none;gap:var(--fx-gap,3rem);margin:0;padding:0 var(--fx-gap,3rem) 0 0;list-style:none;white-space:nowrap;animation:fx-marquee var(--fx-speed,36s) linear infinite}
@keyframes fx-marquee{to{transform:translate3d(-100%,0,0)}}

.fx-field{position:relative;display:grid;gap:.4rem;color:var(--fx-ink)}
.fx-field :is(input,textarea){grid-area:1/1;width:100%;min-height:56px;padding:1.45rem 1rem .45rem;border:1px solid rgb(242 237 228/.24);border-radius:10px;background:rgb(255 255 255/.04);color:inherit;font:inherit}
.fx-field textarea{min-height:120px;resize:vertical}
.fx-field::after{grid-area:1/1;border-radius:10px;box-shadow:0 0 0 4px rgb(255 196 0/.18),0 0 28px rgb(255 196 0/.12);pointer-events:none;opacity:0;transition:opacity .25s var(--fx-ease);content:""}
.fx-field:focus-within::after{opacity:1}
.fx-field label{position:absolute;top:1.05rem;left:1rem;color:var(--fx-muted);pointer-events:none;transform-origin:0 0;transition:transform .22s var(--fx-out)}
.fx-field :is(input,textarea):is(:focus,:not(:placeholder-shown))+label{transform:translate3d(0,-.62rem,0) scale(.78)}
.fx-field :is(input,textarea):focus+label{color:var(--fx-gold)}
.fx-field :is(input,textarea):focus{border-color:var(--fx-gold);outline:2px solid var(--fx-gold);outline-offset:2px}
.fx-field [aria-invalid=true]{border-color:var(--fx-error);animation:fx-shake .18s linear}
.fx-field [aria-invalid=true]+label{color:var(--fx-error)}
.fx-field__error{color:var(--fx-error);font-size:.875rem}
@keyframes fx-shake{25%{transform:translateX(6px)}75%{transform:translateX(-6px)}}

.fx-submit{position:relative;display:inline-grid;place-items:center;min-height:48px;padding:.8rem 1.5rem;border:0;border-radius:999px;background:var(--fx-gold);color:var(--fx-black);font:inherit;font-weight:700;cursor:pointer}
.fx-submit:focus-visible{outline:2px solid var(--fx-gold);outline-offset:3px}
.fx-submit>span{transition:opacity .2s,transform .25s var(--fx-out)}
.fx-submit::after{position:absolute;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--fx-out) .12s;content:""}
.fx-submit[data-state=success]>span{opacity:0;transform:translate3d(0,-6px,0)}
.fx-submit[data-state=success]::after{clip-path:inset(0)}

.fx-accordion{border-top:1px solid var(--fx-line)}
.fx-accordion details{border-bottom:1px solid var(--fx-line)}
.fx-accordion summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding:.75rem 0;font-weight:650;list-style:none;cursor:pointer}
.fx-accordion summary::-webkit-details-marker{display:none}
.fx-accordion summary::after{flex:none;width:14px;height:14px;background:linear-gradient(currentColor 0 0) center/100% 2px no-repeat,linear-gradient(currentColor 0 0) center/2px 100% no-repeat;transition:transform .3s var(--fx-out);content:""}
.fx-accordion details[open]>summary::after{transform:rotate(45deg)}
.fx-accordion summary:focus-visible{outline:2px solid var(--fx-gold);outline-offset:4px;border-radius:4px}
.fx-accordion__panel{display:grid;grid-template-rows:1fr;min-height:0;overflow:hidden}
.fx-accordion__panel>div{min-height:0;overflow:hidden}
.fx-accordion__panel>div>:last-child{margin-bottom:1.1rem}
@supports selector(::details-content){
  .fx-accordion details::details-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--fx-ease),content-visibility .32s allow-discrete}
  .fx-accordion details[open]::details-content{grid-template-rows:1fr}
}
@supports not selector(::details-content){
  .fx-accordion details[open] .fx-accordion__panel{transition:grid-template-rows .32s var(--fx-ease)}
  @starting-style{.fx-accordion details[open] .fx-accordion__panel{grid-template-rows:0fr}}
}

.fx-reading-bar{position:fixed;top:var(--fx-bar-top,0);left:0;z-index:calc(var(--z-nav,100) + 1);width:100%;height:3px;background:linear-gradient(90deg,var(--fx-amber),var(--fx-gold));pointer-events:none;transform:scaleX(var(--fx-p,0));transform-origin:0 50%}
@supports (animation-timeline:scroll()){.fx-reading-bar{animation:fx-progress linear both;animation-timeline:scroll(root)}}
@keyframes fx-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.fx-gold{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.fx-video{position:relative;overflow:hidden;background:var(--fx-black)}
.fx-video--bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fx-video>img,.fx-video>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.fx-video>video{opacity:0;transition:opacity .9s var(--fx-ease)}
.fx-video.is-playing>video{opacity:1}
.fx-video--bg::after{position:absolute;inset:0;background:linear-gradient(90deg,rgb(11 9 6/.88),rgb(11 9 6/.5) 55%,rgb(11 9 6/.2)),linear-gradient(0deg,rgb(11 9 6/.7),transparent 40%);content:""}

@media (hover:none),(pointer:coarse){.fx-cursor-grid::after{-webkit-mask:radial-gradient(70% 60% at 50% 40%,#000,transparent);mask:radial-gradient(70% 60% at 50% 40%,#000,transparent);opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .fx-reveal.is-pre,.fx-reveal.is-pre.is-in{opacity:1;transform:none;clip-path:none;transition:none}
  .fx-chars .fx-char,.fx-chars.is-in .fx-char{opacity:1;transform:none;animation:none}
  .fx-aurora::before,.fx-marquee .fx-marquee__track,.fx-field [aria-invalid=true]{animation:none}
  .fx-marquee{-webkit-mask:none;mask:none}.fx-marquee .fx-marquee__track{flex:1 1 auto;flex-wrap:wrap;row-gap:.5rem;white-space:normal}.fx-marquee__track[aria-hidden=true]{display:none}
  .fx-magnetic{translate:none}.fx-tilt,.fx-tilt:hover{transform:none}
  .fx-accordion summary::after,.fx-accordion details::details-content,.fx-accordion details[open] .fx-accordion__panel,.fx-submit>span,.fx-submit::after,.fx-video>video,.fx-field label,.fx-field::after,.fx-spotlight-card::before,.fx-spotlight-card::after{transition:none}
}
@media print{.fx-reveal.is-pre,.fx-reveal.is-pre.is-in{opacity:1;transform:none;clip-path:none}.fx-chars .fx-char,.fx-chars.is-in .fx-char{opacity:1;transform:none;animation:none}.fx-reading-bar,.fx-gold,.fx-video>video{display:none}}