/* ==========================================================================
   TLN hero — the animated live-show stage.

   Everything here is drawn with shape, type and motion. There is no photography
   in the project yet and none is implied: the "host" is a deliberately abstract
   silhouette, never a depicted person, and the product is a blank form.

   THREE RULES THIS FILE OBEYS
   1. Only transform/opacity are animated, so the whole stage stays on the
      compositor and holds 60fps on a phone.
   2. Direction comes from [dir="rtl"] on an ancestor. Motion mirrors too — a
      card that slides in from the right in English slides in from the left in
      Arabic, otherwise it reads as sliding "backwards".
   3. prefers-reduced-motion freezes the stage into a composed still, rather
      than leaving half-animated elements stranded mid-transition.
   ========================================================================== */

.hero { padding-block: clamp(1.6rem, 1rem + 3vw, 3rem) clamp(1.5rem, 1rem + 2.5vw, 3rem); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 5vw, 4rem); align-items: center; }
@media (min-width: 950px) { .hero__grid { grid-template-columns: 1.02fr 1fr; } }

.hero__copy h1 { font-size: var(--step-4); margin: .35rem 0 1.1rem; }
.hero__copy .lede { max-width: 34ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* ---------- the screen ---------- */
.stage { position: relative; }
.stage__frame {
  position: relative;
  aspect-ratio: 4 / 3.35;
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 78% 8%, #3a3335 0%, transparent 60%),
    linear-gradient(168deg, #2b2628 0%, #1b1819 100%);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
@media (min-width: 950px) { .stage__frame { aspect-ratio: 4 / 3.9; } }

/* subtle brand wash so the screen never reads as plain grey */
.stage__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(75% 55% at 50% 108%, rgba(237,28,36,.30), transparent 70%);
}

.stage__bar {
  position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 4;
  display: flex; align-items: center; gap: .7rem;
  padding: clamp(.8rem, 2.4vw, 1.15rem);
}
.live {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--red); color: #fff;
  font-family: var(--font-body); font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .34rem .68rem; border-radius: 999px;
}
[dir="rtl"] .live { letter-spacing: 0; }
.live i { width: .45rem; height: .45rem; border-radius: 50%; background: #fff; animation: blink 1.6s var(--ease) infinite; }
@keyframes blink { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }

.aud {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.72); font-size: .72rem; font-weight: 600;
  background: rgba(255,255,255,.08); border-radius: 999px; padding: .32rem .7rem;
  backdrop-filter: blur(6px);
}
/* Audience is shown as filling dots, not a number — a fake viewer count would be
   a fabricated statistic, and this project bans numbers on the site outright. */
.aud__dots { display: inline-flex; gap: .2rem; }
.aud__dots i { width: .34rem; height: .34rem; border-radius: 50%; background: rgba(255,255,255,.3); }
.aud__dots i { animation: fill 4s var(--ease) infinite; }
.aud__dots i:nth-child(2) { animation-delay: .5s; }
.aud__dots i:nth-child(3) { animation-delay: 1s; }
.aud__dots i:nth-child(4) { animation-delay: 1.5s; }
.aud__dots i:nth-child(5) { animation-delay: 2s; }
@keyframes fill { 0%,15% { background: rgba(255,255,255,.3); } 30%,85% { background: var(--red); } 100% { background: rgba(255,255,255,.3); } }

/* ---------- scenes ---------- */
/* Staggered crossfade, not a simultaneous one. A plain symmetric fade left the
   incoming slide's type sitting on top of the outgoing slide's silhouette for ~300ms,
   which read as ghosting. The outgoing scene now clears first, then the incoming
   fades in behind a short delay. */
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s; }
.scene.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease) .3s, visibility 0s; }

/* Abstract host: a head and shoulders, nothing more. Not a person, no features.
   Laid out as a centred flex column (rather than two absolutely-placed shapes) so the
   head always sits ON the shoulders — absolute positioning left a gap between them,
   because the head's size is a % of WIDTH while its offset was a % of HEIGHT. */
