/* Homepage motion (MOTION_HOME_ENABLED, or ?motion=1 to preview).
   ------------------------------------------------------------------
   Movement on top of the existing homepage, which keeps its colours, type and
   sections. Two families:
   - the page: sections reveal as they arrive, cards lift and zoom their image,
     an "On this page" index follows the scroll, the hero settles in on load;
   - the data: ward score bars grow from zero, figures count up, the crime
     report map lights up district by district (crime_map.html).
   Only content that has been revealed is ever hidden: the hidden states sit
   under html.motion, which static/js/home_motion.js sets once it is running,
   so without JavaScript (or with reduced motion) the page is the page.
   One easing throughout: cubic-bezier(.22,1,.36,1). */

:root {
  --hm-ease: cubic-bezier(.22, 1, .36, 1);
  --hm-amber: #f59e0b;
  --hm-orange: #ea580c;
  --hm-navy: #0f172a;
  --hm-index-h: 3.25rem;
}

html { scroll-behavior: smooth; }

/* Everything sticky sits under the site's fixed header: --ecpt-content-offset is the
   navigation plus the CT Now strip when it is on (navbar.html keeps it current as the
   strip is toggled), and in the iPhone app it includes the status bar (native.css). */

/* Reading progress: a hairline of amber under the navigation. */
.hm-progress {
  position: fixed; left: 0; top: var(--ecpt-content-offset, var(--ecpt-nav-height, 64px)); z-index: 1001;
  width: 100%; height: 2px; transform-origin: left; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, var(--hm-amber), var(--hm-orange));
}

/* Navigation: a deeper shadow once the page has scrolled; links underline from the centre. */
.ecpt-nav { transition: box-shadow .35s var(--hm-ease), background-color .35s var(--hm-ease); }
html.hm-scrolled .ecpt-nav { box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .45); }
.ecpt-nav__link { position: relative; }
.ecpt-nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: .35rem; width: 0; height: 2px; border-radius: 2px; background: var(--hm-amber);
  transition: width .25s var(--hm-ease), left .25s var(--hm-ease);
}
.ecpt-nav__link:hover::after, .ecpt-nav__link:focus-visible::after { left: .75rem; width: calc(100% - 1.5rem); }

/* Hero: the copy settles in on load, the photo eases out of a slight zoom, a wave
   hands over to the next section (coloured by the script from that section). */
html.motion .hero-section .hero-badge,
html.motion .hero-section h1,
html.motion .hero-section .hero-subtitle,
html.motion .hero-section .hero-search,
html.motion .hero-section .hero-actions,
html.motion .hero-section .hm-cue { animation: hm-rise .8s var(--hm-ease) both; }
html.motion .hero-section h1 { animation-delay: .08s; }
html.motion .hero-section .hero-subtitle { animation-delay: .18s; }
html.motion .hero-section .hero-search { animation-delay: .26s; }
html.motion .hero-section .hero-actions { animation-delay: .34s; }
html.motion .hero-section .hm-cue { animation-delay: .5s; }
html.motion .hero-section .carousel-wrapper { animation: hm-settle 1.2s var(--hm-ease) both; }
html.motion .hero-section .carousel-item.active img { animation: hm-kenburns 9s var(--hm-ease) both; transform-origin: 50% 40%; }
.hero-section .carousel-wrapper { border-radius: 28px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .45); }
.btn-hero { transition: transform .25s var(--hm-ease), box-shadow .25s var(--hm-ease), filter .25s var(--hm-ease); }
.btn-hero:hover { transform: translateY(-2px) scale(1.03); }
.btn-hero:active { transform: scale(.98); }
.btn-hero-primary:hover { animation: hm-pulse .9s ease-in-out; filter: brightness(1.06); }
.hero-search { transition: box-shadow .25s var(--hm-ease), transform .25s var(--hm-ease); }
.hero-search:focus-within { box-shadow: 0 12px 30px -12px rgba(245, 158, 11, .45); transform: translateY(-1px); }
.hm-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; display: block; width: 100%; height: 56px; pointer-events: none; }
html.motion .hero-section { padding-bottom: calc(var(--home-section-y, 3rem) + 2.5rem); }

/* Scroll cue under the hero buttons (hero.html, only with motion on). */
.hm-cue { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; margin-top: .75rem; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; text-decoration: none; }
.hm-cue:hover, .hm-cue:focus-visible { color: var(--hm-navy); }
.hm-cue__mouse { position: relative; display: inline-block; width: 18px; height: 28px; border: 2px solid #cbd5e1; border-radius: 10px; }
.hm-cue__mouse::after { content: ""; position: absolute; left: 50%; top: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--hm-amber); animation: hm-cue 1.6s ease-in-out infinite; }

