/* =============================================
   HAUS EDELWEISS — Home Page Styles
   ============================================= */

/* --- 1. HERO --- */
.hero {
  position: relative;
  z-index: 95;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-scale-in 1.8s var(--ease-out) forwards;
}

@keyframes hero-scale-in {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* Mobile: slow Ken Burns pan across the hero image */
@media (max-width: 768px) {
  .hero__bg img {
    animation: hero-scale-in 1.8s var(--ease-out) forwards,
               hero-pan 35s ease-in-out 2s infinite alternate;
    object-position: 30% center;
  }

  @keyframes hero-pan {
    0%   { object-position: 30% center; }
    100% { object-position: 70% center; }
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
}

.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(119, 77, 36, 0.2);
  mix-blend-mode: soft-light;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--weight-medium);
  line-height: 0.8;
  letter-spacing: var(--tracking-tight);
  color: var(--color-cream);
  display: flex;
  flex-direction: column;
}

.hero__line {
  display: block;
  overflow: hidden;
  padding-block: 0.05em 0.3em;
}

/* Hero entrance — hide before GSAP runs to prevent FOUC */
.hero__label,
.hero__line,
.hero__cta {
  opacity: 0;
}

.hero__cta {
  color: var(--color-cream);
}


/* --- 2. WELCOME --- */
.welcome {
  background-color: var(--color-cream);
  text-align: center;
  padding-top: var(--space-5xl);
  padding-bottom: var(--space-5xl);
}

.welcome > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

.welcome__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
  max-width: 617px;
}

.welcome__header .label {
  display: block;
  font-size: 12px;
  letter-spacing: 1.44px;
  color: var(--color-rust);
}

.welcome__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 3.875rem); /* 62px at desktop */
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -1.86px;
  color: var(--color-rust);
}

/* Image */
.welcome__image {
  width: 100%;
  max-width: 676px;
  aspect-ratio: 676 / 360;
  overflow: hidden;
}

.welcome__image > * {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Bottom text */
.welcome__bottom {
  max-width: 496px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

.welcome__subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem); /* 32px at desktop */
  font-weight: var(--weight-medium);
  line-height: 1.24;
  letter-spacing: -0.96px;
  color: var(--color-rust);
}

.welcome__bottom .body-text {
  max-width: 439px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-wine);
}


/* --- 3. THREE CARDS / PILLARS --- */
.pillars {
  background-color: var(--color-cream);
  padding-bottom: var(--section-py);
}

.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pillar__image {
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.pillar__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.pillar:hover .pillar__image img {
  transform: scale(1.03);
}

.pillar .label {
  margin-top: var(--space-sm);
}

.pillar__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  color: var(--color-rust);
}

@media (max-width: 768px) {
  .pillars__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }
}


/* --- 4. STAR BORDER --- */
.star-border {
  background-color: var(--color-cream);
  box-shadow: 0 0 0 100vmax var(--color-cream);
  clip-path: inset(0 -100vmax);
}


/* --- 5. STAY WITH US --- */
.stay {
  background-color: var(--color-cream);          /* Figma: neutrals/500 #F4F1DE */
  overflow: hidden;
}

.stay__grid {
  display: grid;
  grid-template-columns: minmax(320px, 440px) 1fr; /* Figma: ~440 + rest */
  gap: var(--space-xl);                            /* 32px gap between columns */
  align-items: stretch;                            /* both columns same height */
}

.stay__info {
  display: flex;
  flex-direction: column;
  min-height: 100%;                                /* stretch to match visual column */
}

.stay__header {
  margin-bottom: auto;                             /* push links to bottom via flex */
  padding-bottom: var(--space-4xl);                /* minimum gap ~80px even if column is short */
}

.stay__title {
  margin-bottom: var(--space-lg);                  /* 24px per Figma */
}

.stay__desc {
  max-width: 421px;
}

.stay__links {
  margin-bottom: var(--space-3xl);                 /* ~62px gap before CTA (Figma) */
}

.stay__cta {
  align-self: flex-start;                          /* don't stretch to full column width */
}

/* Right column: image as background, widget overlaid with 24px padding (Figma 1572:15208) */
.stay__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24px;
}

.stay__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 2px;
}

.stay__image-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.stay__image-photo--active {
  opacity: 1;
}

.stay__visual .booking-widget {
  position: relative;
  z-index: 2;
}

@media (max-width: 1024px) {
  .stay__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .stay__info {
    min-height: auto;
  }

  .stay__header {
    margin-bottom: var(--space-4xl);
  }

  .stay__visual {
    min-height: 500px;
  }

  .stay__visual .booking-widget {
    max-width: 333px;
  }
}


/* --- 6. MOVE AT YOUR PACE --- */
.pace {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pace__bg {
  position: absolute;
  inset: 0;
}

.pace__bg::before,
.pace__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pace__bg::before {
  background: rgba(119, 77, 36, 0.2);
}

.pace__bg::after {
  background: rgba(0, 0, 0, 0.3);
}

.pace__bg img,
.pace__bg video {
  width: 100%;
  height: 130%;
  object-fit: cover;
}


.pace__content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
}

