/* Vinny In Capture · página principal */
body { transition: --cor .4s; }
h2 { font: 800 clamp(2rem, 8.5vw, 5.2rem)/.92 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; }
.cab { padding: 0 var(--lado); display: grid; gap: 10px; margin-bottom: 26px; }
.cab .mono { color: var(--cor); }
.cab-txt { max-width: 46ch; color: #c9c5bd; }
section { padding: clamp(64px, 11vw, 130px) 0; position: relative; }

/* abertura: a memória que apaga */
.hero { height: 100svh; min-height: 420px; padding: 0; overflow: hidden; display: grid; align-items: end; background: #000; }
.hero-fotos, .hero-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-fotos img { object-fit: cover; }
#heroL { filter: blur(14px) grayscale(1) brightness(.55) contrast(1.1); transform: scale(1.08); }
#heroN { opacity: 0; will-change: opacity; }
.hero-fotos::after { z-index: 1; }
.hero > .flash { position: absolute; inset: 0; z-index: 6; background: #fff; opacity: 0; pointer-events: none; }
.hero.flash .flash { animation: flash .5s ease-out; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
.memoria { position: absolute; z-index: 5; top: 82px; left: calc(var(--lado) + 30px); display: flex; align-items: center; gap: 10px; color: #ffffffd9; font-size: .72rem; }
.memoria i { display: block; width: 90px; height: 6px; border: 1px solid #ffffff8c; padding: 1px; }
.memoria i b { display: block; height: 100%; background: var(--cor); transform-origin: left; transform: scaleX(0); }
.hero[data-fase=esquece] .memoria i b { background: #ff3b30; }
.mem-salvas { color: #ffffff99; } .mem-salvas b { color: var(--papel); font-weight: 400; }
.disparo { position: absolute; z-index: 7; right: calc(var(--lado) + 14px); top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 8px; background: none; border: 0; color: #fff; cursor: pointer; padding: 0; }
.disparo-anel { width: clamp(64px, 16vw, 84px); aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; display: grid; place-items: center; box-shadow: 0 2px 18px #0008; }
.disparo-anel::after { content: ''; width: 78%; aspect-ratio: 1; border-radius: 50%; background: #fff; transition: transform .12s, background .3s; }
.disparo:active .disparo-anel::after, .hero.clique .disparo-anel::after { transform: scale(.82); }
.hero[data-fase=esquece] .disparo-anel::after { background: var(--cor); }
.hero[data-fase=inicio] .disparo-anel { animation: pulsa 1.4s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 10px #ffffff2e, 0 2px 18px #0008; } }
.disparo-txt { font-size: .62rem; max-width: 12ch; text-align: center; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 1px 6px #000; }
.disparo:focus-visible { outline: 2px solid var(--cor); outline-offset: 6px; }
.esquece i { font-style: normal; display: inline-block; transition: opacity .5s, filter .5s; }
.esquece i.foi { opacity: 0; filter: blur(6px); }
.hero-fotos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0a0a0b4d 0%, #0a0a0b00 24%, #0a0a0b1f 50%, #0a0a0be6 100%); }
.obturador i { position: absolute; left: 0; right: 0; height: 50%; background: #000; z-index: 3; transform: scaleY(0); transition: transform .09s ease-in; }
.obturador i:first-child { top: 0; transform-origin: top; } .obturador i:last-child { bottom: 0; transform-origin: bottom; }
.hero.clique .obturador i { transform: scaleY(1); }
.visorcam { position: absolute; inset: 70px var(--lado) 26px; pointer-events: none; z-index: 2; }
.visorcam span { position: absolute; width: 22px; height: 22px; border: solid #ffffffa6; border-width: 2px 0 0 2px; }
.visorcam span:nth-child(2) { right: 0; transform: scaleX(-1); } .visorcam span:nth-child(3) { bottom: 0; transform: scaleY(-1); } .visorcam span:nth-child(4) { right: 0; bottom: 0; transform: scale(-1); }
.hero-txt { position: relative; z-index: 4; padding: 0 calc(var(--lado) + 110px) 74px calc(var(--lado) + 14px); display: grid; gap: 16px; }
@media (max-width: 560px) { .hero-txt { padding-right: calc(var(--lado) + 14px); padding-bottom: 74px; } .disparo { top: 38%; } }
.hero-sobre { color: var(--cor); }
h1 { font: 800 clamp(2rem, 10.4vw, 8.6rem)/.86 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.025em; }
h1 span { display: block; }
h1 .oco { color: transparent; -webkit-text-stroke: 1.5px var(--papel); }
.hero-bts { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-hud { position: absolute; z-index: 5; left: calc(var(--lado) + 14px); right: calc(var(--lado) + 14px); bottom: 36px; display: flex; gap: 14px; align-items: center; min-height: 30px; color: #ffffffd9; text-align: left; white-space: nowrap; overflow: hidden; }
.hero-hud .rec { color: #ff3b30; animation: pisca 1.6s steps(2) infinite; }
#hudExif { color: var(--cor); overflow: hidden; text-overflow: ellipsis; min-width: 0; } #hudCont { flex: none; } #hudNome { overflow: hidden; text-overflow: ellipsis; flex: 1; }
@keyframes pisca { 50% { opacity: .2; } }
@media (max-height: 480px) { h1 { font-size: clamp(1.9rem, 13svh, 4rem); } h1 span { display: inline; } .hero-txt { padding-bottom: 62px; gap: 8px; } .hero-sobre { display: none; } .visorcam { top: 60px; } .hero-bts .btn { min-height: 38px; } .memoria { top: 64px; } .disparo { top: 50%; bottom: auto; transform: translateY(-50%); } .disparo-anel { width: 60px; } .hero-txt { padding-right: 130px; } }
@media (max-width: 520px) { #hudNome { display: none; } .hero-hud { justify-content: space-between; } }

/* faixa de nomes */
.faixa { overflow: hidden; border-block: 1px solid var(--linha); padding: 14px 0; background: var(--fundo2); }
.faixa-in { display: flex; gap: 34px; width: max-content; animation: corre 90s linear infinite; font: 800 clamp(2.2rem, 9vw, 6.5rem)/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.faixa-in span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--apagado); }
@keyframes corre { to { transform: translateX(-50%); } }

/* mundos: anel de foco */
.anel { display: flex; gap: clamp(22px, 5vw, 60px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 50vw 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.anel::-webkit-scrollbar { display: none; }
.anel button { flex: none; scroll-snap-align: center; font: 800 clamp(1.7rem, 7.6vw, 4.6rem)/1 var(--display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1px #6d6a65; white-space: nowrap; padding: 6px 0; transition: color .3s, -webkit-text-stroke-color .3s; }
.anel button[aria-selected=true] { color: var(--cor); -webkit-text-stroke-color: var(--cor); }
.anel-regua { position: relative; height: 26px; overflow: hidden; margin-bottom: 26px; }
.anel-regua i { position: absolute; inset: 0 -200px; background: repeating-linear-gradient(90deg, #ffffff66 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, #ffffffb3 0 2px, transparent 2px 60px); background-size: 12px 9px, 60px 18px; background-repeat: repeat-x; background-position: 0 0, 0 0; mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.anel-regua b { position: absolute; left: 50%; top: 0; width: 2px; height: 26px; margin-left: -1px; background: var(--cor); }
.mundo { display: grid; gap: 22px; padding: 0 var(--lado); }
.mundo-txt { display: grid; gap: 12px; justify-items: start; align-content: start; }
.mundo-desc { font: 500 clamp(1.15rem, 3.4vw, 1.7rem)/1.25 var(--display); font-stretch: 108%; max-width: 26ch; }
.mundo-txt .mono { color: var(--apagado); }
.cols { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 calc(var(--lado) * -1); padding: 0 var(--lado) 8px; scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }
.col { flex: none; width: min(62vw, 250px); scroll-snap-align: start; text-decoration: none; display: grid; gap: 8px; }
.col img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; background: var(--fundo2); transition: filter .3s; }
.col b { font: 800 .86rem/1.15 var(--display); font-stretch: 115%; text-transform: uppercase; letter-spacing: .03em; }
.col span { color: var(--apagado); }
@media (hover: hover) { .col:hover img { filter: brightness(1.15); } .col:hover b { color: var(--cor); } }
@media (min-width: 900px) { .mundo { grid-template-columns: minmax(260px, 1fr) 2.4fr; align-items: start; } .cols { margin: 0; padding: 0 0 10px; } }
.mundo.troca { animation: troca .45s; }
@keyframes troca { from { opacity: 0; transform: translateY(14px); } }

/* folha de contato (tira de filme) */
.tira-cx { margin-top: 34px; background: #050505; border-block: 1px solid var(--linha); padding: 8px 0 12px; }
.tira-leg { display: flex; justify-content: space-between; gap: 10px; padding: 0 var(--lado) 6px; color: var(--apagado); }
.tira { display: flex; gap: 6px; overflow-x: auto; padding: 16px var(--lado); scrollbar-width: none; background: radial-gradient(circle, #1d1d20 3.2px, transparent 3.8px) 0 0 / 18px 12px repeat-x, radial-gradient(circle, #1d1d20 3.2px, transparent 3.8px) 0 100% / 18px 12px repeat-x; }
.tira::-webkit-scrollbar { display: none; }
.tira button { flex: none; position: relative; height: clamp(150px, 30vw, 240px); }
.tira img { height: 100%; width: auto; filter: saturate(.92); transition: filter .25s, transform .25s; background: var(--fundo2); }
.tira button::after { content: attr(data-n); position: absolute; left: 6px; bottom: 5px; font: 600 .62rem var(--mono); color: #ffd98a; text-shadow: 0 1px 2px #000; }
@media (hover: hover) { .tira button:hover img { filter: saturate(1.1) brightness(1.1); transform: scale(1.02); } }

/* mesa de luz */
.mesa { background: radial-gradient(120% 80% at 50% 45%, #f4f1ea 0%, #dedad1 55%, #b9b5ab 100%); color: #141414; }
.mesa .cab .mono { color: #6b3d00; } .mesa .cab-txt { color: #3b3935; }
.mesa-cx { position: relative; height: clamp(430px, 112vw, 660px); margin: 0 var(--lado); touch-action: pan-y; }
.copia { position: absolute; left: 0; top: 0; width: clamp(128px, 36vw, 270px); padding: 6px 6px 22px; background: #fff; box-shadow: 0 10px 26px #0000004d, 0 1px 2px #0003; transition: transform .7s cubic-bezier(.2, .9, .25, 1), box-shadow .3s; will-change: transform; }
.copia img { width: 100%; aspect-ratio: 1; object-fit: cover; pointer-events: none; background: #ddd; }
.copia::after { content: attr(data-leg); position: absolute; left: 7px; right: 7px; bottom: 5px; font: 500 .56rem var(--mono); color: #55524c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
.copia.cima { box-shadow: 0 24px 50px #00000080; z-index: 30 !important; }
.copia.arrasta { transition: none; cursor: grabbing; }
@media (pointer: fine) { .copia { cursor: grab; } .mesa-cx { touch-action: none; } }
.mesa-bts, .arte-bts { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px var(--lado) 0; }
.mesa .btn { background: #141414; color: var(--papel); } .mesa .btn.fantasma { background: transparent; color: #141414; box-shadow: inset 0 0 0 1px #14141480; }

/* rajada */
.rajada { padding: 0; height: 230vh; }
.rajada-fixo { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-items: end; }
.rajada-fixo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rajada-fixo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0a0a0b80, transparent 30%, transparent 55%, #0a0a0be6); }
.rajada-txt { position: relative; z-index: 2; padding: 0 var(--lado) 54px; display: grid; gap: 8px; }
.rajada-txt .mono:first-child { color: var(--cor); }
.rajada-barra { position: absolute; z-index: 2; left: var(--lado); right: var(--lado); bottom: 26px; display: flex; gap: 3px; height: 12px; }
.rajada-barra i { flex: 1; background: #ffffff40; } .rajada-barra i.on { background: var(--cor); }
@media (max-height: 480px) { .rajada { height: 200vh; } .rajada-txt h2 { font-size: 1.7rem; } }

/* fine art */
.arte { background: #101011; }
.parede { display: flex; gap: clamp(28px, 7vw, 90px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px max(var(--lado), calc(50vw - 240px)) 30px; scrollbar-width: none; background: radial-gradient(60% 90% at var(--lx, 50%) 20%, #2c2a27 0%, #101011 70%); }
.parede::-webkit-scrollbar { display: none; }
.obra { flex: none; scroll-snap-align: center; display: grid; gap: 16px; justify-items: center; }
.obra button { padding: clamp(10px, 2.4vw, 22px); background: #f4f1ea; box-shadow: 0 30px 60px #000000b3, 0 0 0 5px #1b1b1c, 0 0 0 6px #3a3a3c; }
.obra img { height: clamp(250px, 52svh, 480px); width: auto; max-width: 78vw; object-fit: cover; }
.obra p { text-align: left; font-size: .8rem; line-height: 1.35; color: #bdb9b1; border-left: 2px solid var(--cor); padding-left: 10px; justify-self: start; }
.obra p b { display: block; color: var(--tinta); font: 800 .82rem var(--display); font-stretch: 115%; text-transform: uppercase; letter-spacing: .05em; }

/* sobre */
.sobre { display: grid; gap: 34px; padding-inline: var(--lado); }
.sobre-txt { display: grid; gap: 14px; max-width: 60ch; }
.sobre-txt .mono { color: var(--cor); } .sobre-txt p:not(.mono) { color: #cfcbc3; font-size: 1.05rem; }
.numeros { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linha); border: 1px solid var(--linha); align-self: start; }
.numeros div { background: var(--fundo); padding: 16px 14px; display: grid; gap: 4px; }
.numeros dt { font: 500 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.numeros dd { margin: 0; font: 800 clamp(1.1rem, 4.6vw, 1.9rem)/1.05 var(--display); font-stretch: 120%; text-transform: uppercase; overflow-wrap: anywhere; }
.numeros div.largo { grid-column: 1 / -1; } .numeros div.largo dd { font-size: clamp(.95rem, 3.6vw, 1.3rem); }
@media (min-width: 900px) { .sobre { grid-template-columns: 1.1fr 1fr; align-items: center; } }

/* vídeo */
.video { padding-block: 0 clamp(64px, 11vw, 130px); }
.video-cx { margin: 0 var(--lado); position: relative; overflow: hidden; min-height: 300px; display: grid; align-items: end; border: 1px solid var(--linha); }
.video-cx img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.38) saturate(.7); }
.video-cx div { position: relative; padding: 26px 20px; display: grid; gap: 10px; justify-items: start; max-width: 50ch; }
.video-cx h2 { font-size: clamp(1.6rem, 6vw, 3rem); } .video-cx .mono { color: var(--cor); }

/* contato */
.contato { background: var(--papel); color: #141414; }
.contato .cab .mono { color: #6b3d00; } .contato .cab-txt { color: #3b3935; }
.ficha { padding: 0 var(--lado); display: grid; gap: 26px; max-width: 880px; }
.ficha fieldset { border: 0; border-top: 2px solid #141414; margin: 0; padding: 14px 0 0; display: grid; gap: 12px; min-width: 0; }
.ficha legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; display: flex; gap: 12px; align-items: baseline; font: 800 1.1rem var(--display); font-stretch: 118%; text-transform: uppercase; }
.ficha legend b { font: 600 .72rem var(--mono); color: #6b3d00; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; clear: both; }
.chips button { min-height: 44px; padding: 0 14px; border: 1px solid #14141473; border-radius: 99px; font: 700 .8rem var(--display); letter-spacing: .03em; color: #141414; }
.chips button[aria-pressed=true] { background: #141414; color: var(--papel); border-color: #141414; }
.dupla { display: grid; gap: 12px; clear: both; } @media (min-width: 620px) { .dupla { grid-template-columns: 1fr 1fr; } }
.ficha label { display: grid; gap: 5px; font: 700 .68rem var(--display); letter-spacing: .1em; text-transform: uppercase; min-width: 0; }
.ficha input, .ficha textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #14141466; background: #fffdf8; color: #141414; font: 400 16px var(--display); letter-spacing: 0; text-transform: none; border-radius: 2px; }
.ficha-msg { min-height: 1.3em; font-weight: 600; color: #a3260f; }
.ficha-bts { display: flex; flex-wrap: wrap; gap: 10px; }
.contato .btn { background: #141414; color: var(--papel); } .contato .btn.fantasma { background: transparent; color: #141414; box-shadow: inset 0 0 0 1px #14141480; }

/* botão flutuante */
.flut { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 45; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #06250f; display: grid; place-items: center; box-shadow: 0 8px 24px #00000080; transform: translateY(90px); transition: transform .4s; }
.flut.on { transform: none; }
html.visor-aberto .flut { display: none; }

/* entrada ao rolar */
.entra { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; } .entra.on { opacity: 1; transform: none; }

/* contador de quadros e mira */
.quadro { color: var(--cor); font-size: .72rem; letter-spacing: .08em; margin-left: auto; margin-right: 12px; }
@media (max-width: 820px) { .quadro { display: none; } }
.mira { position: fixed; left: -16px; top: -16px; width: 32px; height: 32px; z-index: 90; pointer-events: none; opacity: 0; mix-blend-mode: difference; transition: width .2s, height .2s, left .2s, top .2s, opacity .2s;
  background: linear-gradient(#fff,#fff) 0 0/9px 2px, linear-gradient(#fff,#fff) 0 0/2px 9px, linear-gradient(#fff,#fff) 100% 0/9px 2px, linear-gradient(#fff,#fff) 100% 0/2px 9px, linear-gradient(#fff,#fff) 0 100%/9px 2px, linear-gradient(#fff,#fff) 0 100%/2px 9px, linear-gradient(#fff,#fff) 100% 100%/9px 2px, linear-gradient(#fff,#fff) 100% 100%/2px 9px; background-repeat: no-repeat; }
.mira.on { opacity: 1; } .mira.foco { width: 58px; height: 58px; left: -29px; top: -29px; }

/* pastas com vários ensaios */
.col.pilha .capa { position: relative; display: block; }
.col.pilha img { box-shadow: 6px -6px 0 -1px var(--fundo), 6px -6px 0 0 var(--linha), 12px -12px 0 -1px var(--fundo), 12px -12px 0 0 var(--linha); margin-top: 12px; width: calc(100% - 12px); }

/* imprensa: câmara escura */
.imprensa { background: radial-gradient(ellipse at 50% 30%, #3a0606 0%, #1a0202 55%, #0a0000 100%); transition: background .8s; overflow: hidden; }
.imprensa.acesa { background: radial-gradient(ellipse at 50% 30%, #f6f1e7 0%, #e4ddcf 100%); color: #1b1a17; }
.imprensa.acesa .cab-txt { color: #4a463f; } .imprensa.acesa .cab .mono { color: #a35d00; }
.recorte { display: grid; gap: 34px; padding: 10px calc(var(--lado) + 10px) 0; max-width: 1100px; margin: 0 auto; }
.rev { background: #fbfaf6; padding: 12px 12px 40px; transform: rotate(-2deg); box-shadow: 0 18px 40px #000a; position: relative; max-width: 420px; justify-self: center; width: 100%; }
.rev img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; filter: brightness(2.4) contrast(.15) grayscale(1); transition: filter 5s cubic-bezier(.3,.1,.2,1); cursor: zoom-in; background: #ddd; }
.recorte.revela .rev img { filter: none; }
.rev::after { content: ''; position: absolute; inset: 12px 12px 40px; background: #ff1a0a; mix-blend-mode: multiply; opacity: .55; pointer-events: none; transition: opacity .8s; }
.imprensa.acesa .rev::after { opacity: 0; }
.rev figcaption { position: absolute; left: 14px; bottom: 12px; color: #333; font-size: .68rem; }
.jornal { background: #efe9dc; color: #1d1b17; padding: 26px 22px 24px; font-family: Georgia, 'Times New Roman', serif; transform: rotate(1.2deg); box-shadow: 0 14px 34px #0009; position: relative; align-self: center; display: grid; gap: 14px; }
.jornal::before { content: ''; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: #f4efe0b3; transform: rotate(-3deg); box-shadow: 0 1px 3px #0003; }
.jornal .mono { color: #8a1c10; font-size: .7rem; border-bottom: 1px solid #1d1b1733; padding-bottom: 10px; }
.jornal h3 { font: 700 clamp(1.3rem, 4.6vw, 2rem)/1.12 Georgia, serif; }
.jornal p { line-height: 1.5; }
.jornal .btn { justify-self: start; }
.luz { display: flex; margin: 34px auto 0; }
.imprensa.acesa .luz { color: #1b1a17; border-color: #1b1a1766; }
@media (min-width: 900px) { .recorte { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 60px; } }

/* instagram */
.insta { display: grid; gap: 40px; padding-inline: var(--lado); justify-items: center; }
.insta-txt { display: grid; gap: 14px; width: 100%; max-width: 560px; }
.insta-txt > .mono { color: var(--cor); }
.insta h2 { font-size: clamp(2rem, 10vw, 4.6rem); overflow-wrap: anywhere; }
.ig-dest { display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: none; margin-inline: calc(var(--lado) * -1); padding-inline: var(--lado); }
.ig-dest::-webkit-scrollbar { display: none; }
.ig-dest button { flex: none; width: 74px; display: grid; justify-items: center; gap: 6px; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.ig-dest .aro { width: 66px; height: 66px; border-radius: 50%; padding: 3px; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); display: block; }
.ig-dest button.visto .aro { background: #3a3a3e; }
.ig-dest button[aria-pressed=true] .aro { background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig-dest img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--fundo); display: block; }
.ig-dest b { font: 400 .68rem/1.2 var(--mono); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.insta-bts { display: flex; flex-wrap: wrap; gap: 10px; }
.cel { width: min(78vw, 330px); aspect-ratio: 9/19.5; border-radius: 44px; padding: 10px; background: #1b1b1e; box-shadow: 0 0 0 2px #333, 0 30px 70px #000c; flex: none; }
@media (max-height: 480px) { .cel { width: min(40vw, 230px); } }
.cel-tela { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #000; }
.st { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-barras { position: absolute; z-index: 2; top: 12px; left: 10px; right: 10px; display: flex; gap: 4px; }
.st-barras i { flex: 1; height: 2.5px; background: #ffffff59; border-radius: 2px; overflow: hidden; display: block; }
.st-barras b { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.st-barras .feito b { transform: none; }
.st-barras .agora b { animation: barra var(--dur, 5s) linear forwards; }
.cel-tela.pausa .st-barras b, .cel-tela.fora .st-barras b { animation-play-state: paused; }
@keyframes barra { to { transform: scaleX(1); } }
.st-cab { position: absolute; z-index: 2; top: 24px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: .78rem; text-shadow: 0 1px 4px #0009; }
.st-cab img { width: 30px; height: 30px; border-radius: 50%; background: #000; border: 1px solid #fff6; }
.st-cab span { color: #ffffffb3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-cab::before { content: ''; position: absolute; inset: -40px -14px -30px; background: linear-gradient(#0009, #0000); z-index: -1; }
.st-zona { position: absolute; z-index: 1; inset: 0; display: grid; grid-template-columns: 1fr 2fr; }
.st-zona button { background: none; border: 0; cursor: pointer; }
.st-pe { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 16px; display: flex; gap: 10px; align-items: center; }
#stVer { flex: 1; min-height: 42px; border-radius: 999px; border: 1px solid #ffffffb3; background: #0005; color: #fff; font: 600 .8rem/1 var(--mono); cursor: pointer; backdrop-filter: blur(6px); }
.st-ig { width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
@media (min-width: 900px) { .insta { grid-template-columns: 1.2fr auto; align-items: center; max-width: 1200px; margin: 0 auto; gap: 80px; } .ig-dest { flex-wrap: wrap; overflow: visible; margin: 0; padding-inline: 2px; } }
@media (prefers-reduced-motion: reduce) { .rev img { transition: none; } .hero[data-fase=inicio] .disparo-anel { animation: none; } }

/* ---------- abertura (12/11): foco no logo, rajada com a frase, a memória some e o disparo revela ---------- */
.intro { position: absolute; inset: 0; z-index: 30; background: #000; overflow: hidden; display: grid; place-items: center; transition: opacity .5s; }
.intro[data-p=esquece] { background: none; } .intro[data-p=fim] { opacity: 0; pointer-events: none; }
.intro-fotos, .intro-fotos img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-fotos img { object-fit: cover; opacity: 0; }
.intro-fotos img.on { opacity: 1; animation: corte .16s ease-out; }
@keyframes corte { from { transform: scale(1.09); filter: brightness(2.1) contrast(1.2); } to { transform: none; filter: none; } }
.intro[data-p=esquece] .intro-fotos { display: none; }
.intro-mira { position: relative; width: 132px; aspect-ratio: 1; display: grid; place-items: center; }
.intro-mira img { width: 84px; height: 84px; object-fit: contain; filter: blur(9px); opacity: .5; animation: introFoco 1s .1s cubic-bezier(.3,0,.2,1) forwards; }
@keyframes introFoco { 35% { filter: blur(1px); opacity: .9; } 55% { filter: blur(6px); opacity: .7; } 100% { filter: none; opacity: 1; } }
.intro-mira span { position: absolute; width: 20px; height: 20px; border: solid #fff; border-width: 2px 0 0 2px; animation: introMira 1s .1s cubic-bezier(.3,0,.2,1) both; }
.intro-mira span:nth-child(1) { top: 0; left: 0; --x: -1; --y: -1; } .intro-mira span:nth-child(2) { top: 0; right: 0; rotate: 90deg; --x: 1; --y: -1; }
.intro-mira span:nth-child(3) { bottom: 0; right: 0; rotate: 180deg; --x: 1; --y: 1; } .intro-mira span:nth-child(4) { bottom: 0; left: 0; rotate: 270deg; --x: -1; --y: 1; }
@keyframes introMira { from { translate: calc(var(--x) * 34vw) calc(var(--y) * 30svh); opacity: 0; } 35% { translate: calc(var(--x) * -6px) calc(var(--y) * -6px); opacity: 1; } 55% { translate: calc(var(--x) * 16px) calc(var(--y) * 16px); } to { translate: 0 0; opacity: 1; } }
.intro[data-p=trava] .intro-mira span { border-color: var(--cor); }
.intro-af { position: absolute; left: 50%; top: calc(50% + 86px); translate: -50% 0; color: #fff9; opacity: 0; transition: opacity .2s; }
.intro-af b { color: var(--cor); font-weight: 400; }
.intro[data-p=trava] .intro-af { opacity: 1; color: var(--cor); }
.intro[data-p=rajada] .intro-mira, .intro[data-p=esquece] .intro-mira, .intro[data-p=rajada] .intro-af, .intro[data-p=esquece] .intro-af { display: none; }
.intro-pal { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; white-space: nowrap; font: 800 min(12.4vw, 30svh, 11rem)/.9 var(--display); font-stretch: 125%; letter-spacing: -.025em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; }
.intro-pal.bate { animation: bate .22s cubic-bezier(.2,.9,.3,1); }
@keyframes bate { from { scale: 1.35; opacity: .2; } to { scale: 1; opacity: 1; } }
.intro[data-p=esquece] .intro-pal { mix-blend-mode: normal; color: transparent; -webkit-text-stroke: 1.5px var(--papel); }
.intro-pal i { font-style: normal; display: inline-block; transition: opacity .35s, filter .35s, translate .35s; }
.intro-pal i.foi { opacity: 0; filter: blur(10px); translate: 0 -.12em; }
.intro-cont { position: absolute; right: calc(var(--lado) + 14px); bottom: 36px; color: var(--cor); }
.intro[data-p=foca] .intro-cont, .intro[data-p=trava] .intro-cont { opacity: 0; }
/* o resto só chega depois do disparo */
body.abrindo .topo, body.abrindo .hero-txt > *, body.abrindo .memoria, body.abrindo .disparo, body.abrindo .hero-hud, body.abrindo .visorcam { opacity: 0; pointer-events: none; }
body.abrindo .topo > * { pointer-events: none; }
body.abrindo .topo { translate: 0 -100%; } body.abrindo .hero-txt > * { translate: 0 28px; } body.abrindo .visorcam { scale: 1.12; } body.abrindo .disparo { scale: .6; }
body.abrindo .hero-hud, body.abrindo .memoria { translate: 0 12px; }
body.revela .topo, body.revela .hero-txt > *, body.revela .memoria, body.revela .disparo, body.revela .hero-hud, body.revela .visorcam { transition: opacity .7s var(--d, 0s), translate .8s var(--d, 0s) cubic-bezier(.2,.8,.2,1), scale .8s var(--d, 0s) cubic-bezier(.2,.8,.2,1); }
body.revela .visorcam { --d: .15s; } body.revela .hero-txt > :nth-child(1) { --d: .35s; } body.revela .hero-txt > :nth-child(2) { --d: .5s; } body.revela .hero-txt > :nth-child(3) { --d: .95s; }
body.revela .topo { --d: .8s; } body.revela .memoria { --d: 1.15s; } body.revela .disparo { --d: 1.3s; } body.revela .hero-hud { --d: 1.45s; }
body.revela h1 span { animation: sobe .8s cubic-bezier(.2,.8,.2,1) both; } body.revela h1 span:nth-child(1) { animation-delay: .5s; } body.revela h1 span:nth-child(2) { animation-delay: .62s; } body.revela h1 span:nth-child(3) { animation-delay: .74s; } body.revela h1 span:nth-child(4) { animation-delay: .86s; }
@keyframes sobe { from { opacity: 0; translate: 0 .5em; } to { opacity: 1; translate: 0 0; } }
body.revela .hero-fotos { animation: chega 2.8s cubic-bezier(.15,.7,.2,1); }
@keyframes chega { from { transform: scale(1.16); } to { transform: none; } }
.intro-som { position: absolute; left: calc(var(--lado) + 14px); bottom: 36px; color: #fffc; animation: pisca 1.1s ease-in-out infinite alternate; transition: opacity .3s; }
.intro-som::before { content: "¶A  "; color: var(--cor); }
.intro-som.ok, .intro[data-p=fim] .intro-som { opacity: 0; animation: none; }
@keyframes pisca { from { opacity: .35; } to { opacity: 1; } }