/* ==========================================================================
   LUXORA — home page (owner: PAGE-HOME) · DESIGN.md §8.1
   Page-specific layout only. Shared components come from base.css / components.css.
   Tokens only · logical properties only · reveal + line-mask from base.css.
   Sections: 01 hero · 02 maisons · 03 curated edit · 04 rooms · 05 icon
             06 by maison · 07 nocturne · 08 coveted / private price · 09 concierge
   ========================================================================== */

.home > [data-section]:not([data-section="maisons"]):not([data-section="edit"]) {
  content-visibility: auto;
  contain-intrinsic-size: 0 720px;
}
.home-cell { min-inline-size: 0; }

/* --------------------------------------------------------------------------
   01  Hero — The Vitrine (§7.3, choreography §5.6)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--sp-6) var(--sp-8);
  --hero-h: min(calc(100svh - var(--header-h) - var(--utility-h) - var(--sp-9)), 880px);
}
.hero__inner { display: grid; row-gap: var(--sp-6); }
.hero__plate {
  position: relative;
  inline-size: 100%;
  aspect-ratio: var(--card-ratio);
  background: var(--plate);
  box-shadow: var(--plate-inset);
  overflow: hidden;
}
.hero__plate-skeleton { position: absolute; inset: 0; }
.hero__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.03;
  transition: opacity var(--dur-hero) var(--ease-expo), scale var(--dur-hero) var(--ease-expo);
}
.hero__img.is-fallback { object-fit: contain; }
.hero.is-in .hero__img.is-loaded { opacity: 1; scale: 1; }
.hero__img.is-loaded + .hero__plate-skeleton, .hero__plate:has(.is-loaded) .hero__plate-skeleton { display: none; }

.hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.hero__eyebrow { opacity: 0; transition: opacity var(--dur-4) var(--ease-out) 200ms; }
.hero.is-in .hero__eyebrow { opacity: 1; }
.hero__title {
  margin-block-start: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  max-inline-size: 12ch;
}
html[lang="ar"] .hero__title { max-inline-size: 14ch; padding-block: .1em; }
.hero.is-in .hero__title .line__in {
  translate: 0 0;
  transition: translate var(--dur-line) var(--ease-expo) calc(300ms + var(--i, 0) * var(--stagger-line));
}
.hero__rule {
  display: block;
  inline-size: 0;
  block-size: 1px;
  margin-block: var(--sp-5) var(--sp-5);
  background: var(--gold);
  transition: inline-size 500ms var(--ease-expo) 700ms;
}
.hero.is-in .hero__rule { inline-size: var(--rule-hero-w); }
.hero__sub {
  max-inline-size: 34rem;
  margin: 0;
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--dur-5) var(--ease-out) 850ms, translate var(--dur-5) var(--ease-out) 850ms;
}
html[lang="en"] .hero__sub { max-inline-size: 44ch; }
.hero.is-in .hero__sub { opacity: 1; translate: 0 0; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  align-self: stretch;
  margin-block-start: var(--sp-6);
  opacity: 0;
  translate: 0 12px;
  transition: opacity var(--dur-5) var(--ease-out) 1000ms, translate var(--dur-5) var(--ease-out) 1000ms;
}
.hero.is-in .hero__cta { opacity: 1; translate: 0 0; }
.hero__link { min-inline-size: 0; }
/* second visit in the same session: frame shown settled, no replay */
.hero.is-settled :is(.hero__img, .hero__eyebrow, .line__in, .hero__rule, .hero__sub, .hero__cta) { transition: none; }

.hero__cue {
  position: absolute;
  inset-block-end: var(--sp-4);
  inset-inline: 0;
  margin-inline: auto;
  display: none;
  inline-size: 1px;
  block-size: 40px;
  background: var(--ink);
  opacity: .5;
  transform-origin: top;
  animation: hero-cue 2.4s var(--ease-in-out) infinite;
  transition: opacity var(--dur-3);
}
.hero__cue.is-gone { opacity: 0; animation-play-state: paused; }
@keyframes hero-cue { 0% { scale: 1 .4; } 50% { scale: 1 1; } 100% { scale: 1 .4; } }

