/* Portfolio cinematográfico — liquid glass, sem libs, mobile-first */
:root{
  --bg:#0a0a0b; --ink:#f2f2f0; --muted:rgba(242,242,240,.62);
  --faint:rgba(242,242,240,.38); --hair:rgba(255,255,255,.12);
  --glass:rgba(16,16,18,.42); --stroke:rgba(255,255,255,.14);
  --r:22px; --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);
  -webkit-font-smoothing:antialiased;min-height:100dvh;overflow-x:hidden}
::selection{background:rgba(255,255,255,.85);color:#000}
.skip{position:fixed;top:-60px;left:12px;z-index:99;background:#fff;color:#000;
  padding:.6rem 1rem;border-radius:10px;font-size:.8rem;transition:top .2s}
.skip:focus{top:12px}
:focus-visible{outline:1.5px solid rgba(255,255,255,.8);outline-offset:3px;border-radius:6px}

/* fundo cinematográfico */
.stage{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(120% 90% at 50% 0%,#232326 0%,#131315 45%,#0a0a0b 100%)}
.stage img,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,6,.55),rgba(5,5,6,.35) 40%,rgba(5,5,6,.72));}
.stage .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.stage .letterbox::before,.stage .letterbox::after{content:"";position:absolute;left:0;right:0;height:5vh;
  background:#000;opacity:.55}
.stage .letterbox::before{top:0}.stage .letterbox::after{bottom:0}

/* layout */
.wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:88px 16px 40px}
.top{position:fixed;top:14px;left:0;right:0;display:flex;justify-content:center;z-index:20;
  pointer-events:none}
.top .clock{pointer-events:auto}

/* liquid glass */
.glass{position:relative;background:var(--glass);
  -webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  border:1px solid var(--stroke);border-radius:var(--r);
  box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14);
  overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 28%)}
.panel{width:min(440px,100%);min-height:clamp(340px,50dvh,440px);padding:28px 24px 22px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:.62rem;letter-spacing:.34em;color:var(--faint);text-transform:uppercase}
.name{font-size:clamp(1.5rem,4.6vw,2.1rem);letter-spacing:.14em;font-weight:600;margin:.7rem 0 .2rem}
.role{font-size:.68rem;letter-spacing:.42em;color:var(--muted)}
.tag{margin:1rem auto 0;font-size:.72rem;letter-spacing:.18em;line-height:2;color:var(--muted);max-width:36ch}
nav.tabs{display:flex;gap:4px;justify-content:center;margin:22px auto 4px;
  background:rgba(255,255,255,.06);border:1px solid var(--hair);
  border-radius:999px;padding:4px;width:fit-content;max-width:100%}
nav.tabs a{color:var(--muted);text-decoration:none;font-size:.66rem;letter-spacing:.24em;
  padding:.65rem 1rem;border-radius:999px;transition:.25s}
