/* ==========================================================================
   Rope Drop hub. Built on the site's Twilight Magic tokens (--paper indigo night,
   --ink candlelight cream, --gold wonder, --red fireworks rose). A cinematic dawn,
   the brand velvet rope you drop to begin, a planner from real wait data, and the
   crowd wave you beat. Bricolage display headlines, Hanken body, the site's own
   wait-heat palette. Motion only under prefers-reduced-motion: no-preference.
   Namespaced rdp- so it never collides with the arcade word game (rd-).
   ========================================================================== */

.rdp {
  /* the rope's velvet, a deep fireworks rose; brass from the gold ramp */
  --rdp-velvet:    oklch(46% 0.17 12);
  --rdp-velvet-hi: oklch(61% 0.20 9);
  /* wait-heat, same hues as the board (.wt-cool/.warm/.hot) but solid for bars */
  --rdp-cool: linear-gradient(180deg, oklch(71% 0.085 278), oklch(55% 0.075 280));
  --rdp-warm: linear-gradient(180deg, oklch(86% 0.135 88), oklch(74% 0.135 84));
  --rdp-hot:  linear-gradient(180deg, oklch(70% 0.20 10),  oklch(60% 0.19 6));
  color: var(--ink);
  display: block;
}

.rdp a { text-decoration: none; }
.rdp .rdp-section { max-width: 1080px; margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.8rem) var(--space-md); }
.rdp .rdp-head { max-width: 52ch; margin: 0 0 var(--space-xl); }
.rdp .rdp-h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.55rem, 3.4vw, 2.3rem); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--space-sm); color: var(--ink); text-wrap: balance; }
.rdp .rdp-sub { font-size: 1.05rem; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 64ch; text-wrap: pretty; }

/* ---------- HERO ---------------------------------------------------------- */
.rdp-hero {
  position: relative;
  min-height: clamp(540px, 86vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
}
.rdp-sky {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(125% 85% at 50% 120%, var(--gold) 0%, oklch(80% 0.135 70) 13%, var(--red) 33%, oklch(44% 0.13 320) 56%, var(--paper-2) 80%, var(--paper) 100%);
}
.rdp-sun {
  position: absolute; left: 50%; bottom: -6%; z-index: -3;
  width: min(46vw, 360px); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, oklch(96% 0.04 90 / 0.95) 0%, oklch(86% 0.13 84 / 0.55) 30%, transparent 68%);
  filter: blur(2px);
}
.rdp-rays {
  position: absolute; left: 50%; bottom: -10%; z-index: -3;
  width: 160vw; aspect-ratio: 1; transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg at 50% 100%,
    oklch(92% 0.06 88 / 0.10) 0deg 4deg, transparent 4deg 12deg);
  mix-blend-mode: screen; opacity: .5;
}
.rdp-canvas { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity 1.2s ease; }
.rdp-canvas.is-ready { opacity: 1; }
.rdp-mist {
  position: absolute; inset: auto 0 0 0; height: 46%; z-index: -2;
  background: linear-gradient(to top, oklch(86% 0.10 80 / 0.30), transparent);
  filter: blur(8px);
}
.rdp-horizon {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: -2;
  background: linear-gradient(to top, var(--paper) 6%, transparent);
}

/* the brand stanchion rope, draped across the gate */
.rdp-rope { position: absolute; left: 0; right: 0; top: clamp(64px, 12vh, 144px); height: 120px; z-index: -1; pointer-events: none; }
.rdp-post {
  position: absolute; top: 0; width: 10px; height: 116px; border-radius: 5px;
  background: linear-gradient(180deg, oklch(93% 0.09 90), var(--gold) 42%, var(--gold-deep));
  box-shadow: 0 6px 18px oklch(20% 0.05 276 / 0.45);
}
.rdp-post::before { content: ""; position: absolute; top: -11px; left: 50%; width: 18px; height: 18px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, oklch(96% 0.06 92), var(--gold) 55%, var(--gold-deep)); box-shadow: 0 3px 8px oklch(20% 0.05 276 / 0.5); }
.rdp-post-l { left: clamp(20px, 10vw, 144px); }
.rdp-post-r { right: clamp(20px, 10vw, 144px); }
.rdp-velvet {
  position: absolute; top: 16px; left: clamp(26px, 10.5vw, 150px); right: clamp(26px, 10.5vw, 150px); height: 74px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, var(--rdp-velvet-hi), var(--rdp-velvet) 52%, oklch(37% 0.15 14));
  box-shadow: inset 0 3px 6px oklch(100% 0 0 / 0.22), 0 10px 22px oklch(20% 0.05 276 / 0.4);
}

