﻿/* ===== HERO ===== */
.section--hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 24px 0 24px;
  --hero-side-pad: clamp(12px, 4vw, 18px);
  background: transparent;
}

/* .section--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      84% 52% at 72% 66%,
      rgba(245, 33, 132, 0.22) 0%,
      rgba(245, 33, 132, 0) 100%
    ),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 63%, #0f1110 100%);
} */

.section--hero .container {
  position: relative;
  z-index: 1;
  width: min(var(--content), calc(100% - (var(--hero-side-pad) * 2)));
}

.hero__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 15px;
}

.hero__logo {
  height: auto;
}

.hero__content {
  margin: 0 auto;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  --hero-kicker-scale: 1.21;
  --hero-bottom-line-scale: 1.14;
  --hero-title-base: clamp(
    31px,
    calc(31px + (34 - 31) * ((100vw - 320px) / (430 - 320))),
    34px
  );
}

.hero__kicker {
  margin: 0;
  color: #f5f5f7;
}

.hero__title {
  margin: 0;
  color: #f5f5f7;
}

.hero__kicker,
.hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: var(--hero-title-base);
  line-height: 100%;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: capitalize;
  overflow-wrap: normal;
  word-break: normal;
}

.hero__title-line {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.hero__title-accent {
  color: #ff1f82;
}

.hero__kicker {
  width: 100%;
  margin: 0 0 4px;
  font-size: calc(var(--hero-title-base) * var(--hero-kicker-scale));
  line-height: 0.95;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.hero__title-line:last-child {
  width: 100%;
  font-size: calc(var(--hero-title-base) * var(--hero-bottom-line-scale));
  line-height: 0.97;
  letter-spacing: -0.02em;
}

.hero__visual {
  --hero-visual-offset-y: -2%;
  position: relative;
  transform: translate3d(0, var(--hero-visual-offset-y), 0);
  margin: 54px calc(var(--pad) * -1) 0;
  width: calc(100% + (var(--pad) * 2));
  max-width: none;
}

.hero__visual::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(520px, 98vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 241, 249, 0.92) 0%,
    rgba(255, 191, 225, 0.56) 30%,
    rgba(251, 88, 161, 0.3) 52%,
    rgba(251, 88, 161, 0) 76%
  );
  filter: blur(7px);
  pointer-events: none;
  z-index: 0;
}

.hero__visual::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 42%;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    180deg,
    rgba(2, 5, 10, 0) 0%,
    rgba(2, 5, 10, 0.72) 47%,
    #0f1110 100%
  );
}

.hero__visual img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hero__date-badge {
  position: absolute;
  left: 50%;
  bottom: 172px;
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: min(100%, 162px);
  max-width: 162px;
  padding-top: 4.79px;
  padding-right: 16.33px;
  padding-bottom: 4.79px;
  padding-left: 15.18px;
  isolation: isolate;
  border-radius: 999px;
  border: none;
  background: #f8f7fb;
  font-family: "Inter", var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: 11.18px;
  line-height: 16.77px;
  letter-spacing: 0;
  text-align: center;
  color: #111018;
  white-space: nowrap;
}

.hero__date-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(45deg, #f51467 0%, #c084fc 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.hero__footer {
  position: relative;
  z-index: 4;
  margin-top: -158px;
  padding: 0 0 8px;
  text-align: center;
}

.hero__offer {
  position: relative;
  margin: 0;
  text-transform: none;
  --hero-offer-base: clamp(
    31px,
    calc(31px + (38.31 - 31) * ((100vw - 320px) / (430 - 320))),
    38.31px
  );
  --hero-offer-accent-scale: 0.9;
}

.hero__offer-line {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: var(--hero-offer-base);
  line-height: 100%;
  letter-spacing: -0.05em;
  text-transform: capitalize;
  color: #f2f3f5;
  text-align: left;
}

.hero__offer-line--accent {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: calc(var(--hero-offer-base) * var(--hero-offer-accent-scale));
  line-height: 100%;
  letter-spacing: -0.05em;
  text-transform: capitalize;
  color: #ff1f82;
}

.hero__offer-star {
  position: absolute;
  right: clamp(
    -8px,
    calc(-8px + (5 - -8) * ((100vw - 320px) / (430 - 320))),
    5px
  );
  top: clamp(
    -10px,
    calc(-10px + (2 - -10) * ((100vw - 320px) / (430 - 320))),
    2px
  );
  width: 41px;
  height: 41px;
  display: block;
  background: url("/assets/img/star.svg") center / contain no-repeat;
  pointer-events: none;
}

