/* Time-travel dial CTA — TIME HUB GUIDE PAGES ONLY (centuries & decades).
   Scoped to .time-dial-wrap so place pages and their .explore-cta button
   are untouched. The anchor keeps class="explore-cta" for tooling compat,
   but every visual bit of the standard button is reset below. */
.time-dial-wrap { text-align: center; margin: 2em 0 1.6em; }
.time-dial-wrap .explore-cta {
  display: inline-block;
  padding: 14px;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: inherit;
}
.time-dial-wrap .explore-cta::before { content: none; }
.time-dial-wrap .explore-cta:hover,
.time-dial-wrap .explore-cta:active {
  transform: none;
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: inherit;
}
.time-dial-wrap .explore-cta:focus-visible {
  outline: 3px solid rgba(31,162,255,0.7);
  outline-offset: 6px;
  border-radius: 50%;
}

/* The clock face. */
.time-dial {
  --dial: 178px;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: var(--dial);
  height: var(--dial);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  color: #eaf6ff;
  background:
    radial-gradient(circle at 50% 34%, rgba(88,170,255,0.22), rgba(10,20,36,0.0) 62%),
    radial-gradient(circle, #101d33 0%, #0a1425 68%, #060c18 100%);
  border: 1.5px solid rgba(120,200,255,0.55);
  box-shadow:
    0 10px 34px rgba(2,8,20,0.6),
    0 0 22px rgba(31,162,255,0.22),
    inset 0 0 26px rgba(31,162,255,0.12),
    inset 0 2px 6px rgba(255,255,255,0.08);
  transition: transform .22s ease, box-shadow .25s ease, border-color .2s ease;
}
/* Orbiting edge light — the same traveling white segment the standard
   place-page buttons have, bent into a circle. Own @property so it never
   depends on news.css internals; static segment where @property is missing. */
@property --dial-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.time-dial::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(from var(--dial-angle), transparent 0deg, transparent 245deg, rgba(160,215,255,0.85) 295deg, #ffffff 320deg, transparent 345deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: dial-orbit 3.2s linear infinite;
  pointer-events: none;
  transition: filter .25s ease;
}
@keyframes dial-orbit { to { --dial-angle: 360deg; } }
/* Hover: the traveling light burns brighter. */
.time-dial-wrap .explore-cta:hover .time-dial::before,
.time-dial-wrap .explore-cta:focus-visible .time-dial::before {
  filter: brightness(1.4) drop-shadow(0 0 6px rgba(255,255,255,0.75));
}
/* Backdrop beacon so the dial reads as a button, not decoration:
   a breathing halo behind it plus an expanding ping ring. */
.time-dial-wrap .explore-cta { position: relative; }
.time-dial-wrap .explore-cta::after {
  content: "";
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,162,255,0.34) 0%, rgba(31,162,255,0.13) 46%, transparent 70%);
  animation: dial-halo 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes dial-halo {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.time-dial::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(140,205,255,0.55);
  opacity: 0.8;
  animation: dial-ping 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes dial-ping {
  0% { opacity: 0.8; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.28); }
  100% { opacity: 0; transform: scale(1.28); }
}
/* Minute ticks around the rim. */
.dial-ticks {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(170,220,255,0.75) 0deg 1.2deg,
    transparent 1.2deg 6deg
  );
  -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 83%);
  mask: radial-gradient(closest-side, transparent 82%, #000 83%);
  pointer-events: none;
  transition: transform .7s cubic-bezier(.2,.9,.25,1.2);
}
/* Clock hands: hour + minute parked at 10:09, second hand ticks. */
.dial-hands { position: absolute; inset: 0; pointer-events: none; }
.dial-hands i {
  position: absolute;
  left: calc(50% - 1px);
  bottom: 50%;
  width: 2px;
  border-radius: 2px;
  background: rgba(200,232,255,0.85);
  transform-origin: 50% 100%;
}
.dial-hands .h { height: 24%; transform: rotate(-50deg); opacity: .9; }
.dial-hands .m { height: 33%; transform: rotate(48deg); opacity: .9; }
.dial-hands .s {
  width: 1.5px;
  height: 38%;
  left: calc(50% - 0.75px);
  background: #7cc7ff;
  box-shadow: 0 0 6px rgba(124,199,255,0.9);
  animation: dial-tick 60s steps(60) infinite;
}
@keyframes dial-tick { to { transform: rotate(360deg); } }
/* Center pin. */
.dial-hands::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfeaff;
  box-shadow: 0 0 8px rgba(160,215,255,0.9);
}
/* The date range as the dial's centerpiece. */
.dial-center {
  position: relative;
  z-index: 1;
  max-width: 72%;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: #f2f9ff;
  text-shadow: 0 2px 10px rgba(2,8,20,0.8), 0 0 18px rgba(31,162,255,0.35);
}
.dial-center.dial-long { font-size: 1.04rem; }
.dial-open {
  position: relative;
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #9fd0ff;
  opacity: 0.9;
}
/* Hover: dial it — glow swells, ticks rotate, face lifts. */
.time-dial-wrap .explore-cta:hover .time-dial,
.time-dial-wrap .explore-cta:focus-visible .time-dial {
  transform: scale(1.05);
  border-color: rgba(160,215,255,0.95);
  box-shadow:
    0 16px 44px rgba(2,8,20,0.7),
    0 0 46px rgba(31,162,255,0.45),
    inset 0 0 30px rgba(31,162,255,0.2),
    inset 0 2px 6px rgba(255,255,255,0.12);
}
.time-dial-wrap .explore-cta:hover .dial-ticks,
.time-dial-wrap .explore-cta:focus-visible .dial-ticks {
  transform: rotate(45deg);
}
.time-dial-wrap .explore-cta:active .time-dial { transform: scale(1.01); }

