/* Home-only progressive enhancement.
   Base state is an ordinary readable document; .home-immersive is added only
   when the viewport crosses the explicit desktop contract. */

.home-experience__track { min-height: 100%; }
.home-screen { position: relative; }

.home-experience .section { padding: 8rem 0; }
.home-experience .section .section-title { margin-bottom: 3.6rem; }
.home-experience .hero { min-height: 100vh; min-height: 100dvh; }
.home-experience .lineup-panel { margin-top: 4.5rem; }
.home-experience .lineup-tabs { margin-top: 4rem; }
.home-experience .lineup-panel__media img { height: clamp(28rem, 46vh, 44rem); }
.home-experience .pr-card__thumb { aspect-ratio: auto; height: clamp(16rem, 28vh, 28rem); }

/* Runtime-controlled copy has a visual allocation. The complete text remains
   in the DOM and is available on the linked detail page. */
.home-experience .prod-card__name,
.home-experience .prod-card__desc,
.home-experience .pr-card__caption {
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.home-experience .prod-card__name { -webkit-line-clamp: 2; line-clamp: 2; }
.home-experience .prod-card__desc {
  min-height: 3.9rem;
  max-height: 4.65em;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.home-experience .pr-card__caption {
  min-height: 3.2em;
  max-height: 3.2em;
  line-height: 1.6;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Immersive layout is state-owned by home-experience.js. */
html.home-immersive,
html.home-immersive body {
  height: 100%;
  overflow: hidden;
}
html.home-immersive .home-experience {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
html.home-immersive .home-experience__track {
  height: 100%;
  will-change: transform;
}
html.home-immersive .home-experience__track.is-transitioning {
  transition: transform .9s cubic-bezier(.77, 0, .175, 1);
}
html.home-immersive .home-screen {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
html.home-immersive .home-experience .hero { height: 100%; min-height: 0; }
html.home-immersive .home-experience .section {
  height: 100%;
  padding: calc(var(--header-h) + 1rem) 0 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html.home-immersive .home-screen--pr {
  display: flex;
  flex-direction: column;
}
html.home-immersive .home-screen--pr .section {
  flex: 1 1 auto;
  height: auto;
}
html.home-immersive .home-screen--pr .site-footer { flex: 0 0 auto; }

/* Home-only reveal. Flow mode never hides content. */
.home-experience [data-home-reveal] {
  transition:
    opacity .8s cubic-bezier(.23, 1, .32, 1) var(--home-reveal-delay, 0s),
    transform .8s cubic-bezier(.23, 1, .32, 1) var(--home-reveal-delay, 0s);
}
html.home-immersive .home-experience [data-home-reveal] {
  opacity: 0;
  transform: translateY(4rem);
}
html.home-immersive .home-experience .home-screen.is-active [data-home-reveal] {
  opacity: 1;
  transform: none;
}

.home-experience [data-home-lineup-reveal="tabs"] {
  --home-reveal-delay: .08s;
}

.home-experience .lineup-panel__body[data-home-reveal] {
  --home-reveal-delay: .14s;
}

.home-experience .lineup-panel__media[data-home-reveal] {
  --home-reveal-delay: .2s;
}

.home-experience [data-home-lineup-transition].is-lineup-updated {
  animation: home-lineup-settle .24s cubic-bezier(.22, 1, .36, 1);
}

@keyframes home-lineup-settle {
  from { opacity: .72; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}

/* Home screen navigation */
.home-screen-nav {
  display: none;
  position: fixed;
  right: 2.8rem;
  top: 50%;
  z-index: 150;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 2rem;
}
html.home-immersive .home-screen-nav { display: flex; }
.home-screen-nav button {
  position: relative;
  width: 1rem;
  height: 1rem;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  background: transparent;
  transition: background .3s, border-color .3s, transform .3s;
}
.home-screen-nav button.is-active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  transform: scale(1.3);
}
.home-screen-nav.on-light button { border-color: rgba(29,43,55,.45); }
.home-screen-nav__label {
  position: absolute;
  right: 2.6rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-en);
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: var(--color-gold);
  opacity: 0;
  transition: opacity .25s;
}
.home-screen-nav button:hover .home-screen-nav__label,
.home-screen-nav button:focus-visible .home-screen-nav__label { opacity: 1; }

.home-experience .to-top { display: none; }
.home-experience__to-top {
  position: fixed;
  right: 2.8rem;
  bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.home-experience__to-top.show { opacity: 1; pointer-events: auto; }

/* The scale bands belong only to the immersive home contract. */
@media (min-width: 1025px) and (max-height: 799px) {
  html:has([data-home-experience]) { --fs-h: 58.5%; }
}
@media (min-width: 1025px) and (max-height: 749px) {
  html:has([data-home-experience]) { --fs-h: 54.5%; }
}
@media (min-width: 1025px) and (max-height: 699px) {
  html:has([data-home-experience]) {
    --fs-h: 50.5%;
    --header-h: 64px;
  }
  html:has([data-home-experience]) .gnb > li > a {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media (min-width: 1025px) and (max-height: 649px) {
  html:has([data-home-experience]) { --fs-h: 50%; }
}
@media (min-width: 1025px) and (max-width: 1150px) {
  html:has([data-home-experience]) { --kw: .92; }
}

@media (max-width: 1024px), (max-height: 640px) {
  .home-experience .lineup-panel__media {
    display: grid;
    place-items: center;
  }
  .home-experience .lineup-panel__media img {
    height: clamp(24rem, 42vw, 36rem);
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-experience__track,
  .home-experience [data-home-reveal],
  .home-experience [data-home-lineup-transition].is-lineup-updated,
  .home-screen-nav button,
  .home-screen-nav__label,
  .home-experience__to-top {
    transition-duration: 0s !important;
    animation: none !important;
  }
}