/* ===================================================================
   "What's a Case?" case-cycle animation (Emily landing handoff, 2026-07).

   One case cross-fading through three owners (Yourself → Kids → Parents).
   The SVG art lives in components/_case_cycle.html; the timer is
   js/components/case-cycle.js. This file holds only static layout: the
   embedding wrapper, the cross-fade transition, and the `hc*` positioning
   classes machine-relocated from the handoff's inline styles (CSP-safe).
   =================================================================== */

/* Embedding wrapper — centres the fixed 380x340 stack and scales it to
   the column. The stack is absolutely stacked internally, so it takes no
   part in flow width (no horizontal overflow on narrow screens). */
.case-cycle {
  position: relative;
  width: 100%;
  min-width: 0;
  height: calc(340px * var(--case-cycle-scale, 1));
  display: flex;
  justify-content: center;
}
.case-cycle #caseStack {
  margin: 0;
  transform: scale(var(--case-cycle-scale, 1));
  transform-origin: top center;
}
@media (max-width: 1023px) { .case-cycle { --case-cycle-scale: 0.9; } }
@media (max-width: 640px)  { .case-cycle { --case-cycle-scale: 0.74; } }

/* Gentle cross-fade between the three owners (the JS toggles opacity via
   the CSSOM; this eases the switch rather than a hard cut). */
.case-cycle .stackcase {
  transition: opacity 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .case-cycle .stackcase { transition: none; }
}

/* ---- Machine-relocated positioning (do not hand-edit) --------------- */
.hc0 { position:relative; width:380px; height:340px; margin-top:56px; }
.hc1 { position:absolute; left:0; top:0; width:100%; display:flex; justify-content:center; opacity:1; }
.hc2 { display:block; overflow:visible; filter:drop-shadow(0 16px 22px rgba(20,50,70,0.16)); }
.hc3 { position:absolute; left:0; top:0; width:100%; display:flex; justify-content:center; opacity:0; }