/* =========================================================
   SIX NINE — HOME
   File: assets/css/base/home.css
   ========================================================= */


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

.home-page {
  background: var(--color-ivory);
  color: var(--color-black);
}

.home-page main {
  position: relative;
  overflow: clip;
}


/* =========================================================
   BRAND WORDMARK
   ========================================================= */

.brand-wordmark {
  font-family: var(--font-display);

  font-size: 1.8rem;
  font-weight: 500;

  line-height: 1;

  letter-spacing: -0.045em;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {
  position: fixed;

  top: 0;
  right: 0;

  z-index:
    calc(
      var(--z-navbar) + 10
    );

  display: flex;
  flex-direction: column;

  width: min(420px, 100%);
  height: 100svh;

  padding: 24px;

  overflow-y: auto;

  background: var(--color-black);
  color: var(--color-white);

  transform: translateX(100%);

  transition:
    transform
    700ms
    var(--ease-premium);
}

.mobile-menu.is-open {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding-bottom: 30px;

  border-bottom:
    1px solid var(--border-dark);
}

.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  flex-shrink: 0;

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

.mobile-menu__close svg {
  width: 22px;
  height: 22px;
}

.mobile-menu__links {
  display: grid;

  margin-top: 34px;
}

.mobile-menu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  min-height: 66px;

  border-bottom:
    1px solid var(--border-dark);

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

  font-size: 1.7rem;
  font-weight: 500;

  line-height: 1;
}