.rdp-hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: 1080px;
  margin: 0 auto; padding: 0 var(--space-md) clamp(2.6rem, 7vw, 5rem);
}
.rdp-kicker { font-family: var(--label); text-transform: uppercase; letter-spacing: 0.14em; font-size: .78rem; font-weight: 700; color: var(--gold); margin: 0 0 var(--space-xs); }
.rdp-title { font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem, 6.4vw, 4.6rem); line-height: .98; letter-spacing: -0.025em; margin: 0 0 var(--space-md); text-wrap: balance; text-shadow: 0 2px 28px oklch(18% 0.05 276 / 0.4); }
.rdp-lede { max-width: 56ch; font-size: clamp(1.05rem, 2.2vw, 1.28rem); line-height: 1.5; margin: 0 0 var(--space-lg); color: var(--ink); text-wrap: pretty; text-shadow: 0 1px 12px oklch(18% 0.05 276 / 0.45); }
.rdp-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.rdp-hero-stat { margin: var(--space-md) 0 0; font-size: .98rem; color: var(--ink-soft); }
.rdp-hero-stat b { color: var(--gold); font-weight: 700; }

.rdp-btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; text-decoration: none;
  font-family: var(--label); font-weight: 700; font-size: 1rem; line-height: 1;
  padding: .85rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.rdp-btn:active { transform: translateY(1px); }
.rdp-btn-primary { background: linear-gradient(180deg, oklch(90% 0.10 90), var(--gold)); color: var(--paper); box-shadow: 0 8px 22px oklch(84% 0.13 86 / 0.28); }
.rdp-btn-primary:hover { box-shadow: 0 10px 28px oklch(84% 0.13 86 / 0.4); }
.rdp-btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.rdp-btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- EMPTY STATE --------------------------------------------------- */
.rdp-empty { max-width: 1080px; margin: 0 auto; padding: var(--space-3xl) var(--space-md); text-align: center; color: var(--ink-soft); }

/* ---------- PLANNER ------------------------------------------------------- */
.rdp-presets { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-lg); }
.rdp-preset {
  font-family: var(--label); font-weight: 650; cursor: pointer; padding: .58rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--hair); background: transparent; color: var(--ink-soft); transition: all .16s ease;
}
.rdp-preset:hover { border-color: var(--rule); color: var(--ink); }
.rdp-preset.is-active { background: var(--gold); color: var(--paper); border-color: var(--gold); }

.rdp-plan { display: none; }
.rdp-plan.is-active { display: block; }

.rdp-arrive {
  display: inline-flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;
  background: var(--paper-2); border: 1px solid var(--hair);
  border-radius: 12px; padding: var(--space-sm) var(--space-lg); margin: 0 0 var(--space-lg);
}
.rdp-arrive-label { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; color: var(--muted); }
.rdp-arrive-time { font-family: var(--display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--gold); }
.rdp-arrive-note { font-size: .9rem; color: var(--muted); }

