/* Sorting ceremony landing — purple_v2 (themes/purple_v2/modules/sorting/sorting_landing.tpl) */

.sl2 {
  --sl-gold: #e8c469;
  --sl-gold-hi: #fbe6a2;
  --sl-gold-lo: #a8802f;
  --sl-line: rgba(214, 176, 84, .42);
  --sl-line-soft: rgba(214, 176, 84, .22);
  --sl-ink: #f3ead3;
  --sl-ink-2: #cfc3a6;
  --sl-surface: rgba(14, 10, 32, .84);
  --sl-surface-2: rgba(22, 16, 44, .72);
  --sl-ok: #58d47c;
  --sl-ok-bg: linear-gradient(135deg, rgba(20, 70, 38, .92), rgba(10, 36, 22, .92));
  --sl-bad: #ff7a64;
  --sl-bad-bg: linear-gradient(135deg, rgba(92, 26, 22, .9), rgba(46, 12, 14, .92));
  --sl-font-head: Lalezar, Estedad, Vazir, Tahoma, sans-serif;
  --sl-font-body: Estedad, Vazir, Tahoma, sans-serif;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 72px 16px 40px;
  border-radius: 24px;
  overflow: hidden;
  color: var(--sl-ink);
  font-family: var(--sl-font-body);
  /* no backdrop of its own: the theme's castle art shows through */
  background: none;
}
.sl2 *, .sl2 *::before, .sl2 *::after { box-sizing: border-box; }
.sl2 h1, .sl2 h2, .sl2 p, .sl2 ol, .sl2 ul, .sl2 figure, .sl2 blockquote { margin: 0; padding: 0; }
.sl2 ol, .sl2 ul { list-style: none; }

/* ---------- ambient sparks ---------- */
.sl2-sparks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.sl2-sparks i {
  position: absolute; left: var(--x); top: var(--y);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sl-gold-hi);
  box-shadow: 0 0 10px 2px rgba(251, 214, 120, .55);
  opacity: .15;
  animation: sl2-twinkle 4.2s ease-in-out var(--d) infinite;
}
@keyframes sl2-twinkle { 0%, 100% { opacity: .12; transform: scale(.7); } 50% { opacity: .9; transform: scale(1.15); } }

/* ---------- main panel ---------- */
.sl2-panel {
  position: relative;
  width: 100%;
  max-width: 860px;
  padding: 64px clamp(16px, 5vw, 44px) 36px;
  border: 1px solid var(--sl-line);
  border-radius: 28px;
  background: var(--sl-surface);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 60px rgba(214, 176, 84, .05);
  text-align: center;
}
.sl2-corner { position: absolute; width: 22px; height: 22px; border-color: var(--sl-gold); border-style: solid; opacity: .8; }
.sl2-corner--tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; border-top-right-radius: 12px; }
.sl2-corner--tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-top-left-radius: 12px; }
.sl2-corner--br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-bottom-right-radius: 12px; }
.sl2-corner--bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; border-bottom-left-radius: 12px; }

