/* ============================================
   TN.CO — Polish Layer (header glass + reveal)
   Camada de estilo adicional, não estrutural.
   Aplicada por cima do CSS existente de cada página.
   ============================================ */

.glass-header {
    background: rgba(255,255,255,0.03) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: none !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.06);
    position: relative;
}

.glass-header::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.2px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.20) 0%,
        rgba(255,255,255,0.05) 25%,
        rgba(255,255,255,0) 45%,
        rgba(255,255,255,0) 60%,
        rgba(255,255,255,0.05) 80%,
        rgba(255,255,255,0.20) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

.reveal-in {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(16px);
    animation: polish-reveal 0.8s ease forwards;
}

@keyframes polish-reveal {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.reveal-in.d1 { animation-delay: .15s; }
.reveal-in.d2 { animation-delay: .3s; }
.reveal-in.d3 { animation-delay: .45s; }
.reveal-in.d4 { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
    .reveal-in { animation: none; opacity: 1; filter: none; transform: none; }
}