.mobile-menu__links a span {
  color: var(--color-pilates);

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

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

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.mobile-menu__footer {
  margin-top: auto;

  padding-top: 36px;
}

.mobile-menu__footer .btn {
  width: 100%;
}


/* =========================================================
   HERO
   ========================================================= */

.home-hero {
  position: relative;

  min-height: 100svh;

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

  overflow: hidden;

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


/* =========================================================
   HERO MEDIA
   ========================================================= */

.home-hero__media {
  position: absolute;

  inset: 0;

  overflow: hidden;

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

.home-hero__media img {
  position: absolute;

  inset:
    -6%
    0;

  width: 100%;
  height: 112%;

  display: block;

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

.home-hero__overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(12, 12, 13, 0.18) 0%,
      rgba(12, 12, 13, 0.15) 28%,
      rgba(12, 12, 13, 0.45) 68%,
      rgba(12, 12, 13, 0.86) 100%
    );
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.home-hero__container {
  position: relative;

  z-index: 2;

  width: 100%;
}

.home-hero__content {
  display: grid;

  gap: 30px;

  width: 100%;

  padding:
    190px
    0
    78px;
}

.home-hero__eyebrow {
  color:
    rgba(
      255,
      255,
      255,
      0.68
    );
}

.home-hero__title {
  max-width: 1180px;

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

  font-size:
    clamp(
      6rem,
      13vw,
      13rem
    );

  font-weight: 500;

  line-height: 0.78;

  letter-spacing: -0.07em;
}

.home-hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 60px;

  margin-top: 10px;
}

.home-hero__bottom > p {
  color:
    rgba(
      255,
      255,
      255,
      0.74
    );

  font-size:
    clamp(
      1rem,
      1.5vw,
      1.25rem
    );

  line-height: 1.6;
}

.home-hero__actions {
  display: flex;
  align-items: center;

  gap: 10px;
}

.home-hero__scroll {
  position: absolute;

  right: 36px;
  bottom: 80px;

  z-index: 3;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 12px;

  color:
    rgba(
      255,
      255,
      255,
      0.52
    );
}

.home-hero__scroll span {
  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  writing-mode: vertical-rl;
}

.home-hero__scroll svg {
  width: 20px;
  height: 20px;
}


/* =========================================================
   INTRO
   ========================================================= */

.home-intro {
  padding:
    clamp(
      120px,
      15vw,
      210px
    )
    0;

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

.home-intro__grid {
  display: grid;
  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);

  gap:
    clamp(
      70px,
      11vw,
      160px
    );

  align-items: center;
}


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

.home-intro__copy {
  display: grid;

  align-content: center;

  gap: 26px;
}

.home-intro__copy > p {
  max-width: 490px;
}

.home-intro__copy .link-arrow {
  width: fit-content;

  margin-top: 8px;
}


/* =========================================================
   INTRO GALLERY
   ========================================================= */

.home-intro__gallery {
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(180px, 0.65fr);

  grid-template-rows:
    auto
    auto;

  gap: 16px;

  align-items: end;
}

.home-intro__photo {
  position: relative;

  margin: 0;

  overflow: hidden;

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

.home-intro__photo--large {
  grid-row:
    1
    / 3;

  min-height: 700px;
}

.home-intro__photo--small {
  min-height: 340px;
}

.home-intro__photo img {
  width: 100%;
  height: 100%;

  display: block;

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

  transition:
    transform
    900ms
    var(--ease-premium);
}

.home-intro__photo--large img {
  min-height: 700px;
}

.home-intro__photo--small img {
  min-height: 340px;
}

.home-intro__statement {
  display: grid;

  gap: 4px;

  align-self: end;

  padding:
    26px
    4px;
}

.home-intro__statement span {
  font-family: var(--font-display);

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

  line-height: 1;

  letter-spacing: -0.035em;
}

.home-intro__statement span:not(:last-child) {
  color: var(--text-muted);
}


/* =========================================================
   EXPERIENCES WRAPPER
   ========================================================= */

.home-experiences {
  padding:
    clamp(
      110px,
      14vw,
      190px
    )
    0;

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


/* =========================================================
   SECTION HEADER
   ========================================================= */

.home-section-header {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.42fr);

  gap:
    clamp(
      50px,
      8vw,
      120px
    );

  align-items: end;

  margin-bottom:
    clamp(
      90px,
      12vw,
      160px
    );
}

.home-section-header > div {
  display: grid;

  gap: 20px;
}

.home-section-header > p {
  max-width: 460px;
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.home-experience {
  display: grid;
  grid-template-columns:
    minmax(0, 1.22fr)
    minmax(300px, 0.78fr);

  gap:
    clamp(
      60px,
      9vw,
      130px
    );

  align-items: center;

  margin-bottom:
    clamp(
      110px,
      15vw,
      210px
    );
}

.home-experience--reverse {
  grid-template-columns:
    minmax(300px, 0.78fr)
    minmax(0, 1.22fr);
}

.home-experience--reverse
.home-experience__visual {
  order: 2;
}

.home-experience--reverse
.home-experience__content {
  order: 1;
}


/* =========================================================
   EXPERIENCE VISUAL
   ========================================================= */

.home-experience__visual {
  position: relative;

  min-height: 720px;

  overflow: hidden;

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

.home-experience__visual img {
  position: absolute;

  inset:
    -4%
    0;

  width: 100%;
  height: 108%;

  display: block;

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

.home-experience__index {
  position: absolute;

  top: 24px;
  left: 24px;

  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 42px;
  height: 42px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.34
    );

  border-radius: 999px;

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

  color: var(--color-white);

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

  letter-spacing: 0.08em;

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


/* =========================================================
   EXPERIENCE CONTENT
   ========================================================= */

.home-experience__content {
  display: grid;

  align-content: center;

  gap: 24px;
}

.home-experience__content > p {
  max-width: 490px;
}

.home-experience__content
.link-arrow {
  width: fit-content;

  margin-top: 8px;
}

.home-experience__meta {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;

  max-width: 520px;
}

.home-experience__meta span {
  display: inline-flex;
  align-items: center;

  min-height: 32px;

  padding:
    0
    12px;

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

  border-radius: 999px;

  color: var(--text-secondary);

  font-size: 0.62rem;
  font-weight: 600;

  letter-spacing: 0.05em;
}


/* =========================================================
   PADEL EXPERIENCE ACCENT
   ========================================================= */

.home-experience--padel
.home-experience__content::before {
  content: "";

  width: 36px;
  height: 2px;

  margin-bottom: 2px;

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


/* =========================================================
   COFFEE EXPERIENCE ACCENT
   ========================================================= */

.home-experience--coffee
.home-experience__content::before {
  content: "";

  width: 36px;
  height: 2px;

  margin-bottom: 2px;

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


/* =========================================================
   EDITORIAL PHOTO STRIP
   ========================================================= */

.home-editorial-strip {
  display: grid;
  grid-template-columns:
    minmax(0, 1.4fr)
    minmax(180px, 0.8fr)
    minmax(180px, 0.8fr);

  gap: 14px;

  margin:
    calc(
      clamp(
        110px,
        15vw,
        210px
      )
      * -0.35
    )
    0
    clamp(
      120px,
      15vw,
      210px
    );
}

.home-editorial-strip__item {
  position: relative;

  min-height: 370px;

  margin: 0;

  overflow: hidden;

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

.home-editorial-strip__item--wide {
  min-height: 460px;
}

.home-editorial-strip__item img {
  width: 100%;
  height: 100%;

  min-height: inherit;

  display: block;

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

  transition:
    transform
    900ms
    var(--ease-premium);
}


/* =========================================================
   PRIVATE SPACES
   ========================================================= */

.home-private {
  margin-bottom:
    clamp(
      120px,
      16vw,
      220px
    );
}

.home-private__header {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.48fr);

  gap:
    clamp(
      50px,
      8vw,
      110px
    );

  align-items: end;

  margin-bottom: 54px;
}

.home-private__header > div:first-child {
  display: grid;

  gap: 18px;
}

.home-private__copy {
  display: grid;

  gap: 24px;
}

.home-private__copy > p {
  max-width: 440px;
}

.home-private__copy
.link-arrow {
  width: fit-content;
}


/* =========================================================
   PRIVATE CARDS
   ========================================================= */

.home-private__grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}

.home-private-card {
  position: relative;

  display: grid;

  overflow: hidden;

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

.home-private-card__media {
  position: relative;

  min-height: 610px;

  overflow: hidden;

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

.home-private-card__media::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(12, 12, 13, 0.54) 100%
    );

  pointer-events: none;
}

.home-private-card__media img {
  width: 100%;
  height: 100%;

  min-height: inherit;

  display: block;

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

  transition:
    transform
    1000ms
    var(--ease-premium);
}

.home-private-card__content {
  position: absolute;

  left: 28px;
  right: 28px;
  bottom: 28px;

  z-index: 2;

  display: grid;
  grid-template-columns:
    1fr
    auto;

  gap:
    8px
    24px;

  align-items: end;
}

.home-private-card__content span {
  grid-column:
    1
    / 3;

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

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

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.home-private-card__content strong {
  max-width: 410px;

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

  font-size:
    clamp(
      2rem,
      3.5vw,
      3.6rem
    );

  font-weight: 500;

  line-height: 0.96;

  letter-spacing: -0.04em;
}

.home-private-card__content svg {
  width: 24px;
  height: 24px;

  transition:
    transform
    var(--duration-normal)
    var(--ease-premium);
}


/* =========================================================
   PILATES
   ========================================================= */

.home-pilates {
  position: relative;

  min-height: 780px;

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

  overflow: hidden;

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

.home-pilates__media {
  position: absolute;

  inset: 0;

  overflow: hidden;
}

.home-pilates__media img {
  width: 100%;
  height: 100%;

  display: block;

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

.home-pilates__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(12, 12, 13, 0.88) 0%,
      rgba(12, 12, 13, 0.55) 42%,
      rgba(12, 12, 13, 0.22) 100%
    );
}

.home-pilates__content {
  position: relative;

  z-index: 2;

  display: grid;

  gap: 24px;

  max-width: 650px;

  padding:
    clamp(
      52px,
      7vw,
      90px
    );
}

.home-pilates__content > p {
  max-width: 420px;

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );
}

.home-pilates__content .btn {
  width: fit-content;

  margin-top: 6px;
}


/* =========================================================
   HOME GALLERY
   ========================================================= */

.home-gallery {
  padding:
    clamp(
      120px,
      15vw,
      210px
    )
    0;

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

.home-gallery__header {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(280px, 0.4fr);

  gap:
    clamp(
      50px,
      8vw,
      120px
    );

  align-items: end;

  margin-bottom:
    clamp(
      56px,
      8vw,
      96px
    );
}

.home-gallery__header > div {
  display: grid;

  gap: 18px;
}

.home-gallery__header > p {
  max-width: 420px;

  color:
    rgba(
      255,
      255,
      255,
      0.52
    );
}


/* =========================================================
   DYNAMIC GALLERY GRID
   ========================================================= */

.home-gallery__grid {
  display: grid;

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

  grid-auto-flow: dense;

  gap: 12px;
}

.home-gallery__item {
  position: relative;

  margin: 0;

  overflow: hidden;

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

.home-gallery__item img {
  width: 100%;
  height: 100%;

  display: block;

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

  transition:
    transform
    1000ms
    var(--ease-premium);
}


/*
 * home.js bisa assign layout classes ini.
 */

.home-gallery__item--portrait {
  grid-column: span 4;
  grid-row: span 2;

  min-height: 680px;
}

.home-gallery__item--wide {
  grid-column: span 8;

  min-height: 330px;
}

.home-gallery__item--square {
  grid-column: span 4;

  min-height: 330px;
}

.home-gallery__item--landscape {
  grid-column: span 6;

  min-height: 420px;
}


/*
 * Fallback jika home.js hanya generate
 * .home-gallery__item tanpa modifier.
 */

.home-gallery__item:not(
  .home-gallery__item--portrait,
  .home-gallery__item--wide,
  .home-gallery__item--square,
  .home-gallery__item--landscape
) {
  grid-column: span 4;

  min-height: 360px;
}


/* =========================================================
   FACILITIES
   ========================================================= */

.home-facilities {
  padding:
    clamp(
      110px,
      14vw,
      180px
    )
    0;

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

.home-facilities__grid {
  display: grid;
  grid-template-columns:
    minmax(280px, 0.65fr)
    minmax(0, 1.35fr);

  gap:
    clamp(
      70px,
      11vw,
      160px
    );

  align-items: start;
}

.home-facilities__header {
  position: sticky;

  top: 120px;

  display: grid;

  gap: 20px;
}

.home-facilities__list {
  display: grid;
}

.home-facilities__list span {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 72px;

  padding:
    18px
    48px
    18px
    0;

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

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

  font-size:
    clamp(
      1.4rem,
      2.4vw,
      2.25rem
    );

  line-height: 1.05;

  letter-spacing: -0.025em;
}

.home-facilities__list span:first-child {
  border-top:
    1px solid var(--border-light);
}

.home-facilities__list span::after {
  content: "";

  position: absolute;

  right: 4px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--color-gold);

  opacity: 0.7;
}


/* =========================================================
   LOCATION
   ========================================================= */

.home-location {
  padding:
    0;

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

.home-location__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(340px, 0.8fr);

  min-height: 760px;
}

.home-location__media {
  position: relative;

  min-height: 760px;

  overflow: hidden;

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

.home-location__media img {
  width: 100%;
  height: 100%;

  min-height: inherit;

  display: block;

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

.home-location__content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 28px;

  padding:
    clamp(
      56px,
      7vw,
      100px
    );
}

.home-location__content address {
  max-width: 500px;

  color: var(--text-secondary);

  font-style: normal;

  font-size: 0.95rem;

  line-height: 1.8;
}

.home-location__actions {
  display: flex;
  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 4px;
}


/* =========================================================
   PHOTO BREAK
   ========================================================= */

.home-photo-break {
  position: relative;

  min-height: 86svh;

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

  overflow: hidden;

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

.home-photo-break > img {
  position: absolute;

  inset:
    -5%
    0;

  width: 100%;
  height: 110%;

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

.home-photo-break__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(12, 12, 13, 0.06) 35%,
      rgba(12, 12, 13, 0.7) 100%
    );
}

.home-photo-break__caption {
  position: relative;

  z-index: 2;

  width: 100%;

  display: grid;
  grid-template-columns:
    repeat(
      5,
      1fr
    );

  padding:
    34px
    var(--gutter);

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

.home-photo-break__caption span {
  padding:
    0
    16px;

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

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

  font-size:
    clamp(
      1.5rem,
      2.5vw,
      2.8rem
    );

  line-height: 1;

  text-align: center;
}

.home-photo-break__caption span:not(:last-child) {
  border-right:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.home-final {
  position: relative;

  padding:
    clamp(
      140px,
      18vw,
      260px
    )
    0;

  overflow: hidden;

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

.home-final::before {
  content: "";

  position: absolute;

  width: 900px;
  height: 900px;

  left: 50%;
  bottom: -730px;

  transform: translateX(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(185, 154, 91, 0.23),
      transparent 70%
    );

  pointer-events: none;
}

.home-final__inner {
  position: relative;

  z-index: 2;

  display: grid;

  justify-items: center;

  gap: 28px;

  text-align: center;
}

.home-final__inner h2 {
  max-width: 1150px;
}

.home-final__inner > p {
  max-width: 430px;

  color:
    rgba(
      255,
      255,
      255,
      0.56
    );
}

.home-final__actions {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 4px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
  padding:
    78px
    0
    24px;

  background: var(--color-black);
  color: var(--color-white);

  border-top:
    1px solid var(--border-dark);
}

.site-footer__top {
  display: grid;
  grid-template-columns:
    0.7fr
    1.3fr;

  gap: 80px;

  padding-bottom: 70px;
}

.site-footer__brand {
  display: grid;

  align-content: start;

  gap: 20px;
}

.site-footer__wordmark {
  width: fit-content;

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

  font-size:
    clamp(
      3rem,
      6vw,
      6rem
    );

  font-weight: 500;

  line-height: 0.9;

  letter-spacing: -0.055em;
}

.site-footer__brand p {
  color:
    rgba(
      255,
      255,
      255,
      0.5
    );

  font-size: 0.9rem;

  line-height: 1.7;
}

.site-footer__nav {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 34px;
}

.site-footer__column {
  display: grid;

  align-content: start;

  gap: 12px;
}

.site-footer__label {
  margin-bottom: 10px;

  color: var(--color-gold);

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

  letter-spacing: 0.14em;

  text-transform: uppercase;
}

.site-footer__column a,
.site-footer__column button {
  width: fit-content;

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

  font-size: 0.84rem;

  transition:
    color
    var(--duration-fast)
    ease;
}

.site-footer__column a:hover,
.site-footer__column button:hover {
  color: var(--color-white);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding-top: 22px;

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

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

  font-size: 0.68rem;

  letter-spacing: 0.06em;
}


/* =========================================================
   MOBILE STICKY BOOKING
   ========================================================= */

.mobile-booking-cta {
  position: fixed;

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

  z-index: 90;

  display: none;

  padding:
    10px
    14px
    calc(
      10px +
      env(safe-area-inset-bottom)
    );

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

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

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

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


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

@media (hover: hover) {
  .home-intro__photo:hover img,
  .home-editorial-strip__item:hover img,
  .home-gallery__item:hover img {
    transform: scale(1.035);
  }

  .home-private-card:hover
  .home-private-card__media img {
    transform: scale(1.045);
  }

  .home-private-card:hover
  .home-private-card__content svg {
    transform: translateX(5px);
  }
}


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

.home-page img {
  max-width: 100%;
}

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


/*
 * Kalau gallery JSON gagal load,
 * wrapper tetap punya warna background
 * dan layout tidak collapse.
 */

.home-intro__photo,
.home-experience__visual,
.home-editorial-strip__item,
.home-private-card__media,
.home-pilates__media,
.home-gallery__item,
.home-location__media,
.home-photo-break {
  background-color: var(--color-graphite);
}


/* =========================================================
   FOCUS
   ========================================================= */

.home-private-card:focus-visible {
  outline:
    2px solid var(--color-gold);

  outline-offset: 3px;
}


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

@media (hover: none) {
  .home-intro__photo img,
  .home-editorial-strip__item img,
  .home-private-card__media img,
  .home-gallery__item img {
    transform: none !important;
  }

  .home-private-card
  .home-private-card__content svg {
    transform: none;
  }
}


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

@media (
  prefers-reduced-motion: reduce
) {
  .home-intro__photo img,
  .home-editorial-strip__item img,
  .home-private-card__media img,
  .home-private-card__content svg,
  .home-gallery__item img {
    transition: none !important;
  }
}