/* =========================
   AER’YNDOR TIMELINE (iframe-safe)
   Files:
     - index.html
     - timeline.css
     - data.js
     - timeline.js
========================= */

:root{
  --bg:#0b0b12;
  --panel:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);

  --lost: rgba(124,58,237,1);    /* purple */
  --dawn: rgba(34,197,94,1);     /* green */
  --reforged: rgba(56,189,248,1);/* cyan */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:transparent;
  color:var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

.atlHost{
  width:100%;
  padding:12px; /* breathing room inside iframe */
}

/* Core card */
.atl{
  --side-pad: 36px;  /* line inset left/right */
  --dot-size: 12px;

  background:var(--bg);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}

/* Header */
.atl__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.atl__eyebrow{
  font-size:12px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.60);
}
.atl__title{
  margin:4px 0 0;
  font-size:34px;
  letter-spacing:.01em;
}
.atl__h2{
  margin:0;
  font-size:18px;
  font-weight:800;
}
.atl__sub{
  margin:6px 0 0;
  color:var(--muted);
  line-height:1.35;
  max-width:760px;
}
.atl__controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}
.atl__q{
  width:360px;
  max-width:82vw;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:0;
}
.atl__btn{
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
}
.atl__btn:hover{ border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.09); }

/* Timeline frame */
.atl__frame{
  border:1px solid var(--line);
  background:rgba(0,0,0,.14);
  border-radius:14px;
  overflow:visible; /* allows tooltips */
}
.atl__view{ overflow:visible; padding:14px; }
.atl__stage{ position:relative; height:132px; width:100%; }

/* Colored line */
.atl__line{
  position:absolute;
  left:var(--side-pad);
  right:var(--side-pad);
  top:64px;
  height:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:
    linear-gradient(90deg,
      rgba(124,58,237,.35) 0%,
      rgba(124,58,237,.35) var(--p1),
      rgba(34,197,94,.28)  var(--p1),
      rgba(34,197,94,.28)  var(--p2),
      rgba(56,189,248,.30) var(--p2),
      rgba(56,189,248,.30) 100%
    );
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.atl__line:after{
  content:"";
  position:absolute;
  inset:-24px -6px;
  background:linear-gradient(90deg,
    rgba(124,58,237,.10),
    rgba(56,189,248,.10),
    rgba(34,197,94,.10),
    rgba(124,58,237,.10)
  );
  filter:blur(18px);
  opacity:.9;
  pointer-events:none;
}

/* Age icons */
.atl__ageIcons{
  position:absolute;
  left:0; right:0;
  top:64px;
  pointer-events:none;
}
.atl__ageIcon{
  position:absolute;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;

  font-size:16px;
  color:rgba(255,255,255,.92);
  background:var(--bg);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:6px 8px;
  cursor:default;
  box-shadow:0 0 0 6px rgba(0,0,0,.35);
  z-index:5;
}
.atl__ageIcon[data-age="a1"]{ box-shadow:0 0 0 6px rgba(124,58,237,.25); }
.atl__ageIcon[data-age="a2"]{ box-shadow:0 0 0 6px rgba(34,197,94,.22); }
.atl__ageIcon[data-age="a3"]{ box-shadow:0 0 0 6px rgba(56,189,248,.22); }

.atl__ageIcon::after{
  content:attr(data-label);
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  padding:5px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.85);
  color:rgba(255,255,255,.95);
  font-size:13px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:9999;
}
.atl__ageIcon:hover::after,
.atl__ageIcon:focus::after{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

/* Event dots */
.atl__dots{ position:absolute; left:0; right:0; top:0; bottom:0; }
.atl__dot{
  position:absolute;
  top:64px;
  transform:translate(-50%,-50%);
  width:var(--dot-size);
  height:var(--dot-size);
  border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.92);
  box-shadow:0 0 0 7px rgba(255,255,255,.10);
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, opacity .14s ease;
  z-index:4;
}
.atl__dot:hover,.atl__dot:focus{
  outline:none;
  transform:translate(-50%,-50%) scale(1.25);
  box-shadow:0 0 0 9px rgba(255,255,255,.14);
}
.atl__dot[data-active="1"]{
  transform:translate(-50%,-50%) scale(1.22);
  box-shadow:0 0 0 10px rgba(255,255,255,.16);
}

.atl__dot::after{
  content: attr(data-title) " • Year " attr(data-year);
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  padding:5px 9px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.84);
  color:rgba(255,255,255,.94);
  font-size:13px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:9999;
}
.atl__dot:hover::after,
.atl__dot:focus::after{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

/* Details */
.atl__details{
  margin-top:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  border-radius:14px;
  overflow:hidden;
}
.atl__dHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
}
.atl__k{
  color:rgba(255,255,255,.68);
  font-size:13px;
  margin-bottom:4px;
}
.atl__x{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.atl__dBody{ padding:12px; }
.atl__desc{ margin:0 0 10px; color:rgba(255,255,255,.82); line-height:1.45; }

.atl__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
.atl__chip{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  color:rgba(255,255,255,.86);
}

.atl__links a{
  display:inline-block;
  margin-right:10px;
  margin-bottom:8px;
  color:rgba(255,255,255,.90);
  text-decoration:underline;
}

.atl__docs{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.12);
}
.atl__docTitle{ font-weight:800; margin:0 0 8px; color:rgba(255,255,255,.86); }
.atl__docGrid{ display:grid; gap:8px; }
.atl__doc{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:10px;
}
.atl__doc p{ margin:6px 0 0; color:rgba(255,255,255,.68); line-height:1.35; font-size:13px; }

.atl__empty{
  border:1px dashed rgba(255,255,255,.18);
  border-radius:14px;
  padding:12px;
  color:rgba(255,255,255,.68);
  text-align:center;
}

/* Footer */
.atl__foot{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.60);
  font-size:12px;
}
.atl__legend{ display:flex; align-items:center; gap:8px; }
.atl__swatch{
  width:10px;height:10px;border-radius:999px;display:inline-block;
  border:1px solid rgba(255,255,255,.14);
}
.atl__swatch--lost{ background:rgba(124,58,237,.7); }
.atl__swatch--dawn{ background:rgba(34,197,94,.55); }
.atl__swatch--reforged{ background:rgba(56,189,248,.6); }

/* Mobile */
@media (max-width: 640px){
  .atlHost{ padding:10px; }
  .atl{ --side-pad: 24px; --dot-size: 14px; }
  .atl__title{ font-size:28px; }
  .atl__controls{ width:100%; justify-content:stretch; }
  .atl__q{ width:100%; }
  .atl__btn{ flex:1 1 auto; }
  .atl__ageIcon{ font-size:18px; padding:7px 9px; }
  .atl__dot::after, .atl__ageIcon::after{ font-size:12px; }
}