/* ============================================================
   CORE — tokens das duas skins, botões, efeitos globais
   ============================================================ */
:root { --ease: cubic-bezier(.22,.8,.25,1); }

/* ---------- SKIN CYBERPUNK ---------- */
[data-skin] {
  --bg:#050507; --bg2:#0a0a10; --panel:#0c0c12; --panel2:#14141d; --line:#24242f; --line2:#34344a;
  --txt:#e8e8f0; --muted:#8d8da3;
  --a1:#00f0ff; --a1g:rgba(0,240,255,.4); --a2:#ff003c; --a2g:rgba(255,0,60,.5);
  --ok:#00ff66; --warn:#ffea00; --org:#ff9800; --info:#2196f3; --gold:#ffd700; --pink:#ff007f;
  --on-a1:#000; --on-a2:#fff;
  --f-d:'Orbitron',sans-serif; --f-b:'Rajdhani',sans-serif; --f-m:'Share Tech Mono',monospace;
  --r:0px; --r-s:0px; --pill:999px;
  --clip:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  --clip-s:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  --shadow:0 0 30px rgba(0,240,255,.07); --ind:var(--a2); --ind-txt:#fff;
  --up:uppercase; --trk:1.5px; --fw-d:700;
}
/* ---------- SKIN MINIMALISTA (porcelana + grafite) ---------- */

/* ---------- SKIN CLARA (o mesmo cyberpunk, em cores de dia) ---------- */
[data-skin="minimal"] {
  --bg:#e7edf3; --bg2:#dbe4ed; --panel:#f7fafc; --panel2:#ecf1f6; --line:#c5d0dc; --line2:#9fb0c3;
  --txt:#0b1220; --muted:#506078;
  --a1:#00789c; --a1g:rgba(0,120,156,.3); --a2:#d4003a; --a2g:rgba(212,0,58,.3);
  --ok:#008f47; --warn:#a98a00; --org:#d46500; --info:#1565c0; --gold:#b58900; --pink:#c2006b;
  --on-a1:#fff; --on-a2:#fff;
  --f-d:'Orbitron',sans-serif; --f-b:'Rajdhani',sans-serif; --f-m:'Share Tech Mono',monospace;
  --r:0px; --r-s:0px; --pill:999px;
  --clip:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  --clip-s:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  --shadow:0 10px 30px rgba(11,18,32,.14); --ind:var(--a2); --ind-txt:#fff;
  --up:uppercase; --trk:1.5px; --fw-d:700;
}
[data-skin="minimal"] body { background-image:linear-gradient(rgba(0,120,156,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(0,120,156,.09) 1px,transparent 1px); background-size:34px 34px; background-position:center; }

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--txt); font-family: var(--f-b);
  font-size: 17px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
[data-skin] body {
  background-image: linear-gradient(rgba(0,240,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.035) 1px,transparent 1px);
  background-size: 34px 34px; background-position: center;
}
[data-skin="cyber"] body::after { /* scanlines */
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.35;
  background: linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.25) 50%),linear-gradient(90deg,rgba(255,0,0,.05),rgba(0,255,0,.02),rgba(0,0,255,.05));
  background-size: 100% 4px, 6px 100%;
}
a { color: inherit; }
img { max-width: 100%; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; }
::selection { background: var(--a1); color: var(--on-a1); }

/* ---------- brilho que segue o cursor (cyber) ---------- */
.fx-glow { position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .4s;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,30%), rgba(0,240,255,.07), transparent 65%); }
[data-skin="cyber"] .fx-glow { opacity:1; }

/* ---------- botões ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family: var(--f-d); font-weight: var(--fw-d); font-size:.85rem; letter-spacing: var(--trk);
  text-transform: var(--up); text-decoration:none; border:1px solid transparent; padding:12px 18px;
  background:transparent; color:var(--txt); clip-path: var(--clip); border-radius: var(--r-s);
  transition: background .25s, color .25s, box-shadow .25s, transform .15s, border-color .25s;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn svg { width:18px; height:18px; fill:currentColor; }
.btn-wa   { color:var(--ok); border-color:var(--ok); box-shadow: inset 0 0 12px rgba(0,255,102,.15); }
.btn-wa:hover { background:var(--ok); color:#000; box-shadow:0 0 18px var(--ok); }
.btn-lucy { background:var(--a2); color:var(--on-a2); box-shadow:0 0 16px var(--a2g); }
.btn-lucy:hover { background:#fff; color:var(--a2); box-shadow:0 0 22px #fff; }
.btn-portal { color:var(--a1); border-color:var(--a1); box-shadow: inset 0 0 12px var(--a1g); }
.btn-portal:hover { background:var(--a1); color:var(--on-a1); box-shadow:0 0 18px var(--a1g); }

/* ---------- dock (som + skin) ---------- */
.fx-dock { position:fixed; top:22px; right:22px; z-index:1500; display:flex; gap:10px; }
body:not([data-page="home"]) .fx-dock { top:auto; bottom:18px; right:auto; left:18px; }
.fx-btn {
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer; padding:0;
  background:var(--panel); color:var(--a1); border:1px solid var(--a1); clip-path:var(--clip-s); border-radius:var(--r-s);
  box-shadow: inset 0 0 10px var(--a1g); transition: background .25s,color .25s,transform .2s;
}
.fx-btn:hover { background:var(--a1); color:var(--on-a1); transform:scale(1.07); }
.fx-btn svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.fx-btn .off { display:none; }
.fx-btn.is-off .on { display:none; } .fx-btn.is-off .off { display:block; }
.fx-skin .ic-min { display:none; } [data-skin="cyber"] .fx-skin .ic-min { display:block; } [data-skin="cyber"] .fx-skin .ic-cy { display:none; }