/* "Moving through time" image pills — neighbor periods as darkened
   photo pills with the year centered. Row is centered. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.time-travel-pills {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0.4em 0 0;
}
.time-travel-pills.top { margin: 14px 0 6px; }
/* Left-flowing variant for place-guide sections (cities, states). */
.time-travel-pills.left { justify-content: flex-start; }
/* Uniform capsules so long names can't stretch the grid. */
.time-travel-pills.left .time-pill {
  flex: 0 0 auto;
  width: 172px;
  height: 68px;
  padding: 10px 14px;
  font-size: 0.92rem;
}
.time-travel-pills.left .time-pill span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 600px) {
  .time-travel-pills.left .time-pill { width: 142px; height: 60px; font-size: 0.85rem; }
}
.time-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  max-width: 230px;
  padding: 15px 24px;
  border-radius: 999px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #0a1425;
  border: 1px solid rgba(120,200,255,0.4);
  color: #f2f9ff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.time-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4,10,20,0.58);
  transition: background 0.2s ease;
}
.time-pill span { position: relative; z-index: 1; }
a.time-pill:hover::before { background: rgba(4,10,20,0.36); }
a.time-pill:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 26px rgba(2,8,20,0.55), 0 0 22px rgba(31,162,255,0.35);
  color: #fff;
  text-decoration: none;
}
a.time-pill:focus-visible { outline: 3px solid rgba(31,162,255,0.7); outline-offset: 3px; }
.time-pill.current {
  border-color: rgba(232,182,76,0.85);
  box-shadow: 0 0 18px rgba(232,182,76,0.28);
  cursor: default;
}
.time-pill-arrow { opacity: 0.55; font-weight: 700; }
@media (max-width: 600px) {
  .time-pill { min-width: 118px; padding: 11px 16px; font-size: 0.92rem; }
}
@media (prefers-reduced-motion: reduce) {
  .time-pill, .time-pill::before { transition: none; }
}
@media (max-width: 600px) {
  .time-dial { --dial: 152px; }
  .dial-center { font-size: 1.3rem; }
  .dial-center.dial-long { font-size: 0.94rem; }
}
@media (prefers-reduced-motion: reduce) {
  .time-dial, .dial-ticks { transition: none; }
  .time-dial::before { animation: none; }
  .time-dial-wrap .explore-cta::after, .time-dial::after { animation: none; }
  .dial-hands .s { animation: none; }
  .time-dial-wrap .explore-cta:hover .time-dial { transform: none; }
  .time-dial-wrap .explore-cta:hover .dial-ticks { transform: none; }
}