/* ==========================================================
   HALLOWEEN LAYER (seasonal) - Los Libros de Efrén
   Everything is scoped under html.halloween, which halloween.js
   only adds during the season (or when forced). Without that
   class, this file does nothing.
   The Terror MODAL lives in terror.css (permanent), not here.
   ========================================================== */

/* ==========================================================
   LIGHTNING: glow + bolt overlay (the page itself goes "night",
   see the NIGHT PALETTE section). Timed to the JS sequence:
   flash 1 at ~50 ms, flash 2 at ~265 ms.
   ========================================================== */
#hw-lightning {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    background: radial-gradient(
        ellipse at var(--lx, 50%) -10%,
        rgba(220, 230, 255, 0.95) 0%,
        rgba(190, 205, 255, 0.4) 35%,
        rgba(190, 205, 255, 0) 70%
    );
}
#hw-lightning.flash { animation: hwLightning 0.6s linear 1; }
@keyframes hwLightning {
    0%   { opacity: 0; }
    8%   { opacity: 0.4; }
    24%  { opacity: 0.04; }
    44%  { opacity: 0.45; }
    100% { opacity: 0; }
}

.hw-bolt {
    position: absolute;
    top: 0;
    left: var(--lx, 50%);
    height: 40vh;
    width: 12vh;
    transform: translateX(-50%);
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(200, 215, 255, 0.9));
}
#hw-lightning.flash .hw-bolt { animation: hwBolt 0.6s linear 1; }
@keyframes hwBolt {
    0%   { opacity: 0; }
    8%   { opacity: 0.9; }
    24%  { opacity: 0; }
    44%  { opacity: 0.7; }
    100% { opacity: 0; }
}

/* ==========================================================
   FADE-BACK TRANSITIONS: when the night flash ends, the page
   background, hero and footer line fade back slowly.
   (Entering is fast, see the night block below.)
   ========================================================== */
html.halloween body { transition: background-color 0.35s ease; }
html.halloween :is(.hero, .hero-subtitle, .last-updated) {
    transition: background-color 0.45s ease, color 0.45s ease;
}

/* ==========================================================
   NIGHT PALETTE (the lightning "easter egg"): ONLY the page
   background, the hero and the logo go dark. The grid, the
   cards and the search bar are NOT touched. Text colors are
   not changed either, except inside the hero (which sits on
   the dark background) and the footer line.
   Applied for ~0.5 s by halloween.js (double flash).
   ========================================================== */
