/* =====================================================================
   Roadmap26.ascx.css - the drive to 2028 (KG/Claude 10/11/2026), on Roadmap.aspx in the HomeMaster26 night shell.
   Colors only from cssPalette26.css (--sw-*); translucent black/white for turf, lines and shadows.
   The field: six zones whose widths add to 100% (--rm-ez, --rm-grow, --rm-hold, --rm-build, --rm-scale), the ball at --rm-ball.
   When the ball moves, change --rm-ball (and the phone twin below) only.
   ===================================================================== */

.rm26 {
  --rm-ez: 6%;  --rm-grow: 18%;  --rm-hold: 22%;  --rm-build: 18%;  --rm-scale: 30%;
  --rm-ball: 59.5%;   /* October 2026: three quarters into the 2026 zone */
}

/* ---------- hero ---------- */
.rm26-hero { padding: 18px 0 8px; max-width: 46em; }
.hm26c .rm26-hero h1 { margin: 0 0 14px; font: 700 clamp(44px, 7vw, 76px)/.95 var(--sw-font-cond); text-transform: uppercase; color: var(--sw-surface); }
.hm26c .rm26-hero h1 em { font-style: normal; color: var(--sw-gold); }

/* ---------- the field ---------- */
.rm26-field {
  position: relative;
  display: flex;
  height: 190px;
  margin: 18px 0 0;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: var(--sw-radius-sm);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--sw-success) 30%, var(--sw-night));
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 5%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.rm26-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  padding: 14px 4px 0;
  text-align: center;
  border-right: 2px solid rgba(255, 255, 255, .5);
}
.rm26-zone:last-of-type { border-right: 0; }
.rm26-zone b { font: 700 clamp(15px, 2vw, 22px)/1 var(--sw-font-cond); letter-spacing: .02em; text-transform: uppercase; color: var(--sw-surface); }
.rm26-zone small { font-size: var(--sw-fs-xs); line-height: 1.2; color: var(--sw-on-night-soft); }

.rm26-ez { flex: 0 0 var(--rm-ez); justify-content: center; padding: 0; }
.rm26-ez b { writing-mode: vertical-rl; font-size: clamp(14px, 1.8vw, 20px); }
.rm26-ez--home { background: color-mix(in srgb, var(--sw-navy) 80%, transparent); transform: none; }
.rm26-ez--home b { transform: rotate(180deg); color: var(--sw-gold); }
.rm26-ez--td { background: color-mix(in srgb, var(--sw-red) 70%, transparent); }
.rm26-ez--td small { display: none; }
.rm26-z--grow  { flex: 0 0 var(--rm-grow); }
.rm26-z--hold  { flex: 0 0 var(--rm-hold); background: rgba(0, 0, 0, .32); }
.rm26-z--hold b { color: var(--sw-silver); }
.rm26-z--build {
  flex: 0 0 var(--rm-build);
  background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--sw-gold) 30%, transparent) 0 12px, transparent 12px 24px);
  background-size: 34px 34px;
  animation: rm26-tape 1.6s linear infinite;
}
.rm26-z--build b { color: var(--sw-gold); }
.rm26-z--scale { flex: 0 0 var(--rm-scale); background: color-mix(in srgb, var(--sw-blue) 26%, transparent); }

/* cones on the 2026 sidelines */
.rm26-cone {
  position: absolute;
  bottom: 8px;
  width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 18px solid var(--sw-gold-dark);
  animation: rm26-blink 1.2s ease-in-out infinite;
}
.rm26-cone--a { left: 10px; }
.rm26-cone--b { right: 10px; animation-delay: .6s; }

/* the drive: a solid line to the ball, dashes from the ball to the end zone */
.rm26-drive, .rm26-togo { position: absolute; top: 118px; height: 4px; border-radius: 2px; }
.rm26-drive { left: 3%; width: calc(var(--rm-ball) - 3%); background: var(--sw-gold); transform-origin: left center; animation: rm26-drive 2.4s cubic-bezier(.3, .7, .3, 1) both; }
.rm26-togo  { left: var(--rm-ball); right: 6.5%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .7) 0 10px, transparent 10px 18px); animation: rm26-fade .6s 2.2s both; }

.rm26-ball {
  position: absolute;
  top: 108px;
  left: var(--rm-ball);
  width: 36px; height: 24px;
  margin-left: -18px;
  border-radius: 50%;
  background: var(--sw-red-deep);
  box-shadow: inset -4px -3px 0 rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .5);
  animation: rm26-ball 2.4s cubic-bezier(.3, .7, .3, 1) both;
}
.rm26-ball::before {   /* the laces */
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: 10px;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 2px, transparent 2px 4px);
  border-top: 1px solid rgba(255, 255, 255, .9);
}
.rm26-here {
  position: absolute;
  top: 32px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  white-space: nowrap;
  font: 700 var(--sw-fs-xs)/1.2 var(--sw-font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sw-night);
  background: var(--sw-gold);
  border-radius: var(--sw-radius-pill);
  animation: rm26-fade .5s 2.3s both;
}

.hm26c .rm26-dust { margin: 14px 0 0; font-size: var(--sw-fs-md); color: var(--sw-on-night-faint); }
.rm26-dust b { color: var(--sw-silver); }

