/* Interações de apresentação, isoladas dos estilos e recursos existentes. */
.portrait-wrap { position:sticky; top:110px; isolation:isolate; }
.portrait-wrap::before { content:""; position:absolute; inset:10% -12% -4%; z-index:-1; background:radial-gradient(ellipse at 25% 70%,#7a5cff50,transparent 65%),radial-gradient(ellipse at 80% 20%,#22e6c425,transparent 60%); filter:blur(28px); pointer-events:none; }
.portrait-frame { position:relative; transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .25s ease-out; }
.portrait-frame .photo { border-color:#7a5cff60; box-shadow:0 30px 80px -35px #7a5cff99; }
.portrait-frame .photo::before { background:conic-gradient(transparent 15%,var(--ac3),var(--ac2),transparent 65%); }
.portrait-frame .photo img { inset:3px; width:calc(100% - 6px); height:calc(100% - 6px); }
.portrait-seal { position:absolute; z-index:4; bottom:22px; left:22px; right:22px; display:flex; align-items:center; gap:12px; padding:16px 18px; border:1px solid #ffffff25; border-radius:16px; background:#080c16dc; backdrop-filter:blur(16px); box-shadow:0 10px 30px #0004; }
.portrait-seal i { width:8px; height:8px; flex-shrink:0; border-radius:50%; background:var(--ac3); box-shadow:0 0 16px var(--ac3); }
.portrait-seal span { font-size:.8rem; color:#c4cbd9; }
.portrait-seal strong { display:block; font-size:1.2rem; color:var(--tx); }
.portrait-seal>span:last-child { margin-left:auto; font-size:2rem; color:var(--ac3); }
.portrait-caption { display:flex; justify-content:space-between; gap:16px; margin:20px 4px 0; color:var(--mut); font: .61rem/1.7 monospace; letter-spacing:.1em; }
.tech-explorer { margin:28px 0 32px; }
.tech-hint { display:block; color:var(--mut); font-size:.75rem; margin-bottom:12px; }
.tech-hint>span { color:var(--ac3); }
.tech-chips { display:flex; gap:8px; flex-wrap:wrap; }
.tech-chips button { cursor:pointer; font:inherit; font-size:.78rem; padding:9px 14px; border:1px solid var(--line); border-radius:99px; background:var(--card); color:#aeb7ca; transition:background .2s,border-color .2s,color .2s,transform .2s; }
.tech-chips button:hover { transform:translateY(-2px); border-color:var(--ac3); color:var(--tx); }
.tech-chips button[aria-pressed="true"] { background:#22e6c414; border-color:#22e6c477; color:var(--ac3); }
.about #tech-description { margin:14px 0 0; padding:14px 18px; border-left:2px solid var(--ac3); background:linear-gradient(90deg,#22e6c408,transparent); font-size:.82rem; min-height:72px; }
#tech-description strong { color:var(--ac3); }
.journey-heading { display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:22px; }
.journey-heading h3 { font-size:1.1rem; }
.journey-heading>span { color:var(--mut); font-size:.67rem; }
.journey { position:relative; padding-left:28px; --journey-progress:0; }
.journey::before,.journey::after { content:""; position:absolute; left:4px; top:22px; bottom:24px; width:2px; background:var(--line); }
.journey::after { background:linear-gradient(var(--ac3),var(--ac2)); transform-origin:top; transform:scaleY(var(--journey-progress)); transition:transform .8s ease; box-shadow:0 0 12px #22e6c455; }
.journey .journey-step { position:relative; margin:0 0 12px; padding:0; border:1px solid var(--line); border-radius:16px; background:linear-gradient(115deg,#121621,#0d1018); transition:border-color .25s,box-shadow .25s,opacity .6s,translate .6s; }
.journey-step::before { content:""; position:absolute; left:-29px; top:24px; width:10px; height:10px; border-radius:50%; border:2px solid var(--bg); background:#51596e; z-index:1; transition:background .4s,box-shadow .4s; }
.journey-step.is-reached::before,.journey-step[open]::before { background:var(--ac3); box-shadow:0 0 14px #22e6c470; }
.journey-step[open] { border-color:#22e6c44a; box-shadow:0 12px 32px #0002; }
.journey-step:hover { border-color:#7a5cff80; }
.journey-step summary { display:block; position:relative; padding:19px 52px 19px 20px; cursor:pointer; list-style:none; }
.journey-step summary::after { content:none; }
.journey-date { display:flex; align-items:center; gap:10px; color:var(--ac3); font:600 .65rem/1.5 monospace; letter-spacing:.08em; }
.journey-date em { font-size:.55rem; font-weight:700; font-style:normal; padding:2px 7px; border-radius:4px; color:var(--ac); background:#c6ff3d12; }
.journey-title { display:block; font-size:1rem; line-height:1.4; margin:7px 0 4px; font-weight:750; }
.journey-subtitle { display:block; color:var(--mut); font-size:.78rem; font-weight:400; }
.journey-toggle { position:absolute; right:18px; top:28px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; border:1px solid #ffffff18; color:var(--ac3); font-size:1.1rem; transition:transform .25s; }
.journey-step[open] .journey-toggle { transform:rotate(45deg); }
.journey-body { padding:0 20px 20px; animation:experience-in .3s ease both; }
.about .journey-body p { padding:16px 0 0; border-top:1px solid var(--line); font-size:.84rem; line-height:1.8; }
.journey-stack { display:flex; flex-wrap:wrap; gap:6px; }
.journey-stack span { font-size:.65rem; padding:5px 9px; border:1px solid #7a5cff30; border-radius:6px; color:#beb6e9; background:#7a5cff08; }
.tech-chips button:focus-visible,.journey-step summary:focus-visible { outline:2px solid var(--ac3); outline-offset:4px; border-radius:12px; }
.trust-card { position:relative; isolation:isolate; overflow:hidden; transition:border-color .25s,box-shadow .25s,rotate .25s; rotate:var(--card-rotate,0deg); }
.trust-card::before { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(260px circle at var(--light-x,50%) var(--light-y,0%),#22e6c41a,transparent 75%); opacity:.4; transition:opacity .3s; pointer-events:none; }
.trust-card::after { content:""; position:absolute; height:1px; top:0; left:15%; right:15%; background:linear-gradient(90deg,transparent,var(--ac3),var(--ac2),transparent); opacity:.45; transition:opacity .3s; }
.trust-card:hover,.trust-card:focus-within { border-color:#22e6c466; box-shadow:0 16px 45px #0004; }
.trust-card:hover::before,.trust-card:focus-within::before,.trust-card:hover::after { opacity:1; }
.trust-icon { width:42px; height:42px; padding:10px; border-radius:12px; color:var(--ac3); border:1px solid #22e6c430; background:#22e6c40a; margin-bottom:20px; transition:transform .3s; }
.trust-card:hover .trust-icon { transform:translateY(-3px) rotate(-5deg); }
@keyframes experience-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:961px) and (prefers-reduced-motion:no-preference) { .journey.has-motion .journey-step:not(.is-reached) { opacity:.35; translate:0 10px; } }
@media(max-width:960px) { .portrait-wrap { position:relative; top:auto; max-width:440px; width:100%; margin:auto; } .portrait-wrap::before { inset:5% 0 0; } .about .portrait-frame .photo { max-width:none; } }
@media(max-width:520px) { .portrait-seal { left:14px; right:14px; bottom:14px; padding:12px 14px; } .journey { padding-left:22px; } .journey-step::before { left:-23px; } .journey-step summary { padding-left:16px; } .journey-body { padding-left:16px; padding-right:16px; } }
@media(prefers-reduced-motion:reduce) { .portrait-frame { transform:none !important; } .trust-card { rotate:none !important; } .journey::after { transform:scaleY(1); } .journey-step,.journey-body,.trust-icon { animation:none; transition:none; } }