html.hw-night body {
    background-color: #0a0e1d;
    transition: background-color 0.06s linear;
}
html.hw-night .hero { background: transparent; }
html.hw-night .hero-subtitle,
html.hw-night .last-updated { color: #98a2c4; }
html.hw-night .hero .custom-select { color: #e6e9f5; border-color: #e6e9f5; }
html.hw-night .hero .clear-genre-btn { border-color: rgba(255, 255, 255, 0.25); color: #98a2c4; }
html.hw-night .hw-bat { color: #e6e9f5; }
/* fast ON: this block must stay AFTER the fade-back block above */
html.hw-night :is(.hero, .hero-subtitle, .last-updated) {
    transition: background-color 0.06s linear, color 0.06s linear;
}

/* ==========================================================
   BLOODY LOGO: a copy of the logo text (built by JS) fades in
   during the storm, with drips that grow. The real text hides.
   ========================================================== */
html.halloween .main-brand-svg .logo-text { transition: fill 0.3s ease, opacity 0.8s ease; }
.hw-logo-blood {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
}
html.hw-bleed .hw-logo-blood { opacity: 1; transition: opacity 0.1s ease; }
html.hw-bleed .main-brand-svg .logo-text { opacity: 0; transition: opacity 0.1s ease; }
.hw-logo-drip { transform-box: fill-box; transform-origin: 50% 0%; }
html.hw-bleed .hw-logo-drip { animation: hwLogoDrip 1.1s cubic-bezier(0.3, 0.1, 0.3, 1) both; }
@keyframes hwLogoDrip {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* ---------- Hero: fog + logo glow ---------- */
html.halloween .hero {
    isolation: isolate;
    overflow-x: clip;
}
html.halloween .hero::before {
    content: '';
    position: absolute;
    inset: -10% -20% 0 -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 40% 35% at 25% 60%, rgba(110, 80, 160, 0.13), transparent 70%),
        radial-gradient(ellipse 45% 30% at 75% 40%, rgba(232, 117, 26, 0.09), transparent 70%),
        radial-gradient(ellipse 50% 25% at 50% 85%, rgba(90, 70, 130, 0.10), transparent 70%);
    filter: blur(18px);
    animation: hwFog 38s ease-in-out infinite alternate;
}
@keyframes hwFog {
    from { transform: translateX(-6%); }
    to   { transform: translateX(6%); }
}
html.halloween .logo-book {
    filter: drop-shadow(0 0 10px rgba(232, 117, 26, 0.35));
}

/* ==========================================================
   BATS: z-index 1 sits BEHIND the logo (.brand-lockup is 2).
   big = near, left to right.  small = far, right to left.
   ========================================================== */
.hw-bat {
    position: absolute;
    left: 0;
    width: 56px;
    z-index: 1;
    pointer-events: none;
    color: var(--ink);
    opacity: 0.8;
    animation: hwBatFly 9s linear forwards;
}
.hw-bat--big   { width: 68px; opacity: 0.9; }
.hw-bat--small { width: 34px; opacity: 0.55; animation-duration: 12s; }
.hw-bat--rev   { animation-name: hwBatFlyRev; }
.hw-bat svg {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: 50% 50%;
    animation: hwBatFlap 0.3s ease-in-out infinite alternate;
}
.hw-bat--small svg { animation-duration: 0.22s; }
@keyframes hwBatFlap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0.55); }
}
@keyframes hwBatFly {
    0%   { transform: translate(-90px, 0); }
    25%  { transform: translate(25vw, 30px); }
    50%  { transform: translate(50vw, -8px); }
    75%  { transform: translate(75vw, 36px); }
    100% { transform: translate(calc(100vw + 90px), 6px); }
}
@keyframes hwBatFlyRev {
    0%   { transform: translate(calc(100vw + 90px), 0); }
    25%  { transform: translate(75vw, -24px); }
    50%  { transform: translate(50vw, 14px); }
    75%  { transform: translate(25vw, -20px); }
    100% { transform: translate(-90px, 8px); }
}

/* ---------- Cobweb in the controls bar ---------- */
html.halloween .controls-bar { overflow: hidden; }
.hw-web {
    position: absolute;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 0;
}

/* ==========================================================
   LOADER: candle flicker (always) + the "ritual" (first visit
   of a session): rune circle, embers and one random phrase.
   ========================================================== */
html.halloween .book-loader {
    border-color: #E8751A;
    background: rgba(232, 117, 26, 0.06);
    animation: hwCandle 2.4s infinite;
}
html.halloween .book-loader::after {
    border-left-color: #E8751A;
    background: rgba(232, 117, 26, 0.18);
}
@keyframes hwCandle {
    0%, 100% { box-shadow: 0 0 14px rgba(232, 117, 26, 0.45); }
    12%      { box-shadow: 0 0 8px  rgba(232, 117, 26, 0.25); }
    30%      { box-shadow: 0 0 18px rgba(232, 117, 26, 0.55); }
    47%      { box-shadow: 0 0 9px  rgba(232, 117, 26, 0.30); }
    63%      { box-shadow: 0 0 16px rgba(232, 117, 26, 0.50); }
    82%      { box-shadow: 0 0 10px rgba(232, 117, 26, 0.30); }
}

html.halloween #loader.hw-loader-ritual .book-loader { margin: 44px 0 70px; }

.hw-runes {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160px;
    height: 160px;
    margin: -80px 0 0 -80px;
    overflow: visible;
    pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(232, 117, 26, 0.75));
    animation: hwRuneIn 0.5s ease-out both, hwRuneSpin 18s linear infinite;
}
@keyframes hwRuneIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes hwRuneSpin { to { transform: rotate(360deg); } }
.hw-rune { animation: hwRuneGlow 1.3s ease-in-out infinite alternate; }
@keyframes hwRuneGlow { from { opacity: 0.3; } to { opacity: 1; } }