@media (max-width: 1023.98px) {
  .hero__btn { inline-size: 100%; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__link { align-self: flex-start; }
}
@media (min-width: 768px) {
  .hero__cue { display: block; }
}
@media (min-width: 1024px) {
  .hero { padding-block: var(--sp-6) var(--sp-9); }
  .hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
    min-block-size: var(--hero-h);
  }
  .hero__plate {
    grid-column: 1 / span 7;
    inline-size: min(100%, calc(var(--hero-h) * 0.8));
    justify-self: start;
  }
  .hero__text { grid-column: 8 / span 5; }
}
@media (min-width: 1536px) {
  .hero { padding-block-end: var(--sp-12); }
}

/* --------------------------------------------------------------------------
   02  The Maisons marquee (§7.5)
   -------------------------------------------------------------------------- */
.home-maisons { padding-block: var(--sp-6); }
@media (min-width: 1024px) { .home-maisons { padding-block: var(--sp-9); } }

/* --------------------------------------------------------------------------
   03  The Curated Edit — 1 + 4 on desktop, scroll-snap under 1024 (§8.1 #03)
   -------------------------------------------------------------------------- */
.edit__cell { min-inline-size: 0; }
.edit__feature .card__body { padding-block-start: var(--sp-4); }
.edit__feature .card__brand { font-size: .75rem; }
.edit__feature .card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display-sm);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  margin-block-start: var(--sp-2);
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] .edit__feature .card__name { padding-block-end: .12em; line-height: var(--lh-heading); }
.edit__feature .price { font-size: 1rem; margin-block-start: var(--sp-2); }

.edit__progress { position: relative; display: none; block-size: 1px; margin-block-start: var(--sp-5); background: var(--line); }
.edit__progress-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--p, 0) * (100% - var(--view, .3) * 100%));
  inline-size: calc(var(--view, .3) * 100%);
  background: var(--accent);
  transition: inset-inline-start 80ms linear;
}
.edit__progress.is-idle { display: none; }

@media (max-width: 1023.98px) {
  .edit__grid {
    display: flex;
    gap: var(--sp-3);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .edit__grid::-webkit-scrollbar { display: none; }
  .edit__cell { flex: 0 0 72vw; max-inline-size: 360px; scroll-snap-align: start; }
  .edit__progress { display: block; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .edit__cell { flex-basis: 40vw; }
}
@media (min-width: 1024px) {
  .edit.section--tight { padding-block: var(--section-y); }
  .edit__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--grid-col-gap);
    row-gap: var(--grid-row-gap);
    align-items: start;
  }
  .edit__feature { grid-column: span 2; grid-row: span 2; }
}

/* --------------------------------------------------------------------------
   04  Three Rooms (§7.6)
   -------------------------------------------------------------------------- */
.rooms__grid { display: grid; gap: var(--sp-6); }
.room { display: block; min-inline-size: 0; }
.room__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
  overflow: hidden;
}
.room__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 240ms var(--ease-out), scale var(--dur-6) var(--ease-out);
}
.room__img.is-loaded { opacity: 1; }
.room__img.is-fallback { object-fit: contain; }
.room__rule {
  display: block;
  inline-size: var(--rule-tile-w);
  block-size: 1px;
  margin-block: var(--sp-4) var(--sp-3);
  background: var(--gold);
  transition: inline-size var(--dur-3) var(--ease-out);
}
.room__body { display: block; }
.room__title { display: block; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-display-sm); line-height: var(--lh-heading); letter-spacing: var(--ls-display); color: var(--ink); }
html[lang="ar"] .room__title { padding-block: .1em; }
.room__explore {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--line-strong), var(--line-strong));
  background-repeat: no-repeat;
  background-size: 0% 1px, 100% 1px;
  background-position: var(--underline-origin) 100%, 0 100%;
  padding-block-end: 2px;
  transition: background-size var(--dur-3) var(--ease-out);
}
.room__explore .num { color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .room__rule { inline-size: 0; }
  .room:hover .room__rule, .room:focus-visible .room__rule { inline-size: var(--rule-tile-w); }
  .room:hover .room__img { scale: 1.03; }
  .room:hover .room__explore { background-size: 100% 1px, 100% 1px; }
}
@media (min-width: 768px) {
  .rooms__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .room__media { aspect-ratio: var(--tile-ratio); }
}
@media (min-width: 1024px) {
  .room:nth-child(2) { margin-block-start: var(--sp-8); }
}

