/**
 * The four things on this site that are not part of the bundle's own CSS.
 *
 *   1. shafts of light behind the page
 *   2. an aurora that moves through the big headings
 *   3. the face on a page that is not there
 *   4. a download button that shows how far it has got
 *
 * Loaded after styles-*.css on every page, standalone pages included, so all
 * of them stay in step. Nothing here needs a class the bundle does not
 * already emit, except where a page is ours to edit — /app/ and /plans/ are
 * plain HTML and can say .sm-aurora on a heading directly.
 *
 * Colours come from the bundle's own custom properties (--neon, --azure,
 * --violet), so a change of palette there carries through here.
 */

/* --------------------------------------------------------- 2. aurora text */

/*
 * The heading's gradient, moving.
 *
 * .text-neon already paints a gradient and clips it to the glyphs; this
 * widens that gradient, repeats the first colour at the far end so the loop
 * has no seam, and walks it across. Only the big headings get it — the same
 * class is used on small labels and numbers all over the site, and a number
 * that shimmers is a number nobody can read.
 */
h1.font-display .text-neon,
h1.font-display.text-neon,
.sm-aurora {
  background: linear-gradient(
    110deg,
    var(--neon) 0%,
    var(--azure) 30%,
    var(--neon-soft) 55%,
    var(--azure) 76%,
    var(--neon) 100%
  );
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sm-aurora-text 7.5s linear infinite;
}

@keyframes sm-aurora-text {
  to {
    background-position: 260% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  h1.font-display .text-neon,
  h1.font-display.text-neon,
  .sm-aurora {
    animation: none;
  }
}

/* ------------------------------------------------------------- 3. the 404 */

.sm-notfound {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1.25rem;
  text-align: center;
}

.sm-notfound__code {
  margin: 0;
  font-family: Lalezar, Vazirmatn, sans-serif;
  font-size: clamp(3rem, 12vw, 5rem);
  line-height: 1;
}

.sm-notfound__title {
  margin: 0;
  font-family: Lalezar, Vazirmatn, sans-serif;
  font-size: 1.5rem;
}

.sm-notfound__desc {
  margin: 0;
  max-width: 42ch;
  color: var(--muted-foreground, #9aa6b2);
  line-height: 2;
}

.sm-notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.5rem;
}

/* The face itself. It looks around, blinks, and its mouth draws itself in —
   which says "not here" faster than a paragraph does. */
.sm-face svg {
  width: 170px;
  max-width: 55vw;
  color: var(--neon, #38bdf8);
}

.sm-face__eyes,
.sm-face__lid,
.sm-face__mouth-l,
.sm-face__mouth-r,
.sm-face__nose,
.sm-face__pupil {
  animation: sm-face-eyes 1s 0.3s forwards;
}

.sm-face__lid,
.sm-face__pupil {
  animation-duration: 4s;
  animation-delay: 1.3s;
  animation-iteration-count: infinite;
}

.sm-face__lid {
  animation-name: sm-face-lid;
}
.sm-face__mouth-l {
  animation-name: sm-face-mouth-l;
}
.sm-face__mouth-r {
  animation-name: sm-face-mouth-r;
}
.sm-face__nose {
  animation-name: sm-face-nose;
}
.sm-face__pupil {
  animation-name: sm-face-pupil;
}

@keyframes sm-face-eyes {
  from {
    transform: translateY(112.5px);
  }
  to {
    transform: translateY(15px);
  }
}

@keyframes sm-face-lid {
  0%,
  40%,
  45%,
  100% {
    transform: translateY(0);
  }
  42.5% {
    transform: translateY(17.5px);
  }
}

@keyframes sm-face-pupil {
  0%,
  37.5%,
  40%,
  45%,
  87.5%,
  100% {
    stroke-dashoffset: 0;
    transform: translate(0, 0);
  }
  12.5%,
  25%,
  62.5%,
  75% {
    transform: translate(-35px, 0);
  }
  42.5% {
    stroke-dashoffset: 35;
    transform: translate(0, 17.5px);
  }
}

@keyframes sm-face-mouth-l {
  from,
  50% {
    stroke-dashoffset: -102;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sm-face-mouth-r {
  from,
  50% {
    stroke-dashoffset: 102;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes sm-face-nose {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 22.5px);
  }
}

/* ------------------------------------------------- 4. the download button */

/*
 * A pill that closes into a circle when it is PRESSED — not when it is
 * hovered, which was the first version and meant the shape changed under a
 * pointer that was only passing over it.
 *
 * The file itself is downloaded by the browser, the ordinary way: this is a
 * plain link with `download` on it and the click is not intercepted. The
 * earlier version fetched the bytes into the page to measure them, which put
 * a 100MB installer in the tab's memory and made a download that the
 * browser's own download manager never saw until it was finished. The ring is
 * therefore a spinner rather than a percentage — the page is not the one
 * doing the downloading and has no honest figure to show.
 */
.sm-dl {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.1rem;
  min-width: 15rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-foreground, #05121f);
  text-decoration: none;
  background: var(--gradient-neon);
  filter: drop-shadow(0 0 14px color-mix(in oklab, var(--neon) 35%, transparent));
  cursor: pointer;
  transition: width 0.45s linear, min-width 0.45s linear, height 0.45s linear,
    border-radius 0.45s linear, padding 0.45s linear;
}

.sm-dl__icon {
  display: none;
  width: 22px;
  height: 22px;
}

.sm-dl:hover {
  filter: drop-shadow(0 0 20px color-mix(in oklab, var(--neon) 50%, transparent));
}

.sm-dl.is-busy,
.sm-dl.is-done {
  min-width: 3.4rem;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border-radius: 50%;
}

.sm-dl.is-busy .sm-dl__text,
.sm-dl.is-done .sm-dl__text {
  display: none;
}

.sm-dl.is-busy .sm-dl__icon,
.sm-dl.is-done .sm-dl__icon {
  display: inline-flex;
}

.sm-dl__ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sm-dl.is-busy .sm-dl__ring,
.sm-dl.is-done .sm-dl__ring {
  opacity: 1;
  border: 3.5px solid transparent;
  border-top-color: #fff;
  border-inline-end-color: #fff;
  animation: sm-dl-spin 1.1s linear infinite;
}

/* Finished: the ring stops and closes, and the arrow has become a tick. */
.sm-dl.is-done .sm-dl__ring {
  border-color: #fff;
  animation: none;
}

.sm-dl.is-done {
  background: linear-gradient(120deg, oklch(78% 0.17 150), oklch(66% 0.19 160));
}

/* Says what is happening while the circle spins, because a browser download
   that has not started showing in the download bar yet looks like nothing. */
.sm-dl__pct {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  direction: ltr;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted-foreground, #9aa6b2);
  white-space: nowrap;
}

@keyframes sm-dl-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------------
   نشان اشتراک‌ها
   The emblem each plan is sold under, over its name on the pricing cards.

   Added as CSS rather than as markup because this page is a pre-rendered
   TanStack bundle that hydrates the whole document: anything inserted into the
   HTML is thrown away the moment React takes over, but a background on an
   element React itself draws survives. The three cards are in source order —
   جرقه, صاعقه, آذرخش — which is the ladder they are priced in.

   Small on purpose: a mark above the name, not a poster.
   --------------------------------------------------------------------------- */
#plans [class*="lg:grid-cols-3"] > * h3.font-display::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

#plans [class*="lg:grid-cols-3"] > *:nth-child(1) h3.font-display::before {
  background-image: url("/assets/plans/jaraghe.png");
}

#plans [class*="lg:grid-cols-3"] > *:nth-child(2) h3.font-display::before {
  background-image: url("/assets/plans/saeghe.png");
}

#plans [class*="lg:grid-cols-3"] > *:nth-child(3) h3.font-display::before {
  background-image: url("/assets/plans/azarakhsh.png");
}

@media (max-width: 640px) {
  #plans [class*="lg:grid-cols-3"] > * h3.font-display::before {
    width: 52px;
    height: 52px;
  }
}

