/* ============================================================
 * Avantgarde Médicos — site.css
 * Replica em CSS as animações Motion + utilitários que o
 * Tailwind CDN não cobre (scrollbar, dialog backdrop, keyframes).
 * ============================================================ */

html, body {
    background-color: #011712;
    color: #fff;
    font-family: 'Switzer', ui-sans-serif, system-ui, sans-serif;
}

body {
    overflow: hidden;
}

/* ---------- Transição Hero ↔ Lista ---------- */

#list {
    transform: translateY(100%);
    /* Easing: forte no início, frenagem suave (mais "natural" que cubic-bezier antigo) */
    transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    /* Momentum scrolling no iOS dentro do container interno */
    -webkit-overflow-scrolling: touch;
}
body.page-list #list {
    transform: translateY(0);
}
/* Pequeno blur sutil no Hero quando a lista está em cima — adiciona profundidade.
   No mobile o `filter: blur` força repaint de tela inteira por frame, matando o FPS.
   Ali deixamos só o `translate` (GPU-accelerated) com duração reduzida. */
#hero {
    transition: filter 700ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
body.page-list #hero {
    filter: blur(2px);
    transform: translateY(-3%);
}

/* Mobile: anima só transform, sem blur, com duração mais curta para sensação ágil */
@media (max-width: 900px), (pointer: coarse) {
    #list {
        transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    #hero {
        transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    body.page-list #hero {
        filter: none;
        transform: translateY(-2%);
    }
}

/* ---------- Ruído fractal sutil (V0 Classic) ----------
   SVG inline com feTurbulence pra dar uma "textura de filme" e quebrar
   os bandings de gradient escuros. Custo: ~600 bytes inline, sem requests. */
.hero-noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* V0 Classic — fundo igual à V2 (Elegant #02211B), 15% mais escuro = #021C17.
   Sobrescreve o `bg-avantgarde-bg` (#011712) só no escopo da V0, sem afetar
   #list (que mantém #011712 como antes pra preservar contraste). */
body.hero-variant-classic,
body.hero-variant-classic #hero > .bg-avantgarde-bg {
    background-color: #021C17;
}

/* ---------- Mobile: margens laterais maiores ----------
   Reduz em ~15% a largura útil das 3 páginas (Hero, Lista, Médico) em telas
   de celular — 7.5vw de padding em cada lado. Sobrescreve o px-6/p-8 do
   Tailwind apenas no eixo horizontal (vertical permanece intocado). */
@media (max-width: 768px) {
    #hero,
    #list > header,
    #list [data-scroll-container] > div,
    dialog.doctor-modal[data-style="full"] .max-w-7xl > div {
        padding-left: 7.5vw;
        padding-right: 7.5vw;
    }
}

/* Container interno da lista: scroll touch nativo + momentum no iOS */
[data-scroll-container] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ---------- AnimatedBackground ---------- */

.vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, #E4DCC8, transparent);
    opacity: 0.2;
    animation-name: vline-drop;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes vline-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(200%); }
}

.vline:nth-child(1) { left: 10vw; animation-duration: 8s;  animation-delay: 0s; }
.vline:nth-child(2) { left: 30vw; animation-duration: 10s; animation-delay: 1.5s; }
.vline:nth-child(3) { left: 50vw; animation-duration: 12s; animation-delay: 3s; }
.vline:nth-child(4) { left: 70vw; animation-duration: 14s; animation-delay: 4.5s; }
.vline:nth-child(5) { left: 90vw; animation-duration: 16s; animation-delay: 6s; }

/* ---------- Fade-up sequence (Hero) ---------- */

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up 1s ease-out forwards;
}
.fade-up-delay-1 { animation-delay: 0s; }
.fade-up-delay-2 { animation-delay: .2s; }
.fade-up-delay-3 { animation-delay: .4s; }
.fade-up-delay-4 { animation-delay: .6s; }
.fade-up-delay-5 { animation-delay: 1.2s; }

@keyframes fade-up {
    to { opacity: 1; transform: none; }
}

/* ---------- Bounce do chevron ---------- */

.chevron-bounce {
    animation: bounce-y 1.5s ease-in-out infinite;
}
@keyframes bounce-y {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ---------- Card stagger entry ---------- */

.doctor-card {
    opacity: 0;
    transform: translateY(20px);
    animation: fade-up 0.5s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 0.05s);
}
body:not(.page-list) .doctor-card {
    /* Não anima até a Lista entrar em cena */
    animation-play-state: paused;
}

/* ---------- Custom scrollbar ---------- */

.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(228, 220, 200, 0.15);
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(228, 220, 200, 0.3);
}
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(228, 220, 200, 0.15) transparent; }

