/*
Theme Name: Bergenmail
Theme URI: https://bergenmail.de/
Author: Bergenmail
Description: Dynamisches One-Page-Theme für bergenmail.de mit vier saisonalen Berglandschaften sowie Tageszeit- und Wetterzuständen für Bielefeld.
Version: 1.4.9
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bergenmail
*/

:root {
  --bm-sky-top: #f7f4ed;
  --bm-sky-mid: #fbf9f3;
  --bm-sky-bottom: #fdfcf7;
  --bm-ink: #242433;
  --bm-muted: #625e62;
  --bm-domain: #4f4d53;
  --bm-landscape-brightness: 1;
  --bm-landscape-saturate: 1;
  --bm-landscape-sepia: 0;
  --bm-landscape-hue: 0deg;
  --bm-weather-dim: 0;
  --bm-cloud-opacity: 0;
  --bm-fog-opacity: 0;
  --bm-rain-opacity: 0;
  --bm-snow-opacity: 0;
  --bm-stars-opacity: 0;
  --bm-celestial-opacity: 0;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--bm-sky-bottom); }
body {
  min-height: 100svh;
  background: var(--bm-sky-bottom);
  color: var(--bm-ink);
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 600ms ease, color 600ms ease;
}

a { color: inherit; }

.bergenmail-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vh, 72px) clamp(18px, 4vw, 64px) clamp(54px, 7vh, 88px);
  background:
    linear-gradient(rgba(28, 31, 39, var(--bm-weather-dim)), rgba(28, 31, 39, var(--bm-weather-dim))),
    linear-gradient(180deg, var(--bm-sky-top) 0%, var(--bm-sky-mid) 46%, var(--bm-sky-bottom) 100%);
}

.bergenmail-content {
  position: relative;
  z-index: 3;
  width: min(100%, 1120px);
  text-align: center;
}

.bergenmail-domain {
  position: relative;
  z-index: 9;
  margin: 0 0 clamp(34px, 5vh, 58px);
  color: var(--bm-domain);
  font-size: clamp(1rem, 1.35vw, 1.35rem);
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1.2;
}

.bergenmail-scene {
  position: relative;
  width: min(100%, 930px);
  aspect-ratio: 3 / 2;
  margin: 0 auto clamp(30px, 4.5vh, 50px);
}

.bergenmail-landscape,
.bergenmail-stars,
.bergenmail-celestial,
.bergenmail-clouds,
.bergenmail-fog,
.bergenmail-precipitation,
.bergenmail-weather-shade {
  position: absolute;
  inset: 0;
}

.bergenmail-landscape {
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    brightness(var(--bm-landscape-brightness))
    saturate(var(--bm-landscape-saturate))
    sepia(var(--bm-landscape-sepia))
    hue-rotate(var(--bm-landscape-hue));
  transition: filter 700ms ease;
}

.bergenmail-stars {
  z-index: 1;
  opacity: var(--bm-stars-opacity);
  background-image:
    radial-gradient(circle at 8% 18%, rgba(255,255,255,.94) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 18% 32%, rgba(247,246,241,.54) 0 1px, transparent 1.6px),
    radial-gradient(circle at 27% 13%, rgba(255,255,255,.88) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 37% 27%, rgba(255,255,255,.64) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 47% 11%, rgba(255,255,255,.85) 0 1px, transparent 1.6px),
    radial-gradient(circle at 57% 24%, rgba(247,246,241,.54) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 66% 9%, rgba(255,255,255,.92) 0 1.3px, transparent 1.9px),
    radial-gradient(circle at 76% 30%, rgba(247,246,241,.50) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 87% 15%, rgba(255,255,255,.88) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 94% 36%, rgba(255,255,255,.60) 0 1px, transparent 1.6px),
    radial-gradient(circle at 33% 40%, rgba(255,255,255,.54) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 71% 41%, rgba(255,255,255,.56) 0 .8px, transparent 1.4px);
  transition: opacity 700ms ease;
}

.bergenmail-celestial {
  z-index: 2;
  pointer-events: none;
}

.bergenmail-sun,
.bergenmail-moon {
  position: absolute;
  display: block;
  opacity: 0;
  transition: opacity 700ms ease, transform 700ms ease;
}