/* «استریمرها» in every menu, hidden until site-look.js has seen more than
   three channels on the public list. */
html:not(.sm-has-streamers) a[href^="/streamers"] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   The trailer at the top of the home page.

   The poster is a button the bundle draws; the player is ours and is put on
   <body> by site-look.js only once the poster is pressed. The player looks
   like the gallery's own picture viewer further down the page — the same
   shade, frame and close button — so the two read as one thing.
   --------------------------------------------------------------------------- */
.sm-trailer {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #05070c;
  cursor: pointer;
}

.sm-trailer__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s;
}

.sm-trailer:hover .sm-trailer__poster,
.sm-trailer:focus-visible .sm-trailer__poster {
  transform: scale(1.035);
  filter: brightness(1.08);
}

.sm-trailer:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: -2px;
}

.sm-trailer__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgba(6, 10, 18, 0.55);
  box-shadow: 0 0 0 1.5px var(--neon), 0 0 46px -4px var(--neon);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* A play sign points right in every language. */
.sm-trailer__play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -13px 0 0 -8px;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--neon);
}

.sm-trailer__play::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--neon);
  animation: sm-trailer-ring 2.4s ease-out infinite;
}

@keyframes sm-trailer-ring {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}

.sm-trailer:hover .sm-trailer__play {
  transform: scale(1.1);
}

/* Top corner: the bottom of the poster is where its own line of text is. */
.sm-trailer__label {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(6, 10, 18, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--foreground);
  font-size: 0.78rem;
  line-height: 1.6;
}

html.sm-player-open {
  overflow: hidden;
}

.sm-player {
  position: fixed;
  inset: 0;
  z-index: 960;
}

.sm-player__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--background);
  opacity: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: opacity 0.3s;
}

@supports (color: color-mix(in lab, red, red)) {
  .sm-player__shade {
    background: color-mix(in oklab, var(--background) 85%, transparent);
  }
}

.sm-player.is-open .sm-player__shade {
  opacity: 1;
}

