.
data-bg-type aceita: "full" | "corner-left" | "corner-right" | "anim".
Pins seguem a estética Apple-glass: sem sombra, bg #ebebf0 com blur.
=========================================================================== */
.features-explorer {
position: relative;
width: 100%;
max-width: 1200px;
margin: var(--space-12) auto 0;
border-radius: 28px;
overflow: hidden;
/* Sem bg aqui — o #f5f5f7 vai numa camada interna (.features-explorer__bg)
com o mesmo border-radius, evitando faixa cinza no antialiasing do clip. */
background: transparent;
aspect-ratio: 16 / 10;
isolation: isolate;
}
@media (max-width: 768px) {
.features-explorer { aspect-ratio: 4 / 5; border-radius: 20px; }
}
/* --- Camada de fundos · cross-fade entre features ---
Sem bg aqui também: como sempre há uma feature ativa com sua própria
imagem cobrindo 100% do frame, o estado vazio nunca acontece na prática.
Manter qualquer cor sólida nesta camada faz reaparecer a faixa nos
cantos arredondados (antialiasing do clip do parent). */
.features-explorer__bg {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
}
.feat-bg {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
background-clip: padding-box;
will-change: opacity;
opacity: 0;
visibility: hidden;
z-index: 0;
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 700ms;
}
/* Bg anterior · permanece visível por baixo enquanto o novo entra */
.feat-bg.is-prev {
opacity: 1;
visibility: visible;
z-index: 1;
transition: none;
}
/* Bg que está virando ativo · entra por cima apenas com fade-in (sem scale) */
.feat-bg.is-active {
opacity: 1;
visibility: visible;
z-index: 2;
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
visibility 0s linear 0s;
}
/* Quando o bg vem por background-image (inline style) → cover sem distorção */
.feat-bg[data-bg-type="full"] {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.feat-bg__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
user-select: none;
pointer-events: none;
}
/* Variantes de fundo */
[data-bg-type="corner-left"] .feat-bg__img--corner {
width: auto;
height: 100%;
max-width: 70%;
object-fit: contain;
object-position: left center;
margin-right: auto;
}
[data-bg-type="corner-right"] .feat-bg__img--corner {
width: auto;
height: 100%;
max-width: 70%;
object-fit: contain;
object-position: right center;
margin-left: auto;
}
[data-bg-type="corner-left"],
[data-bg-type="corner-right"] {
display: flex;
}
/* Sequência de imagens (canvas) */
.feat-bg__anim {
position: absolute;
inset: 0;
}
.feat-bg__anim canvas,
.feat-bg__anim img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Digital biométrica · slide "teclado" (componentes/digital.html aplicado).
SVG é populada via JS (sets --len/--delay/--exit-delay por path).
Entrada dispara em .is-active, saída em .is-prev. */
.feat-bg__fingerprint {
position: absolute;
left: 67.8%;
top: 73%;
width: 45px;
aspect-ratio: 3 / 4;
transform: translate(-50%, -50%) rotate(8deg);
pointer-events: none;
z-index: 1;
overflow: visible;
filter: drop-shadow(0 0 4px rgba(57, 198, 255, 0.55));
}
.feat-bg__fingerprint path {
fill: none;
stroke: #39c6ff;
stroke-width: 0.8;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len); /* invisível por padrão */
}
.feat-bg.is-active[data-bg-for="teclado"] .feat-bg__fingerprint path {
animation: fp-draw 1s cubic-bezier(.5, .05, .2, 1) var(--delay, 0s) forwards;
}
/* Saída: todos os paths começam quase juntos e desaparecem rápido, dentro
da janela de 700ms do .is-prev (cross-fade do bg).
fill: both → durante o --exit-delay, aplica o keyframe 0% (desenhado),
evitando o flash invisível-desenhado-invisível antes do undraw rodar. */
.feat-bg.is-prev[data-bg-for="teclado"] .feat-bg__fingerprint path {
animation: fp-undraw 0.35s cubic-bezier(.4, 0, .6, 1) var(--exit-delay, 0s) both;
}
@keyframes fp-draw {
0% { stroke-dashoffset: var(--len); stroke: #cdefff; }
65% { stroke: #7ad4ff; }
100% { stroke-dashoffset: 0; stroke: #39c6ff; }
}
@keyframes fp-undraw {
0% { stroke-dashoffset: 0; stroke: #39c6ff; }
100% { stroke-dashoffset: var(--len); stroke: #cdefff; }
}
@media (prefers-reduced-motion: reduce) {
.feat-bg.is-active[data-bg-for="teclado"] .feat-bg__fingerprint path,
.feat-bg.is-prev[data-bg-for="teclado"] .feat-bg__fingerprint path {
animation: none;
}
}
@media (max-width: 768px) {
.feat-bg__fingerprint { width: 20px; }
}
/* --- Lista vertical de pins (à esquerda do frame) --- */
.features-explorer__list {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
z-index: 2;
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.625rem;
max-width: 440px;
}
@media (max-width: 768px) {
.features-explorer__list { left: 1rem; right: 1rem; max-width: none; }
}
.feat-item {
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
}
/* --- Pin (pílula) --- */
.feat-pin {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 0.625rem 1.125rem 0.625rem 0.625rem;
background: rgba(235, 235, 240, 0.7); /* #ebebf0 com transparência → glass */
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 999px;
color: #000;
font: 600 1.0625rem/1 var(--font-sans, system-ui);
letter-spacing: -0.01em;
cursor: pointer;
white-space: nowrap;
transition: background 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.feat-pin:hover {
background: rgba(235, 235, 240, 0.92);
transform: translateX(2px);
}
.feat-pin:focus-visible {
outline: 2px solid var(--vaio-gold, #d4af37);
outline-offset: 3px;
}
/* Ícone + (círculo com plus desenhado) */
.feat-pin__icon {
position: relative;
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid rgba(0, 0, 0, 0.45);
flex-shrink: 0;
}
.feat-pin__icon::before,
.feat-pin__icon::after {
content: "";
position: absolute;
inset: 50%;
width: 9px;
height: 1.4px;
background: currentColor;
transform: translate(-50%, -50%);
}
.feat-pin__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* --- Card (substitui o pin do item ativo) --- */
.feat-card {
display: none; /* só aparece no item ativo */
width: min(420px, 100%);
max-width: 320px;
padding: 1.375rem 1.625rem 1.5rem;
background: rgba(235, 235, 240, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 22px;
color: #000;
text-align: left;
animation: feat-card-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.feat-card__title {
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
letter-spacing: -0.01em;
color: #000;
display: inline;
}
.feat-card__desc {
display: inline;
margin: 0;
font-size: 1rem;
line-height: 1.35;
color: #000;
}
.feat-card__title + .feat-card__desc { margin-left: 0.25rem; }
/* Item ativo · esconde o pin, mostra o card */
.feat-item.is-active .feat-pin { display: none; }
.feat-item.is-active .feat-card { display: block; }
@keyframes feat-card-in {
from { opacity: 0; transform: translateY(-4px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* --- Navegação (vertical · à direita do frame) --- */
.features-explorer__nav {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 3;
}
@media (max-width: 768px) {
.features-explorer__nav { display: none; }
}
.feat-nav-btn {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(235, 235, 240, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
color: #000;
cursor: pointer;
padding: 0;
transition: background 240ms ease;
}
.feat-nav-btn:hover { background: rgba(235, 235, 240, 0.92); }
.feat-nav-btn:focus-visible {
outline: 2px solid var(--vaio-gold, #d4af37);
outline-offset: 3px;
}
.feat-nav-btn svg { width: 16px; height: 16px; }
.feat-nav-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* --- Botão fechar (canto sup. direito) --- */
.features-explorer__close {
position: absolute;
top: 1rem;
right: 1rem;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(235, 235, 240, 0.7);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 50%;
color: #000;
cursor: pointer;
z-index: 4;
transition: background 240ms ease;
}
.features-explorer__close:hover { background: rgba(235, 235, 240, 0.92); }
.features-explorer__close svg { width: 14px; height: 14px; }
.features-explorer__close[hidden] { display: none; }
/* --- Barra de progresso (sutil, dentro da lista, abaixo do último pin) --- */
.features-explorer__progress {
list-style: none;
width: 140px;
max-width: 70%;
height: 2px;
margin-top: 0.875rem;
margin-left: 1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
overflow: hidden;
}
.feat-progress__fill {
width: 100%;
height: 100%;
background: var(--vaio-gold, #d4af37);
border-radius: inherit;
transform: scaleX(0);
transform-origin: left center;
}
.features-explorer.is-playing .feat-progress__fill {
animation: feat-progress var(--feat-autoplay, 5000ms) linear forwards;
}
@keyframes feat-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* ===========================================================================
FEATURES EXPLORER · MOBILE (≤ 768px)
Bloco posicionado AQUI (depois de todas as regras base) para vencer
por ordem de cascata, dado que muitas regras base têm mesma especificidade.
- Pins horizontal scrollable ACIMA do bg
- Descrição do item ativo aparece em card ABAIXO do bg
- BG card vira aspect 3/2 (≈ 16:10 das imagens, ~6% crop só nas laterais)
=========================================================================== */
/* Caption slot · default escondido (desktop usa o card inline). */
.features-explorer__caption { display: none; }
@media (max-width: 768px) {
.features-explorer {
aspect-ratio: auto;
display: flex;
flex-direction: column;
gap: 0.875rem;
border-radius: 0;
overflow: visible;
background: transparent;
position: relative;
}
/* Lista de pins · scroll horizontal acima do bg (order -1) */
.features-explorer__list {
position: static;
transform: none;
flex-direction: row;
align-items: center;
gap: 0.5rem;
overflow-x: auto;
overflow-y: hidden;
padding: 0.25rem 0 0.5rem;
margin: 0;
max-width: none;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-snap-type: x proximity;
flex-shrink: 0;
order: -1;
}
.features-explorer__list::-webkit-scrollbar { display: none; }
.features-explorer__list > .feat-item {
flex-shrink: 0;
scroll-snap-align: start;
}
/* Pin compacto */
.feat-pin {
padding: 0.5rem 0.875rem 0.5rem 0.5rem;
font-size: 0.875rem;
gap: 0.5rem;
}
.feat-pin__icon { width: 18px; height: 18px; }
.feat-pin__icon::before,
.feat-pin__icon::after { width: 7px; }
/* Pin ativo: branco sólido (sem morph para card no mobile) */
.feat-item.is-active .feat-pin {
display: inline-flex;
background: #fff;
color: #000;
border-color: rgba(0, 0, 0, 0.08);
}
.feat-item.is-active .feat-pin .feat-pin__icon {
border-color: rgba(0, 0, 0, 0.45);
color: #000;
}
/* Os .feat-card dentro da lista NÃO aparecem no mobile —
o conteúdo do ativo é clonado pelo JS no .features-explorer__caption */
.feat-item .feat-card,
.feat-item.is-active .feat-card { display: none; }
/* Bg · flex item central com aspect 3/2 e cantos arredondados */
.features-explorer__bg {
position: relative;
inset: auto;
aspect-ratio: 3 / 2;
border-radius: 18px;
overflow: hidden;
order: 0;
}
/* Caption · slot de descrição ABAIXO da imagem (flex item, order 2).
Conteúdo populado por JS (.feat-card__title + .feat-card__desc do ativo). */
.features-explorer__caption {
display: block;
order: 2;
margin-top: 0.25rem;
padding: 0.875rem 1.125rem;
background: rgba(235, 235, 240, 0.92);
border: 1px solid rgba(255, 255, 255, 0.45);
border-radius: 14px;
color: #000;
text-align: left;
animation: feat-card-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.features-explorer__caption .feat-card__title {
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.01em;
display: inline;
}
.features-explorer__caption .feat-card__desc {
display: inline;
margin: 0;
font-size: 0.9375rem;
line-height: 1.35;
}
.features-explorer__caption .feat-card__title + .feat-card__desc { margin-left: 0.25rem; }
/* Auxiliares escondidos no mobile */
.features-explorer__progress,
.features-explorer__close { display: none; }
}
/* ===========================================================================
ENTRADA · animação staggered, mais lenta e contemplativa
=========================================================================== */
.features-explorer {
opacity: 0;
transform: scale(0.94) translateY(28px);
transition:
opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.features-explorer.is-revealed {
opacity: 1;
transform: scale(1) translateY(0);
}
/* Itens individuais — duração mais longa */
.features-explorer .feat-bg.is-active,
.features-explorer .feat-item,
.features-explorer__nav .feat-nav-btn,
.features-explorer__close,
.features-explorer__progress {
opacity: 0;
transition:
opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.features-explorer .feat-item { transform: translateX(-22px); }
.features-explorer__nav .feat-nav-btn { transform: translateX(16px); }
.features-explorer__close { transform: translateY(-10px) scale(0.9); }
.features-explorer__progress { transform: translateX(-12px); }
.features-explorer.is-revealed .feat-bg.is-active,
.features-explorer.is-revealed .feat-item,
.features-explorer.is-revealed .features-explorer__nav .feat-nav-btn,
.features-explorer.is-revealed .features-explorer__close,
.features-explorer.is-revealed .features-explorer__progress {
opacity: 1;
transform: none;
}
/* Stagger mais espaçado · começa depois do frame terminar */
.features-explorer.is-revealed .feat-bg.is-active { transition-delay: 400ms; }
.features-explorer.is-revealed .feat-item:nth-child(1) { transition-delay: 700ms; }
.features-explorer.is-revealed .feat-item:nth-child(2) { transition-delay: 820ms; }
.features-explorer.is-revealed .feat-item:nth-child(3) { transition-delay: 940ms; }
.features-explorer.is-revealed .feat-item:nth-child(4) { transition-delay: 1060ms; }
.features-explorer.is-revealed .feat-item:nth-child(5) { transition-delay: 1180ms; }
.features-explorer.is-revealed .feat-item:nth-child(6) { transition-delay: 1300ms; }
.features-explorer.is-revealed .feat-item:nth-child(7) { transition-delay: 1420ms; }
.features-explorer.is-revealed .feat-item:nth-child(8) { transition-delay: 1540ms; }
.features-explorer.is-revealed .feat-item:nth-child(9) { transition-delay: 1660ms; }
.features-explorer.is-revealed .feat-item:nth-child(10) { transition-delay: 1780ms; }
.features-explorer.is-revealed .features-explorer__progress { transition-delay: 1900ms; }
.features-explorer.is-revealed .features-explorer__nav .feat-nav-btn:first-child { transition-delay: 2020ms; }
.features-explorer.is-revealed .features-explorer__nav .feat-nav-btn:last-child { transition-delay: 2120ms; }
.features-explorer.is-revealed .features-explorer__close { transition-delay: 2220ms; }
@media (prefers-reduced-motion: reduce) {
.features-explorer,
.feat-bg, .feat-pin, .feat-card, .feat-item,
.feat-nav-btn, .features-explorer__close, .features-explorer__progress,
.feat-progress__fill {
transition: none !important;
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.feat-progress__fill { transform: scaleX(0) !important; }
}
/* ===========================================================================
4. VÍDEO
=========================================================================== */
.video__frame {
max-width: var(--container-xl);
margin-inline: auto;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-2xl);
position: relative;
}
.video__caption {
text-align: center;
font-size: var(--fs-sm);
color: var(--text-muted);
margin-top: var(--space-4);
}
/* Video reveal · animação de entrada (kicker → título → lead → frame em cascata).
--reveal-delay vem do JS (initVideoReveal) com 120ms entre cada item. */
.video-reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.video-reveal.is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.video-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ===========================================================================
5. NARRATIVE
=========================================================================== */
.narrative__grid {
display: flex;
flex-direction: column;
gap: var(--space-10);
width: 100%;
max-width: 1000px;
margin-inline: auto;
}
.narrative__content {
width: 100%;
max-width: 1000px;
margin-inline: auto;
text-align: left;
}
.narrative__content .section-heading__title {
margin: 0;
width: 100%;
max-width: none;
}
.narrative__content p {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: #000;
margin-top: var(--space-5);
width: 100%;
max-width: none;
}
/* === Gallery: 2 colunas (esq: 2 cards / dir: 1 card alto) — ~500px cada coluna num container de 1000px === */
.narrative__gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.3125rem; /* 21px de respiro entre as colunas */
width: 100%;
max-width: 1000px;
margin-inline: auto;
}
@media (max-width: 768px) {
.narrative__gallery { grid-template-columns: 1fr; }
}
.narrative__col {
display: flex;
flex-direction: column;
gap: 1.3125rem;
min-height: 0;
}
.narrative__card {
position: relative;
margin: 0;
background: #f5f5f7;
border-radius: 1.25rem; /* 20px */
overflow: hidden;
isolation: isolate;
}
.narrative__col--left .narrative__card {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 480 / 310; /* Figma: cards 480×310 → 380×245.4 */
}
.narrative__col--right .narrative__card--tall {
flex: 1 1 100%;
width: 100%;
/* Altura herdada do row do grid (= soma dos 2 cards da esquerda + gap) */
}
/* Card 1 · laptop com infográfico — posição exata do Figma */
.narrative__card--info > img {
position: absolute;
left: 17.5%; /* 84/480 */
top: 11.61%; /* 36/310 */
width: 72.08%; /* 346/480 */
height: auto;
display: block;
object-fit: contain;
}
/* Card 2 · keyboard com waves SVG sobreposto top-left */
.narrative__card--keyboard > img:not(.narrative__waves) {
position: absolute;
left: 25.62%; /* 123/480 */
bottom: -12.58%; /* imagem sangra 39px abaixo do card (310 → -39) */
width: 87.08%; /* 418/480 */
height: auto;
display: block;
object-fit: contain;
}
.narrative__waves {
position: absolute;
top: 0;
left: 0;
width: 45.62%; /* 219/480 — bbox do svg ancorada no topo-esquerdo do card */
height: auto;
pointer-events: none;
z-index: 1;
}
/* Card 3 · 3 imagens stacked — posições exatas do Figma (480×641) */
.narrative__stack-img {
position: absolute;
left: 21.04%; /* 101/480 — alinhamento horizontal comum às 3 */
display: block;
height: auto;
object-fit: contain;
}
.narrative__stack-img--top { /* 276×183 */
top: 11.39%; /* 73/641 */
width: 57.5%; /* 276/480 */
aspect-ratio: 276 / 183;
}
.narrative__stack-img--mid { /* 281×34 — perfil lateral */
top: 46.02%; /* 295/641 */
width: 58.54%; /* 281/480 */
aspect-ratio: 281 / 34;
}
.narrative__stack-img--bot { /* 282×196 */
top: 57.88%; /* 371/641 */
width: 58.75%; /* 282/480 */
aspect-ratio: 282 / 196;
}
@media (max-width: 768px) {
.narrative__gallery {
grid-template-columns: 1fr;
aspect-ratio: auto;
}
.narrative__col--right .narrative__card--tall {
aspect-ratio: 480 / 641;
}
}
/* === Entrada em cascata (cards + imagens + texto) — cinematográfica e lenta === */
.narrative [data-narrative-anim] {
opacity: 0;
will-change: opacity, transform, filter;
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1300ms cubic-bezier(0.22, 1, 0.36, 1),
filter 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Estados iniciais — cada peça parte de uma direção própria, com mais
deslocamento e blur leve no texto pra dar peso na entrada. */
.narrative [data-narrative-anim="title"] { transform: translate3d(0, 32px, 0); filter: blur(6px); }
.narrative [data-narrative-anim="desc"] { transform: translate3d(0, 28px, 0); filter: blur(6px); }
.narrative [data-narrative-anim="card-1"] { transform: translate3d(-44px, 40px, 0) scale(0.94); }
.narrative [data-narrative-anim="card-2"] { transform: translate3d(-44px, 48px, 0) scale(0.94); }
.narrative [data-narrative-anim="card-3"] { transform: translate3d(44px, 40px, 0) scale(0.94); }
.narrative [data-narrative-anim="img-1"] { transform: translate3d(0, 36px, 0) scale(1.06); filter: blur(8px); }
.narrative [data-narrative-anim="img-2"] { transform: translate3d(0, 40px, 0) scale(1.06); filter: blur(8px); }
.narrative [data-narrative-anim="waves"] { transform: translate3d(-32px, -20px, 0) rotate(-8deg); }
.narrative [data-narrative-anim="stack-1"] { transform: translate3d(0, -32px, 0) scale(0.92); }
.narrative [data-narrative-anim="stack-2"] { transform: translate3d(-44px, 0, 0); }
.narrative [data-narrative-anim="stack-3"] { transform: translate3d(0, 32px, 0) scale(0.92); }
/* Estado final — disparado quando .narrative.is-in */
.narrative.is-in [data-narrative-anim] {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1) rotate(0);
filter: blur(0);
}
/* Stagger mais espaçado · sequência total ≈ 2.6s */
.narrative.is-in [data-narrative-anim="title"] { transition-delay: 0ms; }
.narrative.is-in [data-narrative-anim="desc"] { transition-delay: 280ms; }
.narrative.is-in [data-narrative-anim="card-1"] { transition-delay: 720ms; }
.narrative.is-in [data-narrative-anim="card-3"] { transition-delay: 920ms; }
.narrative.is-in [data-narrative-anim="card-2"] { transition-delay: 1120ms; }
.narrative.is-in [data-narrative-anim="img-1"] { transition-delay: 1100ms; }
.narrative.is-in [data-narrative-anim="stack-1"] { transition-delay: 1300ms; }
.narrative.is-in [data-narrative-anim="stack-2"] { transition-delay: 1500ms; }
.narrative.is-in [data-narrative-anim="stack-3"] { transition-delay: 1700ms; }
.narrative.is-in [data-narrative-anim="img-2"] { transition-delay: 1500ms; }
.narrative.is-in [data-narrative-anim="waves"] { transition-delay: 1900ms; }
/* `.reveal` deixa de bloquear o conteúdo (controlado por data-narrative-anim) */
.narrative__content.reveal,
.narrative__media.reveal {
opacity: 1;
transform: none;
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.narrative [data-narrative-anim] {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* ===========================================================================
DEEP DIVE (shared layout: image + content)
=========================================================================== */
.deep-dive__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
align-items: center;
}
/* Variante com fundo diagonal · cobre o conteúdo via clip-path,
deixando uma cunha exposta no canto superior. */
.deep-dive--diagonal {
background: transparent !important;
position: relative;
isolation: isolate;
overflow: hidden;
}
.deep-dive--diagonal::before {
content: "";
position: absolute;
inset: 0;
background: #4A5162;
/* Diagonal: canto sup. esquerdo cheio · canto sup. direito cortado 30% abaixo */
clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 100%);
z-index: -1;
}
@media (max-width: 768px) {
.deep-dive--diagonal::before {
clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%);
}
/* Empurra o título mais pra baixo para entrar dentro do bg escuro diagonal. */
#ai-pc { padding-top: 130px; }
}
/* Container da seção do processador limitado a 1200px (em vez do 1440px global) */
#ai-pc.deep-dive > .deep-dive__grid {
max-width: var(--container-xl);
}
/* ===========================================================================
AI-PC · entrada escalonada (texto → selos → dashboard)
Disparada quando .is-revealed é adicionado pela IO (initAiPcReveal).
=========================================================================== */
#ai-pc .section-heading__title,
#ai-pc .deep-dive__content > p,
#ai-pc .chip-row,
#ai-pc .chip-row__text,
#ai-pc .windows-desktop {
opacity: 0;
transform: translateY(28px);
filter: blur(6px);
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1300ms cubic-bezier(0.22, 1, 0.36, 1),
filter 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ai-pc.is-revealed .section-heading__title,
#ai-pc.is-revealed .deep-dive__content > p,
#ai-pc.is-revealed .chip-row,
#ai-pc.is-revealed .chip-row__text,
#ai-pc.is-revealed .windows-desktop {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Stagger · cada peça espera a anterior assentar */
#ai-pc.is-revealed .section-heading__title { transition-delay: 0ms; }
#ai-pc.is-revealed .deep-dive__content > p { transition-delay: 280ms; }
#ai-pc.is-revealed .chip-row { transition-delay: 720ms; }
#ai-pc.is-revealed .chip-row__text { transition-delay: 980ms; }
#ai-pc.is-revealed .windows-desktop { transition-delay: 1280ms; }
@media (prefers-reduced-motion: reduce) {
#ai-pc .section-heading__title,
#ai-pc .deep-dive__content > p,
#ai-pc .chip-row,
#ai-pc .chip-row__text,
#ai-pc .windows-desktop {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* Pausa todas as animações dentro do componente até a seção ser revelada.
Sem isso, as janelas (Teams/Excel/Copilot) abrem no page load e chegam
estáticas quando o usuário rola até a seção. */
#ai-pc .windows-desktop *,
#ai-pc .windows-desktop *::before,
#ai-pc .windows-desktop *::after {
animation-play-state: paused;
}
#ai-pc.is-revealed .windows-desktop *,
#ai-pc.is-revealed .windows-desktop *::before,
#ai-pc.is-revealed .windows-desktop *::after {
animation-play-state: running;
}
/* Janelas abrem só DEPOIS do componente terminar o fade-in (transition-delay
1280ms + ~900ms duração ≈ 2.2s). Stagger entre as janelas mantido. */
#ai-pc.is-revealed .windows-desktop .win-teams { animation-delay: 2.0s, 0.5s; }
#ai-pc.is-revealed .windows-desktop .win-excel { animation-delay: 2.4s, 1.5s; }
#ai-pc.is-revealed .windows-desktop .win-copilot { animation-delay: 2.9s, 3s; }
#ai-pc.is-revealed .windows-desktop .npu-widget { animation-delay: 3.3s; }
/* Conteúdo do Copilot (msg user → msg AI → linhas) cascateia depois que a
janela do Copilot abriu (2.9s). */
#ai-pc.is-revealed .windows-desktop .chat-msg-user { animation-delay: 3.6s; }
#ai-pc.is-revealed .windows-desktop .chat-msg-ai { animation-delay: 4.2s; }
#ai-pc.is-revealed .windows-desktop .chat-line:nth-child(1) { animation-delay: 4.5s; }
#ai-pc.is-revealed .windows-desktop .chat-line:nth-child(2) { animation-delay: 4.9s; }
#ai-pc.is-revealed .windows-desktop .chat-line:nth-child(3) { animation-delay: 5.3s; }
#ai-pc.is-revealed .windows-desktop .chat-line:nth-child(4) { animation-delay: 5.7s; }
/* ===========================================================================
WINDOWS 11 WORKSPACE · cena animada (Teams + Excel + Copilot + taskbar)
Tudo escopado em .windows-desktop pra não vazar pro resto da LP.
Componente projetado pra 568×600 — encaixa exato na coluna direita do
.deep-dive__grid (1200 / 2 - gap = ~568px).
=========================================================================== */
.windows-desktop {
--w11-accent: #0078D4;
--w11-text: #1A1A1A;
--w11-text-secondary: #5C5C5C;
--w11-divider: rgba(0, 0, 0, 0.08);
--w11-teams: #5B5FC7;
--w11-excel: #21A366;
--w11-excel-deep: #107C41;
--w11-copilot-1: #B19CFF;
--w11-copilot-2: #2E7DFF;
--w11-font: "Roboto", system-ui, -apple-system, sans-serif;
width: 568px;
height: 600px;
max-width: 100%;
border-radius: 12px;
overflow: hidden;
position: relative;
font-family: var(--w11-font);
box-shadow:
0 30px 60px -15px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.05);
background:
radial-gradient(ellipse 60% 50% at 50% 50%, #1F62B6 0%, transparent 70%),
radial-gradient(ellipse 80% 70% at 50% 50%, #3B82C8 0%, transparent 60%),
linear-gradient(135deg, #C8E1F5 0%, #6FA8D9 50%, #1A4F8C 100%);
margin-inline: auto;
}
.windows-desktop *,
.windows-desktop *::before,
.windows-desktop *::after { box-sizing: border-box; }
/* Bloom wallpaper */
.windows-desktop .bloom { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.windows-desktop .bloom-ribbon {
position: absolute;
border-radius: 50%;
filter: blur(8px);
opacity: 0.85;
}
.windows-desktop .bloom-1 {
width: 480px; height: 480px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at 35% 40%, rgba(255,255,255,0.4) 0%, rgba(110,170,225,0.3) 30%, transparent 60%);
animation: w11-drift-1 18s ease-in-out infinite;
}
.windows-desktop .bloom-2 {
width: 380px; height: 380px;
top: 45%; left: 45%;
transform: translate(-50%, -50%);
background:
radial-gradient(circle at 30% 30%, #5DA0D6 0%, transparent 50%),
radial-gradient(circle at 70% 70%, #1F5BAC 0%, transparent 60%);
opacity: 0.6;
animation: w11-drift-2 22s ease-in-out infinite;
}
.windows-desktop .bloom-3 {
width: 280px; height: 280px;
top: 55%; left: 55%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, #2563A8 0%, transparent 70%);
opacity: 0.5;
animation: w11-drift-3 16s ease-in-out infinite;
}
.windows-desktop .bloom-4 {
width: 180px; height: 180px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6) 0%, transparent 70%);
opacity: 0.4;
}
@keyframes w11-drift-1 {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-48%, -52%) scale(1.05); }
}
@keyframes w11-drift-2 {
0%, 100% { transform: translate(-45%, -45%) rotate(0deg); }
50% { transform: translate(-47%, -43%) rotate(15deg); }
}
@keyframes w11-drift-3 {
0%, 100% { transform: translate(-55%, -55%) scale(1); }
50% { transform: translate(-53%, -57%) scale(0.95); }
}
/* Janelas (base) */
.windows-desktop .win {
position: absolute;
background: rgba(243, 243, 243, 0.92);
backdrop-filter: blur(40px) saturate(1.4);
-webkit-backdrop-filter: blur(40px) saturate(1.4);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 8px;
overflow: hidden;
box-shadow:
0 16px 32px -8px rgba(0, 0, 0, 0.32),
0 4px 12px -2px rgba(0, 0, 0, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.05);
opacity: 0;
transform: translateY(12px) scale(0.96);
animation: w11-win-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
w11-win-float 7s ease-in-out infinite;
}
@keyframes w11-win-enter {
0% { opacity: 0; transform: translateY(20px) scale(0.94); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes w11-win-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -3px; }
}
.windows-desktop .win-titlebar {
height: 32px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 0 12px;
background: transparent;
}
.windows-desktop .win-tab {
display: flex;
align-items: center;
gap: 8px;
height: 100%;
padding-right: 16px;
}
.windows-desktop .win-tab-icon {
width: 14px; height: 14px;
border-radius: 2px;
display: grid; place-items: center;
font-size: 9px;
font-weight: 700;
color: white;
flex-shrink: 0;
}
.windows-desktop .win-tab-name {
font-family: var(--w11-font);
font-size: 11px;
font-weight: 400;
color: var(--w11-text);
}
.windows-desktop .win-controls { display: flex; height: 100%; }
.windows-desktop .win-ctrl {
width: 32px; height: 32px;
display: grid; place-items: center;
transition: background 0.15s;
}
.windows-desktop .win-ctrl:hover { background: rgba(0, 0, 0, 0.05); }
.windows-desktop .win-ctrl.close:hover { background: #C42B1C; }
.windows-desktop .win-ctrl.close:hover svg { stroke: white; }
.windows-desktop .win-ctrl svg {
width: 9px; height: 9px;
stroke: var(--w11-text);
stroke-width: 1;
fill: none;
}
/* Teams */
.windows-desktop .win-teams {
width: 260px; height: 200px;
top: 32px; left: 24px;
z-index: 3;
animation-delay: 0.2s, 0.5s;
}
.windows-desktop .win-teams .win-tab-icon { background: var(--w11-teams); }
.windows-desktop .teams-content {
background: white;
padding: 10px;
height: calc(100% - 32px);
display: flex; flex-direction: column;
}
.windows-desktop .teams-toolbar {
display: flex;
gap: 4px;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--w11-divider);
}
.windows-desktop .teams-pill {
height: 22px;
padding: 0 10px;
background: var(--w11-teams);
border-radius: 4px;
display: flex;
align-items: center;
color: white;
font-size: 9px;
font-weight: 500;
gap: 5px;
}
.windows-desktop .teams-pill svg { width: 10px; height: 10px; }
.windows-desktop .teams-pill-secondary {
background: rgba(91, 95, 199, 0.1);
color: var(--w11-teams);
}
.windows-desktop .teams-pill-rec {
background: #C42B1C;
margin-left: auto;
}
.windows-desktop .teams-pill-rec::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: white;
animation: w11-rec-blink 1.5s ease-in-out infinite;
}
@keyframes w11-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.windows-desktop .teams-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
flex: 1;
}
.windows-desktop .teams-tile {
background:
radial-gradient(circle at 50% 40%, #6E72D1 0%, #3A3F8F 80%),
linear-gradient(135deg, #4A4F9F, #3A3F8F);
border-radius: 4px;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 0 0 var(--w11-teams);
transition: box-shadow 0.4s;
}
.windows-desktop .teams-tile::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -55%);
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: 1.5px solid rgba(255, 255, 255, 0.5);
animation: w11-avatar-breathe 3s ease-in-out infinite;
}
@keyframes w11-avatar-breathe {
0%, 100% { transform: translate(-50%, -55%) scale(1); }
50% { transform: translate(-50%, -55%) scale(1.05); }
}
.windows-desktop .teams-tile::after {
content: '';
position: absolute;
bottom: 4px; left: 4px;
width: 4px; height: 4px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 4px #4ade80;
}
.windows-desktop .teams-tile:nth-child(1) { animation: w11-video-flicker 0.6s steps(2) infinite, w11-speaker-1 8s ease-in-out infinite; }
.windows-desktop .teams-tile:nth-child(2) { animation: w11-video-flicker 0.6s steps(2) infinite 0.1s, w11-speaker-2 8s ease-in-out infinite; }
.windows-desktop .teams-tile:nth-child(3) { animation: w11-video-flicker 0.6s steps(2) infinite 0.2s, w11-speaker-3 8s ease-in-out infinite; }
.windows-desktop .teams-tile:nth-child(4) { animation: w11-video-flicker 0.6s steps(2) infinite 0.3s, w11-speaker-4 8s ease-in-out infinite; }
@keyframes w11-speaker-1 {
0%, 22%, 100% { box-shadow: inset 0 0 0 2px var(--w11-teams), 0 0 8px rgba(91,95,199,0.4); }
25%, 99% { box-shadow: inset 0 0 0 0 var(--w11-teams); }
}
@keyframes w11-speaker-2 {
0%, 24%, 47%, 100% { box-shadow: inset 0 0 0 0 var(--w11-teams); }
25%, 47% { box-shadow: inset 0 0 0 2px var(--w11-teams), 0 0 8px rgba(91,95,199,0.4); }
}
@keyframes w11-speaker-3 {
0%, 49%, 72%, 100% { box-shadow: inset 0 0 0 0 var(--w11-teams); }
50%, 72% { box-shadow: inset 0 0 0 2px var(--w11-teams), 0 0 8px rgba(91,95,199,0.4); }
}
@keyframes w11-speaker-4 {
0%, 74%, 97%, 100% { box-shadow: inset 0 0 0 0 var(--w11-teams); }
75%, 97% { box-shadow: inset 0 0 0 2px var(--w11-teams), 0 0 8px rgba(91,95,199,0.4); }
}
@keyframes w11-video-flicker {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.05); }
}
/* Excel */
.windows-desktop .win-excel {
width: 280px; height: 250px;
top: 70px; right: 22px;
z-index: 2;
animation-delay: 0.5s, 1.5s;
}
.windows-desktop .win-excel .win-tab-icon { background: var(--w11-excel); }
.windows-desktop .excel-ribbon {
background: var(--w11-excel-deep);
color: white;
padding: 0 10px;
height: 22px;
display: flex;
align-items: center;
gap: 12px;
font-size: 9px;
font-weight: 500;
}
.windows-desktop .excel-ribbon span { opacity: 0.85; }
.windows-desktop .excel-ribbon span:first-child { opacity: 1; font-weight: 600; }
.windows-desktop .excel-formula {
background: white;
padding: 4px 8px;
border-bottom: 1px solid var(--w11-divider);
display: flex;
align-items: center;
gap: 8px;
font-family: "Roboto Mono", ui-monospace, monospace;
font-size: 9px;
color: var(--w11-text-secondary);
}
.windows-desktop .excel-formula b { color: var(--w11-excel); font-weight: 600; }
.windows-desktop .excel-formula-cursor {
display: inline-block;
width: 1px; height: 9px;
background: var(--w11-text);
animation: w11-cursor-blink 0.7s steps(2) infinite;
vertical-align: middle;
}
@keyframes w11-cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.windows-desktop .excel-content { background: white; padding: 10px; flex: 1; }
.windows-desktop .excel-chart {
display: flex;
align-items: flex-end;
gap: 4px;
height: 100px;
padding: 0 4px 6px 4px;
border-bottom: 1px solid var(--w11-divider);
margin-bottom: 8px;
}
.windows-desktop .excel-bar {
flex: 1;
background: linear-gradient(180deg, var(--w11-excel), var(--w11-excel-deep));
border-radius: 1px 1px 0 0;
animation: w11-bar-grow 4s ease-in-out infinite;
transform-origin: bottom;
min-height: 4px;
}
.windows-desktop .excel-bar:nth-child(1) { height: 35%; animation-delay: 0s; }
.windows-desktop .excel-bar:nth-child(2) { height: 55%; animation-delay: 0.2s; }
.windows-desktop .excel-bar:nth-child(3) { height: 45%; animation-delay: 0.4s; }
.windows-desktop .excel-bar:nth-child(4) { height: 70%; animation-delay: 0.6s; }
.windows-desktop .excel-bar:nth-child(5) { height: 60%; animation-delay: 0.8s; }
.windows-desktop .excel-bar:nth-child(6) { height: 80%; animation-delay: 1.0s; }
.windows-desktop .excel-bar:nth-child(7) { height: 75%; animation-delay: 1.2s; }
.windows-desktop .excel-bar:nth-child(8) { height: 92%; animation-delay: 1.4s; }
.windows-desktop .excel-bar:nth-child(9) { height: 88%; animation-delay: 1.6s; }
@keyframes w11-bar-grow {
0%, 100% { transform: scaleY(0.85); }
50% { transform: scaleY(1.05); }
}
.windows-desktop .excel-rows { display: flex; flex-direction: column; gap: 4px; }
.windows-desktop .excel-row { display: flex; gap: 4px; height: 10px; }
.windows-desktop .excel-cell { background: rgba(0, 0, 0, 0.04); border-radius: 1px; height: 100%; }
.windows-desktop .excel-cell.label { width: 30%; background: rgba(33, 163, 102, 0.15); }
.windows-desktop .excel-cell.value { flex: 1; background: rgba(0, 0, 0, 0.06); }
.windows-desktop .excel-cell.value.highlight {
background: rgba(33, 163, 102, 0.3);
animation: w11-cell-update 3s ease-in-out infinite;
}
@keyframes w11-cell-update {
0%, 100% { background: rgba(33, 163, 102, 0.3); }
50% { background: rgba(33, 163, 102, 0.6); }
}
/* Copilot */
.windows-desktop .win-copilot {
width: 320px; height: 200px;
bottom: 80px; left: 50%;
margin-left: -160px;
z-index: 4;
animation-delay: 0.9s, 3s;
}
.windows-desktop .win-copilot .win-tab-icon {
background: linear-gradient(135deg, var(--w11-copilot-1), var(--w11-copilot-2));
}
.windows-desktop .copilot-header {
background: white;
padding: 8px 12px;
border-bottom: 1px solid var(--w11-divider);
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.windows-desktop .copilot-logo {
width: 22px; height: 22px;
background: linear-gradient(135deg, var(--w11-copilot-1), var(--w11-copilot-2));
border-radius: 50%;
display: grid; place-items: center;
color: white;
font-size: 12px;
flex-shrink: 0;
box-shadow: 0 0 12px rgba(46, 125, 255, 0.5);
animation: w11-copilot-glow 3s ease-in-out infinite;
}
@keyframes w11-copilot-glow {
0%, 100% { box-shadow: 0 0 12px rgba(46, 125, 255, 0.5); }
50% { box-shadow: 0 0 20px rgba(177, 156, 255, 0.8); }
}
.windows-desktop .copilot-title { font-size: 11px; font-weight: 600; color: var(--w11-text); }
.windows-desktop .copilot-title-sub {
font-size: 9px;
color: var(--w11-text-secondary);
margin-left: 6px;
font-weight: 400;
}
.windows-desktop .copilot-chat {
background: white;
padding: 12px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
}
.windows-desktop .chat-msg-user {
align-self: flex-end;
background: var(--w11-accent);
color: white;
padding: 6px 10px;
border-radius: 10px 10px 2px 10px;
font-size: 10px;
max-width: 75%;
animation: w11-msg-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.6s backwards;
}
@keyframes w11-msg-pop {
0% { opacity: 0; transform: translateY(8px) scale(0.9); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.windows-desktop .chat-msg-ai {
align-self: flex-start;
background: rgba(0, 0, 0, 0.04);
padding: 8px 12px;
border-radius: 10px 10px 10px 2px;
max-width: 85%;
display: flex;
flex-direction: column;
gap: 5px;
animation: w11-msg-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) 2.2s backwards;
}
.windows-desktop .chat-line {
height: 5px;
border-radius: 3px;
background: linear-gradient(90deg,
var(--w11-copilot-2) 0%,
var(--w11-copilot-1) 50%,
rgba(177, 156, 255, 0.3) 100%);
animation: w11-line-stream 3s ease-in-out infinite;
transform-origin: left;
}
.windows-desktop .chat-line:nth-child(1) { width: 95%; animation-delay: 2.5s; }
.windows-desktop .chat-line:nth-child(2) { width: 80%; animation-delay: 2.9s; }
.windows-desktop .chat-line:nth-child(3) { width: 90%; animation-delay: 3.3s; }
.windows-desktop .chat-line:nth-child(4) { width: 60%; animation-delay: 3.7s; }
@keyframes w11-line-stream {
0% { transform: scaleX(0); opacity: 0.3; }
20% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(1); opacity: 0.5; }
}
.windows-desktop .chat-cursor {
align-self: flex-start;
width: 2px; height: 10px;
background: var(--w11-copilot-2);
animation: w11-cursor-blink 0.8s steps(2) infinite;
margin-left: 12px;
margin-top: -4px;
}
.windows-desktop .copilot-sparkle {
position: absolute;
pointer-events: none;
color: var(--w11-copilot-1);
animation: w11-sparkle 2.5s ease-in-out infinite;
}
.windows-desktop .copilot-sparkle.s1 { top: 8px; left: 28px; width: 10px; height: 10px; animation-delay: 0s; }
.windows-desktop .copilot-sparkle.s2 { top: 4px; left: 42px; width: 6px; height: 6px; animation-delay: 1s; }
.windows-desktop .copilot-sparkle.s3 { top: 22px; left: 36px; width: 5px; height: 5px; animation-delay: 1.8s; }
@keyframes w11-sparkle {
0%, 100% { opacity: 0.3; transform: scale(0.7) rotate(0deg); }
50% { opacity: 1; transform: scale(1.1) rotate(180deg); }
}
/* Cursor animado */
.windows-desktop .win-cursor {
position: absolute;
width: 14px; height: 18px;
z-index: 20;
pointer-events: none;
animation: w11-cursor-tour 18s ease-in-out infinite;
}
.windows-desktop .win-cursor svg {
width: 100%; height: 100%;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
@keyframes w11-cursor-tour {
0% { top: 280px; left: 280px; opacity: 0; }
3% { top: 280px; left: 280px; opacity: 1; }
18% { top: 100px; left: 120px; opacity: 1; }
25% { top: 100px; left: 120px; opacity: 1; }
40% { top: 130px; left: 380px; opacity: 1; }
47% { top: 130px; left: 380px; opacity: 1; }
62% { top: 420px; left: 280px; opacity: 1; }
72% { top: 420px; left: 280px; opacity: 1; }
90% { top: 280px; left: 280px; opacity: 1; }
100% { top: 280px; left: 280px; opacity: 0; }
}
/* Taskbar */
.windows-desktop .win-taskbar {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 44px;
background: rgba(243, 243, 243, 0.65);
backdrop-filter: blur(30px) saturate(1.5);
-webkit-backdrop-filter: blur(30px) saturate(1.5);
border-top: 1px solid rgba(255, 255, 255, 0.4);
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
z-index: 10;
padding: 0 16px;
}
.windows-desktop .tb-icon {
width: 34px; height: 34px;
border-radius: 4px;
display: grid; place-items: center;
transition: background 0.2s;
cursor: pointer;
position: relative;
flex-shrink: 0;
}
.windows-desktop .tb-icon:hover { background: rgba(0, 0, 0, 0.05); }
.windows-desktop .tb-icon svg { width: 18px; height: 18px; }
.windows-desktop .tb-icon.active::after {
content: '';
position: absolute;
bottom: -1px; left: 50%;
transform: translateX(-50%);
width: 14px; height: 2px;
border-radius: 2px;
background: var(--w11-accent);
}
.windows-desktop .tb-app {
width: 20px; height: 20px;
border-radius: 3px;
display: grid; place-items: center;
color: white;
font-size: 11px;
font-weight: 700;
}
.windows-desktop .tb-app.teams { background: var(--w11-teams); }
.windows-desktop .tb-app.excel { background: var(--w11-excel); }
.windows-desktop .tb-app.copilot { background: linear-gradient(135deg, var(--w11-copilot-1), var(--w11-copilot-2)); }
.windows-desktop .tb-app.outlook { background: var(--w11-accent); }
.windows-desktop .tb-app.edge { background: linear-gradient(135deg, #0072C6, #43B02A); }
.windows-desktop .tb-tray {
position: absolute;
right: 12px;
display: flex;
align-items: center;
gap: 8px;
height: 100%;
font-size: 10px;
color: var(--w11-text);
}
.windows-desktop .tb-tray-icons { display: flex; gap: 6px; align-items: center; }
.windows-desktop .tb-tray-icons svg { width: 12px; height: 12px; }
.windows-desktop .tb-time {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.2;
font-size: 9px;
}
.windows-desktop .tb-time strong { font-weight: 500; font-size: 11px; }
/* Mobile: aliviar a taskbar — esconder Task view (3º), Outlook (7º) e Edge (8º).
Também alinha à esquerda (Start → Copilot agrupados no canto esquerdo). */
@media (max-width: 768px) {
.windows-desktop .win-taskbar .tb-icon:nth-child(3),
.windows-desktop .win-taskbar .tb-icon:nth-child(7),
.windows-desktop .win-taskbar .tb-icon:nth-child(8) {
display: none;
}
.windows-desktop .win-taskbar {
justify-content: flex-start;
padding-left: 8px;
}
}
/* CPU widget */
.windows-desktop .npu-widget {
position: absolute;
bottom: 56px; right: 16px;
background: rgba(243, 243, 243, 0.85);
backdrop-filter: blur(24px) saturate(1.5);
-webkit-backdrop-filter: blur(24px) saturate(1.5);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 8px;
padding: 10px 12px;
width: 150px;
box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.25);
z-index: 9;
animation: w11-win-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) 1.2s backwards;
}
.windows-desktop .npu-widget-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.windows-desktop .npu-widget-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
font-weight: 600;
color: var(--w11-text);
}
.windows-desktop .npu-widget-icon { width: 14px; height: 14px; color: var(--w11-excel); }
.windows-desktop .npu-widget-status {
font-size: 8px;
font-weight: 500;
color: var(--w11-excel-deep);
background: rgba(33, 163, 102, 0.15);
padding: 1px 5px;
border-radius: 3px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.windows-desktop .npu-graph { height: 28px; position: relative; margin-bottom: 6px; }
.windows-desktop .npu-graph-svg { width: 100%; height: 100%; display: block; }
.windows-desktop .npu-graph-fill { fill: rgba(33, 163, 102, 0.2); }
.windows-desktop .npu-graph-line {
fill: none;
stroke: var(--w11-excel);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 2px rgba(33, 163, 102, 0.5));
}
.windows-desktop .npu-graph-dot {
fill: var(--w11-excel);
filter: drop-shadow(0 0 4px var(--w11-excel));
animation: w11-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes w11-dot-pulse {
0%, 100% { r: 1.8; opacity: 1; }
50% { r: 2.6; opacity: 0.7; }
}
.windows-desktop .npu-graph-line,
.windows-desktop .npu-graph-fill {
animation: w11-graph-update 4s ease-in-out infinite;
transform-origin: bottom right;
}
@keyframes w11-graph-update {
0%, 100% { transform: scaleY(1); }
25% { transform: scaleY(0.7); }
50% { transform: scaleY(1.1); }
75% { transform: scaleY(0.9); }
}
.windows-desktop .npu-widget-stats {
display: flex;
align-items: baseline;
justify-content: space-between;
}
@property --npu-pct {
syntax: "
";
initial-value: 58;
inherits: false;
}
.windows-desktop .npu-widget-pct {
font-size: 22px;
font-weight: 600;
color: var(--w11-text);
letter-spacing: -0.02em;
line-height: 1;
--npu-pct: 58;
counter-reset: pct var(--npu-pct);
animation:
w11-count-pulse 4s ease-in-out infinite,
w11-npu-pct 4s ease-in-out infinite;
}
.windows-desktop .npu-widget-pct::before {
content: counter(pct);
}
@keyframes w11-count-pulse {
0%, 100% { color: var(--w11-text); }
50% { color: var(--w11-excel-deep); }
}
/* Sincronizado com w11-graph-update (mesmo timing/easing).
Pico em 50% = 67% para nunca ultrapassar esse teto. */
@keyframes w11-npu-pct {
0%, 100% { --npu-pct: 58; }
25% { --npu-pct: 42; }
50% { --npu-pct: 67; }
75% { --npu-pct: 53; }
}
.windows-desktop .npu-widget-pct sub {
font-size: 11px;
font-weight: 400;
color: var(--w11-text-secondary);
margin-left: 1px;
}
.windows-desktop .npu-widget-detail {
font-size: 8px;
color: var(--w11-text-secondary);
text-align: right;
line-height: 1.3;
}
.windows-desktop .npu-widget-detail strong { color: var(--w11-excel-deep); font-weight: 600; }
@media (max-width: 600px) {
.windows-desktop { width: 100%; max-width: 568px; }
}
@media (prefers-reduced-motion: reduce) {
.windows-desktop *,
.windows-desktop *::before,
.windows-desktop *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
.deep-dive__content p {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: currentColor;
opacity: 0.85;
margin-block: var(--space-4);
}
.deep-dive__content p strong { color: currentColor; opacity: 1; font-weight: var(--fw-semibold); }
.deep-dive__disclaimer {
font-size: var(--fs-xs) !important;
opacity: 0.6 !important;
margin-top: var(--space-6) !important;
}
@media (min-width: 1024px) {
.deep-dive__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.deep-dive__grid--reverse > .deep-dive__content { order: 1; }
.deep-dive__grid--reverse > .deep-dive__media { order: 2; }
}
/* Brand-themed deep-dive nuances */
.section[data-section-theme="brand"] .section-heading__kicker,
.section[data-section-theme="brand"] .section-heading__title,
.section[data-section-theme="brand"] .section-heading__lead { color: var(--text-on-brand); }
.section[data-section-theme="brand"] .section-heading__kicker { color: var(--vaio-gold); opacity: 1; }
/* Chip (Intel badges) */
.chip-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-16);
}
.chip-row__badge {
display: block;
height: 5rem;
width: auto;
object-fit: contain;
}
.chip-row__badge--ia {
height: 5.9rem;
}
.chip-row__text {
margin: var(--space-3) 0 0;
max-width: 42rem;
font-size: 0.8125rem;
line-height: 1.55;
color: #000;
letter-spacing: 0.005em;
}
.chip {
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.22);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-normal);
color: var(--text-on-brand);
}
.chip--intel { background: linear-gradient(135deg, #0068B5, #003F7A); border-color: transparent; }
/* ===========================================================================
7. PERFORMANCE · card preto + tabs (Memória / Armazenamento)
=========================================================================== */
.perf.section {
background: linear-gradient(to bottom, #f6f5f4 0%, #f6f5f4 83%, #ffffff 100%);
padding-block: clamp(4rem, 8vw, 7rem);
padding-bottom: 120px;
}
.perf__container {
max-width: var(--container-xl); /* 1200px */
margin-inline: auto;
}
.perf__heading { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.perf__title {
margin: 0;
text-align: left;
font-size: clamp(2rem, 4.6vw, 3.25rem);
font-weight: var(--fw-bold);
line-height: 1.05;
letter-spacing: -0.02em;
color: currentColor;
}
/* --- Card branco --------------------------------------------------------- */
.perf__card {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 0;
padding: 0;
background: #fff;
color: #0a0a0a;
border-radius: clamp(20px, 2vw, 28px);
overflow: hidden;
box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}
@media (min-width: 900px) {
.perf__card { grid-template-columns: minmax(280px, 1fr) 1.05fr; }
}
.perf__content {
display: flex;
flex-direction: column;
gap: clamp(1.75rem, 3vw, 2.25rem);
padding: clamp(2rem, 3vw, 2.75rem);
}
.perf__lead {
margin: 0;
font-size: clamp(1.125rem, 1.4vw, 1.25rem);
font-weight: var(--fw-medium);
line-height: 1.5;
color: #000;
max-width: 38ch;
}
/* --- Tabs (Sobre a memória / Sobre o armazenamento) ---------------------- */
.perf__tabs {
display: flex;
flex-direction: column;
gap: 0;
border-top: 1px solid rgba(10, 10, 10, 0.12);
margin-top: auto;
}
.perf-tab {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 1rem;
padding: 1.125rem 1.25rem;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(10, 10, 10, 0.12);
border-radius: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: background-color 240ms ease;
}
.perf-tab:hover:not(.is-active) { background-color: rgba(10, 10, 10, 0.03); }
.perf-tab.is-active {
background-color: #f7f7f7;
border-bottom-color: transparent;
}
.perf-tab:focus-visible {
outline: 2px solid #0a0a0a;
outline-offset: 4px;
}
.perf-tab__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
color: #0a0a0a;
flex-shrink: 0;
transition: background-color 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.perf-tab__icon svg,
.perf-tab__icon img { width: 22px; height: 22px; display: block; }
.perf-tab[data-tab="sistema"] .perf-tab__icon { background: #cce4ff; }
.perf-tab[data-tab="memoria"] .perf-tab__icon { background: #d9d4ff; }
.perf-tab[data-tab="armazenamento"] .perf-tab__icon { background: #ffd9b3; }
.perf-tab__body { display: grid; gap: 4px; min-width: 0; }
.perf-tab__label {
font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);
font-weight: var(--fw-bold);
color: #000;
letter-spacing: -0.01em;
line-height: 1.25;
}
.perf-tab__desc {
font-size: 0.8rem;
line-height: 1.55;
color: #000;
display: none;
}
.perf-tab.is-active .perf-tab__desc { display: block; }
/* --- Painel direito (muda conforme tab) --------------------------------- */
.perf__media {
position: relative;
overflow: hidden;
min-height: clamp(320px, 42vw, 520px);
isolation: isolate;
transition: background-color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.perf__card[data-active="sistema"] .perf__media { background: #5ac4ee; }
.perf__card[data-active="memoria"] .perf__media { background-color: #d9d4ff; }
.perf__card[data-active="armazenamento"] .perf__media { background-color: #ffd9b3; }
.perf__panel {
position: absolute;
inset: 0;
display: grid;
place-items: stretch;
padding: clamp(1.5rem, 2.5vw, 2rem) 0 0 clamp(1.5rem, 2.5vw, 2rem);
opacity: 0;
transform: translateY(8px);
transition:
opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.perf__panel.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.perf__panel[hidden] { display: grid; } /* mantém layout, JS controla aria */
/* "Janela" branca onde entra a imagem/animação */
.perf__stage {
position: relative;
width: 100%;
height: 100%;
background: #fff;
border-top-left-radius: clamp(12px, 1.2vw, 16px);
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
box-shadow: 0 18px 40px -22px rgba(10, 10, 10, 0.25);
overflow: hidden;
display: grid;
place-items: center;
}
.perf__stage--sistema,
.perf__stage--memoria,
.perf__stage--armazenamento {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.perf__stage--sistema { background-image: url("../images/bg-windows-slide.webp"); }
.perf__stage--memoria { background-image: url("../images/bg-memoria.webp"); }
.perf__stage--armazenamento { background-image: url("../images/bg-ssd.webp"); }
.perf__stage-placeholder {
display: grid;
gap: 6px;
justify-items: start;
padding: 1.25rem 1.5rem;
}
.perf__stage-num {
font-size: clamp(2rem, 3.6vw, 2.75rem);
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: -0.02em;
color: #0a0a0a;
}
.perf__stage-num small {
font-size: 0.55em;
font-weight: var(--fw-medium);
color: rgba(10, 10, 10, 0.55);
margin-inline-start: 6px;
}
.perf__stage-tag {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.55);
}
/* ---------------------------------------------------------------------------
PERFORMANCE · reveal em cascata (sem pressa)
título → card → descrição → tabs → painel → stage
--------------------------------------------------------------------------- */
.perf .perf__title,
.perf .perf__card,
.perf .perf__lead,
.perf .perf-tab,
.perf .perf__media,
.perf .perf__stage {
opacity: 0;
transform: translateY(28px);
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
background-color 240ms ease;
transition-delay: var(--perf-delay, 0ms), var(--perf-delay, 0ms), 0ms;
will-change: opacity, transform;
}
/* Card: entra com leve scale para sensação de "abrir" */
.perf .perf__card {
transform: translateY(40px) scale(0.985);
transform-origin: center top;
}
/* Painel direito: revela com clip-path (cortina suave da esquerda) */
.perf .perf__media {
opacity: 1; /* o efeito é o clip, não o fade */
transform: none;
clip-path: inset(0 100% 0 0);
transition: clip-path 1300ms cubic-bezier(0.65, 0, 0.35, 1);
transition-delay: var(--perf-delay, 0ms);
}
/* Stage (janela branca): sobe com pequeno scale por dentro do painel */
.perf .perf__stage {
transform: translateY(24px) scale(0.96);
transform-origin: top left;
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--perf-delay, 0ms);
}
/* --- Estado revelado: cada elemento ganha seu delay --- */
.perf.is-revealed .perf__title,
.perf.is-revealed .perf__card,
.perf.is-revealed .perf__lead,
.perf.is-revealed .perf-tab,
.perf.is-revealed .perf__stage {
opacity: 1;
transform: none;
}
.perf.is-revealed .perf__media {
clip-path: inset(0 0 0 0);
}
/* Cascata · ritmo lento, total ~3.4s */
.perf.is-revealed .perf__title { --perf-delay: 100ms; }
.perf.is-revealed .perf__card { --perf-delay: 700ms; }
.perf.is-revealed .perf__lead { --perf-delay: 1500ms; }
.perf.is-revealed .perf-tab[data-tab="memoria"] { --perf-delay: 1900ms; }
.perf.is-revealed .perf-tab[data-tab="armazenamento"] { --perf-delay: 2120ms; }
.perf.is-revealed .perf__media { --perf-delay: 2350ms; }
.perf.is-revealed .perf__stage { --perf-delay: 2750ms; }
/* Acessibilidade: respeita reduce-motion */
@media (prefers-reduced-motion: reduce) {
.perf .perf__title,
.perf .perf__card,
.perf .perf__lead,
.perf .perf-tab,
.perf .perf__media,
.perf .perf__stage {
opacity: 1;
transform: none;
clip-path: none;
transition: none;
}
}
/* ===========================================================================
8. TELA stats
=========================================================================== */
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
margin-top: var(--space-6);
padding-top: var(--space-6);
border-top: 1px solid var(--border-subtle);
}
.stat-row__item { display: grid; gap: 2px; }
.stat-row__item > span {
font-size: var(--fs-2xl);
font-weight: var(--fw-bold);
color: var(--text-primary);
line-height: 1;
letter-spacing: var(--ls-tight);
}
.stat-row__item > span small {
font-size: var(--fs-md);
color: var(--text-secondary);
font-weight: var(--fw-medium);
margin-inline-start: 2px;
}
.stat-row__item > small {
font-size: var(--fs-xs);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
color: var(--text-muted);
}
/* ===========================================================================
9. DESIGN · imagem central com parallax sutil + 3 balões em volta
=========================================================================== */
.design.section {
background: #fff;
padding-top: clamp(4rem, 8vw, 7rem);
padding-bottom: clamp(7rem, 14vw, 11rem);
overflow: hidden; /* contém o parallax e a drop-shadow do produto */
position: relative;
}
/* (Tentativas de fix iOS Safari removidas — clip-path/translateZ quebravam a
renderização da imagem em scroll. Mantemos só overflow:hidden + position:relative.) */
.design__container {
max-width: var(--container-xl); /* 1200px */
margin-inline: auto;
}
.design__heading {
max-width: 720px;
margin: 0 auto clamp(2rem, 4vw, 3.5rem);
text-align: center;
}
.design__title {
margin: 0 0 1rem;
text-align: center;
font-size: clamp(2rem, 4.6vw, 3.25rem);
font-weight: var(--fw-bold);
line-height: 1.05;
letter-spacing: -0.02em;
color: currentColor;
}
.design__lead {
margin: 0 auto;
font-size: clamp(1rem, 1.2vw, 1.125rem);
line-height: 1.5;
color: #000;
max-width: 56ch;
text-align: center;
}
/* Stage central · imagem do produto + balões orbitando */
.design__stage {
position: relative;
width: 100%;
max-width: 1100px;
margin-inline: auto;
aspect-ratio: 16 / 10;
isolation: isolate;
}
.design__product {
position: absolute;
left: 50%;
top: 50%;
width: min(800px, 80%);
height: auto;
transform: translate(-50%, calc(-50% + var(--design-parallax, 0px)));
transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
user-select: none;
pointer-events: none;
filter: drop-shadow(0 40px 50px rgba(10, 10, 10, 0.18))
drop-shadow(0 8px 16px rgba(10, 10, 10, 0.08));
z-index: 1;
}
/* --- Balões em volta do produto (variante do hero-bubble) ----------------- */
.design-bubble {
--db-tx: 0px;
--db-ty: 0px;
--db-rot: 0deg;
position: absolute;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.125rem;
border-radius: 1.25rem;
background: #fff;
border: 1px solid rgba(10, 10, 10, 0.06);
box-shadow:
0 26px 60px -18px rgba(11, 17, 62, 0.22),
0 6px 18px -6px rgba(11, 17, 62, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
color: var(--text-primary);
opacity: 0;
transform: translate(var(--db-tx), calc(24px + var(--db-ty))) scale(0.86) rotate(var(--db-rot));
filter: blur(14px);
transition:
opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.34, 1.48, 0.52, 1),
filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.design-bubble {
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1300ms cubic-bezier(0.34, 1.48, 0.52, 1),
filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.design-bubble--tl { top: 8%; left: 0; --db-tx: -32px; --db-rot: -4deg; transition-delay: 2200ms; }
.design-bubble--tr { top: 14%; right: 0; --db-tx: 32px; --db-rot: 4deg; transition-delay: 2500ms; }
.design-bubble--br { bottom: 8%; right: 8%; --db-tx: 24px; --db-rot: 3deg; transition-delay: 2800ms; }
.design.is-revealed .design-bubble {
opacity: 1;
transform: translate(0, 0) scale(1) rotate(0);
filter: blur(0);
animation: design-bubble-float 5.4s ease-in-out infinite;
}
/* Float só começa depois da entrada terminar (2.2s + 1.3s = 3.5s, etc.) */
.design.is-revealed .design-bubble--tl { animation-delay: 3.5s; animation-duration: 5.6s; }
.design.is-revealed .design-bubble--tr { animation-delay: 4.0s; animation-duration: 6.4s; }
.design.is-revealed .design-bubble--br { animation-delay: 4.5s; animation-duration: 6.0s; }
@keyframes design-bubble-float {
0%, 100% { translate: 0 0; rotate: 0deg; }
50% { translate: 0 -15px; rotate: -0.6deg; }
}
.design-bubble__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 999px;
background: rgba(10, 10, 10, 0.05);
color: #0a0a0a;
flex-shrink: 0;
}
.design-bubble__icon svg { width: 20px; height: 20px; }
.design-bubble__body {
display: grid;
gap: 0.125rem;
line-height: 1.2;
}
.design-bubble__kicker {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--vaio-gold);
}
.design-bubble__main {
font-size: 1rem;
font-weight: 700;
color: #0a0a0a;
white-space: nowrap;
}
.design-bubble__sub {
font-size: 0.75rem;
font-weight: 500;
color: rgba(10, 10, 10, 0.6);
white-space: nowrap;
}
/* --- Reveal do título/lead/produto · cinematográfico, sem pressa --------- */
.design .design__title,
.design .design__lead {
opacity: 0;
transform: translateY(36px);
transition:
opacity 1300ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1300ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--design-delay, 0ms);
filter: blur(6px);
}
.design.is-revealed .design__title,
.design.is-revealed .design__lead {
opacity: 1;
transform: translateY(0);
filter: blur(0);
transition:
opacity 1300ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1300ms cubic-bezier(0.22, 1, 0.36, 1),
filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--design-delay, 0ms);
}
.design.is-revealed .design__title { --design-delay: 200ms; }
.design.is-revealed .design__lead { --design-delay: 700ms; }
/* Imagem · centralizada com parallax; entra com fade + blur cinematográfico.
Transition do transform fica rápida (220ms) para o parallax responder na hora;
opacity/filter têm delay longo (1.3s) e duração ampla (1.6s) para a entrada. */
.design .design__product {
opacity: 0;
filter: blur(14px);
transition:
transform 220ms cubic-bezier(0.22, 1, 0.36, 1) 0s,
opacity 1600ms cubic-bezier(0.22, 1, 0.36, 1) 1300ms,
filter 1600ms cubic-bezier(0.22, 1, 0.36, 1) 1300ms;
}
.design.is-revealed .design__product {
opacity: 1;
filter: blur(0)
drop-shadow(0 40px 50px rgba(10, 10, 10, 0.18))
drop-shadow(0 8px 16px rgba(10, 10, 10, 0.08));
}
/* --- Mobile: balões empilham embaixo, imagem menor.
Tipografia e medidas igualadas ao padrão do hero-bubble compacto. */
@media (max-width: 768px) {
.design__stage { aspect-ratio: 4 / 3; max-width: 520px; }
.design__product { width: 92%; }
.design-bubble {
padding: 0.5rem 0.625rem;
gap: 0.5rem;
border-radius: 0.875rem;
}
.design-bubble--tl { top: 4%; left: -2%; --db-tx: -16px; }
.design-bubble--tr { top: 18%; right: -2%; --db-tx: 16px; }
.design-bubble--br { bottom: 4%; right: 4%; --db-tx: 12px; }
.design-bubble__icon {
width: 1.625rem;
height: 1.625rem;
}
.design-bubble__icon svg { width: 14px; height: 14px; }
.design-bubble__kicker {
font-size: 0.5625rem;
letter-spacing: 0.1em;
}
.design-bubble__main {
font-size: 0.8125rem;
white-space: normal;
line-height: 1.15;
}
.design-bubble__sub {
font-size: 0.625rem;
white-space: normal;
line-height: 1.2;
}
/* Debug mobile · desliga parallax e fade-in da imagem para garantir render. */
.design .design__product {
transform: translate(-50%, -50%) !important;
opacity: 1 !important;
filter: drop-shadow(0 40px 50px rgba(10, 10, 10, 0.18))
drop-shadow(0 8px 16px rgba(10, 10, 10, 0.08)) !important;
transition: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
.design .design__title,
.design .design__lead,
.design .design__product,
.design .design-bubble {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
.design .design__product { transform: translate(-50%, -50%); }
}
/* ===========================================================================
10. BATERIA
=========================================================================== */
.battery {
position: relative;
overflow: hidden;
}
.battery::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 75% 70%, color-mix(in oklch, var(--vaio-gold) 18%, transparent), transparent 55%);
pointer-events: none;
}
.battery__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-16);
align-items: center;
position: relative;
}
.battery__hero .section-heading__kicker { color: var(--vaio-gold); }
.battery__title {
font-size: var(--fs-hero);
font-weight: var(--fw-bold);
line-height: 1;
letter-spacing: var(--ls-tighter);
margin: 0 0 var(--space-6);
color: var(--text-on-brand);
}
.battery__highlight { color: var(--vaio-gold); }
.battery__lead {
font-size: var(--fs-lead);
opacity: 0.9;
max-width: 36rem;
}
.battery__lead strong { color: var(--vaio-gold); }
.battery__visual { display: grid; gap: var(--space-4); }
.battery__gauge {
position: relative;
height: 4rem;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-md);
overflow: hidden;
}
.battery__fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 0;
background: linear-gradient(90deg, var(--vaio-gold), color-mix(in oklch, var(--vaio-gold) 60%, white));
animation: batteryFill 2.2s var(--ease-spring) 0.3s forwards;
}
@keyframes batteryFill { to { width: 100%; } }
.battery__tick {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--at);
transform: translate(-50%, -50%);
font-size: var(--fs-xs);
font-family: var(--font-mono);
font-weight: var(--fw-semibold);
color: var(--text-on-brand);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
white-space: nowrap;
}
.battery__tick--end {
font-size: var(--fs-md);
color: var(--vaio-kachi-iro);
text-shadow: none;
background: rgba(255,255,255,0.15);
padding: 2px 8px;
border-radius: var(--radius-sm);
}
.battery__disclaimer {
font-size: var(--fs-xs);
opacity: 0.7;
margin: 0;
color: var(--text-on-brand);
}
@media (min-width: 1024px) {
.battery__inner { grid-template-columns: 1fr 1fr; gap: var(--space-20); }
}
/* ===========================================================================
11. SECURITY · 12. STUDIO EFFECTS
=========================================================================== */
.security.section {
background: #fff;
padding-top: 20px;
padding-bottom: clamp(4rem, 8vw, 7rem);
}
.security__container {
max-width: var(--container-xl); /* 1200px */
margin-inline: auto;
}
.security__heading {
max-width: 720px;
margin: 0 auto clamp(2rem, 4vw, 3.5rem);
text-align: center;
}
.security__title {
margin: 0 0 1rem;
font-size: clamp(2rem, 4.6vw, 3.25rem);
font-weight: var(--fw-bold);
line-height: 1.05;
letter-spacing: -0.02em;
color: currentColor;
}
.security__lead {
margin: 0 auto;
font-size: clamp(1rem, 1.2vw, 1.125rem);
line-height: 1.5;
color: #000;
max-width: 56ch;
}
/* Grid 2x2 (1 coluna no mobile) */
.security__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1rem, 1.5vw, 1.25rem);
}
@media (min-width: 768px) {
.security__grid { grid-template-columns: repeat(2, 1fr); }
}
/* --- Card individual ----------------------------------------------------- */
.sec-card {
display: flex;
flex-direction: column;
background: #f5f5f7;
border-radius: clamp(18px, 1.6vw, 24px);
overflow: hidden;
isolation: isolate;
}
.sec-card__stage {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: #fff;
border-radius: clamp(14px, 1.2vw, 18px);
margin: clamp(1rem, 1.5vw, 1.25rem);
margin-bottom: 0;
box-shadow:
0 1px 0 rgba(10, 10, 10, 0.04),
0 12px 28px -16px rgba(10, 10, 10, 0.18);
overflow: hidden;
}
.sec-card__body {
padding: clamp(1.25rem, 2vw, 1.75rem);
}
.sec-card__text {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: rgba(10, 10, 10, 0.78);
text-align: center;
}
.sec-card__text strong {
color: #000;
font-weight: var(--fw-bold);
}
/* ---------------------------------------------------------------------------
SECURITY · reveal em cascata (sem pressa)
título → lead → 4 cards (cada um vem com leve scale + blur)
--------------------------------------------------------------------------- */
.security .security__title,
.security .security__lead,
.security .sec-card {
opacity: 0;
transform: translateY(32px) scale(0.985);
transform-origin: center top;
filter: blur(8px);
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--security-delay, 0ms);
will-change: opacity, transform, filter;
}
.security.is-revealed .security__title,
.security.is-revealed .security__lead,
.security.is-revealed .sec-card {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
/* Cascata · ritmo generoso, total ~3.5s */
.security.is-revealed .security__title { --security-delay: 200ms; }
.security.is-revealed .security__lead { --security-delay: 700ms; }
.security.is-revealed .sec-card[data-card="camera"] { --security-delay: 1300ms; }
.security.is-revealed .sec-card[data-card="leitor"] { --security-delay: 1550ms; }
.security.is-revealed .sec-card[data-card="obturador"] { --security-delay: 1800ms; }
.security.is-revealed .sec-card[data-card="trava"] { --security-delay: 2050ms; }
@media (prefers-reduced-motion: reduce) {
.security .security__title,
.security .security__lead,
.security .sec-card {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* ===========================================================================
SEC-ANIM · Card 1 · Mock Windows Hello (loop 5.5s)
=========================================================================== */
.sec-anim {
position: absolute;
inset: 0;
overflow: hidden;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: rgba(255, 255, 255, 0.92);
}
.sec-anim--hello {
background:
radial-gradient(ellipse 60% 50% at 50% 50%, #1F62B6 0%, transparent 70%),
radial-gradient(ellipse 80% 70% at 50% 50%, #3B82C8 0%, transparent 60%),
linear-gradient(135deg, #C8E1F5 0%, #6FA8D9 50%, #1A4F8C 100%);
}
.sec-anim__bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0 1px, transparent 1.5px) 0 0/14px 14px;
opacity: 0.6;
pointer-events: none;
}
/* Logo Windows (4 quadrados) no topo */
.sec-anim__logo {
position: absolute;
top: 8%;
left: 50%;
transform: translateX(-50%);
width: clamp(28px, 3.6vw, 36px);
height: clamp(28px, 3.6vw, 36px);
color: rgba(255, 255, 255, 0.85);
display: block;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}
.sec-anim__logo svg { width: 100%; height: 100%; display: block; }
/* Relógio + data no topo (estilo lock screen) */
.sec-anim__time {
position: absolute;
top: 26%;
left: 50%;
transform: translateX(-50%);
font-size: clamp(1.75rem, 5vw, 2.5rem);
font-weight: 200;
letter-spacing: -0.02em;
line-height: 1;
}
.sec-anim__date {
position: absolute;
top: calc(26% + clamp(2rem, 5.5vw, 2.75rem));
left: 50%;
transform: translateX(-50%);
font-size: 0.6875rem;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.7);
white-space: nowrap;
}
.sec-anim__stack {
position: absolute;
bottom: 12%;
left: 50%;
transform: translateX(-50%);
display: grid;
justify-items: center;
gap: 0.625rem;
text-align: center;
}
/* Mobile: desce o stack (avatar + check) para não sobrepor o relógio/data. */
@media (max-width: 768px) {
.sec-anim__stack { bottom: 4%; }
}
/* --- Avatar (círculo com iniciais) ---------------------------------------- */
.sec-anim__avatar {
position: relative;
width: clamp(44px, 7vw, 56px);
height: clamp(44px, 7vw, 56px);
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
display: grid;
place-items: center;
color: #1a1f3a;
font-weight: 700;
font-size: clamp(0.875rem, 1.6vw, 1.0625rem);
letter-spacing: 0.02em;
box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
animation: hello-avatar 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.sec-anim__initials {
display: grid;
place-items: center;
width: 70%;
height: 70%;
animation: hello-initials 5.5s infinite ease;
}
.sec-anim__initials svg { width: 100%; height: 100%; display: block; }
/* Spinner (anel girando ao redor) */
.sec-anim__ring {
position: absolute;
inset: -7px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: rgba(96, 165, 250, 0.95);
border-right-color: rgba(96, 165, 250, 0.6);
opacity: 0;
animation: hello-ring 5.5s infinite linear;
}
/* Check verde (aparece após o reconhecimento) */
.sec-anim__check {
position: absolute;
inset: 0;
border-radius: 50%;
display: grid;
place-items: center;
background: #10b981;
color: #fff;
opacity: 0;
transform: scale(0.5);
animation: hello-check 5.5s infinite cubic-bezier(0.34, 1.48, 0.52, 1);
}
.sec-anim__check svg { width: 55%; height: 55%; }
/* Pill "Olhando para a câmera…" */
.sec-anim__cam {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3125rem 0.625rem;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
font-size: 0.6875rem;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.88);
white-space: nowrap;
opacity: 0;
animation: hello-cam 5.5s infinite ease-in-out;
}
.sec-anim__cam svg {
width: 13px;
height: 13px;
animation: hello-cam-pulse 1.4s infinite ease-in-out;
}
/* Greeting final */
.sec-anim__greeting {
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.95);
white-space: nowrap;
opacity: 0;
transform: translateY(6px);
animation: hello-greeting 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
/* --- Keyframes orquestrados (cycle 5.5s) ---------------------------------
0%-8% : reset
8%-16% : avatar entra (blur+fade)
16%-55% : ring girando + cam pill
55%-65% : check verde
65%-90% : greeting visível
90%-100%: fade out tudo
------------------------------------------------------------------------ */
@keyframes hello-avatar {
0%, 6% { opacity: 0; filter: blur(10px); transform: scale(0.92); }
16%, 90% { opacity: 1; filter: blur(0); transform: scale(1); }
100% { opacity: 0; filter: blur(8px); transform: scale(0.96); }
}
@keyframes hello-initials {
0%, 55% { opacity: 1; }
62%, 100%{ opacity: 0; }
}
@keyframes hello-ring {
0%, 16% { opacity: 0; transform: rotate(0deg); }
20% { opacity: 1; }
55% { opacity: 1; transform: rotate(720deg); }
60%, 100%{ opacity: 0; transform: rotate(720deg); }
}
@keyframes hello-cam {
0%, 14% { opacity: 0; transform: translateY(4px); }
20%, 52% { opacity: 1; transform: translateY(0); }
58%, 100% { opacity: 0; transform: translateY(-2px); }
}
@keyframes hello-cam-pulse {
0%, 100% { transform: scale(1); opacity: 0.85; }
50% { transform: scale(1.18); opacity: 1; }
}
@keyframes hello-check {
0%, 55% { opacity: 0; transform: scale(0.5); }
62% { opacity: 1; transform: scale(1.08); }
68%, 88% { opacity: 1; transform: scale(1); }
94%, 100%{ opacity: 0; transform: scale(0.94); }
}
@keyframes hello-greeting {
0%, 62% { opacity: 0; transform: translateY(6px); }
70%, 88% { opacity: 1; transform: translateY(0); }
94%, 100%{ opacity: 0; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.sec-anim__avatar,
.sec-anim__initials,
.sec-anim__ring,
.sec-anim__check,
.sec-anim__cam,
.sec-anim__cam svg,
.sec-anim__greeting {
animation: none;
}
.sec-anim__avatar { opacity: 1; }
.sec-anim__check { opacity: 1; transform: scale(1); }
.sec-anim__initials { opacity: 0; }
.sec-anim__greeting { opacity: 1; transform: none; }
}
/* ===========================================================================
SEC-ANIM · Card 2 · Leitor de digital + barra de progresso (loop 5.5s)
=========================================================================== */
.sec-anim--fp {
background:
radial-gradient(120% 90% at 25% 20%, rgba(6, 182, 212, 0.10), transparent 55%),
radial-gradient(110% 80% at 80% 85%, rgba(16, 185, 129, 0.08), transparent 60%),
linear-gradient(135deg, #f4f6fa 0%, #e9eef5 100%);
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: #0f172a;
}
/* Labels topo (status) */
.fp-label {
position: absolute;
top: 14%;
left: 50%;
transform: translateX(-50%);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
padding: 0.3rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.fp-label--reading {
color: #0e7490;
animation: fp-label-reading 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-label--done {
color: #047857;
animation: fp-label-done 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
/* Wrap do leitor (host do dedo absoluto) */
.fp-reader-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -54%);
width: clamp(80px, 13vw, 110px);
height: clamp(80px, 13vw, 110px);
}
/* Leitor circular (touchpad sensor) */
.fp-reader {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: #fff;
display: grid;
place-items: center;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 8px 24px -10px rgba(15, 23, 42, 0.18),
0 0 0 1px rgba(15, 23, 42, 0.06);
color: #06b6d4;
animation: fp-reader-pulse 5.5s infinite ease-in-out;
}
.fp-print {
width: 56%;
height: 78%;
}
.fp-print path {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: fp-print-trace 5.5s infinite ease-out;
}
.fp-print path:nth-child(1) { animation-delay: 0.00s; }
.fp-print path:nth-child(2) { animation-delay: 0.06s; }
.fp-print path:nth-child(3) { animation-delay: 0.12s; }
.fp-print path:nth-child(4) { animation-delay: 0.18s; }
.fp-print path:nth-child(5) { animation-delay: 0.24s; }
.fp-print path:nth-child(6) { animation-delay: 0.30s; }
.fp-print path:nth-child(7) { animation-delay: 0.36s; }
.fp-print path:nth-child(8) { animation-delay: 0.42s; }
.fp-print path:nth-child(9) { animation-delay: 0.48s; }
/* Check verde sobre o leitor */
.fp-check {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: #10b981;
border-radius: 50%;
color: #fff;
opacity: 0;
transform: scale(0.55);
animation: fp-check-in 5.5s infinite cubic-bezier(0.34, 1.48, 0.52, 1);
}
.fp-check svg { width: 50%; height: 50%; }
/* Barra de progresso na base */
.fp-bar {
position: absolute;
bottom: 14%;
left: 50%;
transform: translateX(-50%);
width: clamp(120px, 30%, 180px);
height: 4px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.08);
overflow: hidden;
}
.fp-bar__fill {
display: block;
width: 100%;
height: 100%;
background: #06b6d4;
border-radius: inherit;
transform-origin: left center;
transform: scaleX(0);
animation:
fp-bar-fill 5.5s infinite cubic-bezier(0.65, 0, 0.35, 1),
fp-bar-color 5.5s infinite ease;
}
/* --- Keyframes coordenados (cycle 5.5s) ----------------------------------
0-8% : reset (leitor neutro)
8-12% : leitor acende em cyan, print começa a traçar
12-58% : barra preenche, label "Lendo digital…"
58-65% : barra completa, leitor fica verde, check + label "Acesso liberado"
65-90% : hold
90-100%: fade out
------------------------------------------------------------------------ */
@keyframes fp-reader-pulse {
0%, 8% {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 8px 24px -10px rgba(15, 23, 42, 0.18),
0 0 0 1px rgba(15, 23, 42, 0.06);
color: rgba(6, 182, 212, 0.4);
}
14%, 55% {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 8px 24px -10px rgba(6, 182, 212, 0.35),
0 0 0 8px rgba(6, 182, 212, 0.16);
color: #06b6d4;
}
62%, 88% {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 8px 24px -10px rgba(16, 185, 129, 0.35),
0 0 0 12px rgba(16, 185, 129, 0.18);
color: #10b981;
}
95%, 100% {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 8px 24px -10px rgba(15, 23, 42, 0.18),
0 0 0 1px rgba(15, 23, 42, 0.06);
color: rgba(6, 182, 212, 0.2);
}
}
@keyframes fp-print-trace {
0%, 10% { stroke-dashoffset: 100; opacity: 0.6; }
48%, 55% { stroke-dashoffset: 0; opacity: 1; }
64%, 100% { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes fp-bar-fill {
0%, 12% { transform: scaleX(0); }
58%, 88% { transform: scaleX(1); }
95%, 100%{ transform: scaleX(0); }
}
@keyframes fp-bar-color {
0%, 55% { background: #06b6d4; }
62%, 100%{ background: #10b981; }
}
@keyframes fp-check-in {
0%, 60% { opacity: 0; transform: scale(0.55); }
68% { opacity: 1; transform: scale(1.1); }
74%, 88% { opacity: 1; transform: scale(1); }
95%, 100%{ opacity: 0; transform: scale(0.92); }
}
@keyframes fp-label-reading {
0%, 8% { opacity: 0; transform: translate(-50%, 4px); }
16%, 55% { opacity: 1; transform: translate(-50%, 0); }
62%, 100%{ opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes fp-label-done {
0%, 60% { opacity: 0; transform: translate(-50%, 4px); }
68%, 88% { opacity: 1; transform: translate(-50%, 0); }
95%, 100%{ opacity: 0; transform: translate(-50%, -4px); }
}
@media (prefers-reduced-motion: reduce) {
.fp-label,
.fp-reader,
.fp-print path,
.fp-check,
.fp-bar__fill {
animation: none;
}
.fp-label--reading { opacity: 0; }
.fp-label--done { opacity: 1; }
.fp-print path { stroke-dashoffset: 0; }
.fp-check { opacity: 1; transform: scale(1); }
.fp-bar__fill { transform: scaleX(1); background: #10b981; }
}
/* ===========================================================================
SEC-ANIM · Card 3 · Webcam ON ↔ OFF (loop 5.5s)
=========================================================================== */
.sec-anim--cam {
background:
radial-gradient(120% 90% at 25% 20%, rgba(6, 182, 212, 0.10), transparent 55%),
radial-gradient(110% 80% at 80% 85%, rgba(16, 185, 129, 0.08), transparent 60%),
linear-gradient(135deg, #0112483b 0%, #dfdfdf 100%);
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: #0a1929;
}
/* --- Labels topo (status) ----------------------------------------------- */
.cam-label {
position: absolute;
top: 14%;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
padding: 0.3rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.cam-label::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.cam-label--active {
color: #dc2626;
animation: cam-label-active 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.cam-label--private {
color: #0a1929;
animation: cam-label-private 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
/* --- Câmera (host + body + lens + shutter) ------------------------------ */
.cam-stage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -42%);
width: clamp(80px, 14vw, 110px);
height: clamp(80px, 14vw, 110px);
}
.cam-body {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #14283d 0%, #ffffff 100%);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.06),
inset 0 -2px 4px rgba(0, 0, 0, 0.4),
0 10px 22px -10px rgba(10, 25, 41, 0.28),
0 0 0 1px rgba(10, 25, 41, 0.10);
overflow: hidden;
}
/* Lente · contrai ao fechar a íris */
.cam-lens {
position: absolute;
top: 50%;
left: 50%;
width: 70%;
height: 70%;
border-radius: 50%;
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.4) 0%, transparent 38%),
radial-gradient(circle at 50% 50%, #1e3a52 0%, #0f2236 55%, #050d18 100%);
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.6);
transform: translate(-50%, -50%) scale(1);
animation: cam-lens-iris 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.cam-lens__pupil {
position: absolute;
top: 50%;
left: 50%;
width: 32%;
height: 32%;
border-radius: 50%;
background: #000;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px rgba(180, 200, 220, 0.18) inset;
}
.cam-lens__highlight {
position: absolute;
top: 18%;
left: 22%;
width: 22%;
height: 22%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 70%);
filter: blur(1.5px);
}
/* Dot REC fora da câmera */
.cam-rec {
position: absolute;
top: -4%;
right: -4%;
width: clamp(8px, 1.1vw, 11px);
height: clamp(8px, 1.1vw, 11px);
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.55), 0 0 0 2px #fff;
z-index: 2;
animation: cam-rec-blink 5.5s infinite ease-in-out;
}
/* Shutter · prata escovada */
.cam-shutter {
position: absolute;
inset: 0;
border-radius: 50%;
background:
linear-gradient(180deg, #e2e8f0 0%, #b8c2cd 50%, #94a3b8 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
inset 0 -2px 4px rgba(0, 0, 0, 0.12),
inset 6px 0 10px rgba(0, 0, 0, 0.12);
transform: translateX(-110%);
animation: cam-shutter-slide 5.5s infinite cubic-bezier(0.65, 0, 0.35, 1);
}
/* Mic riscado · grafite */
.cam-mic {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #374151;
opacity: 0;
transform: scale(0.7);
z-index: 1;
animation: cam-mic-in 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.cam-mic svg { width: 38%; height: 38%; }
/* Atalho Fn + Tab que dispara o shutter */
.cam-shortcut {
position: absolute;
bottom: 14%;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.45rem;
opacity: 0;
animation: cam-shortcut-in 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.cam-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2rem;
padding: 0.3rem 0.55rem;
background: #fff;
border: 1px solid rgba(10, 25, 41, 0.15);
border-bottom-width: 2px;
border-radius: 6px;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #0a1929;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 2px 4px rgba(10, 25, 41, 0.08);
animation: cam-key-press 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.cam-plus {
font-size: 0.75rem;
font-weight: 600;
color: rgba(10, 25, 41, 0.55);
animation: cam-shortcut-fade 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cam-shortcut-in {
0%, 36% { opacity: 0; transform: translate(-50%, 6px); }
44%, 56% { opacity: 1; transform: translate(-50%, 0); }
64%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes cam-shortcut-fade {
0%, 36% { opacity: 0; }
44%, 56% { opacity: 1; }
64%, 100% { opacity: 0; }
}
@keyframes cam-key-press {
0%, 44% { transform: translateY(0); border-bottom-width: 2px; }
50% { transform: translateY(2px); border-bottom-width: 1px; }
56%, 100% { transform: translateY(0); border-bottom-width: 2px; }
}
/* --- Keyframes coordenados (cycle 5.5s) ----------------------------------
0-50% : ATIVO (lens aberta, REC pisca, label "Webcam ativa")
50-58% : transição (shutter desliza, íris contrai)
58-78% : PRIVADO (shutter cobrindo, mic riscado, label "Privado")
78-92% : transição (shutter sai, íris reabre)
92-100% : reset para próximo ciclo
------------------------------------------------------------------------ */
@keyframes cam-lens-iris {
0%, 50% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
56% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
78% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.5; }
90%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes cam-shutter-slide {
0%, 48% { transform: translateX(-110%); }
56%, 78% { transform: translateX(0); }
90%, 100% { transform: translateX(110%); }
}
@keyframes cam-rec-blink {
0%, 4% { opacity: 0; transform: scale(0.7); }
10%, 14% { opacity: 1; transform: scale(1); }
18%, 22% { opacity: 0.3; transform: scale(0.85); }
26%, 30% { opacity: 1; transform: scale(1); }
34%, 38% { opacity: 0.3; transform: scale(0.85); }
42%, 46% { opacity: 1; transform: scale(1); }
52%, 100% { opacity: 0; transform: scale(0.7); }
}
@keyframes cam-mic-in {
0%, 56% { opacity: 0; transform: scale(0.7); }
62% { opacity: 1; transform: scale(1.12); }
68%, 78% { opacity: 1; transform: scale(1); }
86%, 100% { opacity: 0; transform: scale(0.88); }
}
@keyframes cam-label-active {
0%, 4% { opacity: 0; transform: translate(-50%, 4px); }
10%, 48% { opacity: 1; transform: translate(-50%, 0); }
56%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes cam-label-private {
0%, 56% { opacity: 0; transform: translate(-50%, 4px); }
62%, 80% { opacity: 1; transform: translate(-50%, 0); }
88%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
@media (prefers-reduced-motion: reduce) {
.cam-label,
.cam-lens,
.cam-shutter,
.cam-rec,
.cam-mic,
.cam-shortcut,
.cam-key,
.cam-plus {
animation: none;
}
.cam-label--active { opacity: 1; }
.cam-label--private { opacity: 0; }
.cam-rec { opacity: 1; transform: scale(1); }
.cam-shutter { transform: translateX(-110%); }
.cam-mic { opacity: 0; }
.cam-lens { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cam-shortcut { opacity: 0; }
}
/* ===========================================================================
SEC-ANIM · Card 4 · Cadeado + corrente (loop 5.5s)
=========================================================================== */
.sec-anim--lock {
background:
radial-gradient(120% 90% at 25% 20%, rgba(6, 182, 212, 0.12), transparent 55%),
radial-gradient(110% 80% at 80% 85%, rgba(202, 138, 4, 0.08), transparent 60%),
linear-gradient(135deg, #f6f5f7 0%, #ececee 100%);
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
color: #0a1929;
}
/* Labels topo */
.lock-label {
position: absolute;
top: 14%;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
padding: 0.3rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.08);
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.lock-label::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.lock-label--unlocked {
color: #6b7280;
animation: lock-label-unlocked 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.lock-label--locked {
color: #047857;
animation: lock-label-locked 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
/* Stage (host do cadeado + glow + ring) */
.lock-stage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -42%);
width: clamp(140px, 22vw, 180px);
height: clamp(140px, 22vw, 180px);
}
/* Glow ciano atrás do cadeado · acende quando trava */
.lock-glow {
position: absolute;
inset: -8%;
border-radius: 50%;
background: radial-gradient(circle, rgba(6, 182, 212, 0.55) 0%, transparent 60%);
opacity: 0;
animation: lock-glow-pulse 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
/* Anel pulsante quando trava (radar leve) */
.lock-ring {
position: absolute;
inset: 8%;
border-radius: 50%;
border: 2px solid rgba(6, 182, 212, 0.6);
opacity: 0;
animation: lock-ring-pulse 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
/* Cadeado */
.lock-icon {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: auto;
transform: translate(-50%, -50%) scale(0.92);
opacity: 0;
color: #0a1929;
filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.20));
animation: lock-icon-in 5.5s infinite cubic-bezier(0.22, 1, 0.36, 1);
}
.lock-icon__arc {
transform-origin: 48px 38px;
transform: rotate(-32deg) translate(-6px, -2px);
animation: lock-arc-close 5.5s infinite cubic-bezier(0.34, 1.48, 0.52, 1);
}
/* Sweep · faixa de luz que atravessa o cadeado quando fecha */
.lock-sweep {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 60%;
border-radius: 16px;
transform: translate(-50%, -50%) translateX(-140%) skewX(-18deg);
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.85) 50%,
transparent 100%
);
opacity: 0;
mix-blend-mode: overlay;
animation: lock-sweep 5.5s infinite cubic-bezier(0.65, 0, 0.35, 1);
}
/* --- Keyframes coordenados (cycle 5.5s) ----------------------------------
0-8% : reset
8-20% : cadeado entra com arco aberto, label "Aberto"
20-30% : arco fecha com snap (overshoot)
30-36% : sweep de luz atravessa o cadeado
30-78% : glow + ring pulsam, label "Protegido"
78-92% : arco reabre, glow some
92-100%: reset
------------------------------------------------------------------------ */
@keyframes lock-icon-in {
0%, 4% { opacity: 0; transform: translate(-50%, -50%) scale(0.88); }
18%, 84% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
94%, 100%{ opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes lock-arc-close {
0%, 18% { transform: rotate(-32deg) translate(-6px, -2px); }
28% { transform: rotate(6deg) translate(0, 0); }
34%, 100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes lock-glow-pulse {
0%, 26% { opacity: 0; transform: scale(0.6); }
34% { opacity: 1; transform: scale(1.08); }
46% { opacity: 0.55; transform: scale(1); }
62% { opacity: 0.75; transform: scale(1.04); }
78% { opacity: 0.55; transform: scale(1); }
92%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes lock-ring-pulse {
0%, 28% { opacity: 0; transform: scale(0.7); }
36% { opacity: 0.9; transform: scale(1); }
52% { opacity: 0; transform: scale(1.35); }
60% { opacity: 0.7; transform: scale(1); }
74% { opacity: 0; transform: scale(1.35); }
92%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes lock-sweep {
0%, 28% { opacity: 0; transform: translate(-50%, -50%) translateX(-140%) skewX(-18deg); }
32% { opacity: 1; }
40% { opacity: 0; transform: translate(-50%, -50%) translateX(140%) skewX(-18deg); }
100% { opacity: 0; transform: translate(-50%, -50%) translateX(140%) skewX(-18deg); }
}
@keyframes lock-label-unlocked {
0%, 4% { opacity: 0; transform: translate(-50%, 4px); }
10%, 26% { opacity: 1; transform: translate(-50%, 0); }
34%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes lock-label-locked {
0%, 32% { opacity: 0; transform: translate(-50%, 4px); }
40%, 82% { opacity: 1; transform: translate(-50%, 0); }
90%, 100% { opacity: 0; transform: translate(-50%, -4px); }
}
@media (prefers-reduced-motion: reduce) {
.lock-label,
.lock-glow,
.lock-ring,
.lock-icon,
.lock-icon__arc,
.lock-sweep {
animation: none;
}
.lock-label--unlocked { opacity: 0; }
.lock-label--locked { opacity: 1; }
.lock-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.lock-icon__arc { transform: rotate(0deg); }
.lock-glow { opacity: 0.55; transform: scale(1); }
.lock-ring { opacity: 0; }
.lock-sweep { opacity: 0; }
}
.studio__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
.studio__card {
padding: var(--space-6);
background: var(--bg-app);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
transition: border-color var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
.studio__card:hover {
border-color: var(--bg-brand);
transform: translateY(-2px);
}
.studio__num {
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
color: var(--vaio-gold);
letter-spacing: var(--ls-wider);
margin-bottom: var(--space-4);
}
.studio__card h3 {
font-size: var(--fs-lg);
font-weight: var(--fw-semibold);
color: var(--text-primary);
line-height: var(--lh-snug);
margin: 0 0 var(--space-2);
}
.studio__card p {
font-size: var(--fs-sm);
color: var(--text-secondary);
line-height: var(--lh-normal);
margin: 0;
}
.studio__footnote {
text-align: center;
font-size: var(--fs-sm);
color: var(--text-muted);
margin-top: var(--space-8);
}
@media (min-width: 640px) { .studio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .studio__grid { grid-template-columns: repeat(4, 1fr); } }
/* ===========================================================================
13. PORTS
=========================================================================== */
.ports h3 {
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text-primary);
margin: var(--space-8) 0 var(--space-4);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
.ports__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3);
list-style: none;
padding: 0;
margin: 0;
}
.ports__list li {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background: var(--bg-subtle);
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
}
.ports__tag {
font-family: var(--font-mono);
font-weight: var(--fw-bold);
color: var(--bg-brand);
min-width: 2rem;
}
/* ===========================================================================
15. DURABILITY
=========================================================================== */
.durability__inner {
max-width: var(--container-lg);
margin-inline: auto;
text-align: center;
}
.durability__inner p {
font-size: var(--fs-lead);
line-height: var(--lh-relaxed);
color: var(--text-secondary);
margin-inline: auto;
}
/* ===========================================================================
16. PRODUCT VIEWS (tabs)
=========================================================================== */
.product-views__container {
max-width: var(--container-xl); /* 1200px */
margin-inline: auto;
}
/* Header overrides · descrição em #000 e mesmo tamanho da seção segurança */
.product-views .section-heading__lead {
color: #000;
font-size: clamp(1rem, 1.2vw, 1.125rem);
opacity: 1;
}
/* Tabs estilo segmented control (Apple) */
.product-views .tabs__list {
display: inline-flex;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 4px;
padding: 4px;
margin-inline: auto;
background: #e8e8ed;
border: 0;
border-radius: 999px;
width: max-content;
max-width: 100%;
overflow-x: auto;
}
.product-views .tabs__list::-webkit-scrollbar { display: none; }
.product-views .tabs__trigger {
position: relative;
flex: 0 0 auto;
padding: 0.55rem 1.125rem;
background: transparent;
border: 0;
border-radius: 999px;
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: -0.005em;
color: #000;
opacity: 0.8;
cursor: pointer;
white-space: nowrap;
transition: opacity 200ms ease, background-color 240ms ease, color 240ms ease;
}
.product-views .tabs__trigger:hover { opacity: 1; }
.product-views .tabs__trigger[aria-selected="true"] {
background: #000;
color: #fff;
opacity: 1;
}
.product-views .tabs__trigger[aria-selected="true"]::after { display: none; }
.product-views .tabs__trigger:focus-visible {
outline: 2px solid #000;
outline-offset: 3px;
}
/* Wrapper centraliza o segmented control mas mantém panels em 100% */
.product-views .tabs {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.product-views .tabs__panels { width: 100%; }
.product-views .tabs__panel { width: 100%; }
.product-views__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: start;
margin-top: var(--space-8);
}
.product-views__media { min-width: 0; }
.product-views__callouts {
position: relative;
list-style: none;
margin: 0;
padding: 0 0 0 3.25rem; /* espaço à esquerda para bullets + linha */
display: grid;
gap: var(--space-3);
}
/* Linha vertical que conecta os bullets numerados */
.product-views__callouts::before {
content: "";
position: absolute;
left: calc(1rem - 1px); /* centro do bullet (bullet 2rem → metade = 1rem) */
top: 1.5rem; /* começa no centro do primeiro bullet */
bottom: 1.5rem; /* termina no centro do último */
width: 2px;
background: #e8e8ed;
z-index: 0;
border-radius: 999px;
}
.product-views__callouts li {
position: relative;
padding: 0.75rem 1rem;
background: var(--bg-app);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: 0.95rem;
color: #000;
transition: border-color var(--duration-fast) var(--ease-out);
}
.product-views__callouts li:hover { border-color: var(--bg-brand); }
.product-views__callouts li > span {
position: absolute;
left: -3.25rem;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
display: grid;
place-items: center;
background: #e8e8ed;
color: #000;
border-radius: var(--radius-full);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
z-index: 1;
}
.product-views__footer {
text-align: center;
margin-top: var(--space-8);
font-size: var(--fs-sm);
color: var(--text-muted);
}
@media (min-width: 1024px) {
.product-views__grid { grid-template-columns: 1.35fr 0.65fr; gap: var(--space-12); }
}
/* ---------------------------------------------------------------------------
PRODUCT VIEWS · reveal em cascata (sem pressa)
título → lead → tabs → media → linha vertical → callouts
--------------------------------------------------------------------------- */
.product-views .section-heading__title,
.product-views .section-heading__lead,
.product-views .tabs__list,
.product-views .product-views__media,
.product-views .product-views__callouts li {
opacity: 0;
transform: translateY(28px);
filter: blur(6px);
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--pv-delay, 0ms);
will-change: opacity, transform;
}
.product-views .product-views__media {
transform: translateY(28px) scale(0.985);
transform-origin: center top;
}
.product-views.is-revealed .section-heading__title,
.product-views.is-revealed .section-heading__lead,
.product-views.is-revealed .tabs__list,
.product-views.is-revealed .product-views__media,
.product-views.is-revealed .product-views__callouts li {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
/* Linha vertical · cresce de cima para baixo */
.product-views .product-views__callouts::before {
transform: scaleY(0);
transform-origin: top center;
transition:
transform 1400ms cubic-bezier(0.22, 1, 0.36, 1) var(--pv-delay, 0ms);
}
.product-views.is-revealed .product-views__callouts::before {
transform: scaleY(1);
}
/* Cascata · ritmo generoso (~3.6s) */
.product-views.is-revealed .section-heading__title { --pv-delay: 200ms; }
.product-views.is-revealed .section-heading__lead { --pv-delay: 700ms; }
.product-views.is-revealed .tabs__list { --pv-delay: 1200ms; }
.product-views.is-revealed .product-views__media { --pv-delay: 1600ms; }
.product-views.is-revealed .product-views__callouts::before { --pv-delay: 2000ms; }
.product-views.is-revealed .product-views__callouts li:nth-child(1) { --pv-delay: 2200ms; }
.product-views.is-revealed .product-views__callouts li:nth-child(2) { --pv-delay: 2330ms; }
.product-views.is-revealed .product-views__callouts li:nth-child(3) { --pv-delay: 2460ms; }
.product-views.is-revealed .product-views__callouts li:nth-child(4) { --pv-delay: 2590ms; }
.product-views.is-revealed .product-views__callouts li:nth-child(5) { --pv-delay: 2720ms; }
.product-views.is-revealed .product-views__callouts li:nth-child(6) { --pv-delay: 2850ms; }
.product-views.is-revealed .product-views__callouts li:nth-child(7) { --pv-delay: 2980ms; }
@media (prefers-reduced-motion: reduce) {
.product-views .section-heading__title,
.product-views .section-heading__lead,
.product-views .tabs__list,
.product-views .product-views__media,
.product-views .product-views__callouts li,
.product-views .product-views__callouts::before {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* ===========================================================================
16b. PROPOSTA · CTA com formulário (RD Station) — fundo branco
=========================================================================== */
.proposal.section {
background: linear-gradient(to bottom, #FFF 0%, #f6f5f4 35%, #f6f5f4 100%);
}
.proposal__grid {
max-width: var(--container-xl);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
align-items: center;
}
@media (min-width: 1024px) {
.proposal__grid {
grid-template-columns: 1.05fr 0.95fr;
gap: var(--space-20);
}
}
.proposal__title {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--text-primary);
margin: 0 0 var(--space-4);
max-width: 16ch;
}
.proposal__lead {
font-size: var(--fs-md);
line-height: var(--lh-relaxed);
color: #000;
max-width: 52ch;
margin: 0;
}
/* Selos de confiança — chips entrando em cascata + sheen contínuo sutil */
.proposal__seals {
list-style: none;
margin: var(--space-10) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
max-width: 38rem;
}
.proposal-seal {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-full);
border: 1px solid var(--border-subtle);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1;
color: var(--text-primary);
/* estado inicial da cascata */
opacity: 0;
transform: translateY(14px);
}
.proposal-seal svg {
width: 1.1rem;
height: 1.1rem;
color: var(--vaio-gold);
flex-shrink: 0;
}
.proposal-seal sup {
font-size: 0.6em;
}
/* Brilho diagonal varrendo o chip (Liquid Glass vibe) */
.proposal-seal::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
115deg,
transparent 38%,
rgba(255, 255, 255, 0.55) 50%,
transparent 62%
);
transform: translateX(-130%);
}
/* Cascata: cada selo entra com fade + slide escalonado quando a seção revela */
.proposal.is-revealed .proposal-seal {
animation: proposalSealIn 600ms cubic-bezier(0.22, 1, 0.36, 1) var(--seal-delay, 0ms) both;
}
.proposal.is-revealed .proposal-seal::before {
animation: proposalSealSheen 6s ease-in-out infinite;
animation-delay: calc(var(--seal-delay, 0ms) + 800ms);
}
.proposal-seal:nth-child(1) { --seal-delay: 120ms; }
.proposal-seal:nth-child(2) { --seal-delay: 220ms; }
.proposal-seal:nth-child(3) { --seal-delay: 320ms; }
.proposal-seal:nth-child(4) { --seal-delay: 420ms; }
.proposal-seal:nth-child(5) { --seal-delay: 520ms; }
@keyframes proposalSealIn {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes proposalSealSheen {
0% { transform: translateX(-130%); }
16%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
.proposal-seal {
opacity: 1;
transform: none;
animation: none;
}
.proposal-seal::before { display: none; }
}
/* Card do formulário (RD Station) */
.proposal__card {
background: var(--bg-app);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-xl);
padding: clamp(1.5rem, 3vw, 2.5rem);
}
.proposal__card-title {
font-size: var(--fs-xl);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-tight);
color: var(--text-primary);
margin: 0 0 var(--space-2);
}
.proposal__card-sub {
font-size: var(--fs-sm);
line-height: var(--lh-snug);
color: var(--text-secondary);
margin: 0 0 var(--space-6);
}
.proposal__form { width: 100%; }
/* Garante que os campos do RD Station ocupem a largura do card */
.proposal__form :where(input, select, textarea) { max-width: 100%; }
/* Labels do RD Station — o embed às vezes renderiza os rótulos ocultos
(sr-only / display:none). Forçamos visíveis e estilizados no padrão da LP.
Obs.: se o formulário estiver configurado SEM títulos no editor do RD
Station, é preciso ativar "exibir rótulos" lá — o CSS não cria o que não
existe no DOM. */
.proposal__form label {
position: static !important;
display: block !important;
width: auto !important;
height: auto !important;
margin: 0 0 var(--space-1) !important;
clip: auto !important;
clip-path: none !important;
overflow: visible !important;
font-size: var(--fs-sm) !important;
font-weight: var(--fw-semibold) !important;
letter-spacing: var(--ls-wide);
color: var(--text-primary) !important;
opacity: 1 !important;
}
/* Botão de envio do RD Station — verde.
O RD renderiza o botão como .bricks--component-button (com ID próprio e
background-color: #000), por isso miramos essa classe + !important. */
.proposal__form .bricks--component-button {
background-color: #6FAF1E !important;
border-color: #6FAF1E !important;
color: #fff !important;
font-weight: var(--fw-bold) !important;
transition: background-color var(--duration-fast) var(--ease-out);
}
.proposal__form .bricks--component-button,
.proposal__form .bricks--component-button * {
color: #fff !important;
}
.proposal__form .bricks--component-button:hover {
background-color: #5E9719 !important;
border-color: #5E9719 !important;
}
/* Texto de privacidade abaixo do botão — é um com cor branca inline.
Mesma cor da descrição do card (--text-secondary). O !important vence o
style inline; mirar o próprio é necessário pois ele não tem classe. */
.proposal__form {
color: var(--text-secondary);
}
.proposal__form a {
color: var(--text-secondary) !important;
opacity: 1 !important;
text-decoration: underline;
}
/* Reveal de entrada · mesma linguagem das demais seções */
.proposal .proposal__intro,
.proposal .proposal__card {
opacity: 0;
transform: translateY(28px);
filter: blur(6px);
transition:
opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--proposal-delay, 0ms);
will-change: opacity, transform;
}
.proposal.is-revealed .proposal__intro,
.proposal.is-revealed .proposal__card {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.proposal.is-revealed .proposal__card { --proposal-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
.proposal .proposal__intro,
.proposal .proposal__card {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* ===========================================================================
17. SPECS · Especificações Técnicas
=========================================================================== */
.specs.section {
background: #f6f5f4;
}
.specs__container {
max-width: var(--container-lg); /* 1024px */
margin-inline: auto;
}
.specs__heading {
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.specs__title {
margin: 0;
text-align: left;
font-size: clamp(2rem, 4.6vw, 3.25rem);
font-weight: var(--fw-bold);
line-height: 1.05;
letter-spacing: -0.02em;
color: currentColor;
}
.specs__wrap {
max-width: var(--container-lg);
margin-inline: auto;
}
.specs__wrap .table th,
.specs__wrap .table td {
padding: var(--space-4);
vertical-align: top;
}
.specs__wrap .table td { color: #000; }
.specs__wrap .table th {
text-align: left;
width: 14rem;
color: var(--text-primary);
background: var(--bg-subtle);
font-weight: var(--fw-semibold);
font-size: var(--fs-sm);
letter-spacing: var(--ls-wide);
text-transform: uppercase;
}
/* Mobile · width da coluna th do specs */
@media (max-width: 768px) {
.specs__wrap .table th { width: 10rem; }
}
/* Disclaimers como linhas simples */
.specs__disclaimer {
margin: 0.25rem 0 0;
font-size: 0.75rem;
line-height: 1.55;
color: #000;
}
.specs__disclaimer:first-of-type { margin-top: 1.5rem; }
.specs__actions {
margin-top: var(--space-8);
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
/* ---------------------------------------------------------------------------
SPECS · reveal em cascata simples
título → tabela (bloco único) → disclaimers → botões
--------------------------------------------------------------------------- */
.specs .specs__title,
.specs .specs__wrap .table-wrap,
.specs .specs__disclaimer,
.specs .specs__actions {
opacity: 0;
transform: translateY(28px);
filter: blur(6px);
transition:
opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--specs-delay, 0ms);
will-change: opacity, transform;
}
.specs.is-revealed .specs__title,
.specs.is-revealed .specs__wrap .table-wrap,
.specs.is-revealed .specs__disclaimer,
.specs.is-revealed .specs__actions {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
.specs.is-revealed .specs__title { --specs-delay: 200ms; }
.specs.is-revealed .specs__wrap .table-wrap { --specs-delay: 700ms; }
.specs.is-revealed .specs__disclaimer:nth-of-type(1) { --specs-delay: 1300ms; }
.specs.is-revealed .specs__disclaimer:nth-of-type(2) { --specs-delay: 1450ms; }
.specs.is-revealed .specs__actions { --specs-delay: 1700ms; }
@media (prefers-reduced-motion: reduce) {
.specs .specs__title,
.specs .specs__wrap .table-wrap,
.specs .specs__disclaimer,
.specs .specs__actions {
opacity: 1;
transform: none;
filter: none;
transition: none;
}
}
/* ===========================================================================
18. CTA FINAL
=========================================================================== */
.cta__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
align-items: center;
}
.cta__title {
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
color: var(--text-on-brand);
margin: 0 0 var(--space-4);
}
.cta__lead {
font-size: var(--fs-lead);
line-height: var(--lh-snug);
opacity: 0.85;
margin: 0 0 var(--space-8);
}
.cta__trust {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-3);
}
.cta__trust li {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--fs-md);
color: var(--text-on-brand);
opacity: 0.9;
}
.cta__trust svg {
width: 1.25rem;
height: 1.25rem;
color: var(--vaio-gold);
flex-shrink: 0;
}
.cta__form {
background: var(--bg-app);
color: var(--text-primary);
padding: var(--space-8);
display: grid;
gap: var(--space-4);
}
.cta__form .card__title { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
@media (min-width: 1024px) {
.cta__grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}
/* ===========================================================================
19. FOOTER · disclaimer + logo Positivo Tecnologia
=========================================================================== */
.site-footer {
background: #f6f5f4;
color: #000;
padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.site-footer__container {
max-width: var(--container-lg); /* 1024px */
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2rem); /* respiro nas laterais */
display: flex;
flex-direction: column-reverse;
gap: clamp(1.25rem, 3vw, 2rem);
align-items: center;
}
.site-footer__legal {
margin: 0;
font-size: 0.75rem;
line-height: 1.55;
color: #000;
text-align: justify;
}
.site-footer__inline-logo {
display: inline-block;
height: 0.9em;
width: auto;
vertical-align: -0.05em;
margin-inline: 0.15em;
/* Logo entregue em branco; inverte para preto sobre fundo branco */
filter: invert(1);
}
.site-footer__brand {
flex-shrink: 0;
display: inline-block;
line-height: 0;
}
.site-footer__brand img {
display: block;
height: 35px;
width: auto;
}
@media (min-width: 768px) {
.site-footer__container {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.site-footer__legal { flex: 1; max-width: 120ch; }
}
/* ===========================================================================
Dark mode adjustments
=========================================================================== */
.dark .media-box {
background:
repeating-linear-gradient(
45deg,
rgba(255,255,255,0.02) 0 14px,
rgba(255,255,255,0.05) 14px 15px
),
var(--bg-subtle);
border-color: var(--border-strong);
}
.dark .media-box__label {
background: color-mix(in oklch, var(--bg-surface) 85%, transparent);
border-color: var(--border-default);
}
.dark .hero::before,
.dark .battery::before { opacity: 0.6; }
.dark .site-header { background-color: color-mix(in oklch, var(--bg-app) 78%, transparent); }
/* ===========================================================================
Polish
=========================================================================== */
kbd.kbd {
display: inline-block;
padding: 2px 6px;
font-family: var(--font-mono);
font-size: var(--fs-xs);
background: var(--bg-subtle);
border: 1px solid var(--border-default);
border-bottom-width: 2px;
border-radius: var(--radius-xs);
color: var(--text-primary);
vertical-align: baseline;
}