/* Layered alpine illustration. Transforms keep the scene inexpensive to animate. */
.hero.winter-hero {
  min-height: 700px;
  padding: 0;
  align-items: start;
  background: #153c53;
}
.winter-hero::before { display: none; }
.winter-hero .hero-copy {
  position: relative;
  z-index: 2;
  width: min(100%, var(--maxw));
  padding-top: 76px !important;
  padding-bottom: 240px !important;
  pointer-events: none;
}
.winter-hero .hero-copy a { pointer-events: auto; }
.winter-hero h1 { max-width: 700px; font-size: clamp(3.4rem, 6.5vw, 6rem); text-wrap: balance; }
.winter-hero .hero-copy > div > p { max-width: 520px; color: #e0ebee; text-shadow: 0 2px 12px #153c5366; }
.alpine-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: #d7e7ec; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.swiss-mark { display: inline-grid; width: 21px; height: 21px; place-items: center; border-radius: 4px; background: #bb4e45; color: white; font-size: 19px; line-height: 1; letter-spacing: 0; }
.alpine-scene { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.alpine-scene svg { display: block; width: 100%; height: 100%; }
.scene-controls { position: absolute; z-index: 3; bottom: 26px; left: max(28px, calc((100% - 1104px) / 2)); display: flex; align-items: center; gap: 18px; }
.scene-toggle { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #32536533; border-radius: 99px; padding: 9px 15px; color: #24465a; background: #f8fcffe8; font-size: .75rem; font-weight: 600; cursor: pointer; backdrop-filter: blur(8px); }
.scene-toggle:hover { background: #fff; }
.scene-toggle:focus-visible { outline: 3px solid #174f3d; outline-offset: 4px; }
.scene-caption { color: #325365; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.cloud { animation: cloud-drift 65s ease-in-out infinite alternate; }
.cloud-far { animation-duration: 90s; animation-delay: -25s; }
.smoke { transform-box: fill-box; transform-origin: center bottom; animation: chimney-smoke 7s ease-out infinite; }
.smoke-two { animation-delay: -2.3s; }
.smoke-three { animation-delay: -4.6s; }
.flag-fabric { transform-origin: 1323px 622px; animation: flag-flutter 3s ease-in-out infinite alternate; }
.cow-walk { animation: cow-stroll 38s linear infinite; }
.cow-follower { animation-duration: 46s; animation-delay: -12s; }
.cow-calf { animation-duration: 34s; animation-delay: -8s; }
.cow-facing { animation: cow-turn 38s steps(1, end) infinite; }
.cow-follower .cow-facing { animation-duration: 46s; animation-delay: -12s; }
.cow-calf .cow-facing { animation-duration: 34s; animation-delay: -8s; }
.cow-body { animation: cow-bob 1.2s ease-in-out infinite; }
.cow-leg { animation: cow-step 1.2s ease-in-out infinite alternate; }
.cow-leg-front { transform-origin: 79px 48px; }
.cow-leg-back { transform-origin: 28px 48px; animation-delay: -.6s; }
.cow-leg-far { animation-direction: alternate-reverse; }
.cow-tail { transform-origin: 14px 29px; animation: tail-swish 4s ease-in-out infinite; }
.cow-head { transform-origin: 88px 29px; animation: head-nod 6s ease-in-out infinite; }
.bell { transform-origin: 97px 46px; animation: bell-swing 1.2s ease-in-out infinite alternate; }
.snowflake { animation: snowfall var(--fall-time, 12s) linear var(--fall-delay, 0s) infinite; }
.alpine-scene.is-paused *, .alpine-scene.is-paused use { animation-play-state: paused !important; }
@keyframes cloud-drift { from { transform: translateX(-35px); } to { transform: translateX(75px); } }
@keyframes chimney-smoke { 0% { opacity: 0; transform: translate(0, 12px) scale(.65); } 20% { opacity: .3; } 100% { opacity: 0; transform: translate(-30px, -100px) scale(1.8); } }
@keyframes flag-flutter { from { transform: skewY(-5deg) scaleX(.92); } to { transform: skewY(5deg) scaleX(1); } }
@keyframes cow-stroll { 0%, 100% { transform: translateX(-55px); } 50% { transform: translateX(55px); } }
@keyframes cow-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes cow-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes cow-step { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes tail-swish { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(16deg); } 90% { transform: rotate(-9deg); } }
@keyframes head-nod { 0%, 65%, 100% { transform: rotate(0); } 80% { transform: rotate(7deg); } }
@keyframes bell-swing { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
@keyframes snowfall { from { transform: translate(0, -180px); } to { transform: translate(90px, 180px); } }
@media (min-width: 1600px) { .hero.winter-hero { min-height: 780px; } }
@media (max-width: 900px) {
  .winter-hero .hero-copy { padding-top: 75px !important; }
  .winter-hero h1 { max-width: 550px; }
}
@media (max-width: 640px) {
  .hero.winter-hero { min-height: 660px; }
  .winter-hero .hero-copy { padding-top: 42px !important; padding-bottom: 220px !important; }
  .winter-hero h1 { max-width: 360px; font-size: clamp(3rem, 11vw, 4rem); }
  .winter-hero .hero-copy > div > p { max-width: 360px; font-size: 1rem; }
  .alpine-eyebrow { font-size: .63rem; letter-spacing: .17em; margin-bottom: 22px; }
  .alpine-scene svg { position: absolute; bottom: 0; left: calc(50% - 520px); width: 960px; height: 680px; max-width: none; }
  .chalet { transform: translate(-300px, 25px); }
  .scene-controls { left: 21px; bottom: 22px; }
  .scene-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .alpine-scene * { animation: none !important; }
}
