/*
 * Kőgyakra — custom styles (not part of Webflow export).
 * Load AFTER css/kogyakra.webflow.css in index.html.
 */

/* =============================================================================
   Season & mode — CSS custom properties
   Palettes: kogyakra-instructions/instructions/05_seasonal-themes.md
             kogyakra-instructions/instructions/06_day-night-modes.md
   ============================================================================= */

:root {
  --color-bg: #F2EBE0;
  --color-text: #261E12;
  --color-accent: #B5631A;
  --color-subtle: #C4A882;
  --color-highlight: #E8B86D;
  --font-weight-display: 400;
  transition:
    background-color 1.5s ease,
    color 1.5s ease;
}

[data-season="spring"] {
  --color-bg: #F5F0E8;
  --color-text: #2C2416;
  --color-accent: #7A9E7E;
  --color-subtle: #C9B99A;
  --color-highlight: #E8D5B0;
  --font-weight-display: 300;
}

[data-season="summer"] {
  --color-bg: #F7F3EC;
  --color-text: #1E1A10;
  --color-accent: #4A7C59;
  --color-subtle: #D4C5A0;
  --color-highlight: #F2C94C;
  --font-weight-display: 400;
}

[data-season="autumn"] {
  --color-bg: #F2EBE0;
  --color-text: #261E12;
  --color-accent: #B5631A;
  --color-subtle: #C4A882;
  --color-highlight: #E8B86D;
  --font-weight-display: 400;
}

[data-season="winter"] {
  --color-bg: #EEECEA;
  --color-text: #1A1A1F;
  --color-accent: #5C6B7A;
  --color-subtle: #B8BAC0;
  --color-highlight: #D4C5A8;
  --font-weight-display: 300;
}

[data-mode="evening"] {
  --color-bg: #1A1510;
  --color-text: #E8DDD0;
  --color-subtle: #3D3228;
  --color-highlight: #C49A3C;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* =============================================================================
   Hero — rotating background images
   ============================================================================= */

.section_hero {
  position: relative;
  background-image: none !important;
  background-color: #000;
}

.hero-bg,
.hero-bg-next {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  z-index: 0;
  transition: opacity 1.8s ease-in-out;
  pointer-events: none;
}

.hero-bg {
  opacity: 0;
}

.hero-bg.is-visible {
  opacity: 1;
}

.hero-bg-next {
  opacity: 0;
}

.hero-bg-next.is-visible {
  opacity: 1;
}

.section_hero > * {
  position: relative;
  z-index: 1;
}