/* --------------------------------------------------------------------------
   05  The Icon — bone band, image bleeding to the inline-start edge (§8.1 #05)
   -------------------------------------------------------------------------- */
.icon-band { background: var(--surface-2); padding-block: var(--sp-8); }
.icon-band__inner { display: grid; row-gap: var(--sp-6); }
.icon-band__media {
  aspect-ratio: var(--card-ratio);
  background: var(--surface-3);
  overflow: hidden;
  margin-inline: calc(-1 * var(--gutter));
}
.icon-band__img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity 240ms var(--ease-out); }
.icon-band__img.is-loaded { opacity: 1; }
.icon-band__img.is-fallback { object-fit: contain; }
.icon-band__text { padding-inline: var(--gutter); }
.icon-band__copy { max-inline-size: 34rem; }
.icon-band__brand {
  display: inline-block;
  margin-block-start: var(--sp-4);
  font-family: var(--font-latin-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.icon-band__brand:hover { color: var(--accent); }
.icon-band__name {
  margin-block-start: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-display-sm);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] .icon-band__name { padding-block: .1em; }
.icon-band__p { margin-block-start: var(--sp-4); font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--ink-2); }
.icon-band__p + .icon-band__p { margin-block-start: var(--sp-3); }
.icon-band__price { margin-block-start: var(--sp-5); }
.icon-band__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-block-start: var(--sp-5); }
@media (max-width: 767.98px) {
  .icon-band__cta > .btn--whatsapp, .icon-band__cta > .btn--secondary { inline-size: 100%; }
}
@media (min-width: 768px) {
  .icon-band__name { font-weight: var(--fw-display); }
}
@media (min-width: 1024px) {
  .icon-band { padding-block: var(--sp-10); }
  .icon-band__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: 0; }
  .icon-band__media { margin-inline: 0; }
  .icon-band__text { padding-inline: clamp(48px, 7vw, 128px) var(--gutter); }
}

/* --------------------------------------------------------------------------
   06  Curated by Maison — 5/12 + 7/12, stacked display tabs (§8.1 #06)
   -------------------------------------------------------------------------- */
.by-maison__split { display: grid; gap: var(--sp-6); }
.by-maison__tabs { display: none; }
.by-maison__chips { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-block-end: var(--sp-1); }
.by-maison__chips::-webkit-scrollbar { display: none; }
.by-maison__chips .chip { flex: none; }
.by-maison__desc {
  margin-block-start: var(--sp-4);
  max-inline-size: 34rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.by-maison__link { margin-block-start: var(--sp-4); }
.by-maison__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-col-gap);
  row-gap: var(--grid-row-gap);
  transition: opacity var(--dur-4) var(--ease-in-out);
}
.by-maison__cards.is-swapping { opacity: .4; }
.by-maison__cell { min-inline-size: 0; animation: home-fade-in var(--dur-4) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.by-maison__empty { grid-column: 1 / -1; }
@keyframes home-fade-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 1023.98px) {
  .by-maison__cards {
    display: flex;
    gap: var(--sp-3);
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .by-maison__cards::-webkit-scrollbar { display: none; }
  .by-maison__cell, .by-maison__cards > .card--skeleton { flex: 0 0 72vw; max-inline-size: 360px; scroll-snap-align: start; }
  .by-maison__empty { flex: 1 0 100%; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .by-maison__cell, .by-maison__cards > .card--skeleton { flex-basis: 40vw; }
}
@media (min-width: 1024px) {
  .by-maison__split { grid-template-columns: 5fr 7fr; column-gap: var(--grid-gap); align-items: start; }
  .by-maison__chips { display: none; }
  .by-maison__tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border-block-end: 0;
    overflow: visible;
  }
  .by-maison__tabs .tab { padding-block: var(--sp-3) var(--sp-3); font-family: var(--font-latin-display); font-size: var(--fs-h1); font-weight: var(--fw-display-sm); letter-spacing: 0; text-transform: none; line-height: 1.15; color: var(--muted); }
  .by-maison__tabs .tab:hover, .by-maison__tabs .tab--active { color: var(--ink); }
  /* the shared hairline slides vertically along the stacked names (page JS sets --tab-y / --tab-w) */
  .by-maison__tabs .tabs__indicator {
    inset-block-end: auto;
    inset-block-start: var(--tab-y, 0px);
    inset-inline-start: 0;
    transition: inset-block-start var(--dur-2) var(--ease-out), inline-size var(--dur-2) var(--ease-out);
  }
  .by-maison__tabs .tab--active::after { display: none; }
  .by-maison__desc { margin-block-start: var(--sp-6); }
}

/* --------------------------------------------------------------------------
   07  Nocturne — the one dark act break + Assurance (§8.1 #07)
   -------------------------------------------------------------------------- */
.nocturne { min-block-size: 70vh; }
.nocturne__stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden; }
.nocturne__photo { position: absolute; inset: 0; background: var(--band-bg-2); }
.nocturne__photo::after { content: ''; position: absolute; inset: 0; background: var(--band-bg); opacity: .4; }
.nocturne__img { inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-hero) var(--ease-out); }
.nocturne__img.is-loaded { opacity: .55; }
.nocturne__img.is-fallback { display: none; }
.nocturne__quote-wrap { position: relative; z-index: 1; text-align: center; }
.nocturne__quote { margin: 0; }
.nocturne__quote p {
  margin-inline: auto;
  max-inline-size: 22ch;
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-display-sm);
  font-style: italic;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] .nocturne__quote p { font-style: normal; max-inline-size: 18ch; padding-block: .1em; }