.sm-player__frame {
  position: fixed;
  overflow: hidden;
  border: 1px solid var(--neon);
  border-radius: 1rem;
  background: #05070c center / cover no-repeat;
  box-shadow: var(--shadow-neon);
  transition:
    left 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s;
}

@supports (color: color-mix(in lab, red, red)) {
  .sm-player__frame {
    border-color: color-mix(in oklab, var(--neon) 40%, transparent);
  }
}

/* While it grows and shrinks the frame is not yet the video's shape: cover
   crops instead of leaving bars, and at full size the two are the same. */
.sm-player__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

.sm-player__video:fullscreen {
  object-fit: contain;
  background: #000;
}

.sm-player__close {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(6, 10, 18, 0.7);
  color: var(--neon);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s 0.2s;
}

.sm-player.is-open .sm-player__close {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sm-trailer__poster,
  .sm-trailer__play,
  .sm-player__shade,
  .sm-player__frame,
  .sm-player__close {
    transition: none;
  }

  .sm-trailer__play::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   «اطلاعیه سایت»: the bar near the top of the home page and the card it
   opens (site-look.js, 5.). It hangs off <body> under the fixed header, so it
   scrolls away with the hero and never sits on top of the page's own menu.
   --------------------------------------------------------------------------- */
.smn {
  position: absolute;
  top: 86px;
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  width: min(640px, calc(100% - 32px));
  padding: 5px;
  border: 1px solid color-mix(in oklab, var(--neon) 30%, transparent);
  border-radius: 999px;
  background: rgba(8, 13, 24, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  transform: translate(-50%, -8px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
}

.smn.is-in {
  transform: translate(-50%, 0);
  opacity: 1;
}

.smn.is-gone {
  transform: translate(-50%, -8px);
  opacity: 0;
}

.smn__open {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 0 6px 0 0;
  border: 0;
  background: none;
  color: var(--foreground);
  font: inherit;
  font-size: 0.9rem;
  text-align: start;
  cursor: pointer;
}

.smn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22d3ee, #7c5cff) center / 100% no-repeat;
  box-shadow: 0 6px 18px -6px rgba(34, 211, 238, 0.8);
}

/* A megaphone, drawn as a mask so it takes the text colour of the circle. */
.smn__icon::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #041019;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.smn__tag {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--neon) 16%, transparent);
  color: var(--neon);
  font-size: 0.75rem;
  font-weight: 800;
}

.smn__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.smn__text.is-in {
  animation: smn-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes smn-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.smn__go {
  flex: none;
  padding: 0 6px;
  color: var(--neon);
  font-size: 1.25rem;
  line-height: 1;
}

.smn__nav {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 2px;
  padding-inline-start: 6px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
}

.smn__step,
.smn__hide {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.smn__step:hover,
.smn__hide:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

.smn__count {
  min-width: 30px;
  color: var(--muted-foreground);
  font-size: 0.72rem;
  text-align: center;
}

@media (max-width: 640px) {
  .smn {
    top: 74px;
  }

  .smn__tag {
    display: none;
  }
}

html.smn-open {
  overflow: hidden;
}

.smn-card {
  position: fixed;
  inset: 0;
  z-index: 970;
  display: grid;
  place-items: center;
  padding: 16px;
}

.smn-card__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: color-mix(in oklab, var(--background) 82%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 0.25s;
}

.smn-card__box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid color-mix(in oklab, var(--neon) 25%, transparent);
  border-radius: 20px;
  background: linear-gradient(180deg, #111a30, #0a1120);
  box-shadow: 0 30px 90px -30px rgba(0, 0, 0, 0.95), 0 0 60px -30px rgba(34, 211, 238, 0.5);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.smn-card.is-open .smn-card__shade,
.smn-card.is-open .smn-card__box {
  opacity: 1;
}

.smn-card.is-open .smn-card__box {
  transform: none;
}

.smn-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--muted-foreground);
  font-size: 0.85rem;
  font-weight: 700;
}

.smn-card__head .smn__icon {
  width: 30px;
  height: 30px;
}

.smn-card__date {
  font-weight: 500;
  font-size: 0.78rem;
}

.smn-card__close {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-inline-start: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--foreground);
  font-size: 1.1rem;
  cursor: pointer;
}

.smn-card__media {
  display: block;
  width: 100%;
  max-height: 46vh;
  border-radius: 14px;
  object-fit: contain;
  background: #000;
}

.smn-card__title {
  margin: 0;
  color: var(--foreground);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.7;
}

.smn-card__body {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.93rem;
  line-height: 2;
  white-space: pre-wrap;
}

.smn-card__link {
  align-self: flex-start;
  padding: 10px 16px;
  border: 1px solid color-mix(in oklab, var(--neon) 40%, transparent);
  border-radius: 12px;
  color: var(--neon);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.smn-card__link:hover {
  background: color-mix(in oklab, var(--neon) 10%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .smn,
  .smn-card__shade,
  .smn-card__box {
    transition: none;
  }

  .smn__text.is-in {
    animation: none;
  }
}