.hero__note {
  margin: 3px 0 0;
  font-family: "Inter", var(--font-body);
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 32px;
  letter-spacing: -0.47px;
  text-align: center;
  vertical-align: middle;
  color: rgba(236, 236, 243, 0.7);
}

.hero__note::before {
  content: none;
}

.hero__scroll {
  width: 40px;
  height: 39px;
  margin: 32px auto 0;
  display: block;
  position: relative;
  text-decoration: none;
  background: url("/assets/img/hero-footer-arr.svg") center / contain no-repeat;
  opacity: 1;
}

.hero__scroll span {
  display: none;
}

.hero__scroll::before {
  content: none;
}

.hero__scroll::after {
  content: none;
}

.hero__copy {
  display: none;
}

/* ===== PROGRAM ===== */
.section--program {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 9px 0 42px;
  background: transparent;
}

.section--program::before {
  content: none;
}

.section--program .container,
.section--booking .container {
  position: relative;
  z-index: 1;
  overflow-wrap: normal;
  word-break: normal;
}

.program__title {
  margin: 0 0 40px;
  font-family: "Inter", var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(
    36px,
    calc(36px + (52.01 - 36) * ((100vw - 320px) / (430 - 320))),
    52.01px
  );
  line-height: clamp(
    33px,
    calc(33px + (48.1 - 33) * ((100vw - 320px) / (430 - 320))),
    48.1px
  );
  letter-spacing: clamp(
    -0.66px,
    calc(-0.66px + (-0.96 - -0.66) * ((100vw - 320px) / (430 - 320))),
    -0.96px
  );
  vertical-align: middle;
  color: #f4f4f8;
  text-align: left;
}

.program__list {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 30px;
}

.program__list::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -280%;
  z-index: 0;
  width: 1020.9999898280153px;
  height: 1020.9999898280153px;
  border-radius: 50%;
  opacity: 1;
  background: radial-gradient(
    66.62% 66.62% at 13.14% 28.76%,
    #8534ff 0%,
    #f51467 45.86%,
    #d23968 77.35%,
    #f1769b 100%
  );
  transform: translateY(-50%) rotate(-62deg);
  transform-origin: center;
  filter: blur(220px);
  pointer-events: none;
}

.program__list > * {
  position: relative;
  z-index: 1;
}

.program-item {
  display: grid;
  gap: 15px;
}

.program-item__time {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", var(--font-body);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(
    26px,
    calc(26px + (30.69 - 26) * ((100vw - 320px) / (430 - 320))),
    30.69px
  );
  line-height: clamp(
    31.5px,
    calc(31.5px + (37.16 - 31.5) * ((100vw - 320px) / (430 - 320))),
    37.16px
  );
  letter-spacing: clamp(
    -0.79px,
    calc(-0.79px + (-0.93 - -0.79) * ((100vw - 320px) / (430 - 320))),
    -0.93px
  );
  text-align: center;
  vertical-align: middle;
  color: #ff1f82;
}

.program-item__dot {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ff1f82;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.program-item__dot::before {
  content: "";
  width: 13px;
  height: 13px;
  background: url("/assets/img/solar_arrow-up-outline.svg") center / contain
    no-repeat;
  transform: rotate(90deg);
}

.program-card {
  border-radius: 23px;
  padding: 15px 15px 34px;
  background: #f1f1f3;
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-align: center;
  color: #101015;
}

.program-card__image {
  width: 100%;
  border-radius: 15px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #0d0b14;
}

.program-card__image--kundalini {
  object-position: center 35%;
}

.program-card__image--sound {
  filter: saturate(0.72) brightness(0.78);
}

.program-card__image--tea {
  filter: sepia(0.35) saturate(1.15) hue-rotate(-18deg) brightness(0.82);
}

.program-card__meta {
  margin: 30px 0 15px;
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 11.49px;
  line-height: 92%;
  letter-spacing: 0.37em;
  text-align: center;
  text-transform: uppercase;
  color: #bdbdbd;
}

.program-card__title {
  margin: 0;
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(
    21px,
    calc(21px + (27.91 - 21) * ((100vw - 320px) / (430 - 320))),
    27.91px
  );
  line-height: 108%;
  letter-spacing: -0.07em;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
}

.program-card__desc {
  margin: 10px auto 0;
  max-width: 92%;
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(
    12px,
    calc(12px + (13.73 - 12) * ((100vw - 320px) / (430 - 320))),
    13.73px
  );
  line-height: 136%;
  letter-spacing: -0.04em;
  text-align: center;
  color: #bdbdbd;
}

/* ===== BOOKING ===== */
.section--booking {
  position: relative;
  isolation: isolate;
  padding: 42px 0 30px;
  overflow: hidden;
  background: transparent;
}

.section--booking::before {
  content: none;
}

.section--booking .container {
  position: relative;
  z-index: 1;
}

.booking__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(
    48px,
    calc(48px + (70.93 - 48) * ((100vw - 320px) / (430 - 320))),
    70.93px
  );
  line-height: clamp(
    53px,
    calc(53px + (78.11 - 53) * ((100vw - 320px) / (430 - 320))),
    78.11px
  );
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #f3f3f8;
}

.booking__title-note {
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(0%, -50%);
  margin-top: 2px;
  display: block;
  text-align: right;
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(
    17px,
    calc(17px + (23.61 - 17) * ((100vw - 320px) / (430 - 320))),
    23.61px
  );
  line-height: 100%;
  letter-spacing: -0.06em;
  text-transform: lowercase;
  color: #7f7a8a;
}

.booking__title-note strong {
  color: #ff1f82;
  font-weight: 700;
}

.booking__panel {
  margin-top: 20px;
  border-radius: 50px;
  padding: 24px 41px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 36px rgba(0, 0, 0, 0.34);
}

.booking__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 7px;
  font-family: "Geist", var(--font-body);
  font-weight: 900;
  font-style: normal;
  font-size: clamp(
    30px,
    calc(30px + (39.7 - 30) * ((100vw - 320px) / (430 - 320))),
    39.7px
  );
  line-height: 111%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #f5f4f7;
}

.booking__price-value {
  color: #ff1f82;
  font-weight: 600;
}

.booking__price-sep {
  color: #f5f4f7;
}

.booking__price-label {
  color: #f5f4f7;
}

.booking__lead {
  margin: 8px 0 26px;
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(
    24px,
    calc(24px + (34 - 24) * ((100vw - 320px) / (430 - 320))),
    34px
  );
  line-height: 100%;
  letter-spacing: -0.06em;
  text-transform: lowercase;
  color: #9ea0a6;
}

.booking__rows {
  margin-top: 0;
  border-top: 2px solid #1e1e1e;
}

.booking__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 0;
  border-bottom: 2px solid #1e1e1e;
  text-decoration: none;
  font-family: "Roboto", var(--font-body);
  font-weight: 400;
  font-style: normal;
  font-size: 16.8px;
  line-height: 100%;
  letter-spacing: 0;
  color: #f0eff4;
}

.booking__row::after {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: url("/assets/img/prog-arr.svg") center / 18px 18px no-repeat;
  filter: brightness(0) saturate(100%) invert(24%) sepia(99%) saturate(3831%)
    hue-rotate(312deg) brightness(104%) contrast(107%);
}

.booking__cta {
  margin: 25px auto 0;
  width: 100%;
  min-height: 89px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  text-decoration: none;
  font-family: "Inter", var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: 15.12px;
  line-height: 92%;
  letter-spacing: -0.01em;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(90deg, #ff2079 0%, #ee1d40 100%);
  box-shadow: 0 0.8px 67.73px 0 #f01e4894;
}

.booking__cta::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 0.8px solid #ff90a8;
  pointer-events: none;
}

.booking__phone {
  margin: 14px auto 0;
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: "Inter", var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(
    21px,
    calc(21px + (26 - 21) * ((100vw - 320px) / (430 - 320))),
    26px
  );
  line-height: clamp(
    21px,
    calc(21px + (25.59 - 21) * ((100vw - 320px) / (430 - 320))),
    25.59px
  );
  letter-spacing: -0.02em;
  text-align: right;
  color: #f5f5f8;
}

.booking__phone::before {
  content: "";
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  background: url("/assets/img/tel.svg") center / contain no-repeat;
}

@media (max-width: 767px) {
  .hero__visual {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
  }
}

/* ===== MOTION ===== */
@media (prefers-reduced-motion: no-preference) {
  .js-load-in {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
      opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--load-delay, 0ms);
    will-change: opacity, transform;
  }

  .is-ready .js-load-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .js-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition:
      opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
      transform 920ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .js-reveal.is-inview {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .is-ready .hero__visual img {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual img {
    animation: none !important;
  }
}

@media (max-width: 360px) {
  .program__title {
    font-size: 33px;
  }

  .program-card__title {
    font-size: 20px;
  }

  .booking__title {
    font-size: 51px;
  }

  .booking__lead {
    font-size: 24px;
  }
}


