/**
 * themes/winter/theme.css
 * Self-contained modular stylesheet for the "Winter" (winter) theme.
 * Encapsulates theme assets, CSS variables, scroll/image filter modes, ornament framing, lighting, and custom surface rules.
 */

html[data-season="winter"],
body.season-winter {
  --hero-image-url: url("../../images/hero_winter.webp");
  --theme-card-radius: 16px;
  --theme-inner-card-radius: 14px;
}

html[data-season="winter"] main > section {
  border-radius: var(--theme-card-radius, 16px);
}

html[data-season="winter"] .project-card {
  border-radius: var(--theme-inner-card-radius, 14px);
}

/* ==========================================================================
   MODULAR SCROLL & IMAGE FILTER MODES FOR THEME: WINTER
   ========================================================================== */

/* 1. Default mode: grayscale_to_color (grayscale when out of view, full color when scrolled into view) */
html[data-season="winter"][data-image-scroll-effect="grayscale_to_color"] .hero-image,
html[data-season="winter"]:not([data-image-scroll-effect]) .hero-image {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}
html[data-season="winter"][data-image-scroll-effect="grayscale_to_color"] .hero.in-view .hero-image,
html[data-season="winter"]:not([data-image-scroll-effect]) .hero.in-view .hero-image {
  filter: grayscale(0%);
}
html[data-season="winter"][data-image-scroll-effect="grayscale_to_color"] .project-card img,
html[data-season="winter"]:not([data-image-scroll-effect]) .project-card img {
  filter: grayscale(100%);
}
html[data-season="winter"][data-image-scroll-effect="grayscale_to_color"] .project-card.img-in-view img,
html[data-season="winter"]:not([data-image-scroll-effect]) .project-card.img-in-view img {
  filter: grayscale(0%);
}

/* 2. Mode: full_color (images are always 100% color regardless of scroll position) */
html[data-season="winter"][data-image-scroll-effect="full_color"] .hero-image,
html[data-season="winter"][data-image-scroll-effect="full_color"] .hero.in-view .hero-image,
html[data-season="winter"][data-image-scroll-effect="full_color"] .project-card img,
html[data-season="winter"][data-image-scroll-effect="full_color"] .project-card.img-in-view img {
  filter: grayscale(0%) !important;
}

/* 3. Mode: sepia_to_color (warm vintage sepia until scrolled into view) */
html[data-season="winter"][data-image-scroll-effect="sepia_to_color"] .hero-image,
html[data-season="winter"][data-image-scroll-effect="sepia_to_color"] .project-card img {
  filter: sepia(75%) contrast(0.95) brightness(0.95) !important;
}
html[data-season="winter"][data-image-scroll-effect="sepia_to_color"] .hero.in-view .hero-image,
html[data-season="winter"][data-image-scroll-effect="sepia_to_color"] .project-card.img-in-view img {
  filter: sepia(0%) contrast(1) brightness(1) !important;
}

/* 4. Mode: always_grayscale (monochrome editorial style at all scroll positions) */
html[data-season="winter"][data-image-scroll-effect="always_grayscale"] .hero-image,
html[data-season="winter"][data-image-scroll-effect="always_grayscale"] .hero.in-view .hero-image,
html[data-season="winter"][data-image-scroll-effect="always_grayscale"] .project-card img,
html[data-season="winter"][data-image-scroll-effect="always_grayscale"] .project-card.img-in-view img {
  filter: grayscale(100%) !important;
}

/* 5. Card border highlight on scroll (.project-card.in-view) */
html[data-season="winter"][data-card-scroll-highlight="off"] .project-card.in-view {
  border-color: var(--border-color) !important;
}

/* 6. Section fade-in on scroll */
html[data-season="winter"][data-section-scroll-fade="off"] main > section {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}