.hw-ember {
    position: absolute;
    top: 25%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ffb347;
    box-shadow: 0 0 6px 2px rgba(255, 160, 50, 0.8);
    opacity: 0;
    animation: hwEmber 1.7s ease-out infinite;
}
@keyframes hwEmber {
    0%   { transform: translate(0, 0); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(var(--dx, 6px), -70px); opacity: 0; }
}

html.halloween #loader.hw-loader-ritual small {
    display: block;
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.35;
    opacity: 0.9 !important;
    animation: hwPhraseIn 0.7s 0.2s ease-out both;
}
@keyframes hwPhraseIn {
    from { transform: translateY(6px); letter-spacing: 0.12em; }
    to   { transform: none; letter-spacing: normal; }
}

/* ---------- Sold ribbon: still says "Vendido", new look ---------- */
html.halloween #bookGrid .sold-ribbon:not(.custom-ribbon) {
    background: #1b1226;
    color: #f1e9d8;
    letter-spacing: 0.12em;
    border-top: 1px dashed rgba(241, 233, 216, 0.55);
    border-bottom: 1px dashed rgba(241, 233, 216, 0.55);
    box-shadow: 0 2px 10px rgba(60, 20, 90, 0.45);
}
html.halloween #bookGrid .sold-ribbon:not(.custom-ribbon)::after {
    content: ' 🕸️';
    font-size: 11px;
}
html.halloween .sold-overlay { background: rgba(27, 18, 38, 0.55); }
html.halloween .sold-text { background: #1b1226; color: #f1e9d8; }

/* ---------- "+" button turns into a pumpkin when adding ---------- */
html.halloween .add-btn { position: relative; }
html.halloween .add-btn.hw-pumpkin {
    background: #E8751A;
    border-color: #E8751A;
    opacity: 1 !important;
}
html.halloween .add-btn.hw-pumpkin i { opacity: 0; }
html.halloween .add-btn.hw-pumpkin::after {
    content: '🎃';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    animation: hwPumpkinPop 1.3s ease both;
}
@keyframes hwPumpkinPop {
    0%   { transform: scale(0) rotate(-25deg); }
    30%  { transform: scale(1.5) rotate(10deg); }
    50%  { transform: scale(1) rotate(0); }
    100% { transform: scale(1); }
}

/* ---------- Terror genre cards: purple glow, vignette, hover flicker ---------- */
html.halloween .book-card.is-terror {
    border-color: rgba(150, 70, 210, 0.9);
    box-shadow:
        0 0 0 4px rgba(140, 60, 200, 0.6),
        0 0 22px 4px rgba(140, 60, 200, 0.35),
        0 10px 28px rgba(90, 30, 140, 0.35);
}
html.halloween .book-card.is-terror:hover {
    box-shadow:
        0 0 0 5px rgba(175, 95, 235, 0.9),
        0 0 32px 8px rgba(150, 70, 220, 0.5),
        0 18px 44px rgba(110, 40, 170, 0.5);
}
html.halloween .book-card.is-terror .book-cover-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 45px rgba(10, 0, 20, 0.55);
    background: linear-gradient(180deg, rgba(40, 0, 60, 0) 55%, rgba(40, 0, 60, 0.35) 100%);
}
html.halloween .book-card.is-terror:hover .book-cover-wrap::after {
    animation: hwTerrorFlicker 1.1s steps(1) 1;
}
@keyframes hwTerrorFlicker {
    0%   { opacity: 1; }
    10%  { opacity: 0.3; }
    20%  { opacity: 1; }
    35%  { opacity: 0.5; }
    45%  { opacity: 1; }
    100% { opacity: 1; }
}

