/* v8: catalogue-first home, predictable hero layers and natural winter details. */

/* The home page is the event catalogue, not an arbitrarily featured event. */
.home-catalog-page .catalog-intro {
  position: relative;
  padding-top: clamp(72px, 9vw, 124px);
  padding-bottom: clamp(44px, 6vw, 76px);
}

.home-catalog-page .catalog-intro::before {
  content: '';
  position: absolute;
  inset: 28px -7vw 0;
  z-index: -1;
  border: 1px solid rgba(219, 229, 255, .14);
  border-radius: 46% 54% 40px 40px / 22% 25% 40px 40px;
  background:
    radial-gradient(circle at 14% 20%, rgba(118, 151, 255, .24), transparent 25%),
    radial-gradient(circle at 86% 12%, rgba(255, 209, 91, .12), transparent 22%),
    linear-gradient(145deg, rgba(35, 53, 159, .74), rgba(18, 31, 105, .42));
  box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 28px 70px rgba(5, 10, 62, .22);
}

.home-catalog-page .catalog-intro > p:not(.eyebrow) {
  max-width: 690px;
}

.home-catalog-page .catalog-icons {
  filter: drop-shadow(0 12px 18px rgba(4, 8, 55, .24));
}

.home-catalog-page .catalog-group:first-of-type {
  padding-top: 42px;
}

/* Each event gets its own small illustrated mark in the brand position. */
.brand-event-icon {
  padding: 3px;
  object-fit: cover;
  object-position: center;
  border: 2px solid rgba(231, 238, 255, .68);
  border-radius: 19px;
  background: rgba(25, 39, 132, .72);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1), 0 8px 18px rgba(3, 8, 55, .3);
  filter: none;
}

.brand-event-icon[data-card-position='center-high'] { object-position: center 42%; }
.brand-event-icon[data-card-position='top'] { object-position: center top; }

/* Keep the three event layers in a strict, non-overlapping stack. */
.event-world {
  position: relative;
  z-index: 2;
  min-height: clamp(760px, 88svh, 900px);
  overflow: hidden;
  isolation: isolate;
}