.sl2-medal {
  position: absolute; top: 0; left: 50%;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: var(--sl-gold-hi);
  background: radial-gradient(circle at 40% 35%, #2a1d45, #0d0920 70%);
  border: 2px solid var(--sl-gold);
  box-shadow: 0 0 0 6px rgba(14, 10, 32, .9), 0 0 0 7px var(--sl-line), 0 0 34px rgba(232, 196, 105, .35);
}

/* ---------- heading ---------- */
.sl2-title {
  font-family: var(--sl-font-head);
  font-weight: 400;
  font-size: clamp(2.3rem, 6vw, 3.6rem);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--sl-gold);
  background: linear-gradient(180deg, #fff3c8 0%, #f0cf74 48%, #b98a31 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .7)) drop-shadow(0 0 18px rgba(232, 196, 105, .3));
}
.sl2-subtitle {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 6px;
  color: var(--sl-ink-2);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
}
.sl2-subtitle::before, .sl2-subtitle::after {
  content: ''; width: min(90px, 14vw); height: 1px;
  background: linear-gradient(90deg, transparent, var(--sl-gold));
}
.sl2-subtitle::after { transform: scaleX(-1); }

/* ---------- status card + ticket ---------- */
.sl2-status-row {
  position: relative;
  display: flex; align-items: center;
  margin: 56px 0 40px;
  padding-left: 330px; /* room for the ticket on the physical left */
}
.sl2-status {
  flex: 1;
  display: flex; align-items: center; gap: 18px;
  min-height: 150px;
  padding: 22px 24px 22px 64px;
  border-radius: 18px;
  text-align: right;
  border: 1px solid;
}
.sl2--ready .sl2-status {
  background: var(--sl-ok-bg);
  border-color: rgba(88, 212, 124, .6);
  box-shadow: 0 0 28px rgba(88, 212, 124, .18), inset 0 0 24px rgba(88, 212, 124, .08);
}
.sl2--locked .sl2-status {
  background: var(--sl-bad-bg);
  border-color: rgba(255, 122, 100, .55);
  box-shadow: 0 0 28px rgba(255, 90, 70, .16), inset 0 0 24px rgba(255, 90, 70, .06);
}
.sl2-status__icon {
  flex: none;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
}
.sl2--ready .sl2-status__icon { color: var(--sl-ok); box-shadow: 0 0 16px rgba(88, 212, 124, .45); }
.sl2--locked .sl2-status__icon { color: var(--sl-bad); box-shadow: 0 0 16px rgba(255, 122, 100, .4); }
.sl2-status__title {
  font-family: var(--sl-font-head);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
  line-height: 1.5;
}
.sl2--ready .sl2-status__title { color: #7ef09c; }
.sl2--locked .sl2-status__title { color: #ff8f78; }
.sl2-status__line { margin-top: 4px; font-weight: 700; font-size: 1.05rem; color: #fff; }
.sl2-status__note { margin-top: 6px; font-size: .95rem; line-height: 1.8; color: var(--sl-ink-2); }

/* Ticket artwork: 1448×1086 with transparent padding around the ticket.
   The box takes the visible ticket's proportions and the image is pulled up
   by its top padding (percent margins resolve against the box width, which
   equals the image width). Overflow stays visible, so a slightly generous
   estimate never clips the art. */
.sl2-ticket {
  position: absolute; left: -34px; top: 50%;
  width: 400px;
  transform: translateY(-50%) rotate(-4deg);
  pointer-events: none;
}
.sl2-ticket img { display: block; width: 100%; height: auto; max-width: none; }
.sl2--locked .sl2-ticket { aspect-ratio: 1448 / 850; }
.sl2--locked .sl2-ticket img { margin-top: -7.6%; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .55)); }
.sl2--ready .sl2-ticket { aspect-ratio: 1448 / 790; }
.sl2--ready .sl2-ticket img { margin-top: -13.2%; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)) drop-shadow(0 0 26px rgba(232, 196, 105, .35)); }

/* ---------- ceremony rules (token holders) ---------- */
.sl2-rules {
  max-width: 660px;
  margin: 22px auto 0;
  padding: 20px 22px 18px;
  border: 1px solid var(--sl-line);
  border-radius: 16px;
  background: rgba(10, 7, 24, .6);
  text-align: right;
}
.sl2-rules__title {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  font-family: var(--sl-font-head);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--sl-gold);
}
.sl2-rules__list { counter-reset: sl2-rule; }
.sl2-rules__list li {
  position: relative;
  padding: 10px 40px 10px 0;
  border-top: 1px solid var(--sl-line-soft);
  font-size: .95rem;
  line-height: 1.9;
  color: var(--sl-ink);
  counter-increment: sl2-rule;
}
.sl2-rules__list li:first-child { border-top: 0; }
.sl2-rules__list li::before {
  content: counter(sl2-rule, persian);
  position: absolute; right: 0; top: 11px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--sl-gold);
  color: var(--sl-gold);
  font-family: var(--sl-font-head);
  font-size: 1rem; line-height: 1;
}

/* ---------- divider star ---------- */
.sl2-star {
  display: flex; align-items: center; gap: 12px;
  margin: 22px auto 16px;
  max-width: 520px;
  color: var(--sl-gold);
  font-size: 1.1rem;
}
.sl2-star::before, .sl2-star::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--sl-line)); }
.sl2-star::after { transform: scaleX(-1); }
.sl2-star span { text-shadow: 0 0 12px rgba(232, 196, 105, .8); }

.sl2 .sl2-intro { /* doubled class: must beat the `.sl2 p { margin: 0 }` reset */
  max-width: 620px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 2;
  color: var(--sl-ink-2);
}

/* ---------- primary CTA ---------- */
.sl2-cta {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: min(100%, 440px);
  min-height: 68px;
  margin: 26px auto 0;
  padding: 12px 26px;
  border-radius: 16px;
  border: 2px solid var(--sl-gold);
  background: linear-gradient(180deg, rgba(58, 40, 14, .95), rgba(24, 16, 8, .96));
  box-shadow: 0 0 0 4px rgba(14, 10, 32, .9), 0 0 0 5px var(--sl-line), 0 0 30px rgba(232, 196, 105, .3), inset 0 1px 0 rgba(255, 236, 170, .25);
  color: var(--sl-gold-hi);
  text-decoration: none;
  font-family: var(--sl-font-head);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  touch-action: manipulation;
}
.sl2-cta:hover, .sl2-cta:focus-visible {
  color: #fff6d6;
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--sl-gold-hi);
  box-shadow: 0 0 0 4px rgba(14, 10, 32, .9), 0 0 0 5px var(--sl-gold), 0 0 46px rgba(232, 196, 105, .5), inset 0 1px 0 rgba(255, 236, 170, .3);
}
.sl2-cta:active { transform: translateY(0) scale(.98); }
.sl2-cta:focus-visible { outline: 3px solid var(--sl-gold-hi); outline-offset: 6px; }
.sl2-cta__icon { display: grid; place-items: center; color: var(--sl-gold); }
.sl2-cta__label { flex: 1; }
.sl2-cta__arrow { transition: transform .2s ease; }
.sl2-cta:hover .sl2-cta__arrow { transform: translateX(-4px); }

