/* =========================================================
   Viuro.pl — Halloween Bottom Overlay
   Uses: /themes/halloween/halloween-bottom.png
   ========================================================= */

:root{
  /* Adjust the height if your PNG is taller/shorter */
  --halloween-bottom-height: clamp(90px, 18vmin, 220px);
  --halloween-z: 2147483000;
}

/* Overlay shell (non-blocking by default) */
.halloween-bottom-overlay{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--halloween-bottom-height);
  z-index: var(--halloween-z);
  pointer-events: none; /* allow page interactions through */
  background: transparent;
}

/* Image fill (single wide banner, no tiling) */
.halloween-bottom-overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/themes/halloween/halloween-bottom.png");
  background-repeat: repeat-x;        /* ← tile horizontally */
  background-position: left bottom;   /* start at left bottom edge */
  background-size: auto 100%;         /* keep full height, repeat in X */
  image-rendering: auto;
  pointer-events: none;
}

/* If your PNG is tileable and you prefer a repeating “border”, add .is-tiled */
.halloween-bottom-overlay.is-tiled::after{
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left bottom;
}

/* Optional helper to keep page content from being hidden behind the overlay */
.halloween-bottom-spacer{
  height: var(--halloween-bottom-height);
}

/* (Optional) Make a CTA area clickable on top of the overlay */
.halloween-bottom-overlay .halloween-cta{
  position: absolute;
  right: clamp(8px, 4vw, 24px);
  bottom: clamp(8px, 3vw, 20px);
  pointer-events: auto;      /* enable clicks here */
  text-decoration: none;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  padding: .6em .9em;
  border-radius: 999px;
  color: #000;               /* matches “all black” theme */
  background: rgba(255,255,255,0.0); /* transparent by default */
  outline: 0;
}
.halloween-bottom-overlay .halloween-cta:focus-visible{
  outline: 2px solid #000;
  outline-offset: 2px;
}


/* ===== Top-Right Corner Overlay ===== */
:root{
  --halloween-tr-size: clamp(120px, 22vmin, 280px); /* tweak as needed */
}

/* Shell */
.halloween-corner-tr{
  position: fixed;
  top: 0;
  right: 0;
  width: var(--halloween-tr-size);
  height: var(--halloween-tr-size);
  z-index: var(--halloween-z);
  pointer-events: none; /* don’t block clicks */
  background: transparent;
}

/* Image */
.halloween-corner-tr::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/themes/halloween/halloween-top-right.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;  /* keep proportions */
  image-rendering: auto;
  pointer-events: none;
}

/* Respect reduced motion (no animations used here, but future-proof) */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Optional: shrink or hide on very small screens (e.g., if overlapping a menu) */
@media (max-width: 420px){
  .halloween-corner-tr{
    width: clamp(80px, 28vmin, 140px);
    height: clamp(80px, 28vmin, 140px);
  }
}

/* ===== Halloween storm: 5s delay, flicker→hold→fade, pan, WHITE lightning ===== */
/* Animation Image by Grant Abbitt (Gabbitt): https://www.youtube.com/watch?v=hAthT-r-HPs */
:root{
  --storm-cycle: 20s;  /* full loop duration */
}

/* BLUE overlay (tints both original + storm), but flashes to WHITE for lightning */
.hero .img-wrapper::before{
  z-index: 3;                /* above the storm layer */
  background-color: var(--blue);
  opacity: 0.6;
  pointer-events: none;

  /* Sync lightning with storm timings, start after 2s */
  animation: lightning var(--storm-cycle) infinite 2s;
  animation-fill-mode: both; /* keeps initial state during delay */
}

/* STORM image (under the blue/white flashes, above the photo) */
.hero .img-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;                /* below ::before, above <img> */
  pointer-events: none;
  background: url("/themes/halloween/halloween-background.jpg")
              center top / cover no-repeat;
  opacity: 0;

  /* Wait 2s before starting, then loop forever */
  animation:
    storm-sequence var(--storm-cycle) ease-in-out infinite 2s,
    storm-pan      var(--storm-cycle) linear       infinite 2s;
  animation-fill-mode: both;
}

/* Opacity sequence for storm layer:
   0–4%   original visible
   4–8%   flicker in
   8–60%  hold storm
   60–75% slow fade out
   75–100% original again
*/
@keyframes storm-sequence{
  0%,3.9%   { opacity: 0; }
  4%        { opacity: .55; }  /* flicker */
  5%        { opacity: 1; }
  5.5%      { opacity: .35; }
  6.2%      { opacity: 1; }
  7.2%      { opacity: .75; }
  8%        { opacity: 1; }    /* fully on */
  60%       { opacity: 1; }    /* hold */
  75%       { opacity: 0; }    /* slow fade */
  100%      { opacity: 0; }
}

/* Vertical pan of the storm image while it’s on */
@keyframes storm-pan{
  0%   { background-position: center top; }
  60%  { background-position: center bottom; } /* pan during ON state */
  100% { background-position: center bottom; }
}

/* Opening cluster (4–8%) + one quick double-flash mid-hold (~36%) */
@keyframes lightning{
  /* Base blue (held) */
  0%, 3.9%   { background-color: var(--blue); opacity: .6; }

  /* Opening flicker cluster (4–8%) */
  4%         { background-color: #ffffff; opacity: .95; }
  4.3%       { background-color: var(--blue); opacity: .6; }
  5.1%       { background-color: #ffffff; opacity: .9; }
  5.3%       { background-color: var(--blue); opacity: .6; }
  6.2%       { background-color: #ffffff; opacity: .92; }
  6.5%       { background-color: var(--blue); opacity: .6; }
  7.2%       { background-color: #ffffff; opacity: .85; }
  7.4%       { background-color: var(--blue); opacity: .6; }

  /* Hold blue with NO pre-fade, then a quick double-flash */
  35.99%     { background-color: var(--blue); opacity: .6; }  /* hard hold */
  36%        { background-color: #ffffff; opacity: .95; }     /* flash 1 */
  36.2%      { background-color: var(--blue); opacity: .6; }
  36.8%      { background-color: #ffffff; opacity: .88; }     /* flash 2 */
  37%        { background-color: var(--blue); opacity: .6; }  /* back to calm */

  /* Calm the rest of the cycle */
  60%, 100%  { background-color: var(--blue); opacity: .6; }
}

/* Reduced motion: disable the effect */
@media (prefers-reduced-motion: reduce){
  .hero .img-wrapper::after,
  .hero .img-wrapper::before{
    animation: none !important;
    opacity: 0.6 !important;      /* keep the blue tint only */
    background-color: var(--blue) !important;
  }
}