.rdp-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.rdp-steps::before { content: ""; position: absolute; left: 19px; top: 16px; bottom: 38px; width: 2px; background: linear-gradient(var(--red), var(--gold)); opacity: .5; }
.rdp-step {
  position: relative; display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-md); align-items: center;
  padding: var(--space-md) 0; border-bottom: 1px solid var(--hair);
}
.rdp-step-num {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; color: var(--paper); background: linear-gradient(150deg, var(--red), var(--gold));
  box-shadow: 0 3px 12px oklch(67% 0.205 8 / 0.35); position: relative; z-index: 1;
}
.rdp-step-top { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.rdp-step-ride { font-family: var(--display); font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
a.rdp-step-ride:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rdp-step-land { font-family: var(--label); font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft); border: 1px solid var(--hair); padding: .12rem .5rem; border-radius: 999px; }
.rdp-step-why { margin: .25rem 0 0; font-size: .95rem; color: var(--muted); line-height: 1.45; max-width: 56ch; }
.rdp-step-save {
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: var(--display); font-size: 1.45rem; font-weight: 800; color: var(--gold);
}
.rdp-step-save small { font-family: var(--label); font-size: .6rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; margin-top: 3px; text-transform: uppercase; }

.rdp-plan-foot { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; margin-top: var(--space-lg); }
.rdp-total { margin: 0; font-size: 1.08rem; color: var(--ink-soft); }
.rdp-total b { color: var(--gold); font-family: var(--display); font-weight: 800; }
.rdp-share.is-copied { background: var(--gold); color: var(--paper); border-color: var(--gold); }

/* ---------- CROWD WAVE ---------------------------------------------------- */
.rdp-wave-stage { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, var(--paper), var(--paper-2)); padding: var(--space-lg) var(--space-md) var(--space-sm); border: 1px solid var(--hair); }
.rdp-wave-canvas { position: absolute; inset: 0; z-index: 1; }
.rdp-wave-chart {
  position: relative; z-index: 2; display: flex; align-items: flex-end; gap: clamp(2px, 1.2vw, 10px);
  height: clamp(180px, 30vw, 280px); margin-bottom: var(--space-lg);
}
.rdp-bar {
  flex: 1 1 0; min-width: 0; height: var(--h, 10%); border-radius: 5px 5px 0 0; position: relative;
  background: oklch(60% 0.04 280 / 0.5);
  transition: height .8s cubic-bezier(.4,0,.2,1);
}
.rdp-bar.wt-cool { background: var(--rdp-cool); }
.rdp-bar.wt-warm { background: var(--rdp-warm); }
.rdp-bar.wt-hot  { background: var(--rdp-hot); }
.rdp-bar b { position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); font-family: var(--label); font-size: .62rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ---------- RANKING ------------------------------------------------------- */
.rdp-rank { display: grid; gap: 2px; }
.rdp-rank-row { display: grid; grid-template-columns: 28px minmax(8rem, 1.4fr) 1fr auto auto; gap: var(--space-md); align-items: center; padding: var(--space-sm) 2px; border-bottom: 1px solid var(--hair); }
.rdp-rank-pos { font-family: var(--display); font-weight: 800; color: var(--gold); text-align: center; }
.rdp-rank-ride { font-weight: 600; color: var(--ink); }
a.rdp-rank-ride:hover, .rdp-rank-ride a:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.rdp-rank-bar { height: 7px; border-radius: 6px; background: var(--hair); overflow: hidden; }
.rdp-rank-fill { display: block; height: 100%; width: var(--w, 10%); border-radius: 6px; background: linear-gradient(90deg, var(--gold), var(--red)); }
.rdp-rank-save { font-family: var(--label); font-size: .85rem; color: var(--muted); white-space: nowrap; }
.rdp-rank-save i { font-style: normal; color: var(--hair); }
.rdp-rank-delta { font-family: var(--display); font-weight: 800; color: var(--gold); white-space: nowrap; }

/* ---------- FAQ ----------------------------------------------------------- */
.rdp-faq dl { margin: 0; max-width: 68ch; }
.rdp-faq dt { font-family: var(--display); font-weight: 700; font-size: 1.12rem; margin: var(--space-lg) 0 var(--space-2xs); color: var(--ink); }
.rdp-faq dd { margin: 0; color: var(--ink-soft); line-height: 1.6; text-wrap: pretty; }

/* ---------- RELATED + FOOT ------------------------------------------------ */
.rdp-related { max-width: 1080px; margin: 0 auto; padding: var(--space-md) var(--space-md) 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.rdp-related a { font-family: var(--label); font-weight: 600; font-size: .94rem; color: var(--ink); padding: .5rem .9rem; border: 1px solid var(--hair); border-radius: 999px; transition: border-color .16s ease, color .16s ease; }
.rdp-related a:hover { border-color: var(--gold); color: var(--gold); }
.rdp-foot { max-width: 1080px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-3xl); font-size: .82rem; color: var(--muted); }

/* ---------- MOTION (added only when the visitor allows it) ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .rdp-rays { animation: rdp-rays 60s linear infinite; }
  @keyframes rdp-rays { to { transform: translateX(-50%) rotate(8deg); } }
  .rdp-mist { animation: rdp-mist 14s ease-in-out infinite alternate; }
  @keyframes rdp-mist { from { transform: translateX(-3%); opacity: .8; } to { transform: translateX(3%); opacity: 1; } }
  .rdp-plan.is-active { animation: rdp-fade .35s cubic-bezier(.2,.7,.2,1); }
  @keyframes rdp-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .rdp-hero-inner > * { animation: rdp-rise .7s cubic-bezier(.16,1,.3,1) backwards; }
  .rdp-hero-inner > *:nth-child(2) { animation-delay: .06s; }
  .rdp-hero-inner > *:nth-child(3) { animation-delay: .12s; }
  .rdp-hero-inner > *:nth-child(4) { animation-delay: .18s; }
  .rdp-hero-inner > *:nth-child(5) { animation-delay: .24s; }
  @keyframes rdp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 560px) {
  .rdp-step { grid-template-columns: 34px 1fr; }
  .rdp-step-save { grid-column: 2; flex-direction: row; gap: .35rem; align-items: baseline; font-size: 1.15rem; margin-top: .2rem; }
  .rdp-rank-row { grid-template-columns: 22px 1fr auto; }
  .rdp-rank-bar, .rdp-rank-save { display: none; }
}