/* ---------- secondary links ---------- */
.sl2-links {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  width: min(100%, 560px);
  margin: 20px auto 0;
}
.sl2-link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--sl-line);
  border-radius: 12px;
  background: var(--sl-surface-2);
  color: var(--sl-ink);
  text-decoration: none;
  font-weight: 700; font-size: .95rem;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.sl2-link svg { color: var(--sl-gold); flex: none; }
.sl2-link:hover, .sl2-link:focus-visible {
  color: #fff; text-decoration: none;
  border-color: var(--sl-gold);
  background: rgba(46, 32, 80, .8);
}
.sl2-link:focus-visible { outline: 2px solid var(--sl-gold-hi); outline-offset: 3px; }

/* ---------- boxes (steps / tips) ---------- */
.sl2-box {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid var(--sl-line);
  border-radius: 18px;
  background: rgba(10, 7, 24, .78);
  text-align: center;
}
.sl2-box__title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 18px;
  font-family: var(--sl-font-head);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--sl-gold);
}
.sl2-box__title svg { color: var(--sl-gold); }

.sl2-steps__list { display: grid; gap: 12px; counter-reset: none; }
.sl2-steps--3 .sl2-steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sl2-steps--4 .sl2-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sl2-step {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 8px;
}
/* arrow between steps, pointing to the next one (leftwards in RTL) */
.sl2-step + .sl2-step::before {
  content: '←';
  position: absolute; right: -12px; top: 22px;
  color: var(--sl-gold-lo);
  font-size: 1.1rem;
}
.sl2-step__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--sl-gold);
  background: radial-gradient(circle at 40% 35%, #2a1d45, #0d0920 75%);
  color: var(--sl-gold);
  box-shadow: 0 0 14px rgba(232, 196, 105, .2);
}
.sl2-step.is-done .sl2-step__icon { border-color: var(--sl-ok); color: var(--sl-ok); background: rgba(20, 70, 38, .8); box-shadow: 0 0 14px rgba(88, 212, 124, .35); }
.sl2-step__num { font-family: var(--sl-font-head); font-size: 1.4rem; line-height: 1; color: var(--sl-gold); }
.sl2-step__title { font-weight: 900; font-size: 1rem; line-height: 1.6; color: var(--sl-gold-hi); }
.sl2-step__text { font-size: .88rem; line-height: 1.8; color: var(--sl-ink-2); }

.sl2-below {
  width: 100%;
  max-width: 860px;
}

/* ---------- quote ---------- */
.sl2-quote { max-width: 520px; text-align: center; color: var(--sl-ink-2); }
.sl2-quote blockquote { border: 0; background: none; box-shadow: none; padding: 0; quotes: none; font-size: 1rem; line-height: 1.9; color: var(--sl-ink); }
.sl2-quote figcaption { margin-top: 4px; font-size: .88rem; color: var(--sl-gold); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .sl2 { padding-top: 64px; gap: 22px; border-radius: 16px; }
  .sl2-panel { padding-top: 58px; border-radius: 20px; }
  .sl2-medal { width: 80px; height: 80px; }
  .sl2-medal svg { width: 42px; height: 42px; }
  .sl2-status-row { flex-direction: column; padding-left: 0; gap: 24px; margin: 30px 0 16px; }
  .sl2-status { width: 100%; padding: 18px; min-height: 0; }
  .sl2-ticket { position: relative; left: auto; top: auto; transform: rotate(-3deg); width: min(420px, 100%); }
  .sl2-rules { padding: 16px 14px; }
  .sl2-links { grid-template-columns: 1fr; }
  .sl2-steps--3 .sl2-steps__list,
  .sl2-steps--4 .sl2-steps__list { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .sl2-step + .sl2-step::before { display: none; }
}
@media (max-width: 420px) {
  .sl2-steps--3 .sl2-steps__list,
  .sl2-steps--4 .sl2-steps__list { grid-template-columns: 1fr; }
  .sl2-status { flex-direction: column; text-align: center; }
  .sl2-cta { padding: 12px 16px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sl2-sparks i { animation: none; opacity: .5; }
  .sl2-cta, .sl2-cta__arrow, .sl2-link { transition: none; }
  .sl2-cta:hover, .sl2-cta:active { transform: none; }
}