/* =============================================================
   HOME-STORY-EXPAND-001 — Home "Discover. Plan. Go!" expand / collapse.

   One new, Home-scoped stylesheet. css/home.css, js/home.js, js/app.js and the
   shared Liquid Glass CSS are intentionally untouched. This file loads after
   css/home.css and uses #page-home selectors so it applies without !important.

   Collapsed (the default on every load): heading, description, the toggle, the
   divider with its star, and the "One App. Every Adventure." footer. Expanded:
   the existing three-card presentation. The accessible state (inert,
   aria-hidden, aria-expanded, label) is applied by js/home-story-starts.js in
   the same task as the click; the transition and `visibility` below are visual
   and a defensive backstop only.

   Cache note: this file is loaded as /css/home-story-starts.css?v1. Any later
   change to it must bump that token in index.html.
   ============================================================= */

/* ---- Collapsible panel (grid-row transition; display stays grid so the
        existing one-time card entrance animation never restarts) ---- */
#page-home .home-story-starts__panel {
  display: grid;
  grid-template-rows: 1fr;
  position: relative;
  z-index: 4;
  transition: grid-template-rows .3s ease;
}
#page-home .home-story-starts__panel-inner {
  min-height: 0;
  overflow: hidden;
}
#page-home .home-story-starts[data-collapsed="true"] .home-story-starts__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .3s ease, visibility 0s linear .3s;
}

/* ---- Collapsed spacing: no unused gap between the description, the divider
        and the footer ---- */
#page-home .home-story-starts__head {
  transition: margin-bottom .3s ease;
}
#page-home .home-story-starts__highlight {
  transition: padding-top .3s ease;
}
#page-home .home-story-starts[data-collapsed="true"] .home-story-starts__head {
  margin-bottom: 22px;
}
#page-home .home-story-starts[data-collapsed="true"] .home-story-starts__highlight {
  padding-top: 28px;
}

/* ---- Toggle: 44 x 44 circular navy glass, champagne-gold chevron and ring.
        Inset ring only: no exterior glow (the HOME-HALO-001 clean-edge rule). ---- */
#page-home .home-story-starts__toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(236, 212, 154, .62);
  border-radius: 50%;
  background: rgba(7, 31, 65, .78);
  color: #eed9a6;
  box-shadow: inset 0 0 0 1px rgba(236, 212, 154, .14);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
#page-home .home-story-starts__toggle:hover {
  border-color: rgba(243, 226, 184, .95);
  background: rgba(12, 44, 92, .9);
}
#page-home .home-story-starts__toggle:active {
  transform: scale(.94);
}
#page-home .home-story-starts__toggle svg {
  display: block;
  width: 20px;
  height: 20px;
  transition: transform .3s ease;
}
#page-home .home-story-starts__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ---- Divider star (both states): a subtle champagne-gold four-point star
        centered on the existing divider line, drawn on the footer block. ---- */
#page-home .home-story-starts__highlight::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23eed9a6' d='M12 1.5c.7 5.2 3.2 8.8 10.5 10.5-7.3 1.7-9.8 5.3-10.5 10.5C11.3 17.3 8.8 13.7 1.5 12 8.8 10.3 11.3 6.7 12 1.5z'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ---- Narrow screens: the toggle sits above the centered heading so it can
        never overlap it at 390 or 400 px ---- */
@media (max-width: 620px) {
  #page-home .home-story-starts {
    padding-top: 68px;
  }
  #page-home .home-story-starts__toggle {
    top: 12px;
    right: 12px;
  }
}

/* ---- Wider screens: the centered heading block (up to 640 px) can reach the section edge between 621 px and
        roughly 760 px; keep that block clear of the 58 px the toggle occupies at the right edge ---- */
@media (min-width: 621px) {
  #page-home .home-story-starts__head {
    padding-inline: 28px;
  }
}

/* ---- Reduced motion: the state still changes immediately, with no animation ---- */
@media (prefers-reduced-motion: reduce) {
  #page-home .home-story-starts__panel,
  #page-home .home-story-starts[data-collapsed="true"] .home-story-starts__panel,
  #page-home .home-story-starts__head,
  #page-home .home-story-starts__highlight,
  #page-home .home-story-starts__toggle,
  #page-home .home-story-starts__toggle svg {
    transition: none;
  }
}