/* Portfólio: o site real (computador) ocupa todo o card, o celular fica sobreposto à direita
   vazando para baixo e o balão do logo vai para a esquerda. No hover, a página do site rola. */
.project-card--device .project-photo>picture>img{object-position:50% 0;filter:none}
.project-card--device:hover .project-photo>picture>img,.project-card--device:focus-visible .project-photo>picture>img{filter:none;transform:none}
.project-card--device .project-reveal{right:calc(34% + 26px)}
.project-hub .project-card--device .project-reveal{right:calc(30% + 34px)}
.project-card--device .project-logo,.project-hub .project-card--device .project-logo{left:14px;transform:none;transform-origin:30% 55%}
.project-card--device:hover .project-logo,.project-card--device:focus-visible .project-logo{transform:scale(1.1)}
.project-hub .project-card--device:hover .project-logo,.project-hub .project-card--device:focus-visible .project-logo{transform:scale(1.06)}
@media(hover:none){.project-card--device .project-photo>picture>img{filter:none}.project-card--device:hover .project-logo{transform:none}}
@media(prefers-reduced-motion:reduce){.project-card--device:hover .project-logo,.project-card--device:focus-visible .project-logo{transform:none}}

/* Celular "em pé": sombra de contato na base e sombra projetada atrás, à esquerda. */
.project-device{position:absolute;z-index:2;right:4.5%;bottom:0;width:34%;transform:translateY(26%);pointer-events:none;container-type:inline-size}
.project-hub .project-device{width:30%;transform:translateY(19%)}
.project-device-cast{position:absolute;left:-20cqw;right:14cqw;top:20cqw;bottom:0;border-radius:20cqw;background:rgba(0,16,40,.55);filter:blur(9cqw);transform:skewX(-8deg);transform-origin:50% 100%}
.project-device-contact{position:absolute;left:-17cqw;right:-6cqw;bottom:-10cqw;height:21cqw;border-radius:50%;background:radial-gradient(ellipse at 44% 45%,rgba(0,10,28,.78) 0%,rgba(0,10,28,.42) 34%,rgba(0,10,28,.12) 58%,transparent 72%);filter:blur(1.5cqw)}
.project-device-phone{position:relative;display:block;padding:4.5cqw;border-radius:16.7cqw;background:#0d1520;box-shadow:inset 0 0 0 1.1cqw #2a3646,-1.5cqw .8cqw 1.5cqw rgba(0,0,0,.3)}
.project-device-screen{position:relative;display:block;overflow:hidden;border-radius:12.9cqw;background:#fff}
.project-device-screen::before{content:'';display:block;height:11.4cqw;background:#0d1520}
.project-device-screen::after{content:'';position:absolute;left:50%;top:2.3cqw;width:27cqw;height:7.6cqw;margin-left:-13.5cqw;border-radius:5cqw;background:#000}
.project-device-screen picture,.project-device-screen img{display:block;width:100%}
.project-device-screen img{height:auto;aspect-ratio:300/615;object-fit:cover;object-position:top}

/* Rolagem da página no hover (só com mouse; o print inteiro carrega na primeira passada). */
.project-scroll{display:none}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .project-scroll{display:block;position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .2s ease 1.2s}
  .project-scroll img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:object-position 1.2s cubic-bezier(.4,0,.2,1)}
  .project-card.scroll-ready:hover .project-scroll,.project-card.scroll-ready:focus-visible .project-scroll{opacity:1;transition:opacity .15s ease}
  .project-card.scroll-ready:hover .project-scroll img,.project-card.scroll-ready:focus-visible .project-scroll img{object-position:50% 100%;transition:object-position var(--scroll-dur,14s) linear .35s}
}