.bergenmail-sun {
  top: 18%;
  right: 18%;
  width: clamp(34px, 5vw, 58px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f2c39f;
  box-shadow: 0 0 42px rgba(230, 157, 109, .22);
}

.phase-evening .bergenmail-sun {
  top: 27%;
  right: 13%;
  opacity: var(--bm-celestial-opacity);
}

.phase-morning .bergenmail-sun {
  opacity: var(--bm-celestial-opacity);
}

.bergenmail-moon {
  top: 8%;
  right: 12%;
  width: clamp(42px, 5.8vw, 68px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(243, 238, 220, .12));
}

.phase-night .bergenmail-moon {
  opacity: var(--bm-celestial-opacity);
}

.bergenmail-clouds {
  z-index: 3;
  opacity: var(--bm-cloud-opacity);
  pointer-events: none;
  transition: opacity 700ms ease;
}

.bergenmail-cloud {
  position: absolute;
  display: block;
  border-radius: 999px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: blur(9px);
  animation: bm-cloud-float 150s linear infinite alternate;
  will-change: transform;
}

.bergenmail-cloud-a {
  top: 14%;
  left: 8.5%;
  width: 18.5%;
  height: 9.5%;
  background-image:
    radial-gradient(ellipse at 18% 62%, rgba(247,246,241,.34) 0 22%, rgba(247,246,241,.18) 31%, transparent 50%),
    radial-gradient(ellipse at 46% 42%, rgba(247,246,241,.30) 0 25%, rgba(247,246,241,.16) 34%, transparent 53%),
    radial-gradient(ellipse at 74% 58%, rgba(247,246,241,.26) 0 21%, rgba(247,246,241,.13) 30%, transparent 49%);
}

.bergenmail-cloud-b {
  top: 15%;
  right: 10.5%;
  width: 18.5%;
  height: 9.5%;
  background-image:
    radial-gradient(ellipse at 21% 58%, rgba(247,246,241,.31) 0 22%, rgba(247,246,241,.16) 31%, transparent 50%),
    radial-gradient(ellipse at 50% 40%, rgba(247,246,241,.30) 0 24%, rgba(247,246,241,.15) 33%, transparent 52%),
    radial-gradient(ellipse at 77% 58%, rgba(247,246,241,.24) 0 20%, rgba(247,246,241,.12) 29%, transparent 47%);
  animation-duration: 175s;
}

.bergenmail-cloud-c {
  top: 18%;
  left: 43.5%;
  width: 12%;
  height: 6.5%;
  background-image:
    radial-gradient(ellipse at 28% 60%, rgba(247,246,241,.19) 0 20%, rgba(247,246,241,.09) 29%, transparent 46%),
    radial-gradient(ellipse at 62% 42%, rgba(247,246,241,.16) 0 19%, rgba(247,246,241,.08) 28%, transparent 45%);
  animation-duration: 195s;
}

.bergenmail-weather-shade {
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse 82% 72% at 50% 50%, rgba(46, 51, 58, .12) 0%, rgba(46, 51, 58, .075) 48%, rgba(46, 51, 58, .03) 68%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 10%, #000 28%, #000 74%, rgba(0,0,0,.45) 89%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 10%, #000 28%, #000 74%, rgba(0,0,0,.45) 89%, transparent 100%);
  opacity: 0;
}

.bergenmail-fog {
  z-index: 6;
  opacity: var(--bm-fog-opacity);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 11%, #000 30%, #000 74%, rgba(0,0,0,.52) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 11%, #000 30%, #000 74%, rgba(0,0,0,.52) 88%, transparent 100%);
  background:
    linear-gradient(180deg, transparent 14%, rgba(247,247,243,.54) 43%, rgba(247,247,243,.72) 58%, rgba(247,247,243,.26) 79%, transparent 100%),
    radial-gradient(ellipse at 50% 58%, rgba(247,246,241,.50) 0 28%, transparent 67%);
  filter: blur(9px);
  transition: opacity 700ms ease;
}

.bergenmail-precipitation {
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.bergenmail-precipitation::before,
.bergenmail-precipitation::after {
  content: "";
  position: absolute;
  inset: -24%;
  opacity: 0;
  background-repeat: repeat;
  will-change: transform, opacity;
}

.weather-rain .bergenmail-precipitation::before,
.weather-thunder .bergenmail-precipitation::before {
  background-image:
    radial-gradient(ellipse at center, rgba(185,198,211,.90) 0 1.1px, transparent 1.75px),
    radial-gradient(ellipse at center, rgba(171,187,202,.74) 0 .95px, transparent 1.55px),
    radial-gradient(ellipse at center, rgba(204,215,226,.58) 0 .85px, transparent 1.45px);
  filter: blur(.12px);
}

.weather-rain .bergenmail-precipitation::before {
  opacity: calc(var(--bm-rain-opacity) * .8);
  background-size: 34px 34px, 50px 50px, 66px 66px;
  background-position: 6px 4px, 18px 20px, 2px 30px;
  transform: rotate(9deg) scaleY(2.0);
  animation: bm-rain-particles 1.02s linear infinite;
}

.weather-rain .bergenmail-precipitation::after {
  opacity: calc(var(--bm-rain-opacity) * .5);
  background-image:
    radial-gradient(ellipse at center, rgba(185,198,211,.80) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at center, rgba(171,187,202,.60) 0 .86px, transparent 1.45px);
  background-size: 28px 28px, 46px 46px;
  background-position: 16px 8px, 2px 20px;
  transform: rotate(10deg) scaleY(2.2);
  filter: blur(.14px);
  animation: bm-rain-particles-alt .82s linear infinite;
}

.weather-thunder .bergenmail-precipitation::before {
  opacity: calc(var(--bm-rain-opacity) * .88);
  background-size: 28px 28px, 40px 40px, 54px 54px;
  background-position: 4px 6px, 12px 18px, 2px 28px;
  transform: rotate(9deg) scaleY(2.1);
  animation: bm-rain-particles .8s linear infinite;
}

.weather-thunder .bergenmail-precipitation::after {
  opacity: calc(var(--bm-rain-opacity) * .62);
  background-image:
    radial-gradient(ellipse at center, rgba(177,191,205,.88) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at center, rgba(160,176,192,.70) 0 .9px, transparent 1.45px),
    radial-gradient(ellipse at center, rgba(205,215,226,.55) 0 .82px, transparent 1.35px);
  background-size: 22px 22px, 34px 34px, 46px 46px;
  background-position: 10px 6px, 2px 18px, 22px 34px;
  transform: rotate(10deg) scaleY(2.35);
  filter: blur(.18px);
  animation: bm-rain-particles-dense .66s linear infinite;
}

.weather-snow .bergenmail-precipitation::after {
  opacity: var(--bm-snow-opacity);
  background-image:
    radial-gradient(circle, rgba(255,255,255,.92) 0 1.8px, transparent 2.3px),
    radial-gradient(circle, rgba(255,255,255,.74) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(255,255,255,.82) 0 1.5px, transparent 2px);
  background-size: 76px 76px, 112px 112px, 148px 148px;
  background-position: 12px 18px, 50px 0, 8px 72px;
  animation: bm-snow 12s linear infinite;
}

.bergenmail-title {
  position: relative;
  z-index: 9;
  margin: 0;
  color: var(--bm-ink);
  font-size: clamp(2.8rem, 5.35vw, 5.35rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: .98;
  text-wrap: balance;
}

.bergenmail-subtitle {
  position: relative;
  z-index: 9;
  margin: clamp(16px, 2.2vh, 24px) 0 0;
  color: var(--bm-muted);
  font-size: clamp(1.15rem, 1.75vw, 1.7rem);
  font-weight: 400;
  letter-spacing: .015em;
  line-height: 1.35;
  text-wrap: balance;
}

.bergenmail-attribution {
  position: absolute;
  z-index: 10;
  right: 14px;
  bottom: 10px;
  margin: 0;
  color: var(--bm-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  line-height: 1.2;
  opacity: .45;
}

.bergenmail-attribution a { text-decoration: none; }
.bergenmail-attribution a:hover,
.bergenmail-attribution a:focus-visible { text-decoration: underline; opacity: 1; }

/* Tageszeit */
.phase-morning {
  --bm-sky-top: #eee8e1;
  --bm-sky-mid: #f7eadd;
  --bm-sky-bottom: #fdfbf5;
  --bm-landscape-brightness: 1.01;
  --bm-landscape-saturate: .94;
  --bm-celestial-opacity: .78;
}

.phase-day {
  --bm-sky-top: #f7f4ed;
  --bm-sky-mid: #fbf9f3;
  --bm-sky-bottom: #fdfcf7;
}

.phase-evening {
  --bm-sky-top: #d9c1ba;
  --bm-sky-mid: #eed8ca;
  --bm-sky-bottom: #fbf0df;
  --bm-ink: #292536;
  --bm-muted: #665c64;
  --bm-domain: #5a5057;
  --bm-landscape-brightness: .93;
  --bm-landscape-saturate: .92;
  --bm-landscape-sepia: .10;
  --bm-celestial-opacity: .88;
}

.phase-night {
  --bm-sky-top: #18212d;
  --bm-sky-mid: #263140;
  --bm-sky-bottom: #343b46;
  --bm-ink: #f3efe7;
  --bm-muted: #d4cec3;
  --bm-domain: #ded8cd;
  --bm-landscape-brightness: .54;
  --bm-landscape-saturate: .58;
  --bm-landscape-hue: 8deg;
  --bm-stars-opacity: .78;
  --bm-celestial-opacity: .88;
}

/* Jahreszeiten werden ab 1.4.0 durch vier eigene Basisillustrationen dargestellt. */
.season-spring,
.season-summer,
.season-autumn,
.season-winter {
  --bm-landscape-saturate: 1;
  --bm-landscape-sepia: 0;
  --bm-landscape-hue: 0deg;
}

/* Tageszeit verändert weiterhin Licht und Farbstimmung der jeweiligen Saison. */
.phase-evening {
  --bm-landscape-brightness: .93;
  --bm-landscape-saturate: .94;
  --bm-landscape-sepia: .06;
}
.phase-night {
  --bm-landscape-brightness: .53;
  --bm-landscape-saturate: .58;
  --bm-landscape-hue: 8deg;
}

/* Wetter */
.weather-partly-cloudy { --bm-cloud-opacity: .42; }
.weather-overcast {
  --bm-cloud-opacity: .78;
  --bm-weather-dim: .08;
}
.weather-overcast .bergenmail-weather-shade { opacity: .48; }
.weather-fog {
  --bm-cloud-opacity: .34;
  --bm-fog-opacity: .76;
  --bm-weather-dim: .035;
}
.weather-rain {
  --bm-cloud-opacity: .62;
  --bm-rain-opacity: .50;
  --bm-weather-dim: .10;
}
.weather-rain .bergenmail-cloud { filter: blur(11px) brightness(.88); }
.weather-rain .bergenmail-weather-shade { opacity: .58; }
.weather-snow {
  --bm-cloud-opacity: .58;
  --bm-snow-opacity: .78;
  --bm-weather-dim: .035;
}
.weather-thunder {
  --bm-cloud-opacity: .82;
  --bm-rain-opacity: .76;
  --bm-weather-dim: .24;
}
.weather-thunder .bergenmail-cloud { filter: blur(11px) brightness(.72) contrast(.96); }
.weather-thunder .bergenmail-weather-shade {
  opacity: .92;
  background:
    radial-gradient(ellipse 88% 72% at 50% 43%, rgba(28,35,43,.35) 0%, rgba(38,43,50,.22) 45%, rgba(45,49,54,.08) 70%, transparent 100%),
    radial-gradient(ellipse at 56% 16%, rgba(255,255,255,.035), transparent 30%);
}
.phase-night .bergenmail-cloud { filter: blur(10px) brightness(.76); }
.phase-night .bergenmail-fog { filter: blur(9px) brightness(.72); }

@keyframes bm-cloud-float {
  from { transform: translate3d(-.6%, 0, 0); }
  to   { transform: translate3d(.6%, .5%, 0); }
}

@keyframes bm-rain-particles {
  from { transform: rotate(9deg) scaleY(2.05) translate3d(-5%, -22%, 0); }
  to   { transform: rotate(9deg) scaleY(2.05) translate3d(7%, 28%, 0); }
}

@keyframes bm-rain-particles-alt {
  from { transform: rotate(10deg) scaleY(2.2) translate3d(-7%, -28%, 0); }
  to   { transform: rotate(10deg) scaleY(2.2) translate3d(9%, 32%, 0); }
}

@keyframes bm-rain-particles-dense {
  from { transform: rotate(10deg) scaleY(2.35) translate3d(-8%, -30%, 0); }
  to   { transform: rotate(10deg) scaleY(2.35) translate3d(10%, 36%, 0); }
}

@keyframes bm-snow {
  from { transform: translate3d(0, -8%, 0); }
  to   { transform: translate3d(3%, 10%, 0); }
}

@media (max-width: 700px) {
  .bergenmail-page {
    align-items: flex-start;
    padding-top: 44px;
    padding-bottom: 62px;
  }

  .bergenmail-domain {
    margin-bottom: 34px;
    font-size: .95rem;
  }

  .bergenmail-scene {
    width: 104%;
    max-width: none;
    margin-left: -2%;
    margin-right: -2%;
    margin-bottom: 28px;
  }

  .bergenmail-title {
    font-size: clamp(2.5rem, 12vw, 4rem);
    line-height: 1.02;
  }

  .bergenmail-subtitle {
    font-size: clamp(1.05rem, 5vw, 1.3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}