/* Time owns the photograph, static tone and light. Theme owns the existing
   contrast overlays in index.html. No theme/time combination selectors. */
:root {
  --hero-image-desktop:url('/assets/images/hero-desk.jpg?v=20260814-theme');
  --hero-image-mobile:url('/assets/images/hero-desk-mobile-window.jpg?v=20260816-jpeg');
  --hero-image:var(--hero-image-desktop);
  --hero-filter:saturate(0.88) contrast(0.97);
  --hero-light-opacity:0.06;
  --hero-light:radial-gradient(ellipse at 82% 22%, #fff4d6, transparent 65%);
  --hero-parallax-y:0px;
  --hero-exit-fade-opacity:1;
  /* Season is a restrained, independent correction after the TIME tone. */
  --season-saturation:1;
  --season-brightness:1;
  --season-warmth:0;
  --season-coolness:0deg;
  --season-filter:saturate(var(--season-saturation)) brightness(var(--season-brightness)) sepia(var(--season-warmth)) hue-rotate(var(--season-coolness));
  /* Weather is a small, independent correction after TIME and SEASON. */
  --weather-filter:saturate(1) brightness(1);
  --weather-light-filter:brightness(1);
  --weather-light-duration:32s;
  --weather-plant-duration:28s;
}
[data-season="spring"] {
  --season-saturation:1.025;
  --season-brightness:1.015;
  --season-warmth:0.012;
}
[data-season="summer"] {
  --season-saturation:1.055;
  --season-brightness:1.01;
}
[data-season="autumn"] {
  --season-saturation:0.96;
  --season-brightness:0.99;
  --season-warmth:0.018;
  --season-coolness:-1deg;
}
[data-season="winter"] {
  --season-saturation:0.955;
  --season-brightness:1.015;
  --season-coolness:2deg;
}
[data-weather="precipitation"] {
  --weather-filter:saturate(0.97) brightness(0.985);
  --weather-light-filter:brightness(0.90);
  --weather-light-duration:38s;
  --weather-plant-duration:34s;
}
[data-atelier-time="dawn"] {
  --hero-filter:saturate(0.64) contrast(0.90) brightness(1.10) sepia(0.06);
  --hero-light-opacity:0.24;
  --hero-light:radial-gradient(ellipse at 74% 12%, #eff3db, transparent 62%);
}
[data-atelier-time="evening"] {
  --hero-filter:saturate(1.10) contrast(1.03) brightness(0.86) sepia(0.14) hue-rotate(-8deg);
  --hero-light-opacity:0.27;
  --hero-light:radial-gradient(ellipse at 82% 58%, #d79a53, transparent 64%);
}
[data-atelier-time="night"] {
  --hero-image-desktop:url('/assets/images/hero-desk-night.jpg?v=20260816-jpeg');
  --hero-image-mobile:url('/assets/images/hero-desk-mobile-night-window.jpg?v=20260816-jpeg');
  --hero-filter:saturate(0.94) contrast(0.98);
  --hero-light-opacity:0.035;
  --hero-light:radial-gradient(ellipse at 78% 45%, #e6c296, transparent 55%);
}
.hero-image {
  position:absolute;
  inset:0;
  --hero-parallax-y:0px;
  background-size:cover;
  background-position:center 38%;
  transform:translate3d(0, var(--hero-parallax-y), 0);
  filter:var(--hero-filter) var(--season-filter) var(--weather-filter);
}
.hero-light {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:var(--hero-light);
  opacity:var(--hero-light-opacity);
  filter:var(--weather-light-filter);
}
.hero[data-hero-exit-fade="on"] .hero-title-wrap,
.hero[data-hero-exit-fade="on"] .hero-copy {
  opacity:var(--hero-exit-fade-opacity);
}
.hero[data-hero-exit-fade="on"] .hero-light {
  opacity:calc(var(--hero-light-opacity) * var(--hero-exit-fade-opacity));
}
.care-tips {
  background:var(--paper-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.care-tip-card {
  min-height:clamp(220px, 26vw, 300px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  padding:clamp(28px, 5vw, 52px);
  border:1px solid var(--line);
  background:var(--paper);
}
.care-tip-copy { max-width:54ch; }
.care-tip-card h3 {
  margin:0 0 14px;
  font-size:clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight:600;
  line-height:1.55;
}
.care-tip-card p {
  margin:0;
  color:var(--ink-soft);
  line-height:1.85;
}
.care-tip-link {
  align-self:flex-start;
  color:var(--ink);
  font-size:0.92rem;
  text-decoration:underline;
  text-decoration-color:var(--sage);
  text-underline-offset:0.24em;
}
.care-tip-link:hover { color:var(--clay); }
@media (max-width:760px) {
  :root { --hero-image:var(--hero-image-mobile); }
}
/* Content remains visible when any script fails; the existing one-time
   entrance is optional. */
.hero h1.tate .tl,
.hero .hero-copy p.lead,
.hero .hero-copy .hero-actions {
  opacity:1;
  transform:none;
}
.hero .hero-copy .eyebrow {
  opacity:0.86;
  transform:none;
}
/* Keep the existing one-time entrance without hiding the no-JS baseline. */
@keyframes atelier-enter {
  from { opacity:0; transform:translateY(12px); }
}
.hero.in h1.tate .tl {
  animation:atelier-enter 0.95s var(--ease-grow) backwards;
}
.hero.in h1.tate .tl:nth-child(2) { animation-delay:0.14s; }
.hero.in .hero-copy .eyebrow,
.hero.in .hero-copy p.lead,
.hero.in .hero-copy .hero-actions {
  animation:atelier-enter var(--dur-med) var(--ease-grow) backwards;
}
.hero.in .hero-copy .eyebrow { animation-delay:0.32s; }
.hero.in .hero-copy p.lead { animation-delay:0.4s; }
.hero.in .hero-copy .hero-actions { animation-delay:0.55s; }

/* Ambient motion is deliberately independent from the one-time entrance.
   It moves only the existing light and photographic plant layers: no animated
   filter or gradient values, and no additional visual-effect layer. */
@keyframes atelier-light-ambient {
  0%, 100% {
    opacity:calc(var(--hero-light-opacity) * 0.88);
    transform:translate3d(-0.7%, calc(0.5% + var(--hero-parallax-y, 0px)), 0) scale(1.02);
  }
  50% {
    opacity:calc(var(--hero-light-opacity) * 1.08);
    transform:translate3d(0.7%, calc(-0.5% + var(--hero-parallax-y, 0px)), 0) scale(1.045);
  }
}
@keyframes atelier-plant-ambient {
  0%, 100% {
    transform:translate3d(-1px, calc(2px + var(--hero-parallax-y, 0px)), 0) rotate(-0.18deg) scale(1.012);
  }
  50% {
    transform:translate3d(1px, calc(-1px + var(--hero-parallax-y, 0px)), 0) rotate(0.18deg) scale(1.012);
  }
}
@media (prefers-reduced-motion:no-preference) {
  .hero-light {
    animation:atelier-light-ambient var(--weather-light-duration) ease-in-out infinite;
    will-change:opacity, transform;
  }
  .hero-image {
    animation:atelier-plant-ambient var(--weather-plant-duration) ease-in-out infinite;
    will-change:transform;
  }
}
/* The light remains on mobile; the photographic plant movement is omitted
   there to reduce motion and compositing cost on the smallest viewport. */
@media (max-width:760px) and (prefers-reduced-motion:no-preference) {
  .hero-image {
    animation:none;
    will-change:auto;
  }
}
@media (max-width:560px) {
  .care-tip-card {
    min-height:280px;
    padding:28px 24px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero {
    --hero-exit-fade-opacity:1 !important;
  }
  .hero-image {
    --hero-parallax-y:0px !important;
    transform:none !important;
  }
  .hero *, .hero *::before, .hero *::after {
    animation:none !important;
    transition:none !important;
  }
}