/* ==========================================================================
   00 / HOMEPAGE — HOMEPAGE_ACCORDION
   DEFAULT: six strips of 350px (2100px total).
   PROJECT_ACTIVE_n: active strip 700px, others 280px (still 2100px).
   Transition: Mouse enter → Smart animate, Gentle, 767ms.
   ========================================================================== */

.home {
  padding-top: var(--header-h);
}

.accordion {
  display: flex;
  flex-direction: column;
  container-type: inline-size;   /* lets strips scale with the width (cqw) */
}

.strip {
  position: relative;
  display: block;
  height: var(--strip-h-scaled);
  overflow: hidden;
  background: var(--c-header);
  transition: height var(--dur-accordion) var(--ease-gentle-767);
}

.accordion.has-active .strip { height: var(--strip-h-inactive-scaled); }
.accordion.has-active .strip.is-active { height: var(--strip-h-active-scaled); }

/* The 1440x800 image FILLs a 700px-tall rect in the resting state, which
   centres it 50px above the strip's top edge. When active, the rect becomes
   800px tall and the image sits at the top edge. Above 1440px every value
   scales with the width, so the 1440 crop and focal point are preserved.
   Below 1440px the image keeps its 800px height and crops at the sides. */
.strip__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--strip-img-h-scaled);
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(0, var(--strip-img-offset-scaled), 0);
  transition: transform var(--dur-accordion) var(--ease-gentle-767);
}
.strip.is-active .strip__img { transform: none; }

/* P0n_GRADIENT: black 0% at 50% → black 100% at 100% of the 800px image */
.strip__gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--strip-img-h-scaled);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
  opacity: 0;
  transition: opacity var(--dur-accordion) var(--ease-gentle-767);
  pointer-events: none;
}

.strip__title {
  position: absolute;
  left: var(--strip-title-x-scaled);
  top: var(--strip-title-y-scaled);
  font-family: var(--font-ayuthaya);
  font-weight: 400;
  font-size: var(--t-accordion-size);
  line-height: var(--t-accordion-lh);
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-accordion) var(--ease-gentle-767);
  pointer-events: none;
}

.strip.is-active .strip__gradient,
.strip.is-active .strip__title { opacity: 1; }

/* ---- Site entrance: the accordion rises as one composition ------------- */
body.is-loading .accordion { visibility: hidden; }

body.entrance-pending .accordion {
  transform: translate3d(0, 100vh, 0);
}
body.entrance-run .accordion {
  transform: none;
  transition: transform var(--dur-page) var(--ease-gentle-1022);
  transition-delay: calc(var(--entrance-start) + var(--entrance-rise-delay));
}