/* ---------- the eras ---------- */
.rm26-eras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 40px 0 0;
  align-items: start;
}
.rm26-era {
  position: relative;
  padding: 22px 22px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 5px solid var(--rm-era);
  border-radius: 0;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.rm26-era--build { --rm-era: var(--sw-gold); }
.rm26-era--scale { --rm-era: var(--sw-blue); }
.rm26-era--td    { --rm-era: var(--sw-red); }
.hm26c .rm26-tag { margin: 0 0 6px; font: 700 var(--sw-fs-xs)/1 var(--sw-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sw-gold); }
.hm26c .rm26-era h2 { margin: 0 0 8px; font: 700 34px/1 var(--sw-font-cond); text-transform: uppercase; color: var(--sw-surface); }
.hm26c .rm26-era header p:last-child { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--sw-on-night-soft); }
.hm26c .rm26-era h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font: 700 var(--sw-fs-sm)/1 var(--sw-font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--sw-on-night); }

.hm26c .rm26-list { margin: 0; padding: 0; list-style: none; }
.rm26-list li { position: relative; padding: 5px 0 5px 24px; font-size: 15px; line-height: 1.4; color: var(--sw-on-night); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.rm26-list li:last-child { border-bottom: 0; }
.rm26-list li::before { content: ""; position: absolute; left: 2px; top: 11px; }
/* done: a gold check */
.rm26-list--done li::before { width: 10px; height: 5px; border-left: 2px solid var(--sw-gold); border-bottom: 2px solid var(--sw-gold); transform: rotate(-45deg); top: 10px; }
/* in the shop: a small cone */
.rm26-list--shop li::before { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--sw-gold-dark); top: 9px; }
/* next: an open yard marker */
.rm26-list--next li::before { width: 9px; height: 9px; border: 2px solid var(--rm-era); border-radius: 50%; top: 10px; }

.rm26-mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.rm26-mark--done { background: var(--sw-gold); }
.rm26-mark--shop { width: 0; height: 0; border-radius: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 13px solid var(--sw-gold-dark); }

/* Swami peeks over the 2028 card */
.rm26-genie { display: block; width: 70%; max-width: 220px; height: auto; margin: 18px auto 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); animation: rm26-float 4s ease-in-out infinite; }

.rm26-back { margin: 36px 0 8px; text-align: center; }

/* ---------- motion ---------- */
@keyframes rm26-ball  { from { left: 3%; } to { left: var(--rm-ball); } }   /* no spin: the "You are here" tag rides on the ball */
@keyframes rm26-drive { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rm26-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm26-tape  { from { background-position: 0 0; } to { background-position: 34px 0; } }
@keyframes rm26-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rm26-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- tablet: the cards stack ---------- */
@media (max-width: 900px) {
  .rm26-eras { grid-template-columns: minmax(0, 1fr); }
  .rm26-genie { max-width: 160px; }
}

/* ---------- phone: the field stands up and the drive runs down the screen ---------- */
@media (max-width: 640px) {
  .rm26-field { flex-direction: column; height: 560px; background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 5%); }
  .rm26-zone { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 0 0 0 16px; align-items: center; border-right: 0; border-bottom: 2px solid rgba(255, 255, 255, .5); text-align: left; }
  .rm26-zone:last-of-type { border-bottom: 0; }
  .rm26-ez { justify-content: center; padding: 0; }
  .rm26-ez b, .rm26-ez--home b { writing-mode: horizontal-tb; transform: none; }
  .rm26-ez--td small { display: inline; color: var(--sw-surface); }
  .rm26-ez { flex-basis: 8%; }
  .rm26-z--grow { flex-basis: 17%; } .rm26-z--hold { flex-basis: 21%; } .rm26-z--build { flex-basis: 18%; } .rm26-z--scale { flex-basis: 28%; }
  .rm26 { --rm-ball: 59.5%; }
  .rm26-cone--a { left: auto; right: 44px; bottom: 12px; }
  .rm26-cone--b { right: 16px; bottom: 12px; }
  .rm26-drive, .rm26-togo { top: auto; left: auto; right: 34%; width: 4px; height: auto; }
  .rm26-drive { top: 4%; height: calc(var(--rm-ball) - 4%); transform-origin: center top; animation-name: rm26-drive-v; }
  .rm26-togo  { top: var(--rm-ball); bottom: 9%; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .7) 0 10px, transparent 10px 18px); }
  .rm26-ball { top: var(--rm-ball); left: auto; right: 34%; margin: -18px -10px 0 0; width: 24px; height: 36px; animation-name: rm26-ball-v; }
  .rm26-ball::before { left: 10px; right: auto; top: 10px; bottom: 10px; width: 3px; height: auto; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .9); background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .9) 0 2px, transparent 2px 4px); }
  .rm26-here { top: 50%; left: auto; right: 32px; transform: translateY(-50%); }
  @keyframes rm26-ball-v  { from { top: 4%; } to { top: var(--rm-ball); } }
  @keyframes rm26-drive-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}

@media (prefers-reduced-motion: reduce) {
  .rm26-ball, .rm26-drive, .rm26-togo, .rm26-here, .rm26-z--build, .rm26-cone, .rm26-genie { animation: none; }
}