/* ── Presentación de marca (overlay compartido: /ordenes, /menu, /) ──
   Extraído de Ordenes.cshtml. Solo el overlay #brand-showcase y sus capas
   internas (showcase-nieve/corazones/confeti/aranas) — NO incluye la
   franja de temporada (#temporada-strip) que es exclusiva del layout
   de /ordenes. */

@keyframes waveMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.wave-layer {
    animation: waveMove linear infinite;
}
.wave-1 { animation-duration: 16s; }
.wave-2 { animation-duration: 10s; animation-direction: reverse; }
.wave-3 { animation-duration: 7s; }

@keyframes brandPop {
    0%   { transform: scale(0.8) translateY(20px); opacity: 0; }
    60%  { transform: scale(1.05) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
#brand-showcase.show .brand-showcase-content {
    animation: brandPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes stepPop {
    0%   { transform: scale(0.6) translateY(30px) rotate(-6deg); opacity: 0; }
    60%  { transform: scale(1.08) translateY(-6px) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) translateY(0) rotate(0deg); opacity: 1; }
}
@keyframes stepFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(-1.5deg); }
}
@keyframes iconWiggle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(-8deg); }
    75% { transform: scale(1.15) rotate(8deg); }
}
.tutorial-step {
    opacity: 0;
}
#brand-showcase.show .tutorial-step {
    animation: stepPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) var(--step-delay, 0.4s) forwards,
               stepFloat 2.4s ease-in-out calc(var(--step-delay, 0.4s) + 0.55s) infinite;
}
#brand-showcase.show .tutorial-step .material-symbols-outlined {
    animation: iconWiggle 1.8s ease-in-out calc(var(--step-delay, 0.4s) + 0.6s) infinite;
}
#brand-showcase.show {
    opacity: 1 !important;
    pointer-events: auto;
}

/* Aviso "toca para continuar" — solo visible cuando <body> trae
   .showcase-interactivo (páginas donde el usuario puede tocar para
   despertar el kiosco: /menu, /). En /ordenes (pantalla no interactiva)
   se queda oculto. */
.brand-showcase-hint {
    display: none;
}
body.showcase-interactivo .brand-showcase-hint {
    display: flex;
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.05); }
}
.brand-showcase-hint {
    animation: hintPulse 1.6s ease-in-out infinite;
}

/* ── 16 de septiembre ── */
.showcase-confeti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    display: none;
}
#brand-showcase.patrio .showcase-confeti {
    display: block;
}
.confeti {
    position: absolute;
    top: -10px;
    width: 6px;
    height: 10px;
}
.showcase-confeti .confeti {
    top: -10px;
    animation-name: confetiCaerPantalla;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes confetiCaerPantalla {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateY(100vh) translateX(var(--drift, 20px)) rotate(320deg); opacity: 0; }
}
@keyframes bellRing {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-18deg); }
    30% { transform: rotate(14deg); }
    45% { transform: rotate(-10deg); }
    60% { transform: rotate(6deg); }
    75% { transform: rotate(-3deg); }
}
#brand-showcase.patrio {
    background: linear-gradient(160deg, #00543a 0%, #006847 45%, #ce1126 100%) !important;
}
#brand-showcase.patrio .patrio-bell {
    display: inline-block;
    transform-origin: top center;
}
#brand-showcase.show.patrio .patrio-bell {
    animation: bellRing 1.6s ease-in-out 0.9s infinite;
}