/* ==========================================================
   TERROR BUTTON (filter), next to Saldos
   ========================================================== */
.btn-terror {
    border: 1.5px solid #8b0a14;
    border-radius: 30px;
    background: #150e20;
    color: #f1e9d8;
    font-weight: 600;
    font-size: 15px;
    padding: 10px 28px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-terror:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(139, 10, 20, 0.45); }
.btn-terror.active {
    background: #8b0a14;
    border-color: #8b0a14;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(139, 10, 20, 0.25);
}
.btn-terror:focus-visible { outline: 3px solid #8b0a14; outline-offset: 2px; }

/* Forces Saldos + Terror onto their own row on narrow screens */
.hw-break { display: none; }
@media (max-width: 576px) {
    .hw-break { display: block; flex-basis: 100%; height: 0; }
    html.halloween .genre-select-wrapper .btn-saldos { margin-left: 0 !important; }
}

/* ==========================================================
   INSTAGRAM BUTTON -> BLOOD DROP (only while collapsed)
   ========================================================== */
html.halloween .fab-ig:not(.expanded):not(:hover) {
    rotate: 45deg;
    border-radius: 0 50% 50% 50%;
    background: radial-gradient(circle at 35% 30%, #c1121f 0%, #8b0a14 55%, #5a050c 100%);
    color: #f1e9d8;
    box-shadow: 0 8px 26px rgba(120, 0, 10, 0.45);
    animation: hwDropBob 5s ease-in-out infinite;
}
html.halloween .fab-ig:not(.expanded):not(:hover) .ig-icon-wrap { rotate: -45deg; }
html.halloween .fab-ig:not(.expanded):not(:hover)::after {
    content: '';
    position: absolute;
    left: 14%;
    top: 26%;
    width: 7px;
    height: 13px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
}
@keyframes hwDropBob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 3px; }
}

/* ==========================================================
   CART PILL -> GHOST (from time to time)
   ========================================================== */
html.halloween .fab-cart.hw-ghost {
    background: rgba(241, 233, 216, 0.92);
    color: #111;
    box-shadow: 0 0 28px 6px rgba(241, 233, 216, 0.55);
    animation: hwGhostFloat 4.2s ease-in-out 1;
}
html.halloween .fab-cart.hw-ghost i { display: none; }
html.halloween .fab-cart.hw-ghost::before { content: '👻'; font-size: 1.1rem; line-height: 1; }
@keyframes hwGhostFloat {
    0%   { translate: 0 0;     opacity: 1; }
    15%  { opacity: 0.75; }
    30%  { translate: 0 -10px; opacity: 0.8; }
    55%  { translate: 0 -4px;  opacity: 0.75; }
    80%  { translate: 0 -9px;  opacity: 0.85; }
    100% { translate: 0 0;     opacity: 1; }
}

/* ==========================================================
   REDUCED MOTION: no flashing, no flying, no flicker, no spin.
   (halloween.js also skips the bats, lightning and ghost.)
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    #hw-lightning, #hw-lightning.flash, .hw-bolt, #hw-lightning.flash .hw-bolt,
    html.halloween .hero::before,
    .hw-bat, .hw-bat svg,
    html.halloween .book-loader,
    .hw-runes, .hw-rune, .hw-ember,
    html.halloween #loader.hw-loader-ritual small,
    html.hw-bleed .hw-logo-drip,
    html.halloween .book-card.is-terror:hover .book-cover-wrap::after,
    html.halloween .add-btn.hw-pumpkin::after,
    html.halloween .fab-ig:not(.expanded):not(:hover),
    html.halloween .fab-cart.hw-ghost {
        animation: none !important;
    }
    .hw-runes { opacity: 1; }
}