/* troca de skin com revelação circular */
::view-transition-old(root), ::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-new(root) { animation: skinReveal .75s var(--ease) both; }
@keyframes skinReveal { from { clip-path:circle(0 at var(--sx,95%) var(--sy,5%)); } to { clip-path:circle(150% at var(--sx,95%) var(--sy,5%)); } }

/* ---------- transição: saída de página + terminal "hack" ---------- */
body { animation:pageIn .45s ease backwards; } @keyframes pageIn { from { opacity:0; } }
body.is-leaving { opacity:0; transition:opacity .22s ease; }
.fx-term { position:fixed; inset:0; z-index:2000000; display:none; background:var(--bg); color:var(--txt); font-family:var(--f-m); overflow:hidden; }
.fx-term.on { display:block; animation:termIn .3s ease both; } @keyframes termIn { from { opacity:0; } }
.fx-term::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--a1g) 1px,transparent 1px),linear-gradient(90deg,var(--a1g) 1px,transparent 1px); background-size:44px 44px; opacity:.18; }
.term-rain { position:absolute; inset:0; overflow:hidden; font-size:.72rem; color:var(--a1); opacity:.5; }
.term-rain span { position:absolute; white-space:nowrap; opacity:0; animation:rainIn .6s ease forwards, rainOut .8s ease 2.1s forwards; }
@keyframes rainIn { to { opacity:.55; } } @keyframes rainOut { to { opacity:0; } }
.term-win { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(980px,92vw); display:grid; grid-template-columns:1.15fr .85fr; background:var(--panel); border:1px solid var(--a1); box-shadow:0 0 70px var(--a1g); clip-path:var(--clip); animation:winIn .5s var(--ease) both; }
@keyframes winIn { from { opacity:0; transform:translate(-50%,-46%) scale(.97); } }
.term-bar { grid-column:1/-1; display:flex; align-items:center; gap:7px; padding:9px 14px; border-bottom:1px solid var(--line2); font-size:.72rem; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }
.term-bar i { width:9px; height:9px; border-radius:50%; background:var(--a2); } .term-bar i:nth-child(2) { background:var(--warn); } .term-bar i:nth-child(3) { background:var(--ok); } .term-bar b { margin-left:auto; color:var(--a1); font-weight:400; }
.term-code { padding:20px 22px; min-height:310px; font-size:.9rem; line-height:1.75; overflow:hidden; }
.term-code .l { display:block; width:0; overflow:hidden; white-space:nowrap; animation:typeW .55s steps(38) forwards; animation-delay:var(--d); }
@keyframes typeW { to { width:100%; } }
.term-code .k { color:var(--a2); } .term-code .s { color:var(--ok); } .term-code .c { color:var(--muted); } .term-code .a { color:var(--a1); }
.term-code .cur { display:inline-block; width:8px; height:1em; background:var(--a1); vertical-align:-2px; animation:blinker .8s steps(2) infinite; }
.term-view { border-left:1px solid var(--line2); padding:16px; display:flex; flex-direction:column; gap:10px; background:var(--panel2); }
.wf-url { font-size:.78rem; color:var(--a1); border:1px solid var(--line2); padding:5px 10px; background:var(--panel); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wf { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; flex:1; }
.wf .b { border:1px dashed var(--a1); background:var(--a1g); opacity:0; transform:translateY(8px); animation:wfIn .45s var(--ease) forwards; animation-delay:var(--d); min-height:26px; }
.wf .b.w3 { grid-column:span 3; } .wf .b.w2 { grid-column:span 2; } .wf .b.t { min-height:90px; } .wf .b.h { min-height:50px; }
@keyframes wfIn { to { opacity:1; transform:none; } }
.term-foot { grid-column:1/-1; display:flex; align-items:center; gap:14px; padding:12px 18px; border-top:1px solid var(--line2); font-size:.8rem; }
.term-prog { flex:1; height:4px; background:var(--line); overflow:hidden; } .term-prog i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--a1),var(--a2)); box-shadow:0 0 12px var(--a1g); }
.term-st { color:var(--muted); min-width:210px; } .term-pct { color:var(--a1); min-width:42px; text-align:right; }
@media (max-width:700px) { .term-win { grid-template-columns:1fr; } .term-view { display:none; } .term-code { min-height:230px; font-size:.78rem; } .term-st { min-width:0; } }

/* ---------- toast ---------- */
.toasts { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:3000000; display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast { background:var(--panel); color:var(--txt); border:1px solid var(--line2); border-left:4px solid var(--a1); padding:12px 20px; font-family:var(--f-b); font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,.35); border-radius:var(--r-s); animation: toastIn .35s var(--ease); max-width:90vw; }
.toast.ok { border-left-color:var(--ok); } .toast.err { border-left-color:var(--a2); }
@keyframes toastIn { from { opacity:0; transform:translateY(14px); } }

/* ---------- glitch do título (cyber) ---------- */
.glitch { position:relative; }
[data-skin] .glitch::before, [data-skin] .glitch::after { content:attr(data-text); position:absolute; inset:0; pointer-events:none; opacity:0; }
[data-skin] .glitch:hover::before { opacity:.8; color:var(--a2); animation:gl 0.35s steps(2) 2; }
[data-skin] .glitch:hover::after  { opacity:.8; color:var(--a1); animation:gl 0.35s steps(2) 2 reverse; }
@keyframes gl { 0%{transform:translate(0)} 25%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 75%{transform:translate(-1px,-1px)} 100%{transform:translate(0)} }
.blink { animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity:0; } }

.reveal { opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* Koenig editor */
.kg-width-wide { position:relative; width:85vw; min-width:100%; margin:auto calc(50% - 50vw); transform:translateX(calc(50vw - 50%)); }
.kg-width-full { position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }