/* =========================================================
   SIX NINE — PILATES
   File: assets/css/base/pilates.css
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.pilates-page {
  background:
    var(--color-black);

  color:
    var(--color-white);
}

.pilates-page main {
  position: relative;

  overflow: clip;
}


/* =========================================================
   COMING SOON — MAIN SECTION
   ========================================================= */

.pilates-coming-soon {
  position: relative;

  min-height:
    max(
      100svh,
      860px
    );

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  isolation: isolate;

  background:
    var(--color-black);

  color:
    var(--color-white);
}


/* =========================================================
   BACKGROUND MEDIA
   ========================================================= */

.pilates-coming-soon__media {
  position: absolute;

  inset: 0;

  z-index: -4;

  overflow: hidden;

  background:
    var(--color-graphite);
}

.pilates-coming-soon__media img {
  position: absolute;

  inset:
    -4%
    0;

  width: 100%;
  height: 108%;

  display: block;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.7)
    brightness(0.72);
}


/* =========================================================
   DARK OVERLAY
   ========================================================= */

.pilates-coming-soon__overlay {
  position: absolute;

  inset: 0;

  z-index: -3;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(12, 12, 13, 0.18) 0%,
      rgba(12, 12, 13, 0.24) 30%,
      rgba(12, 12, 13, 0.58) 65%,
      rgba(12, 12, 13, 0.96) 100%
    );
}


/* =========================================================
   SAGE ATMOSPHERE
   ========================================================= */

.pilates-coming-soon__sage {
  position: absolute;

  inset: 0;

  z-index: -2;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(169, 178, 154, 0.22),
      transparent 26%
    ),
    radial-gradient(
      circle at 22% 72%,
      rgba(169, 178, 154, 0.12),
      transparent 34%
    );
}


/* =========================================================
   CONTENT CONTAINER
   ========================================================= */

.pilates-coming-soon__container {
  position: relative;

  z-index: 3;

  width: 100%;
}

.pilates-coming-soon__content {
  display: grid;

  gap:
    clamp(
      34px,
      4.5vw,
      64px
    );

  width: 100%;

  padding:
    180px
    0
    152px;
}


/* =========================================================
   TOP ROW
   ========================================================= */

.pilates-coming-soon__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;
}

.pilates-coming-soon__eyebrow {
  color:
    rgba(
      255,
      255,
      255,
      0.68
    );
}

.pilates-coming-soon__eyebrow::before {
  background:
    var(--color-pilates);
}


/* =========================================================
   STATUS
   ========================================================= */

.pilates-coming-soon__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;

  padding:
    0
    13px;

  border:
    1px solid
    rgba(
      169,
      178,
      154,
      0.38
    );

  border-radius:
    var(--radius-pill);

  background:
    rgba(
      169,
      178,
      154,
      0.08
    );

  color:
    var(--color-pilates);

  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.13em;

  text-transform: uppercase;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* =========================================================
   TITLE
   ========================================================= */

.pilates-coming-soon__title {
  max-width: 1320px;

  font-family:
    var(--font-display);

  font-size:
    clamp(
      5.4rem,
      10vw,
      10.4rem
    );

  font-weight: 500;

  line-height: 0.79;

  letter-spacing: -0.07em;

  text-wrap: balance;
}


/* =========================================================
   BOTTOM ROW
   ========================================================= */

.pilates-coming-soon__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap:
    50px;
}


/* =========================================================
   COPY
   ========================================================= */

.pilates-coming-soon__copy {
  display: grid;

  gap: 8px;

  max-width: 480px;
}

.pilates-coming-soon__copy p {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.88
    );

  font-family:
    var(--font-display);

  font-size:
    clamp(
      1.55rem,
      2.7vw,
      2.5rem
    );

  font-weight: 500;

  line-height: 1.05;

  letter-spacing: -0.03em;
}