.event-world .world-scene {
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.event-world .site-header {
  position: relative;
  z-index: 5;
}

.event-world > main {
  position: relative;
  z-index: 3;
}

.event-world .event-hero {
  position: relative;
  z-index: 3;
  min-height: calc(clamp(760px, 88svh, 900px) - 93px);
  padding-top: clamp(62px, 7vh, 84px);
  padding-bottom: clamp(72px, 8vh, 96px);
}

.event-world .event-hero-copy {
  z-index: 4;
  width: min(100%, 650px);
  padding: clamp(18px, 2.2vw, 30px);
  border: 1px solid rgba(224, 233, 255, .13);
  border-radius: 30px;
  background: linear-gradient(110deg, rgba(12, 25, 105, .52), rgba(16, 32, 117, .2));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 24px 52px rgba(5, 10, 57, .16);
}

.event-world .event-hero .time-unit strong {
  position: relative;
  z-index: 4;
  min-width: 1.8em;
  white-space: nowrap;
}

.event-world .world-scene .scene-prop-cluster {
  right: max(28px, calc((100vw - 1320px) / 2));
  bottom: 28px;
  z-index: 2;
  width: min(38vw, 570px);
  max-width: calc(48vw - 28px);
  max-height: 64%;
  object-fit: contain;
  object-position: center bottom;
}

.event-landscape {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: 38px;
  overflow: hidden;
}

.event-landscape .world-seam {
  top: 0;
  transform: none;
}

.event-landscape .event-indicators {
  margin-top: 0;
}

/* A soft, uneven cap of snow drawn with CSS instead of a pasted graphic. */
body:is(.theme-new_year, .theme-winter, .theme-christmas) .event-hero .time-unit::before {
  left: 1px;
  right: 1px;
  top: -7px;
  height: 21px;
  border-radius: 62% 45% 58% 38% / 74% 70% 38% 46%;
  clip-path: polygon(0 42%, 7% 17%, 19% 23%, 30% 6%, 42% 17%, 53% 0, 65% 16%, 78% 8%, 91% 23%, 100% 17%, 100% 58%, 91% 73%, 80% 57%, 69% 84%, 56% 62%, 43% 79%, 30% 57%, 18% 71%, 7% 55%, 0 63%);
  background:
    radial-gradient(ellipse at 11% 100%, #dcecff 0 8px, transparent 8.6px),
    radial-gradient(ellipse at 34% 100%, #f8fcff 0 11px, transparent 11.6px),
    radial-gradient(ellipse at 59% 100%, #e9f4ff 0 9px, transparent 9.6px),
    radial-gradient(ellipse at 86% 100%, #d6e7ff 0 10px, transparent 10.6px),
    linear-gradient(180deg, #fff 0 48%, #dbeaff 100%);
  box-shadow: inset 0 -3px 3px rgba(124, 158, 220, .22), 0 4px 7px rgba(9, 20, 92, .28);
}

body:is(.theme-new_year, .theme-winter, .theme-christmas) .event-hero .time-unit::after {
  content: '';
  position: absolute;
  left: 17%;
  top: 7px;
  z-index: 3;
  width: 7px;
  height: 9px;
  border-radius: 40% 40% 60% 60%;
  background: #e8f3ff;
  box-shadow: 45px -3px 0 1px #f7fbff;
  opacity: .92;
}

/* Layered snowfall with depth and sideways drift. */
.world-new_year .world-particles,
.world-winter .world-particles,
.world-christmas .world-particles {
  inset: -28% 0 0;
  height: 140%;
  opacity: .82;
  mask-image: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 2.2px, transparent 2.8px),
    radial-gradient(circle, rgba(225, 239, 255, .88) 0 1.4px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, .68) 0 3.2px, transparent 3.9px);
  background-position: 17px 9px, 58px 71px, 101px 37px;
  background-size: 127px 163px, 83px 109px, 211px 239px;
  filter: drop-shadow(0 0 3px rgba(223, 239, 255, .45));
  animation: snow-drift-front 13s linear infinite;
}

.world-new_year .world-particles::before,
.world-winter .world-particles::before,
.world-christmas .world-particles::before,
.world-new_year .world-particles::after,
.world-winter .world-particles::after,
.world-christmas .world-particles::after {
  content: '';
  position: absolute;
  inset: -18% -4% 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .82) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(232, 244, 255, .66) 0 1.8px, transparent 2.4px);
  background-position: 31px 49px, 97px 13px;
  background-size: 71px 97px, 149px 181px;
  animation: snow-drift-back 19s linear infinite;
}

.world-new_year .world-particles::after,
.world-winter .world-particles::after,
.world-christmas .world-particles::after {
  inset-inline: -10%;
  opacity: .48;
  filter: blur(.5px);
  animation-duration: 27s;
  animation-direction: reverse;
}

@keyframes snow-drift-front {
  from { transform: translate3d(-8px, -90px, 0); }
  to { transform: translate3d(34px, 160px, 0); }
}

@keyframes snow-drift-back {
  from { transform: translate3d(0, -80px, 0); }
  to { transform: translate3d(-34px, 150px, 0); }
}

@media (min-width: 761px) {
  .event-world .event-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(410px, .85fr);
    align-items: center;
  }
}

@media (max-width: 1050px) {
  .event-world .world-scene .scene-prop-cluster {
    right: 1%;
    width: min(45vw, 520px);
    max-width: 46vw;
  }
}

@media (max-width: 760px) {
  .home-catalog-page .catalog-intro {
    padding-top: 58px;
  }

  .home-catalog-page .catalog-intro::before {
    inset-inline: -14px;
    border-radius: 30px;
  }

  .brand-event-icon {
    padding: 2px;
    border-radius: 15px;
  }

  .event-world {
    min-height: 900px;
  }

  .event-world .event-hero {
    display: flex;
    min-height: 830px;
    padding: 70px 0 380px;
  }

  .event-world .event-hero-copy {
    padding: 20px 12px;
    border-radius: 24px;
    text-align: center;
  }

  .event-world .world-scene .scene-prop-cluster,
  .event-world .world-new_year .scene-prop-cluster,
  .event-world .world-christmas .scene-prop-cluster,
  .event-world .world-winter .scene-prop-cluster,
  .event-world .world-summer .scene-prop-cluster {
    right: 50%;
    bottom: -10px;
    width: min(88vw, 345px);
    max-width: 90vw;
    max-height: 39%;
    transform: translateX(50%);
  }

  .event-landscape {
    padding-top: 28px;
  }
}

@media (max-width: 420px) {
  .event-world {
    min-height: 880px;
  }

  .event-world .event-hero {
    min-height: 810px;
    padding-bottom: 365px;
  }

  .event-world .event-hero-copy {
    padding-inline: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-new_year .world-particles,
  .world-winter .world-particles,
  .world-christmas .world-particles,
  .world-new_year .world-particles::before,
  .world-winter .world-particles::before,
  .world-christmas .world-particles::before,
  .world-new_year .world-particles::after,
  .world-winter .world-particles::after,
  .world-christmas .world-particles::after {
    animation: none;
  }
}