.nocturne__assurance { display: grid; gap: 40px; padding-block: var(--sp-8); }
.nocturne__item { max-inline-size: none; justify-items: start; text-align: start; }
@media (min-width: 768px) {
  .nocturne__stage { aspect-ratio: 21 / 9; }
  .nocturne__assurance { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); padding-block: var(--sp-9); }
  .nocturne__item { max-inline-size: 280px; justify-items: center; text-align: center; justify-self: center; }
}
@media (min-width: 1024px) {
  .nocturne__assurance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   08  Most Coveted · Private price — the shared grid (§4.4)
   -------------------------------------------------------------------------- */
.private-price { padding-block-start: 0; }

/* --------------------------------------------------------------------------
   09  Concierge (§8.1 #09)
   -------------------------------------------------------------------------- */
.concierge { padding-block: var(--sp-9); text-align: center; }
.concierge__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-display-sm);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
html[lang="ar"] .concierge__title { padding-block: .1em; }
.concierge__text { max-inline-size: 34rem; margin: var(--sp-4) auto 0; }
.concierge__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-block-start: var(--sp-6); }
.concierge__hours { margin-block-start: var(--sp-4); }
.concierge__news { max-inline-size: 360px; margin: var(--sp-7) auto 0; text-align: start; }
.concierge__news-row { display: flex; align-items: flex-end; gap: var(--sp-4); }
.concierge__news-row .input { flex: 1 1 auto; min-inline-size: 0; }
.concierge__news-row .btn { flex: none; min-block-size: var(--input-h); }
.concierge__news-msg { min-block-size: 1.4em; margin-block-start: var(--sp-2); }
.concierge__news.is-invalid .concierge__news-msg { color: var(--accent); }
.concierge__news.is-invalid .input { border-block-end-color: var(--danger); }
.concierge__news.is-success .concierge__news-msg { color: var(--success); }
@media (max-width: 479.98px) {
  .concierge__actions > .btn { inline-size: 100%; }
}
@media (min-width: 768px) {
  .concierge__title { font-weight: var(--fw-display); }
}
@media (min-width: 1024px) {
  .concierge { padding-block: var(--sp-10); }
}

/* --------------------------------------------------------------------------
   Reduced motion: hero shown settled, cue hidden
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__img, .hero__eyebrow, .hero__sub, .hero__cta { opacity: 1; translate: none; scale: 1; transition: none; }
  .hero__rule { inline-size: var(--rule-hero-w); transition: none; }
  .hero__title .line__in { translate: none; }
  .hero__cue { display: none; }
  .by-maison__cell { animation: none; }
  .room__img { transition: opacity 240ms; }
}