/* Silkira Studio — página de download "sala de recepção" (21/09/2026).
   Compatível com a CSP do serviço (default-src 'none'; style-src 'self'; img-src 'self'; script-src 'self'): só arquivo externo, SEM style="" nem <style> no HTML, SEM fonte/imagem de fora.
   A fonte cursiva é a WindSong (SIL OFL), a mesma das capas; fica ao lado deste arquivo (/assets/WindSong-Regular.woff2). Animações só com CSS e desligadas em prefers-reduced-motion. */
@font-face{font-family:"WindSong";src:url("WindSong-Regular.woff2") format("woff2");font-display:swap}
:root{
  --script:"WindSong","Segoe Script","Snell Roundhand","Brush Script MT",cursive;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ink:#4a3f44;--muted:#6f5d65;--rose:#c8486c;--rose-2:#f08aa2;--coral:#f4a261;--lav:#b9a4d9;--blush:#fff4f1;--card:#fffdfc;--line:#efdcd9;--orn:#cdbab7;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--sans);line-height:1.65;overflow-x:hidden;
  background:radial-gradient(1200px 700px at 12% -8%,#ffe3e8 0%,transparent 60%),radial-gradient(900px 600px at 95% 4%,#ece1ff 0%,transparent 55%),radial-gradient(1000px 700px at 50% 108%,#ffeedd 0%,transparent 60%),var(--blush);
  background-attachment:fixed}

/* ---------- céu: brilhos e personagens que flutuam (decorativo) ---------- */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sky i{position:absolute;width:10px;height:10px;background:radial-gradient(circle,#fff 0 30%,rgba(255,255,255,0) 70%);border-radius:50%;opacity:.0;animation:twinkle 4.5s ease-in-out infinite}
.sky i:nth-child(1){left:8%;top:12%;animation-delay:.2s}.sky i:nth-child(2){left:22%;top:30%;animation-delay:1.4s}.sky i:nth-child(3){left:37%;top:8%;animation-delay:2.2s}
.sky i:nth-child(4){left:52%;top:22%;animation-delay:.9s}.sky i:nth-child(5){left:66%;top:10%;animation-delay:3s}.sky i:nth-child(6){left:81%;top:26%;animation-delay:1.8s}
.sky i:nth-child(7){left:92%;top:14%;animation-delay:2.6s}.sky i:nth-child(8){left:14%;top:58%;animation-delay:.6s}.sky i:nth-child(9){left:30%;top:74%;animation-delay:2s}
.sky i:nth-child(10){left:58%;top:64%;animation-delay:3.4s}.sky i:nth-child(11){left:76%;top:80%;animation-delay:1.1s}.sky i:nth-child(12){left:90%;top:60%;animation-delay:2.9s}
.sky i:nth-child(3n){width:14px;height:14px}.sky i:nth-child(4n){width:6px;height:6px}
.floater{position:absolute;width:clamp(50px,6.6vw,108px);height:auto;filter:drop-shadow(0 10px 14px rgba(150,100,120,.22));animation:bob 7s ease-in-out infinite;opacity:.96}
/* coluna esquerda */
.f-ghost{left:1.2%;top:8%;animation-duration:6.5s}.f-kitten{left:1.2%;top:36%;animation-duration:7.5s;animation-delay:1.2s}
.f-vampire{left:1.2%;bottom:24%;animation-duration:8.4s;animation-delay:.3s}.f-witchhat{left:1.2%;bottom:5%;animation-duration:6.8s;animation-delay:2s}
/* coluna direita */
.f-bat{right:1.2%;top:6%;width:clamp(54px,7.4vw,120px);animation-duration:5.5s;animation-delay:.8s}.f-owl{right:1.2%;top:34%;animation-duration:8s;animation-delay:.4s}
.f-pumpkin{right:1.2%;bottom:24%;animation-duration:6.2s;animation-delay:2.4s}.f-candy{right:1.2%;bottom:5%;animation-duration:7.2s;animation-delay:1.6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-16px) rotate(3deg)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.95;transform:scale(1.15)}}

/* ---------- conteúdo ---------- */
.lounge{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:36px 20px 56px;text-align:center}
.brand{margin:0;font-family:var(--script);font-size:clamp(34px,6vw,52px);color:var(--rose);line-height:1}
.ornament{display:block;margin:6px auto 0;width:170px;height:22px;color:var(--orn)}
.eyebrow{margin:26px 0 0;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
h1{margin:8px 0 0;font-family:var(--serif);font-weight:normal;font-size:clamp(30px,6.4vw,54px);line-height:1.12;letter-spacing:-.01em}
.script{display:block;margin-top:2px;font-family:var(--script);font-size:clamp(34px,6.6vw,72px);color:var(--rose);line-height:1.05;text-wrap:balance}
.lead{margin:14px auto 0;max-width:560px;font-size:clamp(16px,2.4vw,19px);color:#5d5157}

/* ---------- vitrine do pack ---------- */
.pack-card{margin:34px auto 0;max-width:520px;background:var(--card);border-radius:28px;padding:14px 14px 22px;box-shadow:0 30px 60px -22px rgba(190,110,140,.42),0 2px 0 #fff inset;border:1px solid var(--line);transform:rotate(-1.2deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pack-card:hover{transform:rotate(0) translateY(-4px)}
.cover{display:block;width:100%;height:auto;border-radius:20px;background:#fdf6f5}
.pack-card h2{margin:16px 12px 0;font-family:var(--serif);font-weight:normal;font-size:clamp(22px,4vw,28px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 8px 0;padding:0;list-style:none}
.chips li{padding:5px 12px;border-radius:999px;background:linear-gradient(180deg,#fff,#fff3f5);border:1px solid var(--line);font-size:13px;color:#6b5a61;border-bottom-width:1px}

/* ---------- downloads ---------- */
#downloads{margin:36px auto 0;max-width:560px}
.files{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.file{display:flex;flex-direction:column;align-items:center;gap:8px}
.file-name{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.file-name small{display:block;font-family:var(--sans);font-size:13px;color:var(--muted)}
button{font:inherit;cursor:pointer;border:0}
.btn-magic{position:relative;overflow:hidden;width:100%;max-width:440px;padding:20px 30px;border-radius:999px;color:#25131b;font-size:clamp(18px,3vw,21px);font-weight:600;letter-spacing:.01em;
  background:linear-gradient(135deg,var(--rose) 0%,var(--rose-2) 55%,var(--coral) 100%);box-shadow:0 18px 34px -12px rgba(217,91,124,.7),0 0 0 6px rgba(255,255,255,.55);transition:transform .25s ease,box-shadow .25s ease;animation:pulse 3.2s ease-in-out infinite}
.btn-magic::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite}
.btn-magic:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 24px 40px -12px rgba(217,91,124,.75),0 0 0 8px rgba(255,255,255,.7)}
.btn-magic:active{transform:translateY(1px) scale(.99)}
.btn-magic:disabled{opacity:.7;animation:none;cursor:progress}
.btn-soft{padding:11px 22px;border-radius:999px;background:#fff;color:#8b5b6a;border:1px solid var(--line);font-size:15px;box-shadow:0 8px 18px -12px rgba(150,100,120,.5);transition:transform .2s ease,background .2s ease}
.btn-soft:hover{background:#fff7f8;transform:translateY(-2px)}
button:focus-visible,a:focus-visible{outline:3px solid #7a6bb0;outline-offset:4px}
@keyframes pulse{0%,100%{box-shadow:0 18px 34px -12px rgba(217,91,124,.7),0 0 0 6px rgba(255,255,255,.55)}50%{box-shadow:0 22px 40px -10px rgba(217,91,124,.85),0 0 0 12px rgba(255,255,255,.35)}}
@keyframes shine{0%,55%{left:-60%}100%{left:130%}}
#status{min-height:1.6em;margin:16px auto 0;max-width:520px;font-size:15px;color:#7b5a67}
#status:not(:empty){padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.75);border:1px dashed var(--orn)}
.hint{margin:10px auto 0;max-width:500px;font-size:14px;color:var(--muted)}

/* ---------- 3 passos ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:44px 0 0;padding:0;list-style:none;text-align:center}
.steps li{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:22px;padding:18px 12px 16px;backdrop-filter:blur(3px)}
.steps b{display:block;font-family:var(--script);font-weight:normal;font-size:44px;line-height:1;color:var(--rose)}
.steps span{display:block;margin-top:4px;font-family:var(--serif);font-size:18px}
.steps small{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}

/* ---------- agradecimento ---------- */
.thanks{margin:44px auto 0;max-width:560px}
.thanks .script{font-size:clamp(44px,9vw,68px)}
.thanks p{margin:6px 0 0;color:#5d5157}
.thanks a{color:#a24b68;text-underline-offset:3px}
footer{margin-top:40px;font-size:14px;color:var(--muted)}
footer b{font-weight:600;color:#7b5a67}

/* ---------- entrada suave, um item depois do outro ---------- */
.rise{opacity:0;transform:translateY(18px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.25s}.d3{animation-delay:.45s}.d4{animation-delay:.65s}.d5{animation-delay:.9s}.d6{animation-delay:1.15s}.d7{animation-delay:1.4s}
@keyframes rise{to{opacity:1;transform:none}}

/* ---------- brilhos que saem do botão ao clicar (criados pelo magia.js) ---------- */
.spark{position:fixed;z-index:5;width:10px;height:10px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#fff 0 25%,#ffd3dc 45%,rgba(255,255,255,0) 72%);animation:burst .95s ease-out forwards}
@keyframes burst{from{opacity:1;transform:translate(0,0) scale(1.4)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

/* janelas medias: o conteudo ganha uma faixa nas laterais para os 8 personagens caberem sem cobrir o texto */
@media (max-width:1100px){.lounge{padding-left:88px;padding-right:88px}}

/* ---------- celular ---------- */
@media (max-width:640px){
  .lounge{padding:26px 16px 44px}
  .steps{grid-template-columns:1fr;gap:10px}
  .f-kitten,.f-owl,.f-vampire,.f-pumpkin,.f-witchhat,.f-candy{display:none}
  .floater{opacity:.85}
  .pack-card{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}