/* ===========================================================================
 * ACCORDION CHASSIS
 *
 * Owns: the outer .accordion-page wrapper and the shared structure of
 * every .accordion-strip — stacking, clip-path, overflow, cursor. Also
 * carries the per-section debug background colors so each strip is
 * visually distinguishable during layout work.
 *
 * Does NOT own:
 *   - strip header layout (css/strip-header.css)
 *   - expandable content layout (css/strip-content.css)
 *   - strip backdrops (css/strip-room.css, css/strip-panorama.css)
 *   - footer-specific layout (css/strip-footer.css)
 * ===========================================================================
 */

.accordion-page {
  position: relative;
}

/* Base strip. In the LEGACY (flow) layout these stack naturally via
   document flow; expand/collapse animates .strip-content height and the
   page reflows, with browser scroll anchoring holding visual position.
   The VIRTUAL layout (body.accordion-dynamic, below) overrides
   positioning to transform-placed absolutes so expand/collapse never
   reflows the document — see js/accordion/dynamic.js
   (USE_VIRTUAL_LAYOUT) and docs/plans/2026-07-01-transform-accordion.md. */
.accordion-strip {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Transform-based virtual layout (desktop dynamic path only). The body
   class is added by initDynamicAccordion when USE_VIRTUAL_LAYOUT is on;
   the static/touch path never gets it, so mobile keeps pure flow.
   Strips become absolute and are placed by translate3d written per
   frame from the JS virtual stack; .accordion-page gets an explicit
   JS-set height (absolute children don't contribute to auto height).
   contain: layout paint scopes each strip's per-frame height-animation
   dirtiness to its own subtree so it can't propagate to siblings or the
   document. will-change: transform promotes the placement layer. */
body.accordion-dynamic .accordion-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
  contain: layout paint;
}

/* ----- DEV AID: per-section background colors -------------------------
 * Distinct warm/cool alternating palette. Useful during layout work for
 * telling which strip you're looking at without reading the DOM. Strip 0
 * (panorama) and strip 5/6 (footer / last) get these but strip 0 also
 * has .has-panorama which overrides with #7bffff — see css/strip-panorama.css.
 * Strip 1-5 typically get the 3D room backdrop via .has-room; the
 * strip-room itself is `position: absolute; inset: 0` so it covers the
 * color below, but the color shows through in any region the room
 * doesn't paint (e.g. before the room's compositor layer settles). */
.accordion-strip:nth-child(1) { background: #1a1210; } /* deep espresso */
.accordion-strip:nth-child(2) { background: #0f1518; } /* slate teal */
.accordion-strip:nth-child(3) { background: #16111a; } /* muted plum */
.accordion-strip:nth-child(4) { background: #111614; } /* forest shadow */
.accordion-strip:nth-child(5) { background: #18140f; } /* burnt umber */
.accordion-strip:nth-child(6) { background: #0f1319; } /* deep navy */
.accordion-strip:nth-child(7) { background: #121212; } /* neutral charcoal */

/* --- Tablet (768+) --- */
@media (min-width: 768px) {
  .accordion-strip {
    margin-top: 0;
    padding-top: 0;
  }
}

/* --- Desktop (1024+) --- */
@media (min-width: 1024px) {
  .accordion-strip {
    margin-top: 0;
    padding-top: 0;
  }
}