/* Raniel Reis — página inicial (ranielreis.com). A Branding continua usando o site.css antigo. */
@font-face { font-family: "RR Sans"; src: url("/fonts/RRSans-Light.woff2?v=2.6") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "RR Sans"; src: url("/fonts/RRSans-Regular.woff2?v=2.6") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "RR Sans"; src: url("/fonts/RRSans-Medium.woff2?v=2.6") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "RR Sans"; src: url("/fonts/RRSans-Bold.woff2?v=2.6") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* paleta rR */
  /* fundo chapado, o mesmo do RR Finança (sem degradês nem luzes) */
  --noite: #0C0E16;
  --noite-2: #171A26;
  --rr: #1F3A7A;
  --play: #3D6FFF;
  --ceu: #CFDBFF;
  --nevoa: #ECEEF3;
  --tinta: #0B0D14;
  --branca: #FFFFFF;
  --muted-night: rgba(207, 219, 255, .72);
  --line-night: rgba(207, 219, 255, .14);
  --muted-light: #4A5472;
  --line-light: rgba(11, 22, 56, .12);
  --play-ink: #2447C9;           /* play legível em texto pequeno sobre fundo claro */

  --f: "RR Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: 1.375rem;
  --t-xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-xxl: clamp(2.5rem, 1.4rem + 5vw, 5.25rem);
  --t-titulo: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);   /* título de página e de seção principal: Blog, Marca, Logo, RR Sans, Cores, Galeria */

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --top: env(safe-area-inset-top, 0px);
  --head: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; overflow-x: clip; overscroll-behavior-x: none; background: var(--noite); }
body {
  margin: 0;
  background: var(--noite);
  color: var(--branca);
  font-family: var(--f);
  font-size: var(--t-m);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--play); outline-offset: 3px; border-radius: 6px; }

.skip { position: fixed; left: var(--gut); top: calc(var(--top) + 8px); z-index: 100; padding: 10px 14px; background: var(--branca); color: var(--tinta); border-radius: 10px; transform: translateY(-160%); transition: transform .2s; text-decoration: none; }
.skip:focus { transform: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }

/* ---------- faixas */
.band { padding-block: clamp(72px, 12vh, 140px); position: relative; }
.band-night { background: var(--noite); }
.band-trilha { padding-top: 0; }
.band-light { background: var(--nevoa); color: var(--tinta); }

.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 5vh, 48px); }
.sec-head h2 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; }
.sec-head p { color: var(--muted-night); max-width: 40ch; }