/* ---------- Dialog (modal médico) ---------- */

dialog.doctor-modal {
    border: none;
    padding: 0;
    margin: 0;
    background: #02231b;
    color: #fff;
    width: 100%;
    max-width: 32rem;
    height: 100dvh;
    max-height: 100dvh;
    position: fixed;
    inset: 0 0 0 auto;
    border-left: 1px solid rgba(255,255,255,0.1);
    box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}
dialog.doctor-modal[data-style="full"] {
    max-width: 100%;
    border-left: none;
    background: #02231b;
}
dialog.doctor-modal::backdrop {
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}
@media (max-width: 900px), (pointer: coarse) {
    /* backdrop-filter mata FPS no mobile — escurece um pouco mais para compensar */
    dialog.doctor-modal::backdrop {
        background: rgba(0,0,0,0.75);
        backdrop-filter: none;
    }
    /* Modal entra/sai mais rápido no mobile */
    dialog.doctor-modal[open] { animation-duration: 600ms; }
    dialog.doctor-modal[open]::backdrop { animation-duration: 600ms; }
    dialog.doctor-modal[data-closing] { animation-duration: 500ms; }
    dialog.doctor-modal[data-closing]::backdrop { animation-duration: 500ms; }
}
dialog.doctor-modal[open] {
    animation: slide-in-right 0.95s cubic-bezier(.16,1,.3,1);
}
dialog.doctor-modal[open]::backdrop {
    animation: backdrop-fade 0.95s cubic-bezier(.16,1,.3,1);
}
@keyframes slide-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes backdrop-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Animação de saída — disparada via JS adicionando data-closing */
dialog.doctor-modal[data-closing] {
    animation: slide-out-right 0.85s cubic-bezier(.7,0,.84,.2) forwards !important;
    pointer-events: none;
}
dialog.doctor-modal[data-closing]::backdrop {
    animation: backdrop-fade-out 0.85s cubic-bezier(.7,0,.84,.2) forwards !important;
}
@keyframes slide-out-right {
    from { transform: translateX(0); }
    to   { transform: translateX(100%); }
}
@keyframes backdrop-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

dialog.doctor-modal .modal-shell,
dialog.doctor-modal .appointment-form { height: 100%; }
dialog.doctor-modal[data-view="form"] .modal-shell { display: none; }
dialog.doctor-modal[data-view="form"] .appointment-form { display: flex !important; flex-direction: column; }

/* ---------- Toast de sucesso (somente Hero / primeira página) ---------- */

#toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(150%);
    background: #E4DCC8;
    color: #011712;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
#toast.show {
    transform: translateX(-50%) translateY(0);
}
/* Some quando o usuário desce para a lista — só faz sentido na Hero. */
body.page-list #toast { display: none; }

/* ---------- Select chevron customizado (single, sem o nativo) ---------- */

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E4DCC8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem !important;
}
select::-ms-expand { display: none; }
select:disabled {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Opções do dropdown — fundo escuro consistente com o tema */
select option {
    background-color: #02231b;
    color: #fff;
}

/* ---------- Estilo das fotos dos médicos ---------- */

/* Padrão (atual): preto-e-branco que vira colorido no hover */
.image-grayscale .doctor-photo {
    filter: grayscale(100%);
    transition: filter 0.7s ease;
}
.image-grayscale .doctor-card:hover .doctor-photo,
.image-grayscale .doctor-card:focus-visible .doctor-photo { filter: grayscale(0%); }
.image-grayscale .doctor-card .doctor-photo-veil {
    background: rgba(228, 220, 200, 0.10);
    mix-blend-mode: color-burn;
    transition: background 0.5s ease;
}
.image-grayscale .doctor-card:hover .doctor-photo-veil { background: transparent; }

/* Modo "color": já entra colorida, com leve zoom + brilho ao hover */
.image-color .doctor-photo {
    filter: saturate(1) brightness(0.95);
    transform: scale(1);
    transition: transform 0.7s cubic-bezier(.2,.8,.2,1), filter 0.5s ease;
}
.image-color .doctor-card:hover .doctor-photo,
.image-color .doctor-card:focus-visible .doctor-photo {
    transform: scale(1.06);
    filter: saturate(1.1) brightness(1.05);
}
.image-color .doctor-card .doctor-photo-veil {
    background: linear-gradient(180deg, transparent 50%, rgba(1,23,18,0.35) 100%);
    transition: opacity 0.4s ease;
}
.image-color .doctor-card:hover .doctor-photo-veil { opacity: 0.5; }

/* ---------- Reduce motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}