.pilates-coming-soon__copy span {
  color:
    rgba(
      255,
      255,
      255,
      0.5
    );

  font-size: 0.72rem;

  line-height: 1.6;

  letter-spacing: 0.035em;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.pilates-coming-soon__actions {
  display: flex;
  align-items: center;

  gap: 8px;
}


/* =========================================================
   ORBIT DECORATION
   ========================================================= */

.pilates-orbit {
  position: absolute;

  top:
    clamp(
      130px,
      14vw,
      220px
    );

  right:
    clamp(
      -80px,
      2vw,
      80px
    );

  z-index: -1;

  width:
    clamp(
      280px,
      34vw,
      560px
    );

  aspect-ratio: 1;

  pointer-events: none;

  opacity: 0.72;
}


/* RING */

.pilates-orbit__ring {
  position: absolute;

  inset: 0;

  border:
    1px solid
    rgba(
      169,
      178,
      154,
      0.26
    );

  border-radius: 50%;

  transform:
    rotate(-18deg)
    scaleY(0.66);
}

.pilates-orbit__ring::before,
.pilates-orbit__ring::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(
      169,
      178,
      154,
      0.13
    );
}

.pilates-orbit__ring::before {
  inset: 13%;
}

.pilates-orbit__ring::after {
  inset: 28%;
}


/* DOT */

.pilates-orbit__dot {
  position: absolute;

  top: 19%;
  right: 8%;

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background:
    var(--color-pilates);

  box-shadow:
    0
    0
    0
    12px
    rgba(
      169,
      178,
      154,
      0.08
    );

  animation:
    pilatesOrbitPulse
    4s
    ease-in-out
    infinite;
}

@keyframes pilatesOrbitPulse {
  0%,
  100% {
    transform:
      scale(1);

    opacity: 0.72;
  }

  50% {
    transform:
      scale(1.18);

    opacity: 1;
  }
}


/* =========================================================
   BOTTOM META
   ========================================================= */

.pilates-coming-soon__meta {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 4;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.1
    );

  background:
    rgba(
      12,
      12,
      13,
      0.5
    );

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

.pilates-coming-soon__meta-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
}

.pilates-coming-soon__meta-grid span {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 74px;

  padding:
    0
    22px;

  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    rgba(
      255,
      255,
      255,
      0.5
    );

  font-size: 0.6rem;
  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

.pilates-coming-soon__meta-grid span::before {
  content: "";

  width: 5px;
  height: 5px;

  margin-right: 10px;

  flex:
    0
    0
    5px;

  border-radius: 50%;

  background:
    var(--color-pilates);
}

.pilates-coming-soon__meta-grid span:first-child {
  padding-left: 0;
}

.pilates-coming-soon__meta-grid span:last-child {
  border-right: 0;
}


/* =========================================================
   MOBILE STICKY CTA
   ========================================================= */

.pilates-mobile-cta {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 90;

  display: none;

  padding:
    9px
    12px
    calc(
      9px +
      env(
        safe-area-inset-bottom
      )
    );

  border-top:
    1px solid
    var(--border-light);

  background:
    rgba(
      242,
      238,
      229,
      0.96
    );

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.pilates-mobile-cta
.btn {
  width: 100%;
}


/* =========================================================
   IMAGE SAFETY
   ========================================================= */

.pilates-page
img:not([src]),
.pilates-page
img[src=""] {
  visibility: hidden;
}

.pilates-coming-soon__media {
  background-color:
    var(--color-graphite);
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {
  .pilates-coming-soon__actions
  .btn-outline-light:hover {
    border-color:
      var(--color-pilates);

    background:
      rgba(
        169,
        178,
        154,
        0.12
      );
  }
}


/* =========================================================
   TOUCH
   ========================================================= */

@media (hover: none) {
  .pilates-coming-soon__actions
  .btn-outline-light:hover {
    border-color:
      rgba(
        255,
        255,
        255,
        0.28
      );

    background:
      transparent;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {
  .pilates-coming-soon__media img,
  .pilates-orbit,
  .pilates-orbit__ring,
  .pilates-orbit__dot {
    transform:
      none !important;

    animation:
      none !important;

    transition:
      none !important;
  }
}