@font-face{
  font-family:"BT_Antinomy";
  src:url("../fonts/BT_Antinomy.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --pad:15px;
  --gap:10px;
  --nav-w:190px;
  --over-off:-20vh;
  --over-w:500px;

  --c-left:20px;
  --c-bottom:15px;
  --c-max:950px;
  --vh:100vh;
  --svh:100vh;

  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);

  --slide-top:var(--pad);
  --slide-bottom:var(--pad);

  --ui:"BT_Antinomy",Arial,sans-serif;
  --electric:#0400eb;

  --pill-bg:#fff;
  --pill-txt:#000;
  --pill-border:#000;
  --cat-active:#000;
  --cat-active-txt:#fff;
  --sub-active:var(--electric);
  --sub-active-txt:#fff;
  --sub-idle-border:#808080;
  --sub-idle-txt:#808080;
}
@supports (height:100dvh){:root{--vh:100dvh}}
@supports (height:100svh){:root{--svh:100svh}}

*{box-sizing:border-box;margin:0;padding:0}

button{
  font:inherit;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

html,
body{
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  font-family:var(--ui);
  font-weight:400;
  font-variation-settings:"wght" 400;
  color:#000;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

#burger{display:none}

nav{
  position:fixed;
  top:calc(var(--pad) + var(--safe-t));
  left:calc(var(--pad) + var(--safe-l));
  z-index:55;
  font-size:16px;
  letter-spacing:.02em;
}

nav ul{list-style:none}
nav li,
nav .name{margin-bottom:2px}

nav a{
  --bg:var(--pill-bg);
  --fg:var(--pill-txt);
  --bd:var(--pill-border);
  display:inline-block;
  padding:0 14px;
  line-height:2;
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:4px;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}

nav .name a{padding:0 7px}
nav .name a:hover{animation:shake .35s linear infinite}

@keyframes shake{
  0%  {transform:rotate(-2deg)}
  20% {transform:rotate(.5deg)}
  40% {transform:rotate(2deg)}
  60% {transform:rotate(-.5deg)}
  80% {transform:rotate(-2.5deg)}
  100%{transform:rotate(-1.5deg)}
}

nav>ul>li>a.on{margin-bottom:2px}
nav>ul>li>a.on,
nav>ul>li>a:hover{
  --bg:var(--cat-active);
  --bd:var(--cat-active);
  --fg:var(--cat-active-txt);
}

.sub a{
  --fg:var(--sub-idle-txt);
  --bd:var(--sub-idle-border);
  margin-left:30px;
}
.sub a.on,
.sub a:hover{
  --bg:var(--sub-active);
  --bd:var(--sub-active);
  --fg:var(--sub-active-txt);
}

img,video{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

.media,
.over{pointer-events:none}

.media.snd{pointer-events:auto}

img.media:not(.ready),
.over:not(.ready){visibility:hidden}

video.media:not(.ready){opacity:0}

#fullpage{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--vh);
  overflow:hidden;
  touch-action:none;
}

.track{
  height:100%;
  will-change:transform;
}

.panel{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--slide-top) 0 var(--slide-bottom);
  overflow-x:hidden;
  overflow-x:clip;
}

.media{
  display:block;
  width:auto;
  height:auto;
  max-height:calc(var(--svh) - var(--slide-top) - var(--slide-bottom));
  max-width:calc(100vw - 2*var(--nav-w));
}

.panel.is-broken::after{
  content:"Média indisponible";
  position:absolute;
  font-size:14px;
  color:var(--sub-idle-txt);
}

.stack{position:relative;display:inline-block;line-height:0}

.over{
  position:absolute;
  right:var(--over-off);
  top:50%;
  transform:translateY(-50%);
  max-width:var(--over-w);
}

.panel.music{padding:0}

.sc{
  touch-action:pan-y;
  align-self:stretch;
  width:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--slide-top) 0 var(--slide-bottom);
}

.tracks{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:100%;
}

.scplayer{
  display:block;
  width:min(90vw,800px);
  height:170px;
  border:0;
}

#contact{
  --w:min(
    var(--c-max),
    calc(100vw - var(--c-left) - var(--gap)),
    calc((100vw - 2*var(--gap)) / 1.04),
    calc(var(--vh) - var(--c-bottom) - var(--gap))
  );
  position:fixed;
  left:calc(var(--c-left) + var(--safe-l));
  bottom:calc(var(--c-bottom) + var(--safe-b));
  z-index:95;
  width:var(--w);
  height:var(--w);
  container-type:size;
  transform:translateX(0) scale(.4);
  transform-origin:bottom left;
  transition:transform .35s ease;
  pointer-events:none;
}

#cara,
#bubble,
.cfb{pointer-events:auto}

#contact.hovering,
#contact.tap{transform:scale(1)}

@media (min-width:821px){
  #contact{
    --w:var(--c-max);
    transform:translateX(0) scale(.2);
  }

  #contact.hovering,
  #contact.tap{
    transform:translateX(var(--hover-shift,0px)) scale(var(--hover-scale,1));
  }
}

#contact:not(.ready) #cara,
#contact:not(.ready) #bubble{visibility:hidden}

#cara{
  position:absolute;
  bottom:0;
  left:-4%;
  display:block;
  width:58%;
}

#bubble{
  position:absolute;
  bottom:44%;
  left:25%;
  width:66%;
}

#bimg{display:block;width:100%}

#cinfo{
  position:absolute;
  left:14%;
  top:24%;
  right:12%;
  text-align:center;
}

#cinfo .rest{
  position:absolute;
  left:7.5cqw;
  bottom:-10cqh;
  font-size:9.2cqmin;
  transition:opacity .2s ease;
}

#cinfo .full{
  position:absolute;
  top:-6.8cqh;
  font-size:3.4cqmin;
  line-height:1.25;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}

