/* musica.ae — Redesign "Selo" (Variação C). Tokens, reset e animações compartilhadas entre todas as páginas do site. */

:root{
  --paper:#EEE8DA;
  --ink:#121212;
  --green:#14B86A;
  --lilac:#CDB9FF;
  --sand:#DCD3BF;
  --text-muted-light:#4A463D;
  --text-muted-dark:#B9B3A6;
  --input-border:#CFC7B5;
  --error:#B3261E;
  --white:#FFFFFF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:"Bricolage Grotesque","Helvetica Neue",Helvetica,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea{font-family:inherit}
input::placeholder,textarea::placeholder{color:#7A7466}
input:focus,textarea:focus{outline:none;border-color:var(--ink) !important;box-shadow:0 0 0 3px rgba(20,184,106,.45)}
.mono{font-family:"Martian Mono",monospace;letter-spacing:.08em;text-transform:uppercase}

/* animações */
.spin{animation:spin 3.6s linear infinite}
.spin-slow{animation:spin 40s linear infinite}
.spin-rev{animation:spin 28s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.w{display:inline-block;transform-origin:50% 100%;animation:w 1s cubic-bezier(.16,1,.3,1) both}
@keyframes w{from{opacity:0;transform:translateY(.4em) rotateX(-85deg)}to{opacity:1;transform:none}}
.draw1{stroke-dasharray:420;stroke-dashoffset:420;animation:dr1 1.2s cubic-bezier(.65,0,.35,1) 1.3s forwards}
@keyframes dr1{to{stroke-dashoffset:0}}
.rise{animation:rise 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hl{background-image:linear-gradient(var(--green),var(--green));background-repeat:no-repeat;background-size:0% 100%;background-position:left;animation:hl 8s cubic-bezier(.65,0,.35,1) infinite;padding:0 .12em;margin:0 -.12em}
@keyframes hl{0%{background-size:0% 100%;background-position:left;color:var(--paper)}9%{background-size:100% 100%;background-position:left;color:var(--ink)}22%{background-size:100% 100%;background-position:right;color:var(--ink)}30%{background-size:0% 100%;background-position:right;color:var(--paper)}100%{background-size:0% 100%;background-position:right;color:var(--paper)}}
.peek{animation:peek 7s cubic-bezier(.65,0,.35,1) infinite}
@keyframes peek{0%,12%{transform:translateY(0) rotate(0)}45%,68%{transform:translateY(-34%) rotate(200deg)}100%{transform:translateY(0) rotate(360deg)}}
.flowline{stroke-dasharray:1200;animation:fl 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes fl{0%{stroke-dashoffset:1200}60%,100%{stroke-dashoffset:0}}
.flowv{stroke-dasharray:900;animation:flv 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes flv{0%{stroke-dashoffset:900}60%,100%{stroke-dashoffset:0}}
.node{animation:node 6s ease-in-out infinite}
@keyframes node{0%,4%{background:var(--paper);transform:scale(1)}10%{background:var(--green);transform:scale(1.08)}60%{background:var(--green);transform:scale(1)}72%,100%{background:var(--paper);transform:scale(1)}}
.tr{transition:background .7s cubic-bezier(.65,0,.35,1),color .7s,transform .6s cubic-bezier(.16,1,.3,1),opacity .5s,border-color .4s}
.fade{animation:rise .8s cubic-bezier(.16,1,.3,1) both}
.dbtn{transition:background .3s,color .3s,transform .3s}.dbtn:hover{transform:translateY(-2px)}
.lift{transition:transform .3s cubic-bezier(.16,1,.3,1)}.lift:hover{transform:translateY(-3px)}
.card-hover{transition:transform .5s cubic-bezier(.16,1,.3,1)}.card-hover:hover{transform:translateY(-6px) rotate(-.6deg)}
.float{animation:float 5s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-14px) rotate(-1deg)}}
.float2{animation:float2 6s ease-in-out infinite alternate}
@keyframes float2{from{transform:translateY(0) rotate(3deg)}to{transform:translateY(-10px) rotate(1deg)}}
.menu-in{animation:menu-in .5s cubic-bezier(.16,1,.3,1) both}
@keyframes menu-in{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.carousel{scroll-snap-type:x mandatory;scrollbar-width:none}.carousel::-webkit-scrollbar{display:none}
.snap{scroll-snap-align:start}
.shake{animation:shake .4s ease-in-out}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.arm{transform-origin:86% 10%;animation:arm 5s ease-in-out infinite alternate}
@keyframes arm{from{transform:rotate(20deg)}to{transform:rotate(24deg)}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}.draw1{stroke-dashoffset:0}}

/* botões e chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 26px;border-radius:999px;font-size:16px;font-weight:700;border:0;cursor:pointer;white-space:nowrap}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-green{background:var(--green);color:var(--ink)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;font-size:12px}
.chip-ink{background:var(--ink);color:var(--paper)}
.chip-outline{border:1.5px solid var(--ink)}

.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}
.field input,.field textarea{height:56px;box-sizing:border-box;padding:0 18px;border-radius:16px;border:1.5px solid var(--input-border);background:var(--white);font-size:16px;color:var(--ink)}
.field textarea{height:auto;padding:16px 18px;resize:none;line-height:1.5}
.field-error{font-size:13px;color:var(--error)}

.wrap{max-width:1328px;margin:0 auto;padding-left:24px;padding-right:24px}
@media (min-width:960px){.wrap{padding-left:56px;padding-right:56px}}