/* ═══════════════════════════════════════════════════════════════
   banner-celular.css — iPhone com o app rodando, no banner do Sondar
   e da /fds/

   Pedido do Gustavo em 03/10: o neon "ficou irado, mas dá pra deixar
   mais pica, com mockup de telefone com telas do app". Na volta de
   04/10 o Paulo achou que faltava capricho e motion — esta é a v2.

   O vídeo é o app de verdade (build web do Flutter, conta real no Rio),
   23s em loop: feed → filtro "Essa semana" → evento → confirmar
   presença → calendário.

   A v2 conta a mesma história fora do celular: três cartões de vidro
   entram no segundo exato em que a cena acontece no vídeo (o
   banner-celular.js lê o currentTime). Em volta disso: inclinação 3D
   com o cursor, flutuação, reflexo passando pela tela e um halo neon
   respirando atrás do aparelho.

   O celular sai da base do banner, cortado pelo overflow do
   .hero-banner-inner / .banner-inner: não empurra a altura do
   carrossel do Sondar.

   Aditivo. Reverter é tirar as duas tags (css e js) e o bloco
   .hero-celular-cena dos index.html.
   ═══════════════════════════════════════════════════════════════ */

.hero-celular-cena {
    --cel-largura: 216px;
    position: absolute;
    z-index: 1;
    top: 26px;
    right: 64px;
    width: var(--cel-largura);
    /* 216px de largura: (216 - 17 de aro e borda) / (480/1038) = 430px de
       vídeo + 22 + 16 das faixas + 17 = 485px de altura. */
    aspect-ratio: 216 / 485;
    pointer-events: none;
    perspective: 900px;
}

/* ── Halo neon atrás do aparelho ───────────────────────── */

.hero-celular-halo {
    position: absolute;
    inset: -30% -55% 10%;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgba(190, 160, 255, .55), rgba(123, 92, 245, .25) 55%, transparent 75%);
    filter: blur(18px);
    animation: celHalo 6s ease-in-out infinite;
}

