/* ------------------------------------------------------------------
   ladder.css - the price ladder.
   Rendered by ladder.js into #ladder (tickets) and #hp-ladder (home).
   The phase list itself lives in checkout.js and is read from there,
   so there is one price list on the whole site.
   ------------------------------------------------------------------ */

.pl { --pl-ease: cubic-bezier(.16,1,.3,1); display: grid; gap: 34px; scroll-margin-top: 96px; }

/* ================= the phase on sale right now ================= */
.pl-now {
  position: relative; overflow: hidden;
  border: 1px solid var(--silver-18); border-radius: 26px;
  padding: 34px 36px 32px;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(46,75,224,.20), transparent 58%),
    radial-gradient(110% 130% at 100% 100%, rgba(225,29,72,.16), transparent 60%),
    linear-gradient(180deg, rgba(26,33,96,.62), rgba(11,16,54,.72));
}
/* foil hairline, the same one the tickets and the emails carry */
.pl-now::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--blue-2) 32%, #B03BA8 62%, var(--crimson));
}
/* a slow sheen crossing the card, so the block is never quite still */
.pl-now::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(234,240,255,.055) 45%, transparent);
  animation: pl-sheen 7.5s var(--pl-ease) 1.5s infinite;
}
@keyframes pl-sheen { 0% { left: -60%; } 55%, 100% { left: 115%; } }

.pl-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.pl-live {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  color: #fff; padding: 7px 15px 7px 12px; border-radius: 100px;
  background: linear-gradient(100deg, var(--blue), var(--crimson));
  box-shadow: 0 8px 22px -10px rgba(225,29,72,.85);
}
.pl-live i {
  width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none;
  animation: pl-pulse 2s ease-out infinite;
}
@keyframes pl-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.75); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.pl-phase { font-family: var(--serif); font-size: 19px; color: var(--silver); }
.pl-win { color: var(--silver-45); font-size: 13.5px; }
.pl-win::before { content: "·"; margin-right: 11px; color: var(--silver-18); }

/* ---- the two prices ---- */
.pl-prices { display: flex; align-items: flex-end; gap: 46px; flex-wrap: wrap; }
.pl-buy { display: grid; gap: 5px; }
.pl-amount {
  font-family: var(--serif); font-weight: 500; line-height: .92;
  letter-spacing: -.02em; color: var(--silver);
  display: flex; align-items: baseline; gap: 9px;
  font-variant-numeric: tabular-nums lining-nums;
}
.pl-amount .n { font-size: clamp(52px, 7.2vw, 82px); }
.pl-amount .cur { font-size: .3em; letter-spacing: .12em; color: var(--silver-45); font-family: var(--sans); font-weight: 500; }
.pl-buy.alt .pl-amount .n { font-size: clamp(30px, 3.6vw, 40px); color: var(--silver-70); }
.pl-buy.alt .pl-amount .cur { font-size: .38em; }
.pl-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--silver-45); }

/* ---- saving vs the door price ---- */
.pl-save { margin-top: 28px; }
.pl-save-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 13.5px; color: var(--silver-70); margin-bottom: 9px;
}
.pl-save-top b { color: var(--silver); font-weight: 600; }
.pl-save-top .r { color: var(--silver-45); font-size: 12.5px; }
.pl-track {
  height: 6px; border-radius: 100px; overflow: hidden;
  background: rgba(234,240,255,.07);
}
.pl-track i {
  display: block; height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--blue-2), #B03BA8 58%, var(--crimson-2));
  transition: width 1.5s var(--pl-ease);
}

/* ---- countdown ---- */
.pl-count { display: flex; gap: 10px; margin-top: 26px; }
.pl-unit {
  flex: 1; min-width: 0; text-align: center;
  border: 1px solid var(--hair); border-radius: 15px;
  background: rgba(6,9,32,.35); padding: 13px 6px 11px;
}
.pl-unit b {
  display: block; font-family: var(--serif); font-weight: 500;
  font-size: clamp(24px, 3vw, 31px); line-height: 1; color: var(--silver);
  font-variant-numeric: tabular-nums lining-nums;
}
.pl-unit span {
  display: block; margin-top: 7px;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--silver-45);
}
.pl-next {
  margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--silver-70);
}
.pl-next b { color: var(--silver); font-weight: 600; }
.pl-next .up { color: var(--crimson-2); font-weight: 600; }

.pl-now .cta { margin-top: 26px; width: 100%; justify-content: center; padding: 17px 26px; font-size: 16px; }

/* ================= what comes next ================= */
.pl-rest { position: relative; }
.pl-rest-k {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-45);
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.pl-rest-k::after { content: ""; flex: 1; height: 1px; background: var(--hair); }