.silhouette {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; inset-inline-end: 0;
  height: 64%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.silhouette span { background: linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.04)); flex: none; }
.silhouette span:first-child { height: 30%; aspect-ratio: 1; border-radius: 50%; }
.silhouette span:last-child { width: min(58%, 250px); height: 62%; border-radius: 44% 44% 0 0; margin-block-start: -1.5%; }

/* Signal sits bottom-RIGHT (trailing edge). It used to share the bottom-left corner
   with the comment stream and the two collided at desktop widths. */
.signal { position: absolute; inset-block-end: clamp(1rem,3vw,1.6rem); inset-inline-end: clamp(1rem,3vw,1.6rem); display: flex; align-items: flex-end; gap: .22rem; height: 1.4rem; z-index: 3; }
.signal span { width: .28rem; border-radius: 2px; background: rgba(255,255,255,.55); height: 40%; transform-origin: bottom; animation: eq 1.1s var(--ease) infinite; }
.signal span:nth-child(2){ animation-delay:.15s } .signal span:nth-child(3){ animation-delay:.3s }
.signal span:nth-child(4){ animation-delay:.45s } .signal span:nth-child(5){ animation-delay:.6s }
@keyframes eq { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.5); } }

/* comments rise and fade — decorative, never announced */
.comments { position: absolute; inset-block-end: clamp(1rem,3vw,1.7rem); inset-inline-start: clamp(1rem,3vw,1.6rem); inset-inline-end: 38%; height: 8.5rem; overflow: hidden; z-index: 2; mask-image: linear-gradient(to top, #000 62%, transparent); }
.cmt {
  display: flex; align-items: center; gap: .5rem; margin-block-start: .45rem;
  color: rgba(255,255,255,.9); font-size: clamp(.7rem,1.8vw,.8rem); font-weight: 500;
  opacity: 0; transform: translateY(14px);
  animation: rise .5s var(--ease) forwards;
}
.cmt i { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(255,255,255,.2); flex: none; }
.cmt b { background: rgba(255,255,255,.1); border-radius: 999px; padding: .22rem .6rem; font-weight: 500; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* product card slides in from the trailing edge, so it mirrors correctly in RTL */
.pcard {
  position: absolute; inset-block-start: 32%; inset-inline-end: clamp(.9rem,2.6vw,1.4rem);
  width: min(58%, 220px); z-index: 3;
  display: flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.97); border-radius: 15px; padding: .6rem;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.6);
  opacity: 0; transform: translateX(24px);
  animation: slidein .7s var(--ease) .5s forwards;
}
[dir="rtl"] .pcard { transform: translateX(-24px); }
@keyframes slidein { to { opacity: 1; transform: translateX(0); } }
.pcard__thumb { width: 2.6rem; height: 2.6rem; border-radius: 10px; background: linear-gradient(140deg, #ffe1e2, #ffc9cb); display: grid; place-items: center; flex: none; }
.pcard__thumb i { width: 1.1rem; height: 1.1rem; border-radius: 3px; background: var(--red); opacity: .55; }
.pcard__meta { flex: 1; min-width: 0; }
.pcard__meta b { display: block; height: .5rem; width: 70%; border-radius: 3px; background: #241f20; opacity: .82; }
.pcard__meta span { display: block; height: .4rem; width: 45%; border-radius: 3px; background: #241f20; opacity: .3; margin-block-start: .34rem; }
.pcard__btn { width: 2rem; height: 2rem; border-radius: 50%; background: var(--red); flex: none; position: relative; }
.pcard__btn::before, .pcard__btn::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; background: #fff; border-radius: 2px; transform: translate(-50%,-50%); }
.pcard__btn::before { width: .8rem; height: .14rem; }
.pcard__btn::after { width: .14rem; height: .8rem; }

.pulse { position: absolute; inset-block-start: 32%; inset-inline-end: clamp(.9rem,2.6vw,1.4rem); width: min(58%,220px); height: 3.8rem; border-radius: 15px; z-index: 2; box-shadow: 0 0 0 0 rgba(237,28,36,.55); animation: pulse 3.4s var(--ease) 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(237,28,36,.5); } 60%,100% { box-shadow: 0 0 0 22px rgba(237,28,36,0); } }

/* ---------- type-only scenes ---------- */
.scene--type { display: grid; place-content: center; padding: clamp(1.5rem,5vw,2.6rem); text-align: center; }
.bigtype { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: clamp(1.4rem, 1rem + 3vw, 2.3rem); line-height: 1.18; max-width: 16ch; margin-inline: auto; }
[dir="rtl"] .bigtype { line-height: 1.45; }
.orbit { position: relative; height: 5rem; margin-block-start: 1.6rem; }
.orbit i { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 3.4rem; height: 3.4rem; margin: -1.7rem 0 0 -1.7rem; border: 1.5px solid rgba(255,255,255,.28); border-radius: 50%; animation: ripple 3.2s var(--ease) infinite; }
.orbit i:nth-child(2) { animation-delay: 1.06s; } .orbit i:nth-child(3) { animation-delay: 2.12s; }
@keyframes ripple { 0% { transform: scale(.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }
.flow { display: flex; gap: .55rem; justify-content: center; margin-block-start: 1.8rem; }
.flow span { width: 2.4rem; height: .34rem; border-radius: 3px; background: rgba(255,255,255,.25); animation: sweep 2.4s var(--ease) infinite; }
.flow span:nth-child(2){ animation-delay:.3s } .flow span:nth-child(3){ animation-delay:.6s }
@keyframes sweep { 0%,100% { background: rgba(255,255,255,.22); transform: scaleX(1); } 45% { background: var(--red); transform: scaleX(1.12); } }

/* ---------- controls ---------- */
.stage__ctrl { display: flex; align-items: center; gap: .5rem; margin-block-start: 1.1rem; justify-content: center; }
.dot { width: 2rem; height: .38rem; border-radius: 3px; border: none; background: var(--line); cursor: pointer; padding: 0; transition: background-color .25s var(--ease); }
.dot.is-on { background: var(--red); }
.playpause { margin-inline-start: .5rem; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ink-3); }
.playpause:hover { color: var(--ink); border-color: var(--ink-3); }
.playpause svg { width: 14px; height: 14px; fill: currentColor; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- other sections ---------- */
.h2big { font-size: var(--step-3); max-width: 20ch; }
.what__p { margin-top: 1.1rem; max-width: 62ch; }
@media (min-width: 700px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.hosts { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 900px) { .hosts { grid-template-columns: 1.25fr 1fr; } }
.ticks { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .7rem; }
.ticks li { position: relative; padding-inline-start: 1.9rem; color: var(--ink-2); font-weight: 600; }
.ticks li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .48em; width: .78rem; height: .42rem; border-inline-start: 2.4px solid var(--red); border-block-end: 2.4px solid var(--red); transform: rotate(-45deg); }
.hosts__art { display: grid; place-items: center; min-height: 240px; background: linear-gradient(165deg, var(--surface-2), var(--surface-3)); border-radius: var(--radius-lg); }
.mic { position: relative; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; }
.mic span:first-child { width: 1.9rem; height: 3rem; border-radius: 999px; background: var(--red); }
.mic span:nth-child(2) { position: absolute; inset-block-end: .1rem; width: 2.9rem; height: 1.5rem; border: 2.6px solid var(--red); border-block-start: none; border-radius: 0 0 999px 999px; }
.mic span:last-child { position: absolute; inset: -1.1rem; border: 2px solid rgba(237,28,36,.32); border-radius: 50%; animation: ripple 3s var(--ease) infinite; }

/* ==========================================================================
   Reduced motion: compose a still. Elements that animate IN (comments, product
   card) are forced to their finished state instead of being left at opacity 0,
   which is the usual bug when animations are merely switched off.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cmt, .pcard { opacity: 1 !important; transform: none !important; }
  .aud__dots i:nth-child(-n+3) { background: var(--red); }
  .signal span { height: 70%; }
  .pulse { display: none; }
}