.case-text { display: grid; gap: 14px; min-width: 0; }
.case-text h3 { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.015em; line-height: 1.05; }
.case-desc { color: var(--muted-night); font-size: 1.0625rem; line-height: 1.65; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* ---------- reconhecimento */
section[id] { scroll-margin-top: calc(var(--top) + var(--head) + 8px); }
.band-award .award { background: #FFFFFF; border-color: var(--line-light); box-shadow: 0 24px 50px -32px rgba(11, 22, 56, .35); }
.band-award .award-text h3 { color: var(--tinta); }
.band-award .award-text p:not(.award-since) { color: var(--muted-light); }
.band-award .award-text .award-since { background: none; color: #6A0BB0; }
.award { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 32px; align-items: start; max-width: 860px; padding: 32px; border-radius: 24px; background: var(--noite-2); border: 1px solid var(--line-night); }
.award-icon { width: 64px; height: 64px; }
.award-icon img { width: 64px; height: 64px; display: block; border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(130, 10, 209, .7); }
.award-text { display: grid; gap: 10px; min-width: 0; }
.award-text h3 { font-size: var(--t-l); font-weight: 700; }
.award-text .award-since { justify-self: start; margin-top: -4px; padding: 0; border-radius: 0; background: none; color: #D9B8FF; font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em; text-align: left; }
.award-text p:not(.award-since) { color: var(--muted-night); line-height: 1.65; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* ---------- entre em contato */
.band-light .sec-head h2 { color: var(--tinta); }
.band-contact .contact-text { color: rgba(255, 255, 255, .9); }
.band-contact .contact-text s { color: var(--muted-night); }
.band-contact .social .soc { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6); }
.band-contact .soc-th { background: #F3F5FA; color: #0B1638; }
.contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 80px); align-items: start; }
.contact-emoji { width: clamp(130px, 13vw, 180px); aspect-ratio: 296 / 339; }
.contact-emoji img { width: 100%; height: 100%; object-fit: contain; display: block; }
.contact-body { display: grid; gap: 28px; min-width: 0; max-width: 680px; }
.contact-text { font-size: 1.125rem; line-height: 1.65; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.contact-text s { color: var(--muted-light); text-decoration-thickness: 1.5px; }
.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.social .soc {
  display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; border: 0;
  color: #FFFFFF; text-decoration: none; font-weight: 500; font-size: var(--t-s); line-height: 1;
  box-shadow: 0 8px 20px -10px rgba(11, 22, 56, .45);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .2s;
}
.social .soc svg { width: 20px; height: 20px; flex: none; }
.social .soc:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(11, 22, 56, .55); filter: brightness(1.06); color: #FFFFFF; }
.soc-ig { background: #E4405F; }
.soc-th { background: #F3F5FA; color: #0B1638; }
.social .soc-th, .social .soc-th:hover, .band-contact .social .soc-th { color: #0B1638; }
.soc-mail { background: var(--play); }
.soc-am { background: #FA233B; }

/* rodapé */
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.foot .foot-logo { width: 30px; height: 28px; display: block; }
.legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.legal a { color: var(--muted-night); text-decoration: none; font-size: var(--t-xs); transition: color .2s; }
.legal a:hover { color: var(--branca); text-decoration: underline; text-underline-offset: 3px; }
.copy-note { font-size: var(--t-xs); color: var(--muted-night); }

/* ---------- avião (play) e transição de projeto */
.plane { position: fixed; left: 0; top: 0; width: 46px; height: 46px; z-index: 65; pointer-events: none; visibility: hidden; will-change: transform; }
.plane svg { width: 100%; height: 100%; display: block; overflow: visible; }
.plane.on { visibility: visible; }

.warp { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; }
.warp.on { visibility: visible; pointer-events: auto; }
/* transição suave: o fundo chapado cobre a página devagar e o play sai do ponto tocado e desliza até o centro,
   onde o nome do destino aparece ao lado dele */
.warp::before { content: ""; position: absolute; inset: 0; background: var(--noite); opacity: 0; transition: opacity .55s cubic-bezier(.4, 0, .2, 1) .08s; }
.warp.on::before { opacity: 1; }
.warp-play { position: absolute; left: 0; top: 0; width: 22px; height: 24px; margin: -12px 0 0 -9px; background: var(--play); clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-radius: 3px; opacity: 0; will-change: transform; }
.warp-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 18px); opacity: 0; display: grid; justify-items: center; gap: 2px; color: var(--branca); text-align: center;
  transition: opacity .45s ease, transform .7s cubic-bezier(.2, .7, .2, 1); width: max-content; max-width: calc(100vw - 32px); }
.warp-label span { font-size: var(--t-xs); color: var(--muted-night); }
.warp-label strong { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
.warp.on .warp-label { opacity: 1; transform: translate(-50%, 30px); transition-delay: .42s; }
/* a página que fica para trás: recua e perde o menu, como uma carta indo para o fundo */
main, .rrc-foot { transition: transform .75s cubic-bezier(.3, 0, .2, 1), border-radius .75s; }
.saindo main { transform: scale(.985); }
.saindo .rrc-top { opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .4s ease; }
/* ============================================================
   Abertura: "E aí!" escrito à mão + iPhone que dá para inclinar.
   A abertura fica parada (sticky) e o "Sobre" sobe por cima dela, com a ponta já aparecendo no pé da tela.
   A saída acompanha a rolagem pelo próprio navegador (animation-timeline), sem script a cada quadro;
   onde isso não existe, o inicio.js faz o mesmo só com transform e opacity.
   ============================================================ */
:root { --ponta: 52px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kicker { font-size: var(--t-s); font-weight: 500; color: var(--muted-night); }

.abertura { position: relative; overflow-x: clip; }
.band-night { overflow-x: clip; }
.abertura::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--noite);
}
.hero {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh; min-height: 540px;
  max-width: 1180px; margin: 0 auto;
  margin-top: calc(-1 * (var(--head) + var(--top)));
  padding: calc(var(--head) + var(--top) + 12px) var(--gut-r) calc(var(--ponta) + 24px) var(--gut);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "titulo cel" "lede cel"; align-content: center; column-gap: clamp(32px, 6vw, 96px); row-gap: clamp(14px, 2.4vh, 26px);
}
.hero-veu { position: absolute; inset: 0; z-index: 3; background: #000; opacity: 0; pointer-events: none; }


/* "E aí!": a pena desenha cada traço (máscara animada) e o pingo da exclamação é o play */
.hero { --tw: min(100%, 560px); }
.eai { grid-area: titulo; align-self: end; margin: 0; line-height: 0; }
.eai-tinta { width: var(--tw); height: auto; display: block; overflow: visible; }
.pena path { stroke-dasharray: var(--l) var(--l); stroke-dashoffset: var(--l); }
.ola .pena path { animation: tinta var(--d) cubic-bezier(.45, .05, .55, .95) var(--t) forwards; }
html:not(.js) .pena path { stroke-dashoffset: 0; }
@keyframes tinta { to { stroke-dashoffset: 0; } }
.eai-play { transform-box: fill-box; transform-origin: 30% 50%; }
.js .eai-play { transform: scale(0); }
.ola .eai-play { animation: pingo .6s cubic-bezier(.3, 1.8, .45, 1) 2.6s forwards; }
.acena .eai-play { transform: scale(1); animation: aceno 6s ease-in-out .6s infinite; }
.hero.longe .eai-play { animation-play-state: paused; }
@keyframes pingo { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
@keyframes aceno { 0%, 84%, 100% { transform: none; } 88% { transform: translateX(8%) scale(1.14); } 92% { transform: translateX(-3%) scale(.94); } 96% { transform: translateX(4%) scale(1.04); } }

.lede-box { grid-area: lede; align-self: start; min-width: 0; width: var(--tw); }
.hero-lede { max-width: none; font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); line-height: 1.6; color: rgba(207, 219, 255, .84);
  text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.js .hero-lede { opacity: 0; }
.ola .hero-lede { animation: aparece .9s var(--ease) 1.5s forwards; }
@keyframes aparece { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- iPhone (moldura fina, como o de verdade) */
.hero-cel { grid-area: cel; align-self: center; justify-self: center; perspective: 1100px; }
.cel-giro { display: block; position: relative; text-decoration: none; color: inherit; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.cel-giro:focus-visible { outline: none; }
.cel-giro:focus-visible .cel-moldura { outline: 3px solid var(--play); outline-offset: 6px; }
.cel { --w: 300px; position: relative; width: var(--w); aspect-ratio: .4793; }
.js .hero-cel .cel { opacity: 0; transition: opacity .7s ease; }
.ola .hero-cel .cel { opacity: 1; }
.tres .hero-cel .cel { opacity: 0; }
.tres .hero-cel.css-vis .cel { opacity: 1; }
.cel-moldura {
  position: absolute; inset: 0; padding: 2%; border-radius: 15.6% / 7.5%; background: #050608;
  /* moldura de alumínio Azul Intenso (iPhone 17 Pro): fio escuro, faixa clara do chanfro e a lateral */
  box-shadow:
    0 0 0 1px #0E1220, 0 0 0 2.2px #7F8DAF, 0 0 0 3.2px #2B3654,
    var(--ex, 0px) var(--ey, 0px) 0 3px #3A4767,
    calc(var(--ex, 0px) * -2) 46px 70px -34px rgba(0, 0, 0, .85);
}
.cel-tela { position: relative; height: 100%; border-radius: 13.8% / 6.4%; overflow: hidden; background: #0C0E16; container-type: inline-size; isolation: isolate; transform: translateZ(0); }
.cel[data-tema="claro"] .cel-tela { background: #F3F5FA; }
.cel-print { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; opacity: 0; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.cel-print.on { opacity: 1; }
.cel-status { position: absolute; z-index: 3; inset: 0 0 auto; height: 12cqw; display: flex; align-items: center; justify-content: space-between; padding: 1.2cqw 7.6cqw 0 10.4cqw;
  font-weight: 600; font-size: 4cqw; color: #FFFFFF; transition: color .6s ease; pointer-events: none; }
.cel[data-tema="claro"] .cel-status { color: #0B0D14; }
.cel-ilha { position: absolute; left: 50%; top: 2.7cqw; width: 30.5cqw; height: 8.9cqw; transform: translateX(-50%); border-radius: 999px; background: #000; }
.cel-icones { display: inline-flex; align-items: center; gap: 1.4cqw; }
.cel-icones svg { height: 3.1cqw; width: auto; fill: currentColor; }
.cel-icones svg:last-child { height: 3.4cqw; }
.cel-home { position: absolute; z-index: 3; left: 50%; bottom: 2cqw; width: 34cqw; height: 1.25cqw; transform: translateX(-50%); border-radius: 999px; background: rgba(255, 255, 255, .78); transition: background-color .6s; pointer-events: none; }
.cel[data-tema="claro"] .cel-home { background: rgba(11, 13, 20, .72); }
/* reflexo do vidro: desliza conforme o aparelho inclina */
.cel-brilho { position: absolute; inset: -30%; z-index: 4; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .09) 48%, rgba(255, 255, 255, .02) 54%, transparent 60%);
  transform: translateX(var(--gx, 0%)); }
.cel-btn { position: absolute; width: 2.5px; border-radius: 2px; background: linear-gradient(90deg, #2B3654, #8492B4); }
/* esquerda: botão de Ação e volume; direita: botão lateral e o Controle da Câmera (embutido, mais baixo) */
.cel-btn.b1 { left: -4.5px; top: 18.5%; height: 4.4%; }
.cel-btn.b2 { left: -4.5px; top: 25.5%; height: 7.6%; }
.cel-btn.b3 { left: -4.5px; top: 35%; height: 7.6%; }
.cel-btn.b4 { right: -4.5px; top: 27%; height: 11.5%; background: linear-gradient(270deg, #2B3654, #8492B4); }
.cel::after { content: ""; position: absolute; right: -3.6px; top: 55%; width: 1.8px; height: 6.4%; border-radius: 2px; background: linear-gradient(270deg, #1A2136, #6F7EA3); pointer-events: none; }

/* telas que dá para tocar (versão limitada dos apps) */
.toques { position: absolute; inset: 0; z-index: 5; }
.toque { position: absolute; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.toque[hidden] { display: none; }
.toque:focus-visible { outline: 2px solid var(--play); outline-offset: -2px; }
.toque.dica::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 2px solid rgba(111, 149, 255, .9); animation: dica 1.8s ease-out infinite; pointer-events: none; }
@keyframes dica { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.onda { position: absolute; z-index: 6; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255, 255, 255, .32); pointer-events: none;
  animation: onda .5s ease-out forwards; }
.cel[data-tema="claro"] .onda { background: rgba(61, 111, 255, .22); }
@keyframes onda { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* ---------- Sobre: a folha clara que sobe por cima da abertura */
.sobre {
  position: relative; z-index: 2; margin-top: calc(-1 * var(--ponta));
  background: #F3F5FA; color: var(--tinta); transform-origin: 50% 0;
  border-radius: 30px 30px 0 0; box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .6);
}
.sobre-in {
  position: relative; max-width: 1180px; margin: 0 auto;
  padding: 18px var(--gut-r) clamp(88px, 16vh, 160px) var(--gut);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px clamp(32px, 7vw, 104px); align-items: start;
}
.sobre-titulo { font-weight: 700; font-size: clamp(2.75rem, 1.4rem + 5.4vw, 6rem); line-height: .95; letter-spacing: -.035em; }
.sobre-titulo span:first-child { display: block; font-size: 1.125rem; font-weight: 500; letter-spacing: 0; line-height: 1.2; color: #4A5472; margin-bottom: .55rem; }
.sobre-titulo .nome { display: block; margin-left: -.04em; }
.memoji { position: absolute; top: 18px; right: calc(var(--gut-r) + 16px); width: clamp(88px, 10vw, 136px); aspect-ratio: 340 / 300; }
.memoji img, .memoji video { width: 100%; height: 100%; object-fit: contain; display: block; }
.sobre-titulo { grid-column: 1; grid-row: 1; }
/* o texto começa abaixo do memoji (que fica no canto) e na altura do fim do nome: composição em degrau */
.sobre-corpo { grid-column: 2; grid-row: 1; display: grid; gap: 22px; align-content: start; padding-top: clamp(120px, 9vw, 150px); min-width: 0; }
.sobre-corpo p { font-size: 1.125rem; line-height: 1.68; max-width: 60ch; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.linkedin {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px 14px 22px; border-radius: 999px;
  background: var(--tinta); color: #F3F5FA; text-decoration: none; font-weight: 500; font-size: var(--t-s);
  transition: background-color .25s;
}
.linkedin svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.linkedin:hover { background: var(--play-ink); }
.linkedin:hover svg { transform: translate(2px, -2px); }

/* ---------- faixas seguintes (o navegador só desenha quando chegam perto da tela) */
.band { padding-block: clamp(72px, 12vh, 140px); position: relative; content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.band-night { background: var(--noite); }
.band-light { background: var(--nevoa); color: var(--tinta); }

/* ---------- projetos */
.proj { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px clamp(48px, 9vw, 128px); align-items: center; }
.proj + .proj { margin-top: clamp(96px, 15vh, 168px); }
.proj-inv { grid-template-columns: minmax(0, 1fr) auto; }
.proj-inv .proj-cel { order: 2; }
.proj-cel { perspective: 1200px; justify-self: center; }
.proj-cel .cel { --w: 286px; }
.proj-texto { display: grid; gap: 16px; min-width: 0; max-width: 560px; }
.proj-nome { display: flex; align-items: center; gap: .22em; font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.proj-nome .logo-rr { width: .98em; height: .92em; flex: none; color: #FFFFFF; overflow: visible; margin-top: .02em; }
.proj-desc { color: rgba(207, 219, 255, .82); font-size: 1.0625rem; line-height: 1.7; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.proj-dica { display: flex; align-items: center; gap: 10px; font-size: var(--t-s); color: var(--ceu); }
.dedo { width: 10px; height: 10px; border-radius: 50%; background: var(--play); flex: none; box-shadow: 0 0 0 0 rgba(61, 111, 255, .6); animation: dedo 2s ease-out infinite; }
@keyframes dedo { 0% { box-shadow: 0 0 0 0 rgba(61, 111, 255, .55); } 100% { box-shadow: 0 0 0 10px rgba(61, 111, 255, 0); } }
/* o aparelho chega uma vez, deitado, quando a seção aparece */
.js .proj .cel-giro { opacity: 0; }
/* o desenho em CSS só aparece se o 3D não vier (ou demorar): assim não surgem dois aparelhos ao mesmo tempo */
.proj.css-vis .cel-giro { opacity: 1; transition: opacity .6s ease; }

/* ---------- saída da abertura acompanhando a rolagem (sem script) */
@supports (animation-timeline: scroll()) {
  .eai, .lede-box { animation: sai-texto linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  .hero-cel { animation: sai-cel linear both; animation-timeline: scroll(root); animation-range: 0 92vh; }
  @media (max-width: 760px), (pointer: coarse) { .hero-cel, .eai, .lede-box { animation: none; } }
  .hero-veu { animation: veu linear both; animation-timeline: scroll(root); animation-range: 0 92vh; }
}
@keyframes sai-texto { to { transform: translate3d(0, -7vh, 0) scale(.94); opacity: 0; } }
@keyframes sai-cel { 0% { transform: none; opacity: 1; } 70% { opacity: .85; } 100% { transform: translate3d(0, 20vh, 0) scale(.8); opacity: 0; } }
@keyframes veu { to { opacity: .55; } }
.eai, .lede-box, .hero-cel { transform-origin: 50% 0; }
.hero-cel { transform-origin: 50% 100%; }

/* ---------- celular: "E aí!" e a frase alinhados em cima, iPhone embaixo */
@media (max-width: 760px) {
  :root { --head: 52px; --ponta: 46px; }
  /* o texto ("E aí!" + frase) numa coluna à esquerda e o iPhone ao lado, grande e saindo um pouco pela borda,
     como se estivesse apoiado no texto: os dois formam um bloco só, centralizado na altura da tela */
  .hero {
    --tw: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); grid-template-rows: auto auto;
    grid-template-areas: "titulo cel" "lede cel";
    align-content: center; column-gap: 6px; row-gap: 16px;
    padding-top: calc(var(--head) + var(--top) + 12px); padding-bottom: calc(var(--ponta) + 12px);
  }
  .eai { align-self: end; position: relative; z-index: 4; }
  .lede-box { width: 100%; align-self: start; position: relative; z-index: 4; }
  .hero-lede { font-size: .9375rem; line-height: 1.6; }
  .hero-cel { align-self: center; justify-self: start; margin-right: calc(-1 * var(--gut-r) - 14vw); }
  .hero-cel .cel { --w: min(54vw, 290px, calc((100svh - var(--head) - var(--ponta) - 90px) * .4793)); }
  .hero-cel .cel3d { inset: -6% -16% -8%; }
  .cel-btn { width: 2px; } .cel-btn.b1, .cel-btn.b2, .cel-btn.b3 { left: -3.5px; } .cel-btn.b4 { right: -3.5px; } .cel::after { right: -3px; width: 1.5px; }
  .cel-moldura { box-shadow: 0 0 0 .8px #0E1220, 0 0 0 1.7px #7F8DAF, 0 0 0 2.5px #2B3654, var(--ex, 0px) var(--ey, 0px) 0 2.2px #3A4767, calc(var(--ex, 0px) * -2) 30px 46px -24px rgba(0, 0, 0, .85); }
  .sobre { border-radius: 24px 24px 0 0; }
  .sobre-in { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 14px; }
  .sobre-titulo { padding-right: 96px; padding-top: 4px; font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .sobre-titulo span:first-child { font-size: 1rem; margin-bottom: .4rem; }
  .memoji { width: 80px; top: 16px; right: calc(var(--gut-r) + 6px); }
  .sobre-corpo { grid-column: 1; grid-row: auto; padding-top: 6px; }
  .sobre-corpo p { font-size: var(--t-m); }
  .proj, .proj-inv { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .proj-inv .proj-cel { order: 0; }
  .proj-cel .cel { --w: min(260px, 66vw); }
  .proj-desc { font-size: var(--t-m); }
  .contact { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .contact-emoji { width: 110px; }
  .award { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .contact-text { font-size: var(--t-m); }
}
@media (max-width: 760px) and (max-height: 680px) { .hero { row-gap: 10px; } .hero-lede { font-size: .875rem; line-height: 1.5; } }
@media (min-width: 761px) { .hero-cel .cel { --w: min(300px, calc((100svh - var(--head) - var(--ponta) - 120px) * .4793)); } }
/* celular deitado (tela larga e baixa): o "E aí!" encolhe junto com a altura e o iPhone usa quase toda a altura,
   para os dois ficarem na mesma proporção */
@media (min-width: 761px) and (max-height: 560px) {
  .hero { min-height: 0; --tw: min(100%, calc((100svh - 150px) * 1.25), 560px); row-gap: 10px; padding-bottom: calc(var(--ponta) + 8px); }
  .hero-cel .cel { --w: min(300px, calc((100svh - var(--head) - var(--top) - var(--ponta) - 54px) * .4793)); }
  .hero-lede { font-size: 1rem; line-height: 1.5; }
}

/* aparelho fraco: menos camadas caras */
.lite .cel-brilho { display: none; }
.lite .sobre { box-shadow: none; }
.lite .cel-moldura { box-shadow: 0 0 0 1px #0E1220, 0 0 0 2.2px #7F8DAF, 0 0 0 3.2px #2B3654; }

/* "reduzir movimento": sem loops nem inclinação; a escrita continua (é a abertura) e as telas só esmaecem */
@media (prefers-reduced-motion: reduce) {
  .acena .eai-play, .toque.dica::after, .dedo { animation: none; }
  .eai, .lede-box, .hero-cel, .hero-veu { animation: none !important; }
}

/* ---------- iPhone em 3D (three.js): substitui o desenho em CSS quando o aparelho aguenta */
/* o iPhone em CSS fica visível (com o esqueleto) até o 3D ficar pronto; aí some por baixo dele */
.tres-on > .cel-giro { opacity: 0 !important; pointer-events: none; transition: opacity .3s ease; }
.hero-cel, .proj-cel { position: relative; }
.cel3d { position: absolute; z-index: 2; inset: -7% -34% -9%; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .7s ease, transform 1s cubic-bezier(.2, .7, .2, 1); }
.cel3d.on { transform: none; }
.cel3d.on { opacity: 1; }
.cel3d-canvas { width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.cel3d-canvas:active { cursor: grabbing; }
.proj .cel3d-canvas { cursor: pointer; }
/* sombra no "chão", como foto de produto */
.cel3d::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 5%; height: 5%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 75%); z-index: -1; filter: blur(4px); }

/* ---------- LinkedIn junto das redes */
.soc-li { background: #0A66C2; }

/* ---------- projetos: o texto entra uma vez, em sequência, quando a seção aparece */
.js .proj-texto > * { opacity: 0; transform: translateY(18px); }
.proj.chegou .proj-texto > * { opacity: 1; transform: none; transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.proj.chegou .proj-texto > :nth-child(2) { transition-delay: .08s; }
.proj.chegou .proj-texto > :nth-child(3) { transition-delay: .16s; }
.js .sec-head h2 { opacity: 0; transform: translateY(14px); transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.sec-head.chegou h2 { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .proj-texto > *, .js .sec-head h2 { opacity: 1; transform: none; transition: none; } }


/* ---------- esqueleto de carregamento (internet lenta): mostra onde o conteúdo vai aparecer
   Só aparece se a imagem demorar mais de ~300 ms, para não piscar em conexão boa. */
@keyframes esq-brilho { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.esq-tela { position: absolute; inset: 0; z-index: 2; padding: 15% 7% 0; display: grid; align-content: start; gap: 3.2cqw;
  background: #0C0E16; opacity: 0; animation: esq-entra .3s ease .3s forwards; pointer-events: none; transition: opacity .5s ease; }
.cel[data-tema="claro"] .esq-tela { background: #F3F5FA; }
.esq-tela i { display: block; border-radius: 3.4cqw; background: rgba(255, 255, 255, .07); }
.cel[data-tema="claro"] .esq-tela i { background: rgba(11, 22, 56, .07); }
.esq-tela i:nth-child(1) { height: 9cqw; width: 45%; border-radius: 99px; }
.esq-tela i:nth-child(2) { height: 40cqw; }
.esq-tela i:nth-child(3) { height: 22cqw; }
.esq-tela i:nth-child(4) { height: 52cqw; }
.esq-tela i:nth-child(5) { height: 16cqw; width: 88%; justify-self: center; border-radius: 99px; margin-top: 10cqw; }
.esq-tela::after, .esq-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .1) 50%, transparent 65%) 0 0 / 220% 100%;
  animation: esq-brilho 1.5s cubic-bezier(.4, 0, .6, 1) infinite; }
.cel[data-tema="claro"] .esq-tela::after { background-image: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%); }
.esq-tela.sai, .esq-img.sai::before, .esq-img.sai::after { opacity: 0; }
.esq-img { position: relative; }
.esq-img::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: rgba(255, 255, 255, .08); opacity: 0; animation: esq-entra .3s ease .3s forwards; transition: opacity .5s ease; }
.sobre .esq-img::before { background: rgba(11, 22, 56, .07); }
.esq-img::after { inset: 6%; border-radius: 50%; opacity: 0; animation: esq-entra .3s ease .3s forwards, esq-brilho 1.5s cubic-bezier(.4, 0, .6, 1) infinite; transition: opacity .5s ease; }
.esq-img > img { opacity: 0; transition: opacity .5s ease; }
.esq-img.sai > img { opacity: 1; }
@keyframes esq-entra { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .esq-tela::after, .esq-img::after { animation: esq-entra .3s ease .3s forwards; } }

/* ============================================================
   Vitrine do blog na abertura ("Últimos conteúdos"): o Worker só a coloca quando há conteúdo publicado
   (e põe .com-vitrine na .hero). Trilho que desliza de lado; o 3º cartão aparece cortado para convidar a arrastar.
   ============================================================ */
.hero.com-vitrine { grid-template-rows: auto auto auto; grid-template-areas: "titulo cel" "lede cel" "vit vit"; align-content: center; }
.hero.com-vitrine .cel { --w: min(260px, max(120px, calc((100svh - var(--head) - var(--ponta) - 330px) * .4793))); }
.vitrine { grid-area: vit; min-width: 0; margin-top: clamp(4px, 1.6vh, 18px); position: relative; z-index: 4; }
.js .vitrine { opacity: 0; }
.ola .vitrine { animation: aparece .9s var(--ease) 1.9s forwards; }
.vit-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vit-topo h2 { margin: 0; font-size: var(--t-s); font-weight: 500; color: var(--muted-night); letter-spacing: .01em; }
.vit-setas { display: flex; gap: 6px; }
.vit-seta { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--branca);
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); transition: background-color .2s, opacity .2s; }
.vit-seta:hover { background: rgba(255, 255, 255, .13); }
.vit-seta[disabled] { opacity: .3; cursor: default; }
.vit-seta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vit-trilho { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: 0; scrollbar-width: none;
  margin-right: calc(-1 * var(--gut-r)); padding-right: var(--gut-r); cursor: grab; -webkit-user-select: none; user-select: none; }
.vit-trilho::-webkit-scrollbar { display: none; }
.vit-trilho.arrastando { cursor: grabbing; scroll-snap-type: none; }
.vit-trilho.arrastando .vit-card { pointer-events: none; }
.vit-card { flex: none; width: clamp(150px, 22vw, 260px); scroll-snap-align: start; display: grid; gap: 8px; align-content: start; text-decoration: none; color: var(--branca); -webkit-touch-callout: none; }
.vit-img { display: block; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--noite-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.vit-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); -webkit-user-drag: none; }
.vit-card:hover .vit-img img { transform: scale(1.04); }
.vit-titulo { font-size: var(--t-s); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: rgba(255, 255, 255, .92); }
.vit-mais .vit-img { display: grid; place-items: center; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.vit-mais-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), background-color .2s; }
.vit-mais:hover .vit-mais-ic { transform: rotate(90deg) scale(1.06); background: var(--play); }
.vit-mais-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vit-mais .vit-titulo { color: var(--muted-night); }
@media (max-width: 760px) {
  .hero.com-vitrine { grid-template-rows: auto auto auto; row-gap: 12px; align-content: center; }
  .hero.com-vitrine .cel { --w: min(44vw, 250px, max(120px, calc((100svh - var(--head) - var(--ponta) - 300px) * .4793))); }
  .vit-card { width: 38vw; }
  .vit-setas { display: none; }
  .vit-topo { margin-bottom: 10px; }
  .vit-img { border-radius: 14px; }
  .vit-titulo { font-size: .8125rem; }
}
@media (min-width: 761px) { .vit-trilho { margin-right: 0; padding-right: 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } }
/* celular deitado com a vitrine: não cabe tudo numa tela só, então a abertura deixa de ficar presa no topo
   e a vitrine vem logo abaixo do "E aí!" e do iPhone (que volta a ter o tamanho da altura da tela) */
@media (min-width: 761px) and (max-height: 560px) {
  .hero.com-vitrine { position: relative; height: auto; min-height: 100svh; align-content: start; row-gap: 10px;
    padding-top: calc(var(--head) + var(--top) + 12px); padding-bottom: calc(var(--ponta) + 24px); }
  .hero.com-vitrine .cel { --w: min(260px, calc((100svh - var(--head) - var(--top) - 40px) * .4793)); }
  .hero.com-vitrine .vitrine { margin-top: 18px; }
  .hero.com-vitrine .vit-card { width: clamp(150px, 24vw, 230px); }
}
/* cartão sem capa na vitrine: fundo do site com o play da marca no meio */
.vit-img .cp-sem { display: block; width: 100%; height: 100%; position: relative; background: var(--noite-2); }
.vit-img .cp-sem::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 26px; margin: -13px 0 0 -9px; background: var(--play); clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* celular com a vitrine: o iPhone menor continua encostado e saindo pela borda direita, sem sobrar espaço */
@media (max-width: 760px) {
  /* mesmo respiro da borda que o "E aí!" tem do outro lado: nada de encostar nem sair da tela */
  .hero.com-vitrine .hero-cel { justify-self: end; margin-right: 0; }
}

/* computador com a vitrine: "Últimos conteúdos" fica na coluna do texto (embaixo da frase) e o iPhone ocupa
   a altura toda à direita. O "E aí!" encolhe conforme a altura da tela para tudo caber sem encostar no menu
   nem ficar escondido atrás da folha do "Sobre" (contas: topo + ponta + frase + vitrine + espaços ≈ 400px) */
@media (min-width: 761px) and (min-height: 561px) {
  .hero.com-vitrine {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "titulo cel" "lede cel" "vit cel";
    align-content: safe center; row-gap: clamp(12px, 2vh, 22px);
    --tw: min(100%, 520px, max(220px, calc((100svh - var(--head) - var(--top) - var(--ponta) - 400px) * 2.1)));
  }
  .hero.com-vitrine .lede-box { width: min(100%, 520px); }
  .hero.com-vitrine .vitrine { margin-top: clamp(2px, 1vh, 10px); }
  .hero.com-vitrine .vit-card { width: clamp(160px, 16vw, 220px); }
  .hero.com-vitrine .cel { --w: min(340px, max(180px, calc((100svh - var(--head) - var(--top) - var(--ponta) - 90px) * .4793))); }
}

/* ---------- entre em contato (v2): o memoji "fala" num balão; e-mail em destaque; redes em grade com ícone */
.contact { align-items: center; }
.contact-body { gap: 20px; max-width: 700px; }
.contact-balao { position: relative; justify-self: start; margin: 0; padding: 14px 20px; border-radius: 22px 22px 22px 6px;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: #FFFFFF; font-size: 1.25rem; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.band-contact .contact-text { color: var(--muted-night); }
.band-contact .contact-text s { color: rgba(255, 255, 255, .45); }
.social .soc svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social .soc .ic-ponto, .contact-mail .ic-ponto { fill: currentColor; stroke: none; }
.contact-mail { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 460px; padding: 16px 20px; border-radius: 18px;
  background: var(--play); color: #FFFFFF; text-decoration: none; font-weight: 500; font-size: 1.0625rem; line-height: 1;
  box-shadow: 0 14px 30px -14px rgba(61, 111, 255, .75); transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .2s; }
.contact-mail svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-mail span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-mail .soc-seta { opacity: .8; transition: transform .3s var(--ease); }
.contact-mail:hover { color: #FFFFFF; transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 34px -14px rgba(61, 111, 255, .85); }
.contact-mail:hover .soc-seta { transform: translate(2px, -2px); }
.social { display: grid; grid-template-columns: repeat(4, max-content); gap: 10px; }
.social .soc { justify-content: center; gap: 9px; padding: 12px 18px; }
@media (max-width: 760px) {
  .contact { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "emoji balao" "texto texto" "mail mail" "redes redes"; gap: 18px 14px; align-items: end; }
  .contact-body { display: contents; }
  .contact-emoji { grid-area: emoji; width: 84px; }
  .contact-balao { grid-area: balao; align-self: center; font-size: 1.0625rem; padding: 12px 16px; }
  .contact-text { grid-area: texto; }
  .contact-mail { grid-area: mail; max-width: none; }
  .social { grid-area: redes; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social .soc { width: 100%; }
}

/* voltando à página inicial na mesma sessão: nada de esperar a pena; tudo entra junto, rápido e suave */
.visto .pena path { animation: none !important; stroke-dashoffset: 0; }
.ola.visto .eai { animation: eai-volta .55s cubic-bezier(.22, 1, .36, 1) both; }
.ola.visto .eai-play { animation: pingo .5s cubic-bezier(.3, 1.8, .45, 1) .25s forwards; }
.ola.visto .hero-lede { animation: aparece .6s var(--ease) .12s forwards; }
.ola.visto .vitrine { animation: aparece .6s var(--ease) .22s forwards; }
@keyframes eai-volta { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .ola.visto .eai { animation: none; } }