/* Simulações do Mac e do iPhone na landing. Tudo em HTML, sem vídeo: cada cena é montada
   por sim.js e anima com transições CSS. Os dois desenhos são feitos num tamanho fixo
   (1280x800 e 390x844) e escalados pro espaço disponível. */

.sim-stage{position:relative;width:100%;overflow:hidden;contain:layout paint}
.sim-scaler{position:absolute;left:0;top:0;transform-origin:0 0}
.sim-mac-stage{aspect-ratio:1280/680;border-radius:0 0 17px 17px}
.sim-phone-stage{aspect-ratio:390/844;border-radius:44px;background:#000}

/* ---------- Mac ---------- */
.mac{position:relative;width:1280px;height:680px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:#fff;
  background:#000 url("wallpaper.webp") center 30%/cover no-repeat}
.mac-menubar{position:absolute;left:0;right:0;top:0;height:32px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;
  background:rgba(10,10,16,.38);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-size:13px;font-weight:500;color:rgba(255,255,255,.88)}
.mac-menubar .l,.mac-menubar .r{display:flex;gap:20px;align-items:center}
.mac-menubar b{font-weight:700}

/* o notch fechado e o painel aberto são o mesmo bloco preto, que muda de tamanho */
.notch{position:absolute;left:50%;top:0;transform:translateX(-50%);background:#000;z-index:5;overflow:hidden;
  width:330px;height:34px;border-radius:0 0 14px 14px;
  transition:width .52s cubic-bezier(.34,1.2,.64,1),height .52s cubic-bezier(.34,1.2,.64,1),border-radius .45s ease}
.notch::before,.notch::after{content:"";position:absolute;top:0;width:12px;height:12px}
.notch.open{width:600px;height:var(--panel-h,560px);border-radius:0 0 30px 30px;box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
.notch-closed{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 12px;transition:opacity .2s}
.notch.open .notch-closed{opacity:0;pointer-events:none}
.notch-count{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;font-weight:700}
.notch-count .a{color:#66ff80}.notch-count .s{color:rgba(255,255,255,.4)}
.notch-open{position:absolute;left:0;top:0;width:600px;opacity:0;transition:opacity .25s .12s}
.notch.open .notch-open{opacity:1}
.p-head{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 10px}
.p-tabs{display:flex;gap:2px;padding:3px;height:26px;box-sizing:border-box;background:rgba(255,255,255,.05);border-radius:9px}
.p-tab{display:flex;align-items:center;gap:5px;padding:0 9px;border-radius:6px;color:rgba(255,255,255,.38);font-size:11px;font-weight:600}
.p-tab.on{background:rgba(255,255,255,.12);color:#fff}
.p-btns{display:flex;gap:2px;color:rgba(255,255,255,.55)}
.p-btn{position:relative;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.p-btn.on{background:rgba(255,255,255,.12);color:#fff}
.p-btn .live{position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:#5fcf6b;box-shadow:0 0 0 1.5px #000}
.p-body{margin:0 8px;background:#0b0b0c;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden}
.p-usage{padding:12px 16px 0;display:flex;align-items:center;gap:14px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10px;color:rgba(255,255,255,.38)}
.p-usage b{font-family:-apple-system,system-ui,sans-serif;font-size:11px}
.p-usage .bar{display:inline-block;width:34px;height:3px;border-radius:2px;vertical-align:2px;margin:0 5px;position:relative}
.p-usage .bar i{position:absolute;left:0;top:0;height:3px;border-radius:2px}
.p-stage{display:flex;align-items:center;gap:16px;padding:14px 16px 6px}
.say{position:relative;padding:8px 12px;background:#1c1c1e;border:1px solid rgba(255,255,255,.08);border-radius:12px;font-size:12.5px;font-weight:500;line-height:17px;color:rgba(255,255,255,.9);
  transition:opacity .18s,transform .3s cubic-bezier(.34,1.2,.64,1)}
.say::before{content:"";position:absolute;left:-5px;top:50%;width:8px;height:8px;margin-top:-4px;background:#1c1c1e;border-left:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);transform:rotate(45deg)}
.say.swap{opacity:0;transform:scale(.94)}
.p-list{padding:8px 12px 12px;display:flex;flex-direction:column;gap:8px}
.p-page{padding:4px 18px 18px}

/* card de sessão do Mac */
.mcard{display:flex;align-items:flex-start;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  transition:background .3s,border-color .3s}
.mcard.need{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.11)}
.mcard .dotcol{width:28px;flex-shrink:0;padding-top:16px;display:flex;justify-content:center}
.mcard .main{flex:1;min-width:0;padding:11px 16px 11px 0}
.row{display:flex;align-items:center;gap:8px}
.mcard .name{font-size:13.5px;font-weight:600;letter-spacing:-.1px}
.tag{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:9.5px;color:rgba(255,255,255,.26)}
.state{margin-left:auto;font-size:10px;font-weight:500;letter-spacing:.2px}
.ctx{margin-top:4px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:9.5px;color:rgba(255,255,255,.48)}
.ctx .bar{width:60px;height:3px;border-radius:2px;background:rgba(255,255,255,.08);position:relative}
.ctx .bar i{position:absolute;left:0;top:0;height:3px;border-radius:2px}
.now{margin-top:7px;font-size:12px;font-weight:500;line-height:16px;color:rgba(255,255,255,.86)}
.task{margin-top:4px;font-size:10.5px;color:rgba(255,255,255,.42)}
.ago{margin-left:auto;font-size:9.5px;color:rgba(255,255,255,.32)}
.adot{display:inline-block;flex-shrink:0;width:8px;height:8px;border-radius:50%;position:relative}
.adot.pulse::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid currentColor;opacity:.35;animation:ringp 1.6s ease-in-out infinite}
@keyframes ringp{50%{transform:scale(1.25);opacity:.12}}
.code{margin-top:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:9px 12px;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;color:rgba(255,255,255,.88)}
.code small{display:block;margin-top:4px;font-family:-apple-system,system-ui,sans-serif;font-size:10.5px;color:rgba(255,255,255,.45)}
.btns{display:flex;gap:6px;margin-top:10px;justify-content:flex-end}
.b{height:26px;padding:0 12px;border-radius:7px;display:flex;align-items:center;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.07);color:rgba(255,255,255,.8);transition:transform .12s,background .2s}
.b.pri{background:#ececec;color:#000}
.b.neg{color:#ff8a8a}
.b.press{transform:scale(.94)}
.opt{display:flex;align-items:center;gap:9px;margin-top:6px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:11.5px;color:rgba(255,255,255,.85);transition:background .2s,border-color .2s}
.opt i{font-style:normal;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:10px;color:rgba(255,255,255,.4);width:14px}
.opt.pick{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}

.qr-box{width:150px;height:150px;border-radius:12px;background:#fff;padding:10px;box-sizing:border-box;flex-shrink:0}
.qr-box svg{display:block;width:100%;height:100%}

/* cursor do mouse */
.cursor{position:absolute;left:0;top:0;z-index:20;width:22px;height:22px;pointer-events:none;
  transition:transform .9s cubic-bezier(.45,.05,.25,1);filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.cursor .click{position:absolute;left:-10px;top:-10px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.55);opacity:0;transform:scale(.4)}
.cursor.clicking .click{animation:clk .45s ease-out}
@keyframes clk{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}

/* ---------- Hatch ---------- */
.hatch{display:block;overflow:visible}
.hatch .body-g{transform-origin:50px 88px;animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleY(1.025) scaleX(.99)}}
.hatch .eyes{transform-origin:50px 55px;animation:blink 4.2s infinite}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.hop{animation:hop .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes hop{30%{transform:translateY(-13%)}60%{transform:translateY(2%)}100%{transform:none}}

/* ---------- iPhone ---------- */
.ph{position:relative;width:390px;height:844px;overflow:hidden;background:#0b0b0c;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.ph-status{position:absolute;left:0;right:0;top:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:6px 34px 0 42px;font-size:16px;font-weight:600;z-index:9}
.ph-island{position:absolute;left:50%;top:11px;width:124px;height:36px;border-radius:20px;background:#000;transform:translateX(-50%);z-index:10}
.ph-screen{position:absolute;inset:0;padding-top:50px;transition:transform .45s cubic-bezier(.3,.9,.3,1),opacity .3s}
.ph-screen.off-right{transform:translateX(100%)}
.ph-screen.off-left{transform:translateX(-28%);opacity:.0}
.ph-screen.off-down{transform:translateY(100%)}
.ph-top{height:52px;display:flex;align-items:center;gap:8px;padding:0 20px;font-size:14px;font-weight:600;color:rgba(255,255,255,.85)}
.rings{display:flex;gap:14px;padding:6px 18px 0}
.ring{width:64px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:rgba(255,255,255,.5)}
.ring .w{position:relative;width:44px;height:44px}
.ring .w b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px}
.ring small{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;color:rgba(255,255,255,.35)}
.ph-hero{position:relative;height:216px;margin:14px 16px 0}
.think{position:absolute;left:70px;top:0;max-width:288px;padding:12px 16px;box-sizing:border-box;background:#1c1c1e;border:1px solid rgba(255,255,255,.1);border-radius:18px;
  font-size:15px;font-weight:600;line-height:20px;color:rgba(255,255,255,.92);transform-origin:0 100%;transition:opacity .18s,transform .3s cubic-bezier(.34,1.2,.64,1)}
.think.swap{opacity:0;transform:scale(.94)}
.think-dot{position:absolute;border-radius:50%;background:#1c1c1e;border:1px solid rgba(255,255,255,.1)}
.ph-hero .hatch-wrap{position:absolute;left:-8px;top:56px;width:160px;height:160px}
.ph-list{position:absolute;left:0;right:0;bottom:0;top:388px;border-top:1px solid rgba(255,255,255,.06);padding:12px 16px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.pcard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px 14px;transition:background .3s,border-color .3s,transform .15s}
.pcard.need{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.11)}
.pcard .name{font-size:15px;font-weight:600}
.pcard .now{font-size:14px;line-height:19px;margin-top:6px}
.pcard .task{font-size:12px;margin-top:3px}
.pcard.press{transform:scale(.98)}
.touch{position:absolute;z-index:30;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none;opacity:0}
.touch.go{animation:tch .65s ease-out}
@keyframes tch{0%{opacity:0;transform:scale(.6)}25%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.05)}}
.back{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7)}
.att{padding:0 18px}
.att h3{margin:18px 0 0;font-size:16px;font-weight:500;color:rgba(255,255,255,.95)}
.att .code{font-size:13px;padding:12px 14px;margin-top:14px}
.att .code small{font-size:12.5px}
.att-btns{position:absolute;left:16px;right:16px;bottom:34px;display:flex;gap:8px}
.att-btns .b{height:46px;border-radius:10px;font-size:15px;padding:0 16px}
.att-btns .b.pri{margin-left:auto}
.chat{padding:0 16px;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:21px}
.bub{align-self:flex-end;max-width:78%;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06)}
.agent ul{margin:6px 0 0;padding-left:18px}
.agent code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:13px;color:rgba(255,255,255,.7);background:none;padding:0}
.chips{display:flex;gap:6px;margin-top:8px}
.chips span{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11px;color:rgba(255,255,255,.4);padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.05)}
.composer{position:absolute;left:16px;right:16px;bottom:30px;display:flex;gap:8px}
.composer div{flex:1;height:44px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 14px;font-size:14px;color:rgba(255,255,255,.3)}
.composer span{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.07)}
.splash{position:absolute;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:8;transition:opacity .3s}
.splash.gone{opacity:0;pointer-events:none}
.splash .hatch-wrap{width:180px;height:180px;transform:scale(.6);opacity:0;transition:transform .5s cubic-bezier(.34,1.5,.64,1),opacity .26s}
.splash.in .hatch-wrap{transform:none;opacity:1}

/* cenas embaixo de cada simulação: texto simples, a atual acesa com uma linha que enche */
.scenes{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 6px;margin-top:22px}
.scene{appearance:none;border:0;background:none;color:var(--faint,rgba(242,242,242,.34));font:500 14px var(--sans);padding:8px 10px;border-radius:10px;cursor:pointer;transition:color .2s,background .2s}
.scene:hover{color:var(--ink,#f2f2f2)}
.scene.on{color:var(--ink,#f2f2f2)}
.scene .bar{display:block;height:2px;margin-top:6px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.scene .bar i{display:block;height:100%;width:0;background:var(--ink,#f2f2f2)}
.scene.on .bar i{animation:fill var(--dur,6s) linear forwards}
@keyframes fill{to{width:100%}}

@media (prefers-reduced-motion:reduce){
  .notch,.cursor,.ph-screen,.think,.say{transition:none!important}
  .adot.pulse::after{animation:none!important}
}