/*
 * DISTRIBUIDORA TREJO — Premium Visual Layer
 * Solo CSS decorativo. Cero cambios de layout.
 * Carga antes de optimized.css (que tiene !important en todo).
 */

:root {
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* CURSOR — solo cuando el JS lo crea en el DOM */
#cursor-dot {
    position: fixed;
    width: 9px; height: 9px;
    background: var(--primary, #e8600a);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition: transform .12s var(--spring), background .18s, width .15s, height .15s;
}
#cursor-ring {
    position: fixed;
    width: 36px; height: 36px;
    border: 1.5px solid rgba(232, 96, 10, .45);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999998;
    transform: translate(-50%, -50%);
    transition: width .18s var(--spring), height .18s var(--spring), border-color .18s;
}

/* GRAIN hero — position absolute, no afecta layout */
.hero-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}
.hero-inner { z-index: 3 !important; }
#hero-particles { z-index: 2 !important; }

/* HOVER GLOW — elemento creado por JS, siempre absolute+no pointer-events */
.trejo-glow {
    position: absolute !important;
    width: 200px !important; height: 200px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255,165,0,.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: 0;
    transition: opacity .25s ease !important;
    transform: translate(-50%, -50%) !important;
    top: -999px !important; left: -999px !important;
}

/* SCROLL PROGRESS — glow extra */
#scroll-progress {
    box-shadow: 0 0 8px rgba(232,96,10,.5), 0 0 16px rgba(255,165,0,.2) !important;
}

/* HERO BADGE — pulse */
@keyframes badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,.4); }
    50%       { box-shadow: 0 0 0 8px rgba(245,166,35,0); }
}
.hero-badge {
    animation: badge-pulse 2.8s ease-in-out infinite,
               float-badge 2.5s ease-in-out infinite !important;
}

/* HERO CARDS — stagger entrada */
@keyframes hce {
    from { opacity:0; transform: translateY(20px) scale(.93); }
    to   { opacity:1; transform: none; }
}
.hero-cards .hero-card:nth-child(2) { animation: hce .5s .40s var(--spring) both; }
.hero-cards .hero-card:nth-child(3) { animation: hce .5s .50s var(--spring) both; }
.hero-cards .hero-card:nth-child(4) { animation: hce .5s .60s var(--spring) both; }
.hero-cards .hero-card:nth-child(5) { animation: hce .5s .70s var(--spring) both; }

/* RIPPLE — elemento creado por JS */
.trejo-ripple {
    position: absolute !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.35) !important;
    pointer-events: none !important;
    transform: scale(0) !important;
    animation: trejo-ripple-anim .55s ease forwards !important;
    z-index: 10 !important;
}
@keyframes trejo-ripple-anim { to { transform: scale(4); opacity: 0; } }

/* TICKER — pause on hover */
.promo-ticker:hover .promo-ticker-track {
    animation-play-state: paused;
}

/* FAB + BACK TO TOP — spring */
#cartFab:hover  { transform: scale(1.14) rotate(7deg) !important; }
#cartFab:active { transform: scale(.9) !important; }
#backToTop:hover { transform: translateY(-5px) scale(1.12) !important; }

/* MODAL + TOAST — spring */
@keyframes toastIn {
    from { opacity:0; transform: translateY(14px) scale(.9); }
    to   { opacity:1; transform: none; }
}
@keyframes modalIn {
    from { opacity:0; transform: scale(.9) translateY(18px); }
    to   { opacity:1; transform: none; }
}

/* SECTION PROGRESS DOTS — solo desktop */
#trejo-dots {
    position: fixed;
    right: 18px; top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
@media (max-width: 1199px) { #trejo-dots { display: none; } }
.trejo-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(232,96,10,.2);
    border: 1.5px solid rgba(232,96,10,.25);
    cursor: pointer;
    pointer-events: all;
    transition: all .3s var(--spring);
}
.trejo-dot.active {
    background: var(--primary, #e8600a);
    border-color: var(--primary, #e8600a);
    width: 9px; height: 9px;
    box-shadow: 0 0 6px rgba(232,96,10,.5);
}
.trejo-dot:hover {
    background: var(--secondary, #ffa500);
    border-color: var(--secondary, #ffa500);
    transform: scale(1.5);
}