nav.tabs a:hover{color:#fff}
nav.tabs a[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.clock{font-size:.6rem;letter-spacing:.3em;color:var(--faint);
  background:rgba(10,10,12,.4);border:1px solid var(--hair);border-radius:999px;
  padding:.45rem .9rem;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.foot{margin-top:18px;font-size:.6rem;letter-spacing:.28em;color:var(--faint)}

/* seções */
.view{display:none;width:min(440px,100%);animation:rise .5s ease both}
.view.active{display:flex}
@keyframes rise{from{opacity:0;filter:blur(8px);transform:translateY(14px)}to{opacity:1;filter:none;transform:none}}
.sheet{padding:24px 22px;min-height:clamp(340px,50dvh,440px);flex-direction:column;justify-content:center}
.sheet h2{font-size:.66rem;letter-spacing:.4em;color:var(--faint);font-weight:500;margin-bottom:6px}
.sheet .big{font-size:clamp(1.3rem,4vw,1.8rem);letter-spacing:.06em;font-weight:600}
.sheet p{color:var(--muted);font-size:.86rem;line-height:1.8;margin-top:12px}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.meta span{font-size:.62rem;letter-spacing:.2em;border:1px solid var(--hair);
  border-radius:999px;padding:.45rem .8rem;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr;gap:18px;margin-top:18px;align-items:start}
.portrait{border-radius:14px;overflow:hidden;border:1px solid var(--hair);aspect-ratio:4/5;background:#17171a}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}

/* work list editorial */
.work{list-style:none;margin-top:14px}
.work a{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--ink);
  padding:1rem .3rem;border-bottom:1px solid var(--hair);transition:.25s}
.work a:hover{background:rgba(255,255,255,.045);padding-left:.7rem}
.work .n{font-size:.64rem;color:var(--faint);letter-spacing:.2em;min-width:2ch}
.work .t{font-size:.92rem;letter-spacing:.1em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work .dots{flex:1;border-bottom:1px dotted rgba(255,255,255,.22);transform:translateY(-4px);min-width:20px}
.work .y{font-size:.66rem;color:var(--muted);letter-spacing:.2em}
.work .k{display:block;font-size:.58rem;color:var(--faint);letter-spacing:.3em;margin-top:2px}
.work small{display:block;color:var(--faint);font-size:.68rem;letter-spacing:.08em;margin-top:2px}

/* preview flutuante */
#peek{position:fixed;z-index:30;width:min(300px,40vw);aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  pointer-events:none;opacity:0;transform:scale(.92);transition:opacity .25s,transform .25s;
  border:1px solid var(--stroke);box-shadow:0 20px 60px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#peek.on{opacity:1;transform:scale(1)}
#peek img{width:100%;height:100%;object-fit:cover;display:block}

/* form */
form{display:grid;gap:10px;margin-top:16px;text-align:left}
label{font-size:.6rem;letter-spacing:.32em;color:var(--faint)}
input,textarea{background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:12px;
  color:var(--ink);font:inherit;font-size:.9rem;padding:.85rem 1rem;width:100%;resize:vertical}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.28)}
input:focus,textarea:focus{border-color:rgba(255,255,255,.4);outline:none}
button.send{background:#f2f2f0;color:#0a0a0b;border:0;border-radius:12px;font:inherit;
  font-size:.7rem;letter-spacing:.32em;padding:1rem;cursor:pointer;transition:.25s}
button.send:hover{background:#fff;transform:translateY(-1px)}
button.send:disabled{opacity:.6;cursor:wait;transform:none}
.formnote{font-size:.72rem;color:var(--faint);letter-spacing:.06em;min-height:1.2em}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:center}
.socials a,.socials button{font-size:.62rem;letter-spacing:.24em;color:var(--muted);text-decoration:none;
  border:1px solid var(--hair);border-radius:999px;padding:.55rem .95rem;transition:.25s;
  background:transparent;font-family:inherit;cursor:pointer}
.socials a:hover,.socials button:hover{color:#fff;border-color:rgba(255,255,255,.35)}

@media(min-width:640px){.row2{grid-template-columns:1.1fr .9fr}}
@media(max-width:480px){
  .panel{padding:28px 20px 22px}
  nav.tabs a{padding:.6rem .7rem;font-size:.6rem}
  .sheet{padding:24px 20px}
  #peek{display:none}
}
/* ——— motion: cinema precisa respirar ——— */
.stage img,.stage video{animation:heroDrift 28s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.09)}}
.stage .grain{animation:grainShift 1.4s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-18px,10px)}66%{transform:translate(12px,-14px)}100%{transform:translate(0,0)}}
.panel{animation:panelIn .9s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes panelIn{from{opacity:0;filter:blur(14px);transform:translateY(26px) scale(.97)}to{opacity:1;filter:none;transform:none}}
.view.active>*{animation:rise .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
.view.active>*:nth-child(1){--d:.02s}.view.active>*:nth-child(2){--d:.09s}
.view.active>*:nth-child(3){--d:.16s}.view.active>*:nth-child(4){--d:.23s}
.view.active>*:nth-child(5){--d:.3s}.view.active>*:nth-child(n+6){--d:.36s}
.glass{transition:transform .35s ease,box-shadow .35s ease}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--tx,0px),var(--ty,0px),0)}
nav.tabs a{transition:transform .25s ease,background .25s,color .25s}
nav.tabs a:hover{transform:translateY(-1px)}
nav.tabs a[aria-current="page"]{animation:tabGlow 3s ease-in-out infinite}
@keyframes tabGlow{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(255,255,255,.12)}}
.work a{position:relative}
.work a .t{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.work a:hover .t{transform:translateX(6px)}
.work a .n{transition:color .3s}
.work a:hover .n{color:#fff}
.work a::after{content:"↗";position:absolute;right:.6rem;opacity:0;transform:translate(-6px,6px);transition:.3s;font-size:.8rem;color:var(--muted)}
.work a:hover::after{opacity:1;transform:none}
.portrait img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.portrait:hover img{transform:scale(1.05)}
.socials a:hover,.socials button:hover{transform:translateY(-2px)}
button.send{position:relative;overflow:hidden}
button.send::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transition:left .6s ease}
button.send:hover::after{left:120%}
button.send:active{transform:scale(.98)}
.clock{animation:clockPulse 2s ease-in-out infinite}
@keyframes clockPulse{0%,100%{opacity:1}50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}