.pl-row {
  position: relative;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 22px; padding: 17px 14px 17px 26px;
  border-radius: 14px;
  border-bottom: 1px solid var(--hair);
  transition: background .35s var(--pl-ease), transform .35s var(--pl-ease);
  /* staggered reveal, switched on by .pl-in */
  opacity: 0; transform: translateY(14px);
}
.pl.pl-in .pl-row { opacity: 1; transform: none; transition: opacity .7s var(--pl-ease), transform .7s var(--pl-ease), background .35s var(--pl-ease); }
.pl-row:last-child { border-bottom: 0; }
.pl-row:hover { background: rgba(234,240,255,.035); }
/* the rail dot */
.pl-row::before {
  content: ""; position: absolute; left: 6px; top: 50%; margin-top: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--navy); border: 1.5px solid var(--silver-18);
}
.pl-row:hover::before { border-color: var(--crimson-2); }
/* the rail itself */
.pl-rest .pl-rail {
  position: absolute; left: 10px; top: 34px; bottom: 26px; width: 1px;
  background: linear-gradient(180deg, var(--blue-2), var(--crimson-2)); opacity: .3;
}

.pl-name { font-family: var(--serif); font-size: 19px; color: var(--silver-70); }
.pl-row:hover .pl-name { color: var(--silver); }
.pl-when { font-size: 12.5px; color: var(--silver-45); margin-top: 3px; }
.pl-delta {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--crimson-2); background: rgba(225,29,72,.11);
  border: 1px solid rgba(244,63,107,.22); border-radius: 100px; padding: 4px 10px;
  white-space: nowrap;
}
.pl-delta.flat { color: var(--silver-45); background: rgba(234,240,255,.05); border-color: var(--hair); }
.pl-figs { text-align: right; min-width: 108px; }
.pl-figs .f {
  font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--silver-70); line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.pl-figs .f .cur { font-size: .5em; color: var(--silver-45); font-family: var(--sans); letter-spacing: .08em; }
.pl-figs .c { font-size: 12px; color: var(--silver-45); margin-top: 5px; }
.pl-row.door .pl-name, .pl-row.door .pl-figs .f { color: var(--silver); }
.pl-row.past { opacity: .38; }
.pl-row.past .pl-figs .f { text-decoration: line-through; text-decoration-color: var(--silver-45); }

.pl-foot { margin-top: 22px; font-size: 13.5px; color: var(--silver-45); line-height: 1.65; }

/* ================= phone ================= */
@media (max-width: 720px) {
  /* The card for the phase on sale has to be readable in one look, without
     scrolling it in pieces. Every measurement below is pulled in just far
     enough that the whole card clears a 740px tall phone screen, and no
     further: the price stays the largest thing on it. */
  .pl { gap: 22px; }
  .pl-now { padding: 18px 16px 14px; border-radius: 18px; }
  .pl-head { gap: 8px; margin-bottom: 12px; }
  .pl-win { width: 100%; font-size: 12.5px; }
  .pl-win::before { content: none; }
  .pl-live { font-size: 10px; padding: 6px 13px 6px 10px; letter-spacing: .15em; }
  .pl-phase { font-size: 17px; }
  /* the long half of each label is what forced the two prices apart on a
     phone; drop it and they sit side by side again */
  .pl-label .l2 { display: none; }
  .pl-prices { gap: 22px; align-items: flex-end; flex-wrap: nowrap; }
  .pl-label { font-size: 10px; letter-spacing: .11em; }
  .pl-amount { gap: 6px; }
  .pl-amount .n { font-size: clamp(36px, 11vw, 48px); }
  .pl-buy.alt .pl-amount .n { font-size: 21px; }
  .pl-buy { gap: 3px; }
  .pl-save { margin-top: 14px; }
  .pl-save-top { flex-direction: column; gap: 2px; font-size: 12.5px; margin-bottom: 7px; }
  .pl-count { gap: 6px; margin-top: 13px; }
  .pl-unit { padding: 7px 3px 6px; border-radius: 10px; }
  .pl-unit b { font-size: 18px; }
  .pl-unit span { font-size: 8px; letter-spacing: .1em; margin-top: 4px; }
  .pl-next { margin-top: 9px; font-size: 12px; line-height: 1.5; }
  .pl-now .cta { margin-top: 12px; padding: 13px 20px; font-size: 14.5px; }
  .pl-fine, .pl-foot { margin-top: 16px; font-size: 12.5px; }

  .pl-row { grid-template-columns: 1fr auto; gap: 8px 14px; padding: 15px 2px 15px 24px; }
  .pl-delta { grid-row: 2; grid-column: 1; justify-self: start; }
  .pl-figs { grid-row: 1 / span 2; grid-column: 2; min-width: 92px; }
  .pl-figs .f { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-now::after { animation: none; }
  .pl-live i { animation: none; }
  .pl-track i { transition: none; }
  .pl-row { opacity: 1; transform: none; }
}