/* ======================================
   /assets/ui/ljh-seasons.css - V 1.0 : 2026/01/01
   SEASONS STATIC SHIFTING AND MAGICAL APPAERANCE
====================================== */


/* ==========================================================
   Endast visuella säsongseffekter

   Aktiveras via body-klass:
   .season-spring | .season-summer | .season-autumn | .season-winter
========================================================== */


/* ==================================================
   GLOBAL SEASON LAYER
================================================== */

:root {
  --snow-stop: 120px; /* exakt höjd ovanför footer där snö ska stanna */
}


.ljh-season-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20; /* över allt UI, under modals om du vill */
}



/* ==========================================================
   🌱 SPRING – VÅR
========================================================== */

.season-spring .ljh-hero-glass {
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}


/* ==========================================================
   ☀️ SUMMER – SOMMAR (SVENSK)
========================================================== */

.season-summer .ljh-hero {
  background:
    radial-gradient(
      circle at top,
      rgba(255,245,200,0.18),
      transparent 65%
    );
}


/* ==========================================================
   🍂 AUTUMN – HÖST
========================================================== */

.season-autumn .ljh-hero-glass {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 36px 90px rgba(0,0,0,0.55);
}


/* ==========================================================
   ❄️ WINTER – VINTER (SVERIGE)
========================================================== */

.season-winter {
  --season-accent: #9ecbff;
}

/* Hero bakgrund – kall luft */
.season-winter .ljh-hero {
  background:
    radial-gradient(
      circle at top,
      rgba(180,220,255,0.12),
      transparent 60%
    );
}

/* Glas – kallare reflektion */
.season-winter .ljh-hero-glass {
  box-shadow:
    inset 0 0 60px rgba(255,255,255,0.18),
    0 20px 45px rgba(0,0,0,0.45),
    0 0 55px rgba(56,189,248,0.40);
}

/* CTA – kall halo */
.season-winter .ljh-btn-primary {
  box-shadow:
    0 0 22px rgba(140,200,255,0.65),
    0 18px 38px rgba(0,0,0,0.6);
}


/* ==========================================================
   ❄️ SNÖ – FALL & LANDNING
========================================================== */

.season-winter .flake-fall {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.season-winter .flake {
  position: absolute;
  top: -20px;
  left: var(--x);

  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);

  animation: snowFall 7s linear infinite;
  opacity: 0;

  filter:
    drop-shadow(0 0 6px rgba(180,220,255,0.35))
    drop-shadow(0 2px 2px rgba(0,0,40,0.25));
}


/* Landningszon – UNDER CTA */
.hero-snow-floor {
  position: absolute;
  left: 0;
  right: 0;

  /* Justera exakt var snön "samlas" */
  top: calc(100% - 140px);
  height: 140px;

  pointer-events: none;
  z-index: 6;

  background: radial-gradient(
    ellipse at center top,
    rgba(255,255,255,0.18),
    transparent 70%
  );
}

/* ===============================
   ❄️ WINTER – SNOW FALL
=============================== */

@keyframes snowFall {
  0% {
    transform: translateY(-40px);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  80% {
    transform: translateY(calc(100vh - var(--snow-stop)));
    opacity: 1;
  }

  100% {
    transform: translateY(calc(100vh - var(--snow-stop)));
    opacity: 0;
  }
}



/* ==========================================================
   ❄️ WINTER – FOOTER SNÖDRIVOR (STABIL)
   Endast aktiv under .season-winter
========================================================== */

.season-winter footer {
  position: relative;
  z-index: 10;
  overflow: visible;

  /* subtil vinterkänsla – inte frostblock */
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,0.16),
    inset 0 1px 3px rgba(255,255,255,0.22);
}

/* BAS – tung snö som lagt sig */
.season-winter footer::before {
  content: "";
  position: absolute;
  top: -95px;
  left: -10%;
  width: 120%;
  height: 120px;

  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(ellipse at 12% 85%, rgba(255,255,255,0.95), transparent 70%),
    radial-gradient(ellipse at 32% 65%, rgba(255,255,255,0.9), transparent 72%),
    radial-gradient(ellipse at 58% 80%, rgba(255,255,255,0.92), transparent 70%),
    radial-gradient(ellipse at 82% 60%, rgba(255,255,255,0.88), transparent 75%);

  filter: blur(2.5px);
}

/* TOPP – färsk snö */
/* ==========================================================
   ❄️ WINTER – RIMFROST (MAX 3px)
========================================================== */

.season-winter footer::after {
  content: "";
  position: absolute;
  top: -3px;              /* exakt där frost ska ligga */
  left: 0;
  right: 0;
  height: 3px;

  pointer-events: none;
  z-index: 3;

  /* subtil rimfrost – inget snötäcke */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.65),
    rgba(255,255,255,0.15),
    rgba(255,255,255,0.0)
  );

  /* minimal lyster, ingen dimma */
  filter: none;
}