/* "On this page": sticky under the navigation, one numbered pill per section. */
.hm-index {
  position: sticky; top: var(--ecpt-content-offset, var(--ecpt-nav-height, 64px)); z-index: 900;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
}
.hm-index__scroll {
  display: flex; align-items: center; gap: .4rem; max-width: 1320px; margin-inline: auto; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  padding: .45rem max(16px, env(safe-area-inset-right, 0px)) .45rem max(16px, env(safe-area-inset-left, 0px));
}
.hm-index__scroll::-webkit-scrollbar { display: none; }
.hm-index__label { flex: none; padding-right: .6rem; margin-right: .2rem; border-right: 1px solid #e2e8f0; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #64748b; }
.hm-pill {
  flex: none; display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .9rem 0 .35rem; scroll-snap-align: start;
  border: 1px solid rgba(15, 23, 42, .12); border-radius: 999px; background: #fff; color: rgba(15, 23, 42, .85);
  font-size: .84rem; font-weight: 600; white-space: nowrap; text-decoration: none;
  transition: border-color .25s var(--hm-ease), box-shadow .25s var(--hm-ease), color .25s var(--hm-ease), transform .25s var(--hm-ease);
}
.hm-pill__n {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: #f8fafc; color: var(--hm-orange); font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color .25s var(--hm-ease), color .25s var(--hm-ease);
}
.hm-pill:hover, .hm-pill:focus-visible { border-color: rgba(245, 158, 11, .6); color: var(--hm-navy); box-shadow: 0 8px 20px rgba(15, 34, 51, .08); transform: translateY(-1px); }
.hm-pill.is-active { border-color: rgba(245, 158, 11, .85); color: var(--hm-navy); box-shadow: 0 10px 25px rgba(15, 34, 51, .1); }
.hm-pill:hover .hm-pill__n, .hm-pill:focus-visible .hm-pill__n, .hm-pill.is-active .hm-pill__n { background: var(--hm-amber); color: var(--hm-navy); }
.home > section, .home > .home-charts { scroll-margin-top: calc(var(--ecpt-content-offset, var(--ecpt-nav-height, 64px)) + var(--hm-index-h) + .5rem); }

/* Sections reveal as they arrive: the heading row first, then the cards in a stagger. */
.hm-child { transition: opacity .7s var(--hm-ease), transform .7s var(--hm-ease); transition-delay: calc(var(--hm-i, 0) * 70ms); }
html.motion [data-hm-reveal]:not(.is-in) .hm-child { opacity: 0; transform: translateY(18px); }

/* Cards lift and zoom their image. */
.hm-card { transition: transform .3s var(--hm-ease), box-shadow .3s var(--hm-ease), opacity .7s var(--hm-ease); }
.hm-card:hover, .hm-card:focus-within { transform: translateY(-6px); box-shadow: 0 18px 30px -12px rgba(15, 23, 42, .25); }
.hm-card img { transition: transform .6s var(--hm-ease); }
.hm-card:hover img, .hm-card:focus-within img { transform: scale(1.05); }
.hm-zoom { overflow: hidden; }

/* "View all" links underline from the centre, like the navigation. */
.hm-grow { position: relative; text-decoration: none !important; }
.hm-grow::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: width .25s var(--hm-ease), left .25s var(--hm-ease);
}
.hm-grow:hover::after, .hm-grow:focus-visible::after { left: 0; width: 100%; }

/* Ward score bars grow from zero, staggered, the first time their card arrives. */
html.motion .nsr-pillar__track > span { transform-origin: left; transition: transform 1s var(--hm-ease); }
html.motion [data-hm-bars]:not(.is-grown) .nsr-pillar__track > span { transform: scaleX(0); }

/* Crime report map: points light up one by one, each with a ripple. */
html.motion [data-hcm]:not(.is-lit) [data-hcm-point]:not(.is-on) { opacity: 0; }
[data-hcm-point] { transition: opacity .6s ease; }
[data-hcm-point].is-on .hcm__ring { animation: hm-ripple 1.4s ease-out 1; }

/* Chart figures rise with the scroll itself where the browser can do it. */
@supports (animation-timeline: view()) {
  html.motion .home-charts .ct-figure { animation: hm-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}

@keyframes hm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hm-settle { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hm-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hm-pulse { 0%, 100% { box-shadow: 0 4px 15px rgba(245, 158, 11, .3); } 50% { box-shadow: 0 16px 32px -10px rgba(245, 158, 11, .6); } }
@keyframes hm-cue { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: .3; } }
@keyframes hm-ripple { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hm-card, .hm-child, .btn-hero, .hm-pill, .hero-search, .ecpt-nav, [data-hcm-point] { transition: none !important; }
  .hm-card:hover, .hm-card:focus-within, .btn-hero:hover { transform: none; }
  .hm-card:hover img, .hm-card:focus-within img { transform: none; }
  .hm-cue__mouse::after, .btn-hero-primary:hover { animation: none; }
}