#cinfo .full .intro{
  margin-bottom:.8em;
  font-size:2.45cqmin;
}

#cinfo .full .links{
  display:flex;
  justify-content:center;
  gap:.5em;
}

#cinfo .full a{
  display:inline-block;
  font-size:.75em;
  color:#000;
  text-decoration:none;
}
#cinfo .full a:hover{text-decoration:underline}

#contact.hovering #cinfo .rest,
#contact.tap #cinfo .rest{opacity:0}

#contact.hovering #cinfo .full,
#contact.tap #cinfo .full{
  opacity:1;
  pointer-events:auto;
}

#contact.broken #cara,
#contact.broken #bubble{display:none}
#contact.broken .cfb{display:inline-block}

#contact.broken .cfb a{
  display:inline-block;
  padding:4px 12px;
  font-size:7.3cqmin;
  color:#000;
  border:2px solid #000;
  border-radius:16px;
  text-decoration:none;
}

#saver{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
}
#saver[hidden]{display:none}

#saver video{
  width:100%;
  height:100%;
  object-fit:cover;
}

#xp,
#cvclose{
  position:fixed;
  top:calc(var(--pad) + var(--safe-t));
  right:calc(var(--pad) + var(--safe-r));
  height:34px;
  font-size:16px;
  border-radius:4px;
  cursor:pointer;
}

#xp{
  z-index:60;
  padding:0 14px;
  font-family:var(--ui);
  letter-spacing:.03em;
  color:#000;
  background:#fff;
  border:1px solid #000;
  transition:background-color .15s, color .15s;
}

#xp:hover{color:#fff;background:#000}

#xp[aria-expanded="true"]{opacity:0;pointer-events:none}

#cvclose{
  z-index:91;
  width:34px;
  line-height:1;
  color:#fff;
  background:#000;
  border:none;
}

#cvpanel{
  position:fixed;
  inset:0;
  z-index:90;
  padding:calc(var(--pad) + var(--safe-t)) calc(var(--pad) + var(--safe-r)) calc(var(--pad) + var(--safe-b)) calc(var(--pad) + var(--safe-l));
  overflow-y:auto;
  overscroll-behavior:contain;
  background:rgba(255,255,255,.8);
  opacity:0;
  transition:opacity .25s ease;
}
#cvpanel.open{opacity:1}

#cvpanel.blur{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

#cvsheet{
  display:flex;
  flex-direction:column;
  width:min(1100px,100%);
  min-height:100%;
  margin:0 auto;
  font-size:16px;
}

.cv-row{
  display:grid;
  grid-template-columns:minmax(200px,300px) 1fr;
  gap:40px;
  margin-bottom:2em;
}

.cv-col h2{
  margin-bottom:.8em;
  font-size:inherit;
  font-weight:600;
}

.cv-legal{margin-top:auto;margin-bottom:0}
.cv-legal .cv-col{grid-column:2}
.cv-legal p{font-size:.8em;line-height:1.35;color:#cdcdcd}
.cv-title{margin-bottom:.8em;font-weight:600}
.cv-col ul{list-style:none}
.cv-col li{line-height:1.25}
.cv-col a{color:inherit;text-decoration:underline}

:focus-visible{
  outline:2px solid var(--electric);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important}
}

@media (max-width:820px){
  :root{
    --over-off:-8vw;
    --over-w:46vw;

    --slide-top:calc(var(--safe-t) + var(--pad) + 34px + 8px);
    --slide-bottom:calc(var(--safe-b) + var(--pad));
  }

  nav{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    gap:2px;
    pointer-events:none;
  }

  nav a,
  #burger{pointer-events:auto}

  nav .name{margin-bottom:0}

  #burger{
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:56;
    width:34px;
    height:34px;
    font-size:16px;
    line-height:1;
    color:var(--pill-txt);
    background:var(--pill-bg);
    border:1px solid var(--pill-border);
    border-radius:4px;
    cursor:pointer;
  }

  body.nav-open #burger{
    color:var(--cat-active-txt);
    background:var(--cat-active);
    border-color:var(--cat-active);
  }

  nav::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:rgba(255,255,255,.8);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease, visibility 0s .2s;
  }

  body.nav-open nav::before{
    opacity:1;
    visibility:visible;
    transition-delay:0s;
  }

  ul.menu{
    flex-basis:100%;
    max-height:calc(var(--vh) - var(--pad) - var(--safe-t) - 60px);
    padding-right:4px;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .15s ease, transform .15s ease, visibility 0s .15s;
  }

  body.nav-open ul.menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
    transition-delay:0s;
  }

  #contact{--c-max:520px}

  #contact.hovering,
  #contact.tap{
    transform:translateX(max(0px, .04 * var(--w) - var(--c-left) + var(--gap))) scale(1.08);
  }

  #xp{line-height:2}

  .media{max-width:calc(100vw - 2*var(--pad) - var(--safe-l) - var(--safe-r))}

  #cvsheet{gap:1.8em}

  .cv-row{display:contents}
  .cv-intro{order:1}
  .cv-edu{order:2}
  .cv-exp{order:3}
  .cv-tools{order:4}
  .cv-legal .cv-col{order:5;grid-column:auto;margin-top:auto}
  .cv-subtitle{margin-top:.4em}
}

nav a,
#xp,
#burger,
#cvclose{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

@media (pointer:coarse){
  nav a{line-height:2.3}
  #cvclose,
  #xp,
  #burger{height:38px}
  #cvclose,
  #burger{width:38px}
}

@media (max-height:480px){
  :root{--slide-bottom:calc(var(--safe-b) + 8px)}
}

@media (min-width:821px) and (max-height:700px){
  #contact:not(.hovering):not(.tap){transform:translateX(0) scale(.14)}
}