/* ── Halloween ── */
#brand-showcase.halloween {
    background: linear-gradient(160deg, #150b21 0%, #3a1657 45%, #ff7a1a 100%) !important;
}
#brand-showcase.halloween .patrio-bell {
    display: inline-block;
}
#brand-showcase.show.halloween .patrio-bell {
    animation: pumpkinFlicker 1.4s ease-in-out infinite;
}
@keyframes pumpkinFlicker {
    0%, 100% { opacity: 1; filter: brightness(1); }
    45%      { opacity: 0.8; filter: brightness(0.85); }
    50%      { opacity: 1; filter: brightness(1.25); }
    55%      { opacity: 0.9; filter: brightness(0.95); }
}
.showcase-aranas {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    display: none;
}
#brand-showcase.halloween .showcase-aranas {
    display: block;
}
.spider-rig {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: spiderBob ease-in-out infinite;
}
@keyframes spiderBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(16px); }
}
.spider-thread {
    width: 1px;
    background: rgba(255,255,255,0.55);
}
.spider-swing {
    display: inline-block;
    transform-origin: top center;
    animation: papelSway ease-in-out infinite;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
@keyframes papelSway {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* ── Navidad ── */
#brand-showcase.navidad {
    background: linear-gradient(160deg, #7a1620 0%, #9c1f2e 45%, #16412b 100%) !important;
}
#brand-showcase.navidad .patrio-bell {
    display: inline-block;
}
#brand-showcase.show.navidad .patrio-bell {
    animation: lucesTwinkle 1s ease-in-out infinite;
}
@keyframes lucesTwinkle {
    0%, 100% { opacity: 0.55; filter: brightness(0.9); }
    50%      { opacity: 1; filter: brightness(1.4); }
}
.showcase-nieve {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    display: none;
}
#brand-showcase.navidad .showcase-nieve {
    display: block;
}
.nieve-copo {
    position: absolute;
    top: -20px;
    color: #fff;
    text-shadow: 0 0 4px rgba(255,255,255,0.85);
    animation: nieveCaerPantalla linear infinite;
}
@keyframes nieveCaerPantalla {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translateY(105vh) translateX(var(--drift, 30px)); opacity: 0; }
}

/* ── Año Nuevo ── */
#brand-showcase.anonuevo {
    background: linear-gradient(160deg, #050414 0%, #12103a 45%, #2a1a55 100%) !important;
}
#brand-showcase.anonuevo .patrio-bell {
    display: inline-block;
}
#brand-showcase.show.anonuevo .patrio-bell {
    animation: lucesTwinkle 0.7s ease-in-out infinite;
}
.firework {
    position: absolute;
    width: 4px;
    height: 4px;
}
.spark {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color, #fff);
    box-shadow: 0 0 4px var(--color, #fff);
    transform: rotate(var(--angle)) translateX(0);
    animation: sparkBurst linear infinite;
    animation-duration: inherit;
}
@keyframes sparkBurst {
    0%   { transform: rotate(var(--angle)) translateX(0); opacity: 1; }
    18%  { transform: rotate(var(--angle)) translateX(28px); opacity: 1; }
    40%  { transform: rotate(var(--angle)) translateX(38px); opacity: 0; }
    100% { transform: rotate(var(--angle)) translateX(38px); opacity: 0; }
}

/* ── San Valentín ── */
#brand-showcase.sanvalentin {
    background: linear-gradient(160deg, #ff5c8a 0%, #ff2e63 45%, #c2185b 100%) !important;
}
#brand-showcase.sanvalentin .patrio-bell {
    display: inline-block;
}
#brand-showcase.show.sanvalentin .patrio-bell {
    animation: heartBeat 1.2s ease-in-out infinite;
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    14%      { transform: scale(1.3); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.3); }
    70%      { transform: scale(1); }
}
.showcase-corazones {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    display: none;
}
#brand-showcase.sanvalentin .showcase-corazones {
    display: block;
}
.corazon {
    position: absolute;
    bottom: -20px;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
}
.showcase-corazones .corazon {
    bottom: 0;
    animation-name: corazonFlotarPantalla;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes corazonFlotarPantalla {
    0%   { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }
    12%  { opacity: 1; }
    50%  { transform: translateY(-50vh) translateX(var(--drift, 10px)) scale(1.15); }
    88%  { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(var(--drift, 10px)) scale(0.85); opacity: 0; }
}