@keyframes celHalo {
    0%, 100% { opacity: .65; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* ── Câmera ────────────────────────────────────────────── */

/* O banner só mostra a parte de cima do aparelho. Quando a ação do vídeo
   acontece fora desse recorte (o botão Filtrar e a barra de baixo, no pé
   da tela; o Confirmar, no meio), a câmera vai até ela e volta.
   O banner-celular.js lê o currentTime, põe data-cam="topo|meio|base" na
   cena e calcula em px quanto subir (--cam-meio, --cam-base) a partir do
   tamanho real do banner — o Sondar e a /fds/ têm alturas diferentes. */
.hero-celular-camera {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform-origin: 50% 0;
    /* A origem também anda: do zoom no topo para o zoom no chip a câmera
       desliza de um ponto ao outro em vez de pular. */
    transition:
        transform 800ms cubic-bezier(.65, 0, .35, 1),
        transform-origin 800ms cubic-bezier(.65, 0, .35, 1);
}

/* Aproxima o alto da tela, onde fica o botão Filtros. */
[data-cam="topo"] .hero-celular-camera {
    transform: translateY(4px) scale(1.12);
}

/* Aproxima o chip "Essa semana" do painel de filtros, logo depois do
   zoom no botão Filtros: dois zooms em sequência, cada um no toque. */
[data-cam="chip"] .hero-celular-camera {
    transform-origin: 56% 27%;
    transform: scale(1.32);
}

/* Desce até o meio da tela (o botão Confirmar presença). */
[data-cam="meio"] .hero-celular-camera {
    transform: translateY(var(--cam-meio, -24%)) scale(1.04);
}

/* Sobe o aparelho até a barra de navegação aparecer no banner. */
[data-cam="base"] .hero-celular-camera {
    transform: translateY(var(--cam-base, -46%));
}

/* ── O aparelho ────────────────────────────────────────── */

/* Três camadas de transform, cada uma num elemento, para não brigarem:
   .hero-celular-flutua  → sobe e desce devagar (sempre)
   .hero-celular         → inclinação 3D que segue o cursor
   a entrada usa a propriedade translate, separada do transform. */
.hero-celular-flutua {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    animation: celFlutua 6.5s ease-in-out infinite;
}

@keyframes celFlutua {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.hero-celular {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 7px;
    border-radius: 36px;
    /* Aro de titânio escuro: só um brilho discreto nas quinas, para o
       aparelho não sumir no fundo roxo sem parecer moldura branca. */
    background:
        linear-gradient(#0F0F0F, #0F0F0F) padding-box,
        linear-gradient(145deg, #4a4a52 0%, #18181b 30%, #0b0b0c 60%, #3a3a42 100%) border-box;
    border: 1.5px solid transparent;
    box-shadow:
        0 30px 60px rgba(20, 6, 70, .55),
        0 0 70px rgba(160, 120, 255, .35);
    transform-style: preserve-3d;
    /* Em pé, reto (04/10: a versão inclinada a -6° "não ficou tão
       legal"). O cursor ainda vira o aparelho de leve na direção do
       mouse: banner-cursor.js grava --mv-nx/--mv-ny de -1 a 1. */
    transform:
        rotateY(calc(var(--mv-nx, 0) * 9deg))
        rotateX(calc(var(--mv-ny, 0) * -6deg));
    animation: celEntra 1100ms cubic-bezier(.16, 1, .3, 1) 150ms both;
}

@keyframes celEntra {
    from {
        opacity: 0;
        translate: 0 90px;
        scale: .92;
    }

    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

/* Dynamic Island */
.hero-celular::before {
    content: '';
    position: absolute;
    z-index: 3;
    top: 15px;
    left: 50%;
    width: 64px;
    height: 18px;
    margin-left: -32px;
    border-radius: 10px;
    background: #0F0F0F;
}

/* Botões laterais, só um risco de luz no aro. */
.hero-celular::after {
    content: '';
    position: absolute;
    top: 92px;
    left: -3px;
    width: 3px;
    height: 46px;
    border-radius: 2px 0 0 2px;
    background: linear-gradient(#3e3e46, #1a1a1d);
}

.hero-celular-tela {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 29px;
    background: #fff;
}

.hero-celular-tela video,
.hero-celular-tela img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* A tela tem a proporção exata do vídeo (480×1038) mais duas faixas
   brancas: 22px no topo, para a Dynamic Island não cobrir a busca do
   app, e 16px embaixo, a área do indicador de home do iPhone. Antes o
   vídeo era mais alto que a caixa, ficava ancorado no topo e a barra de
   navegação do app saía cortada justo quando a câmera descia até ela.
   A conta está no aspect-ratio da .hero-celular-cena. */
.hero-celular-tela video {
    height: calc(100% - 16px);
    padding-top: 22px;
    background: #fff;
}

/* Indicador de home */
.hero-celular-tela::after {
    content: '';
    position: absolute;
    z-index: 3;
    bottom: 6px;
    left: 50%;
    width: 34%;
    height: 4px;
    border-radius: 2px;
    background: #0F0F0F;
    transform: translateX(-50%);
}

/* Reflexo de vidro: uma faixa clara atravessa a tela a cada 7s. */
.hero-celular-reflexo {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 29px;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .38) 48%, transparent 60%);
    background-size: 260% 100%;
    background-position: 130% 0;
    mix-blend-mode: soft-light;
    animation: celReflexo 7s ease-in-out 1.6s infinite;
}

@keyframes celReflexo {
    0%, 62% { background-position: 130% 0; }
    100% { background-position: -40% 0; }
}

/* ── Cartões que contam a história junto com o vídeo ───── */

.hero-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px 9px 9px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid rgba(255, 255, 255, .7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(20, 6, 70, .35);
    color: #0F0F0F;
    font: 700 13px/1.15 var(--font-family, 'Lato', sans-serif);
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(14px, 10px, 0) scale(.86);
    transition:
        opacity 260ms ease,
        transform 520ms cubic-bezier(.34, 1.56, .64, 1);
}

.hero-chip small {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 11px;
    color: #505050;
}

.hero-chip.ativo {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.hero-chip-icone {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #F1EDFC;
    color: #522FCB;
}

.hero-chip-icone svg {
    width: 17px;
    height: 17px;
}

.hero-chip--ok .hero-chip-icone {
    background: #E5F7EC;
    color: #1E9E57;
}

/* O check se desenha quando o cartão entra. */
.hero-chip--ok .hero-chip-icone path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 420ms ease 220ms;
}

.hero-chip--ok.ativo .hero-chip-icone path {
    stroke-dashoffset: 0;
}

/* Posições: escadinha à esquerda do aparelho, no vão entre o texto
   do banner e o celular. Cada uma perto da altura em que a cena
   acontece na tela. */
.hero-chip--local {
    top: 34px;
    right: calc(100% - 26px);
}

.hero-chip--filtro {
    top: 72px;
    right: calc(100% - 12px);
}

.hero-chip--ok {
    top: 116px;
    right: calc(100% - 4px);
}

.hero-chip--agenda {
    top: 190px;
    right: calc(100% - 30px);
}

/* ── Tamanhos ──────────────────────────────────────────── */

/* O texto do banner ocupa até ~440px à esquerda. Abaixo de 1100px o
   celular encolhe e encosta mais na borda para não cobrir os botões. */
@media (max-width: 1100px) {
    .hero-celular-cena {
        --cel-largura: 190px;
        right: 36px;
    }

    .hero-chip {
        font-size: 12px;
    }
}

/* Entre 701 e 900px não sobra vão para os cartões: fica só o celular. */
@media (max-width: 900px) {
    .hero-celular-cena {
        --cel-largura: 168px;
        right: 20px;
        top: 34px;
    }

    .hero-chip {
        display: none;
    }
}

/* Na /fds/ o título é uma frase longa ("O que fazer neste fim de
   semana em São Paulo") que passava por baixo do celular. Reservar a
   coluna da direita faz o título quebrar em duas linhas — o que de
   quebra deixa o banner mais alto e mostra mais da tela do app. */
@media (min-width: 701px) {
    .banner-inner:has(.hero-celular-cena) .banner-content {
        max-width: calc(100% - 300px);
    }
}

@media (min-width: 901px) {

    /* Na /fds/ o banner é mais baixo (~210px) e o primeiro cartão
       ocuparia o lugar do título. Lá fica só a confirmação e a agenda,
       no mesmo lugar: as duas nunca aparecem ao mesmo tempo. */
    .banner-inner .hero-chip--local {
        display: none;
    }

    .banner-inner .hero-chip--filtro,
    .banner-inner .hero-chip--ok,
    .banner-inner .hero-chip--agenda {
        top: 104px;
    }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .banner-inner:has(.hero-celular-cena) .banner-content {
        max-width: calc(100% - 220px);
    }
}

/* ── Celular (até 700px) ───────────────────────────────── */

/* No celular o banner quebra em dois blocos, no mesmo espírito do
   desktop: em cima o texto e os botões das lojas, com a largura toda; embaixo
   o aparelho, centralizado, saindo pela base do banner. Os cartões
   viram notificações por cima da tela do aparelho, como um aviso do
   iOS — ao lado não caberiam legíveis em 375px. O vídeo é a versão de
   300px (~280 KB), escolhida pelo banner-celular.js.

   O banner perde o padding de baixo e o aparelho entra no fluxo com
   margem negativa: é ela que decide quanto do aparelho aparece, sem
   depender do padding de cada página (Sondar e /fds/ usam valores
   diferentes em cada largura). */
@media (max-width: 700px) {

    .hero-banner-inner:has(.hero-celular-cena),
    .banner-inner:has(.hero-celular-cena) {
        padding-bottom: 0;
    }

    .hero-celular-cena {
        /* 170px: (170 - 15) / (480/1038) = 335 de vídeo + 18 + 12 + 15 */
        --cel-largura: 170px;
        position: relative;
        top: auto;
        right: auto;
        aspect-ratio: 170 / 380;
        /* aparecem ~230px dos 380 */
        margin: 22px auto -150px;
    }

    .hero-celular-halo {
        inset: -12% -45% 20%;
        filter: blur(16px);
    }

    .hero-celular {
        padding: 6px;
        border-radius: 30px;
        box-shadow:
            0 20px 40px rgba(20, 6, 70, .5),
            0 0 50px rgba(160, 120, 255, .3);
    }

    .hero-celular::before {
        top: 12px;
        width: 46px;
        height: 13px;
        margin-left: -23px;
        border-radius: 7px;
    }

    .hero-celular::after {
        top: 72px;
        height: 34px;
    }

    .hero-celular-tela,
    .hero-celular-reflexo {
        border-radius: 25px;
    }

    .hero-celular-tela video {
        height: calc(100% - 12px);
        padding-top: 18px;
    }

    .hero-celular-tela::after {
        bottom: 4px;
        height: 3px;
    }

    /* Cartões como notificação: todos no mesmo lugar (um por vez),
       centralizados sobre a tela, descendo de leve ao entrar. */
    .hero-chip,
    .banner-inner .hero-chip--filtro,
    .banner-inner .hero-chip--ok,
    .banner-inner .hero-chip--agenda {
        display: flex;
        top: 104px;
        right: auto;
        left: 50%;
        font-size: 12px;
        padding: 8px 12px 8px 8px;
        transform: translate3d(-50%, -10px, 0) scale(.92);
    }

    .banner-inner .hero-chip--local {
        display: flex;
    }

    .hero-chip.ativo {
        transform: translate3d(-50%, 0, 0) scale(1);
    }

    .hero-chip-icone {
        width: 26px;
        height: 26px;
    }

    .hero-chip small {
        font-size: 10.5px;
    }

    /* Zooms: o aparelho está centralizado e o texto fica acima dele, então
       os zooms crescem para baixo e para os lados. */
    [data-cam="topo"] .hero-celular-camera {
        transform-origin: 50% 0;
        transform: scale(1.08);
    }

    [data-cam="chip"] .hero-celular-camera {
        transform-origin: 56% 30%;
        transform: scale(1.16);
    }

    /* No desktop a câmera SOBE o aparelho para mostrar o pé da tela; aqui
       o texto está logo acima e ele subiria por cima dos botões. Então a
       câmera se AFASTA: o aparelho encolhe no lugar, ancorado no topo, até
       caber inteiro no recorte (230 de 380px), com a barra de navegação. */
    [data-cam="base"] .hero-celular-camera {
        transform-origin: 50% 0;
        transform: scale(.6);
    }

    [data-cam="meio"] .hero-celular-camera {
        transform-origin: 50% 0;
        transform: scale(.82);
    }
}

@media (max-width: 360px) {
    .hero-celular-cena {
        /* 150px: (150 - 15) / (480/1038) = 292 + 18 + 12 + 15 */
        --cel-largura: 150px;
        aspect-ratio: 150 / 337;
        margin-bottom: -130px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-celular,
    .hero-celular-flutua,
    .hero-celular-halo,
    .hero-celular-reflexo {
        animation: none;
    }

    .hero-celular-camera {
        transform: none !important;
        transition: none;
    }

    .hero-celular {
        transform: none;
    }

    .hero-chip {
        display: none;
    }
}