.pace__title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.125rem); /* 50px at desktop */
  font-weight: var(--weight-medium);
  color: var(--color-cream);
  line-height: 1.16;
  letter-spacing: -1.5px;
}

.pace__play {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  cursor: pointer;
  line-height: 1;
}

.pace__play-text {
  display: flex;
  flex-direction: column;
  gap: 42px;
  height: 1.2em;
  overflow: hidden;
  line-height: 1.2;
}

.pace__play-text span {
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out);
}

.pace__play:hover .pace__play-text span {
  transform: translateY(calc(-100% - 42px));
}

.pace__play-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  backdrop-filter: blur(6.5px);
  -webkit-backdrop-filter: blur(6.5px);
  transition: background var(--duration-fast) ease;
}

.pace__play-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.pace__play:hover .pace__play-icon {
  background: rgba(244, 241, 222, 0.15);
}


/* --- Video Lightbox --- */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-out),
              visibility var(--duration-normal) var(--ease-out);
}

.video-lightbox--active {
  opacity: 1;
  visibility: visible;
}

.video-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.video-lightbox__container {
  position: relative;
  width: 90vw;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
}

.video-lightbox__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.video-lightbox__close {
  position: absolute;
  top: -48px;
  right: 0;
  background: none;
  border: none;
  color: var(--color-cream);
  cursor: pointer;
  padding: 8px;
  opacity: 0.7;
  transition: opacity var(--duration-fast) ease;
}

.video-lightbox__close:hover {
  opacity: 1;
}


/* --- 7. WELCOMING. THOUGHTFUL. TIMELESS. --- */
.values {
  background-color: var(--color-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 96px;
  padding: 120px 0;
}

.values__heading {
  font-size: clamp(2.5rem, 1.5rem + 3.5vw, 3.875rem);
  letter-spacing: -1.86px;
  line-height: 1.24;
  color: var(--color-rust);
}

.values__marquee {
  width: 100%;
  overflow: hidden;
}

.values__track {
  display: flex;
  gap: 32px;
  width: max-content;
}

.values__slide img,
.values__slide > div {
  height: 360px;
  width: 252px;
  object-fit: cover;
  flex-shrink: 0;
}


.values__desc {
  max-width: 457px;
  text-align: center;
}


/* --- 8. SEASONS SLIDER --- */
.seasons {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4xl) var(--container-px);
  overflow: hidden;
}

.seasons__bg {
  position: absolute;
  inset: 0;
}

.seasons__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.seasons__bg-img--active {
  opacity: 1;
}

.seasons__card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 671px;
}

.seasons__tabs {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 48px;
  flex-shrink: 0;
  background: url('../../assets/images/notes-tilebeige.svg') 17px top / 26px 48px repeat-x;
}

.seasons__tab-edge {
  display: block;
  height: 48px;
  width: 17px;
  flex-shrink: 0;
  position: relative;
}

.seasons__tab-edge--right {
  transform: scaleX(-1);
}

/* Separator line under tabs — full bleed, ignoring card-inner padding */
.seasons__separator {
  width: calc(100% + 120px);
  margin-left: -60px;
  margin-right: -60px;
  margin-bottom: 58px;
  height: 1.85px;
  border: none;
  background: radial-gradient(circle closest-side, var(--color-sage) 99%, transparent 100%) 0 center / 5.95px 1.85px repeat-x;
}

.seasons__card-inner {
  background-color: var(--color-cream-light);
  padding: 0 60px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Heading: Figma 36px, line-height 1.16, tracking -1.08px */
.seasons__card-inner .heading-2 {
  font-size: 36px;
  line-height: 1.16;
  letter-spacing: -1.08px;
  margin-bottom: 28px;
}

.seasons__illustration {
  text-align: center;
  position: relative;
  width: 268px;
  height: 204px;
}

.seasons__illus {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.seasons__illus--active {
  opacity: 1;
}

/* Arrows flanking the illustration */
.seasons__nav {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  justify-content: center;
  margin-bottom: 10px;
}

.seasons__arrow {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--duration-fast) ease;
}

.seasons__arrow:hover { opacity: 0.5; }

.seasons__arrow-icon {
  width: 48px;
  height: 48px;
  display: block;
}

.seasons__arrow-icon--flipped {
  transform: scaleX(-1);
}

.seasons__info {
  text-align: center;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 33px;
}

.seasons__info.is-fading {
  opacity: 0;
}

/* Season name: Figma 20px, PP Eiko Medium, rust, tracking -0.6px */
.seasons__name {
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -0.6px;
  color: var(--color-rust);
  margin-bottom: 12px;
}

/* Season description: Figma 16px, Geist Light, wine, tracking -0.24px */
.seasons__desc {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.24px;
  color: var(--color-wine);
}

@media (max-width: 640px) {
  .seasons__card-inner {
    padding: 0 24px 40px;
  }
  .seasons__separator {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: 32px;
  }
  .seasons__card-inner .heading-2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .seasons__nav {
    margin-bottom: 8px;
  }
  .seasons__info {
    margin-bottom: 24px;
  }
}


/* --- 10. FOUNDERS QUOTE --- styles moved to components.css (shared) */