/* =====================================================================
   Home page: the Pragya Petika film, then the paths into the hub (Latest, Data, BI, AI and the two
   release digests), a search that hands off to Latest, and About.
   ===================================================================== */
.home-page { padding: 0; background: var(--bg); }

/* --- film --- */
/* Full screen: the film fills the first screen below the header. It is never cropped (contain), so the title and
   tagline always show; any spare space is the film's own deep blue, so the edges blend in. */
.film-hero {
  position: relative; height: 100vh; height: 100svh; min-height: 420px; color: #dbe6f0; overflow: hidden;
  background: #000d21;
}
.film-frame { position: absolute; inset: var(--nav-h) 0 0; background: #000d21; }
.film-video { display: block; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.film-frame:fullscreen { inset: 0; }
.film-controls {
  position: absolute; right: 18px; bottom: 22px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
}
.film-controls .film-btn { opacity: 0.6; transition: opacity 0.25s ease, background 0.2s ease; }
.film-frame:hover .film-controls .film-btn, .film-controls .film-btn:focus-visible,
.film-hero:not(.is-playing) .film-controls .film-btn, .film-controls .film-btn.film-sound:not([aria-pressed="true"]) { opacity: 1; }
@media (hover: none) { .film-controls .film-btn { opacity: 1; } }
.film-sound .i-sound, .film-sound[aria-pressed="true"] .i-mute { display: none; }
.film-sound[aria-pressed="true"] .i-sound { display: block; }
@keyframes soundCall { 50% { box-shadow: 0 0 0 7px rgba(255, 215, 0, 0.22); } }
.film-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px;
  font: 700 12.5px/1 var(--font-sans); letter-spacing: 0.04em; color: #fff;
  background: rgba(1, 21, 48, 0.62); border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: pointer;
}
.film-btn:hover { background: #ffd700; color: #011f45; border-color: #ffd700; }
.film-btn.film-sound:not([aria-pressed="true"]) { color: #011f45; background: #ffd700; border-color: #ffd700; animation: soundCall 2.4s ease-in-out infinite; }
.film-btn:focus-visible { outline: 2px solid #ffd700; outline-offset: 2px; }
.film-btn svg { width: 16px; height: 16px; }
.film-btn .i-pause, .film-hero.is-playing .film-btn .i-play { display: none; }
.film-hero.is-playing .film-btn .i-pause { display: block; }
.film-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.08); }
.film-progress i { display: block; height: 100%; background: linear-gradient(90deg, #4cade9, #ffd700); transform: scaleX(0); transform-origin: left; }

.film-scroll {
  position: absolute; left: 22px; bottom: 22px; z-index: 2;
  display: flex; width: max-content; align-items: center; gap: 8px; padding: 9px 18px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffd700; border: 1px solid rgba(255, 215, 0, 0.45); background: rgba(255, 215, 0, 0.06);
}
.film-scroll:hover { background: #ffd700; color: #011f45; }
.film-scroll span { display: inline-block; }
.film-hero.is-ended .film-scroll { animation: homePulse 1.8s ease-in-out 3; }
.film-hero.is-ended .film-scroll span { animation: homeNudge 1.2s ease-in-out infinite; }
@keyframes homePulse { 50% { box-shadow: 0 0 0 8px rgba(255, 215, 0, 0.14); } }
@keyframes homeNudge { 50% { transform: translateY(3px); } }

/* --- paths --- */
.home-nav-wrap { padding-top: 56px; padding-bottom: 24px; scroll-margin-top: calc(var(--nav-h) + 8px); }
.home-intro { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.home-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.home-kicker .deva { font-size: 15px; letter-spacing: 0; }
.home-intro h1 { margin-top: 12px; font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; color: var(--text); }
.home-intro h1 span { color: var(--accent); }
.home-intro p { margin: 14px auto 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--text-muted); }

.home-go {
  display: flex; align-items: center; gap: 10px; max-width: 620px; margin: 26px auto 0; padding: 6px 6px 6px 18px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
}
.home-go:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(5, 143, 206, 0.16), var(--shadow-md); }
.home-go svg { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
.home-go input { flex: 1; min-width: 0; padding: 10px 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15.5px; color: var(--text); }
.home-go button { flex: none; padding: 11px 22px; border: 0; border-radius: 999px; font: 700 14px/1 var(--font-sans); color: #fff; background: var(--navy-700); cursor: pointer; }
.home-go button:hover { background: var(--navy-950); }

.path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.path-card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 22px; min-height: 196px;
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); color: var(--text);
  box-shadow: var(--shadow-sm); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.path-card:hover, .path-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.path-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 12px; color: var(--navy-700); background: rgba(5, 143, 206, 0.1); }
.path-ico svg { width: 23px; height: 23px; }
.path-kick { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.path-card b { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -0.015em; }
.path-card small { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.path-go { position: absolute; top: 22px; right: 22px; font-size: 20px; color: var(--accent); transition: transform 0.2s ease; }
.path-card:hover .path-go { transform: translateX(4px); }
.path-lead { color: #fff; border-color: transparent; background: linear-gradient(135deg, #011f45 0%, #03438e 65%, #024997 100%); }
.path-lead .path-ico { color: #011f45; background: #ffd700; }
.path-lead .path-kick { color: #ffd700; }
.path-lead small { color: #c4d2e0; }
.path-lead .path-go { color: #ffd700; }

.home-extra { margin-top: 26px; text-align: center; font-size: 14px; color: var(--text-muted); }
.home-extra a { font-weight: 700; color: var(--accent); }

.home-about { padding-top: 40px; padding-bottom: 80px; }

:root[data-theme="dark"] .path-ico { color: #4cade9; background: rgba(76, 173, 233, 0.12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .path-ico { color: #4cade9; background: rgba(76, 173, 233, 0.12); }
}

@media (max-width: 960px) { .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  /* the header is solid on small screens, so the film starts below it */
  .film-hero { height: calc(100svh - var(--nav-h)); margin-top: var(--nav-h); min-height: 0; }
  .film-frame { inset: 0; }
}
@media (max-width: 860px) and (max-aspect-ratio: 4/3) {
  .film-scroll { left: 50%; bottom: 76px; transform: translateX(-50%); }
  .film-controls { left: 12px; right: 12px; justify-content: center; }
}
@media (max-width: 600px) {
  .path-grid { grid-template-columns: 1fr; gap: 12px; }
  .path-card { min-height: 0; padding: 18px 18px 16px; }
  .path-card b { font-size: 1.25rem; }
  .home-nav-wrap { padding-top: 36px; }
  .home-intro p { font-size: 15.5px; }
  .home-go { padding-left: 14px; }
  .home-go button { padding: 10px 16px; }
  .film-btn { padding: 7px 11px 7px 9px; }
  .film-btn-label { display: none; }
  .film-controls { right: 10px; bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .film-hero.is-ended .film-scroll, .film-hero.is-ended .film-scroll span, .film-btn.film-sound { animation: none !important; }
  .path-card, .path-go { transition: none; }
}