/* IPN TV · Welcome page, "Landing" style (1.5). Warm night palette — rose, amber, violet, teal — over a deep plum base.
   The hero always fills the screen (phone → wide desktop); everything below flows. Light and night mode, LTR and RTL. */
.ld-body {
  --ld-bg: #FFF8F2; --ld-bg2: #FFFFFF; --ld-ink: #1A1430; --ld-ink2: #4A4366; --ld-muted: #7A7392; --ld-line: rgba(40,20,80,.1);
  --ld-card: #FFFFFF; --ld-rose: #F43F5E; --ld-amber: #F59E0B; --ld-violet: #8B5CF6; --ld-teal: #14B8A6; --ld-night: #0B0A1F;
  --paper: #FFFFFF; --line: rgba(40,20,80,.1); --ink: #1A1430; --ink-2: #4A4366; --muted: #7A7392; --sunk: rgba(40,20,80,.06); --accent: #E11D48;
  margin: 0; background: var(--ld-bg); color: var(--ld-ink); overflow-x: clip;
}
html[data-mode="dark"] .ld-body { --ld-bg: #0B0A1F; --ld-bg2: #120F2B; --ld-ink: #F4F1FF; --ld-ink2: #CFC8EA; --ld-muted: #9A92BC; --ld-line: rgba(255,255,255,.09); --ld-card: #16132F; --paper: #16132F; --line: rgba(255,255,255,.09); --ink: #F4F1FF; --ink-2: #CFC8EA; --muted: #9A92BC; --sunk: rgba(255,255,255,.08); }

/* ---- Top bar (floats over the hero) ---- */
.ld-top { position: fixed; z-index: 50; inset: max(12px, env(safe-area-inset-top)) clamp(10px, 2.4vw, 28px) auto; display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 10px 0 18px; border-radius: 22px; color: #fff;
  background: rgba(14,10,36,.38); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); transition: background .35s, box-shadow .35s; }
html[dir="rtl"] .ld-top { padding: 0 18px 0 10px; }
.ld-top.is-solid { background: rgba(14,10,36,.86); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); }
.ld-brand { display: inline-flex; align-items: center; flex: none; }
.ld-brand .logo { height: 34px; }
.ld-brand .logo--word { font-size: 18px; }
.ld-nav { display: flex; align-items: center; gap: 2px; height: 100%; margin-inline: auto; }
/* 1.12 · nav items = the IPN site header's (.hdr__link + .nv chip from site.d/hdrkit.css); white on the picture, the chip keeps its colour */
.ld-nav .hdr__link { --text-2: rgba(255,255,255,.86); --text: #fff; --red: #fff; height: 42px; padding: 0 12px; border-radius: 14px; }
.ld-nav .hdr__link::after { left: 12px; right: 12px; bottom: 2px; height: 2px; }
.ld-top .ld-nav .nv { background: color-mix(in srgb, var(--nv) 28%, rgba(255,255,255,.08)); color: color-mix(in srgb, var(--nv) 60%, #fff); }
.ld-nav .hdr__link:hover { background: rgba(255,255,255,.1); }
.ld-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.ld-nav + .ld-tools { margin-inline-start: 0; }
.ld-live { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 800; font-size: 13.5px; color: #fff; white-space: nowrap; }
.ld-live__dot { width: 9px; height: 9px; border-radius: 50%; background: #94A3B8; }
.ld-live.is-live { background: #E11D48; box-shadow: 0 10px 24px -10px #E11D48; }
.ld-live.is-live .ld-live__dot { background: #fff; animation: nbPulse 1.6s infinite; }
.ld-lang { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.12); }
.ld-lang a { display: grid; place-items: center; min-width: 38px; height: 34px; padding: 0 8px; border-radius: 999px; font-weight: 800; font-size: 13px; color: rgba(255,255,255,.8); }
.ld-lang a.is-on { background: #fff; color: var(--ld-night); }
.ld-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; }
.ld-icon:hover, .ld-live:hover { filter: brightness(1.15); }
.ld-icon .ic { width: 19px; height: 19px; }

/* ---- Hero ---- */
.ld-hero { position: relative; display: flex; flex-direction: column; min-height: max(100svh, 620px); color: #fff; overflow: hidden; isolation: isolate; background: var(--ld-night); }
.ld-hero__slides { position: absolute; inset: 0; z-index: -3; }
.ld-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.ld-hero__slide.is-on { opacity: 1; }
.ld-hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.ld-hero__slide.is-on img { animation: ldKen 14s ease-out forwards; }
/* 1.19.6 · a film as a slide. While one plays the picture layer is lifted above the veil so the film is actually
   seen (and can be clicked for sound), the dark wash is softened, and the welcome text keeps its own scrim above it. */
.ld-hero__slide--video picture { position: absolute; inset: 0; }
.ld-hero__slide--video.is-on img { animation: none; transform: none; }
.ld-hero__video { position: absolute; inset: 0; overflow: hidden; }
.ld-hero__video iframe { position: absolute; inset: 50% auto auto 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity .45s ease; }
/* the player fades in only once YouTube has answered; until then (and for good if it cannot be reached) the
   film's own first frame underneath is what the visitor sees. */
.ld-hero__video.is-ready iframe { opacity: 1; }
.ld-hero.is-video .ld-hero__slides { z-index: 0; }
.ld-hero.is-video .ld-hero__in { z-index: 1; }
.ld-hero.is-video .ld-hero__veil { opacity: .45; }
@keyframes ldKen { from { transform: scale(1.12) translate3d(0, 0, 0); } to { transform: scale(1.02) translate3d(-1.5%, -1%, 0); } }
.ld-hero__veil { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(70% 60% at 50% 45%, rgba(11,10,31,.15), rgba(11,10,31,.65) 75%),
  linear-gradient(180deg, rgba(11,10,31,.55) 0%, rgba(11,10,31,.2) 28%, rgba(11,10,31,.45) 60%, rgba(11,10,31,.96) 100%); }
.ld-hero__aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .7; }
.ld-hero__aurora i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); opacity: .5; animation: ldFloat 22s ease-in-out infinite alternate; }
.ld-hero__aurora i:nth-child(1) { inset: -18vmax auto auto -12vmax; background: radial-gradient(circle, rgba(244,63,94,.75), transparent 65%); }
.ld-hero__aurora i:nth-child(2) { inset: auto -14vmax -20vmax auto; background: radial-gradient(circle, rgba(139,92,246,.7), transparent 65%); animation-delay: -7s; }
.ld-hero__aurora i:nth-child(3) { inset: 20% auto auto 55%; width: 30vmax; height: 30vmax; background: radial-gradient(circle, rgba(245,158,11,.5), transparent 65%); animation-delay: -12s; }
@keyframes ldFloat { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.1); } }
.ld-hero__in { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(12px, 2vh, 20px); width: min(1100px, 100% - 32px); margin: 0 auto; padding: calc(96px + env(safe-area-inset-top)) 0 24px; text-align: center; }
/* R11 · a soft scrim under the whole lockup (eyebrow → title → lead → buttons) so a bright hero photo can
   never swallow the headline. It sits at the aurora's level, above the picture and below every word. */
.ld-hero__in::before { content: ""; position: absolute; z-index: -1; inset-block: calc(70px + env(safe-area-inset-top)) -2vh; inset-inline: -14vw; pointer-events: none;
  background: radial-gradient(64% 52% at 50% 46%, rgba(8,6,24,.56), rgba(8,6,24,.3) 54%, rgba(8,6,24,0) 78%); }
/* ---- R11 · the headline lockup: eyebrow → title → lead read as one block. The title is the LCP element, so it
   paints on the first frame (no opacity: 0, no delay) and only settles out of a blur; the colour comes from a
   light multi-stop gradient that drifts through the glyphs for ever, so every stop stays bright enough to hold
   over the lightest hero photo, and the legibility comes from the drop-shadow stack on the <h1>. ---- */
.ld-hello { position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.26); font-weight: 700; font-size: clamp(14px, 1.4vw, 16px); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); box-shadow: 0 12px 30px -20px rgba(8,6,24,.9); animation: ldUp .9s var(--ease) both;
  background: linear-gradient(100deg, rgba(244,63,94,.3), rgba(245,158,11,.22) 34%, rgba(139,92,246,.26) 68%, rgba(20,184,166,.24)); }
.ld-hello span[lang="fa"] { font-family: var(--font-fa); }
.ld-hello i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--ld-rose), var(--ld-amber)); box-shadow: 0 0 0 4px rgba(255,255,255,.14); animation: ldDot 2.8s ease-in-out infinite; }
@keyframes ldDot { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.14); } 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
.ld-h1 { max-width: 16ch; margin: 0; font-size: clamp(36px, 7.4vw, 96px); font-weight: 900; letter-spacing: -.04em; line-height: 1;
  filter: drop-shadow(0 0 2px rgba(8,6,24,.5)) drop-shadow(0 1px 1px rgba(8,6,24,.6)) drop-shadow(0 10px 26px rgba(8,6,24,.55)) drop-shadow(0 0 36px rgba(244,63,94,.28)); }
html[dir="rtl"] .ld-h1 { letter-spacing: 0; line-height: 1.3; max-width: 20ch; }
/* the type: a bright gradient clipped to the glyphs, drifting for ever; Persian joining is untouched (no split, no tracking) */
.ld-h1 .wt__l1, .ld-h1 .wt__l2 { max-width: 100%; }   /* the lines are flex items: cap them too, or a long title runs past the hero */
.ld-h1 .wt__l1 { background-image: linear-gradient(100deg, #fff 0%, #FFD9E6 9%, #fff 19%, #FFE6C2 29%, #fff 39%, #E0D9FF 49%, #fff 59%, #C4F2EB 69%, #fff 79%, #FFD9E6 89%, #fff 100%);
  background-size: 280% 100%; background-repeat: repeat-x; background-position: 130% 50%;   /* repeat-x, not no-repeat: a drifting background must never leave part of the line unpainted */
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: ldWtIn .78s var(--ease) both, ldWtDrift 18s linear infinite; }
.ld-h1 .wt__l2 { animation: ldWtIn .8s .16s var(--ease) both; }
@keyframes ldWtIn { from { transform: translateY(.18em) scale(.972); filter: blur(12px); } to { transform: none; filter: none; } }
@keyframes ldWtDrift { from { background-position: 130% 50%; } to { background-position: -30% 50%; } }
.ld-lead { max-width: 56ch; font-size: clamp(16px, 1.7vw, 20px); color: rgba(255,255,255,.9); text-shadow: 0 2px 14px rgba(8,6,24,.7); animation: ldUp .9s .26s var(--ease) both; }
.ld-onair { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(225,29,72,.22); border: 1px solid rgba(255,101,118,.5); font-weight: 700; font-size: 14.5px; animation: ldUp .9s .34s var(--ease) both; }
.ld-onair span[dir] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-onair .ic { width: 16px; height: 16px; flex: none; }
.ld-ctas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(920px, 100%); margin-top: clamp(4px, 1.4vh, 14px); animation: ldUp .9s .4s var(--ease) both; }
.ld-ctas:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(640px, 100%); }
.ld-btn { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 18px 12px 12px; border-radius: 22px; text-align: start; color: #fff; overflow: hidden; isolation: isolate;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s; }
html[dir="rtl"] .ld-btn { padding: 12px 12px 12px 18px; }
.ld-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: var(--g); transition: opacity .35s; }
.ld-btn:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -22px var(--c); }
.ld-btn:hover::before { opacity: 1; }
.ld-btn__ic { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--g); box-shadow: 0 12px 24px -12px var(--c); }
.ld-btn__ic .ic { width: 24px; height: 24px; }
.ld-btn > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.ld-btn small { font-size: 12.5px; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-btn strong { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-btn--tv { --c: #E11D48; --g: linear-gradient(135deg, #E11D48, #FB7185); }
.ld-btn--sh { --c: #F59E0B; --g: linear-gradient(135deg, #D97706, #FBBF24); }
.ld-btn--ev { --c: #8B5CF6; --g: linear-gradient(135deg, #7C3AED, #22D3EE); }
.ld-hero__foot { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(1240px, 100% - 24px); margin: 0 auto; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.ld-hero__news { min-width: 0; }
.ld-hero__pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: 6px; }
.ld-hero__cap { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); transition: opacity .5s; min-height: 1.4em; }
.ld-hero__dots { display: flex; gap: 6px; }
/* 1.14 (R6) · the slider's buttons are solid, not glass: a dark pill track with a solid accent fill, readable over any picture */
.ld-hero__dots button { width: 48px; height: 26px; padding: 0 2px; border: 0; border-radius: 999px; background: #11162B; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 16px -10px rgba(0,0,0,.9); transition: background-color .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.ld-hero__dots button:hover { background: #1C2440; transform: translateY(-1px); }
.ld-hero__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ld-hero__dots button.is-on { background: #2A1322; }
.ld-hero__dots i { position: relative; display: block; width: calc(100% - 10px); height: 4px; border-radius: 4px; background: #39415C; overflow: hidden; }
.ld-hero__dots button.is-on i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #E11D2E, #FF6274); transform-origin: left; animation: ldBar var(--ld-t, 7s) linear forwards; }
html[dir="rtl"] .ld-hero__dots button.is-on i::after { transform-origin: right; }
.ld-hero.is-paused .ld-hero__dots button.is-on i::after { animation-play-state: paused; }
@keyframes ldBar { from { transform: scaleX(0); } }
.ld-scroll { justify-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: .1em; text-transform: uppercase; }
html[dir="rtl"] .ld-scroll { letter-spacing: 0; text-transform: none; font-size: 13px; }
.ld-scroll .ic { width: 20px; height: 20px; animation: ldBob 2s ease-in-out infinite; }
@keyframes ldBob { 50% { transform: translateY(5px); } }
@keyframes ldUp { from { opacity: 0; transform: translateY(18px); } }

/* ---- Sections ---- */
.ld-sec { width: min(1240px, 100% - 32px); margin: 0 auto; padding-block: clamp(56px, 8vw, 110px) 0; }
.ld-sec__head { display: grid; justify-items: center; gap: 12px; max-width: 720px; margin: 0 auto clamp(26px, 4vw, 44px); text-align: center; }
.ld-kick { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; color: var(--ld-rose); background: color-mix(in srgb, var(--ld-rose) 10%, transparent); }
.ld-kick .ic { width: 16px; height: 16px; }
.ld-sec__head h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 900; letter-spacing: -.03em; }
html[dir="rtl"] .ld-sec__head h2 { letter-spacing: 0; }
.ld-sec__head p { color: var(--ld-ink2); font-size: clamp(15.5px, 1.5vw, 18px); }

/* the two sites */
.ld-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.ld-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(460px, 62vh, 620px); padding: clamp(18px, 2.4vw, 30px); border-radius: 32px; overflow: hidden; color: #fff; isolation: isolate; box-shadow: 0 40px 80px -50px rgba(30,10,60,.7); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ld-card:hover { transform: translateY(-6px); box-shadow: 0 50px 90px -46px var(--c); }
.ld-card--tv { --c: #E11D48; --g: linear-gradient(135deg, #E11D48, #FB7185); }
.ld-card--sh { --c: #D97706; --g: linear-gradient(135deg, #D97706, #FBBF24); }
.ld-card__media { position: absolute; inset: 0; z-index: -1; background: #1a1030; }
.ld-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,28,.2) 0%, rgba(10,8,28,.1) 30%, rgba(10,8,28,.82) 72%, rgba(10,8,28,.96) 100%); }
.ld-card--tv .ld-card__media::after { background: linear-gradient(180deg, rgba(10,8,28,.25), rgba(10,8,28,.05) 30%, rgba(60,6,24,.82) 72%, rgba(18,4,14,.97)); }
.ld-card--sh .ld-card__media::after { background: linear-gradient(180deg, rgba(10,8,28,.25), rgba(10,8,28,.05) 30%, rgba(60,30,4,.8) 72%, rgba(20,10,4,.97)); }
.ld-card__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.ld-card__slide.is-on { opacity: 1; }
.ld-card__slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ld-card:hover .ld-card__slide.is-on img { transform: scale(1.05); }
.ld-card__bars { position: absolute; z-index: 2; inset: 18px 22px auto; display: flex; gap: 5px; }
.ld-card__bars i { flex: 1; height: 3px; border-radius: 3px; background: #2B3350; overflow: hidden; }   /* 1.14 · solid track */
.ld-card__bars i b { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
html[dir="rtl"] .ld-card__bars i b { transform-origin: right; }
.ld-card__bars i.is-done b { transform: none; }
.ld-card__bars i.is-on b { animation: ldBar var(--card-t, 6s) linear forwards; transform: none; }
.ld-card__top { position: absolute; inset: 36px clamp(18px, 2.4vw, 30px) auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ld-card__logo { display: inline-flex; align-items: stretch; height: 40px; border-radius: 12px; overflow: hidden; font-weight: 900; font-size: 17px; box-shadow: 0 10px 20px -10px rgba(0,0,0,.6); }
.ld-card__logo b { display: grid; place-items: center; padding: 0 10px; background: #D2152B; }
.ld-card__logo i { display: grid; place-items: center; padding: 0 10px; background: #fff; color: #0B1D3A; font-style: normal; }
.ld-card__crown { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--g); box-shadow: 0 12px 24px -12px var(--c); }
.ld-card__crown .ic { width: 26px; height: 26px; }
.ld-card__note { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(0,0,0,.4); font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ld-card__note .ic { width: 14px; height: 14px; }
.ld-card__body { display: grid; gap: 12px; }
.ld-card__by { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
html[dir="rtl"] .ld-card__by { letter-spacing: 0; text-transform: none; font-size: 14px; }
.ld-card__title { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; }
html[dir="rtl"] .ld-card__title { letter-spacing: 0; line-height: 1.35; }
.ld-card__text { max-width: 46ch; font-size: 15.5px; color: rgba(255,255,255,.85); }
.ld-card__feats { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-card__feats span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); font-size: 13.5px; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ld-card__feats .ic { width: 15px; height: 15px; }
.ld-card__cta { display: inline-flex; align-items: center; gap: 12px; width: max-content; height: 54px; margin-top: 4px; padding: 0 8px 0 22px; border-radius: 999px; background: #fff; color: #120D2A; font-weight: 800; font-size: 16px; box-shadow: 0 16px 34px -16px rgba(0,0,0,.7); }
html[dir="rtl"] .ld-card__cta { padding: 0 22px 0 8px; }
.ld-card__arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--g); color: #fff; transition: transform .35s var(--ease); }
.ld-card:hover .ld-card__arrow { transform: translateX(4px); }
html[dir="rtl"] .ld-card:hover .ld-card__arrow { transform: translateX(-4px); }
.ld-card__arrow .ic { width: 18px; height: 18px; }

/* events */
.ld-spot { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 32px; overflow: hidden; background: var(--ld-card); border: 1px solid var(--ld-line); box-shadow: 0 40px 80px -56px rgba(40,10,60,.6); }
.ld-spot__media { position: relative; min-height: 420px; overflow: hidden; }
.ld-spot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.ld-spot:hover .ld-spot__media img { transform: scale(1.04); }
.ld-spot__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, color-mix(in srgb, var(--acc) 30%, transparent)); }
.ld-spot__body { display: grid; align-content: center; gap: 14px; padding: clamp(22px, 3.4vw, 44px); }
.ld-spot__tag { display: inline-flex; align-items: center; gap: 7px; width: max-content; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--acc); color: #fff; font-size: 13px; font-weight: 800; }
.ld-spot__tag .ic { width: 15px; height: 15px; }
.ld-spot h3 { font-size: clamp(26px, 3vw, 40px); font-weight: 900; letter-spacing: -.03em; line-height: 1.1; }
html[dir="rtl"] .ld-spot h3 { letter-spacing: 0; line-height: 1.4; }
.ld-spot h3 a:hover { color: var(--acc); }
.ld-spot p { color: var(--ld-ink2); font-size: 16px; }
.ld-spot__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ld-spot__facts li { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 12px; background: color-mix(in srgb, var(--acc) 9%, transparent); font-size: 14px; font-weight: 700; max-width: 100%; }
.ld-spot__facts li bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-spot__facts .ic { flex: none; width: 16px; height: 16px; color: var(--acc); }
.ld-cd { display: flex; gap: 8px; }
.ld-cd span { display: grid; justify-items: center; flex: 1; max-width: 86px; padding: 10px 4px; border-radius: 16px; background: var(--ld-night); color: #fff; }
.ld-cd b { font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ld-cd small { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
html[dir="rtl"] .ld-cd small { text-transform: none; letter-spacing: 0; font-size: 12px; }
.ld-spot__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.ld-evrow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, calc((100% - 40px) / 3)); gap: 20px; margin-top: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; }
.ld-evrow__it { scroll-snap-align: start; }
.ld-evrow .evc { background: var(--ld-card); border-color: var(--ld-line); color: var(--ld-ink); }
.ld-evrow .evc__facts, .ld-evrow .evc__sum { color: var(--ld-ink2); }
.ld-center { display: flex; justify-content: center; margin-top: 26px; }
.ld-pill { display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 22px; border-radius: 999px; font-weight: 800; font-size: 15px; background: var(--ld-night); color: #fff; transition: transform .3s var(--ease), box-shadow .3s; }
.ld-pill:hover { transform: translateY(-2px); }
.ld-pill .ic { width: 18px; height: 18px; }
.ld-pill--acc { background: var(--acc); box-shadow: 0 14px 30px -14px var(--acc); }
.ld-pill--red { background: linear-gradient(120deg, #E11D48, #F97316); box-shadow: 0 14px 30px -14px #E11D48; }
.ld-pill--ghost { background: transparent; color: var(--ld-ink); border: 1.5px solid var(--ld-line); }
.ld-pill--ghost:hover { border-color: var(--ld-rose); color: var(--ld-rose); }
html[data-mode="dark"] .ld-pill:not(.ld-pill--acc):not(.ld-pill--red):not(.ld-pill--ghost):not(.ld-pill--buy) { background: #fff; color: var(--ld-night); }

/* stay in touch */
.ld-join { padding-bottom: clamp(56px, 8vw, 100px); }
.ld-join__card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px 28px; padding: clamp(24px, 4vw, 44px); border-radius: 32px; overflow: hidden; color: #fff;
  background: radial-gradient(40rem 20rem at 0% 0%, rgba(244,63,94,.5), transparent 70%), radial-gradient(40rem 22rem at 100% 100%, rgba(139,92,246,.55), transparent 70%), linear-gradient(135deg, #1A0F3A, #0B0A1F); }
.ld-join__art { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 24px; background: linear-gradient(135deg, #F43F5E, #F59E0B); box-shadow: 0 18px 36px -16px #F43F5E; }
.ld-join__art .ic { width: 38px; height: 38px; }
.ld-join__txt h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; }
.ld-join__txt p { color: rgba(255,255,255,.8); margin-top: 6px; }
.ld-join__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.ld-join__acts .ld-pill--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.ld-join__soc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.ld-join__soc a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); transition: background .2s, transform .2s; }
.ld-join__soc a:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }
.ld-join__soc .ic { width: 20px; height: 20px; }

.ld-foot { border-top: 1px solid var(--ld-line); background: var(--ld-bg2); }
.ld-foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; width: min(1240px, 100% - 32px); margin: 0 auto; padding: 26px 0 calc(26px + env(safe-area-inset-bottom)); }
.ld-foot .logo--word { font-size: 16px; }
.ld-foot__links { display: flex; flex-wrap: wrap; gap: 4px 18px; flex: 1; font-size: 14.5px; font-weight: 600; color: var(--ld-ink2); }
/* 1.18 (R10) · an icon on every welcome-footer link, like the inner-page and contest footers */
.ld-foot__links a { display: inline-flex; align-items: center; gap: 7px; }
.ld-foot__links a .ic { width: 17px; height: 17px; flex: none; opacity: .62; transition: opacity .18s ease, color .18s ease; }
.ld-foot__links a:hover { color: var(--ld-rose); }
.ld-foot__links a:hover .ic { opacity: 1; }
.ld-foot__copy { width: 100%; font-size: 13px; color: var(--ld-muted); }

/* ---- Responsive ---- */
@media (max-width: 1100px) { .ld-nav a span { display: none; } .ld-nav .hdr__link { padding: 0 10px; } .ld-nav .hdr__link::after { display: none; } }
@media (max-width: 900px) {
  .ld-cards { grid-template-columns: 1fr; }
  .ld-card { min-height: clamp(420px, 70vh, 540px); }
  .ld-spot { grid-template-columns: 1fr; }
  .ld-spot__media { min-height: 0; aspect-ratio: 16 / 10; }
  .ld-join__card { grid-template-columns: auto 1fr; } .ld-join__acts { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ld-top { height: 56px; padding: 0 6px 0 12px; border-radius: 18px; gap: 6px; }
  html[dir="rtl"] .ld-top { padding: 0 12px 0 6px; }
  .ld-nav { display: none; }
  .ld-brand .logo { height: 28px; } .ld-brand .logo--word { font-size: 15px; }
  .ld-live { height: 36px; padding: 0 11px; font-size: 12.5px; }
  .ld-lang a { min-width: 32px; height: 30px; } .ld-icon, .ld-tools .hdr__icon { width: 36px; height: 36px; }
  .ld-hero__in { padding-top: calc(84px + env(safe-area-inset-top)); }
  .ld-ctas, .ld-ctas:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; width: min(440px, 100%); gap: 10px; }
  .ld-btn { padding-block: 10px; border-radius: 18px; } .ld-btn__ic { width: 46px; height: 46px; border-radius: 14px; }
  .ld-hero__news { min-width: 0; }
.ld-hero__pager { justify-content: center; } .ld-hero__cap { display: none; }
  .ld-hero__dots button { width: 34px; }
  .ld-scroll span { display: none; }
  .ld-evrow { grid-auto-columns: minmax(260px, 82%); }
  .ld-card__feats span:nth-child(n+4) { display: none; }
  .ld-card__cta { height: 50px; font-size: 15px; }
  .ld-join__card { grid-template-columns: 1fr; text-align: center; justify-items: center; } .ld-join__acts, .ld-join__soc { justify-content: center; }
}
@media (max-width: 380px) { .ld-live span[data-ld-live-label] { display: none; } .ld-live { width: 36px; padding: 0; justify-content: center; } .ld-h1 { font-size: 32px; } }
@media (max-height: 700px) and (min-width: 761px) { .ld-hero__in { padding-top: 92px; gap: 10px; } .ld-h1 { font-size: clamp(34px, 6vw, 64px); } .ld-lead { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ld-hero__slide.is-on img, .ld-hero__aurora i, .ld-scroll .ic, .ld-hello, .ld-hello i, .ld-h1, .ld-h1 .wt__l1, .ld-h1 .wt__l2, .ld-lead, .ld-ctas, .ld-onair { animation: none; }
  /* R11 · a still, fully legible headline: the gradient parks on a bright slice, nothing is blurred or offset */
  .ld-h1 .wt__l1 { background-position: 32% 50%; transform: none; filter: none; }
  .ld-hero__slide, .ld-card__slide { transition: none; }
  .ld-hero__dots button.is-on i::after, .ld-card__bars i.is-on b { animation: none; transform: none; }
}

/* 1.6.1 · Sign in / my account */
.ld-top .me-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-weight: 800; font-size: 13.5px; white-space: nowrap; text-decoration: none; transition: background-color .2s; }
html[dir="rtl"] .ld-top .me-btn { padding: 0 10px 0 14px; }
.ld-top .me-btn:hover { background: rgba(255,255,255,.22); }
.ld-top .me-btn .ic { width: 18px; height: 18px; }
.ld-top .me-btn.is-in { padding: 0 12px 0 3px; } html[dir="rtl"] .ld-top .me-btn.is-in { padding: 0 3px 0 12px; }
.ld-top .me-av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #E11D48, #7C3AED); color: #fff; font-weight: 800; }
.ld-top .me-btn__t { max-width: 8em; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) { .ld-top .me-btn__t { display: none; } .ld-top .me-btn { width: 36px; height: 36px; padding: 0 !important; justify-content: center; } }

/* 1.9 · the boxes' buttons: full width with an icon, a light sweep and a moving arrow */
.ld-card__cta { display: flex !important; width: 100% !important; gap: 12px; padding: 0 7px !important; border-radius: 18px; position: relative; overflow: hidden; isolation: isolate; transition: background-color .35s, color .35s, box-shadow .35s; }
.ld-card__ctaic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--g); color: #fff; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.ld-card__ctaic .ic { width: 20px; height: 20px; }
.ld-card__ctat { flex: 1; }
.ld-card__arrow { margin-inline-start: auto; }
.ld-card__cta::after { content: ""; position: absolute; inset: 0 auto 0 -40%; width: 35%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.7), transparent); transform: skewX(-20deg); animation: ld-sweep 3.8s ease-in-out infinite; }
html[dir="rtl"] .ld-card__cta::after { inset: 0 -40% 0 auto; animation-name: ld-sweep-rtl; }
@keyframes ld-sweep { 0% { left: -40%; } 55%, 100% { left: 130%; } }
@keyframes ld-sweep-rtl { 0% { right: -40%; } 55%, 100% { right: 130%; } }
.ld-card:hover .ld-card__cta { background: var(--g); color: #fff; box-shadow: 0 18px 40px -16px rgba(0,0,0,.8); }
.ld-card:hover .ld-card__ctaic { transform: rotate(-10deg) scale(1.1); background: rgba(255,255,255,.22); }
.ld-card:hover .ld-card__arrow { background: #fff; color: #120D2A; }
.ld-card:hover .ld-card__arrow .ic { animation: ld-nudge .9s ease-in-out infinite; }
html[dir="rtl"] .ld-card:hover .ld-card__arrow .ic { animation-name: ld-nudge-rtl; }
@keyframes ld-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes ld-nudge-rtl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .ld-card__cta::after { animation: none; display: none; } }

/* 1.11 · the NOW ticker joins the news bar at the foot of the hero (ticker first, news bar second); lang switch on the image */
.ld-hero__bars { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ticker--landing { display: flex; align-items: stretch; height: 42px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(10,12,30,.55); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); color: #fff; }
.ticker--landing .ticker__tag { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; background: linear-gradient(120deg, #E11D48, #F97316); font-weight: 900; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-inline-end: 26px; }
html[dir="rtl"] .ticker--landing .ticker__tag { clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%); letter-spacing: 0; }
.ticker--landing .ticker__tag .ic { width: 15px; height: 15px; }
.ticker--landing .ticker__view { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker--landing .ticker__track { display: flex; align-items: center; height: 100%; width: max-content; animation: ld-tick var(--tick-dur, 50s) linear infinite; }
html[dir="rtl"] .ticker--landing .ticker__track { animation-name: ld-tick-rtl; }
.ticker--landing:hover .ticker__track { animation-play-state: paused; }
.ticker--landing .ticker__item { display: inline-flex; align-items: center; padding: 0 24px; font-size: 14px; font-weight: 500; white-space: nowrap; color: #E9EDF5; }
.ticker--landing .ticker__item::before { content: ""; width: 5px; height: 5px; margin-inline-end: 24px; transform: rotate(45deg); background: #FB7185; }
.ticker--landing a.ticker__item:hover { color: #fff; text-decoration: underline; }
@keyframes ld-tick { to { transform: translateX(-50%); } }
@keyframes ld-tick-rtl { to { transform: translateX(50%); } }
.ld-tools .lsw { --lsw-h: 34px; }
@media (max-width: 760px) { .ticker--landing { height: 38px; } .ticker--landing .ticker__item { font-size: 13px; } .ld-tools .lsw { --lsw-h: 30px; min-width: 76px; } }

/* ===== 1.13 · Welcome page fixes ========================================================== */

/* --- the upcoming-event box: identical insets on both sides, full-width actions ----------- */
.ld-spot { max-width: 100%; }
.ld-spot__body { min-width: 0; padding-inline: clamp(18px, 4.6vw, 44px); }
.ld-spot__body > * { min-width: 0; max-width: 100%; }
.ld-spot__facts { width: 100%; }
.ld-spot__facts li { min-width: 0; max-width: 100%; }
/* the countdown fills the body exactly, so left and right insets match in RTL and LTR */
.ld-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.ld-cd span { display: grid; justify-items: center; width: auto; max-width: none; min-width: 0; }
/* "Details" is the box's main action: full width (and so is a ticket button beside it on wide screens) */
.ld-spot__acts { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
.ld-spot__acts .ld-pill { width: 100%; justify-content: center; }
@media (min-width: 1000px) { .ld-spot__acts:has(> :nth-child(2)) { grid-template-columns: 1fr 1fr; } }

/* --- "Buy ticket" on the welcome page ------------------------------------------------------
   The paint comes from the one shared rule, `.btn-buy` in assets/css/events.css (landing.css and
   events.css are both loaded by layouts/landing.php), so the welcome box, the events list, the
   event page and the account area cannot drift apart. Only the pill's own shape lives here.
   The rule below is the fallback for a `.ld-pill--buy` without `.btn-buy`; `.btn-buy.btn-buy`
   (specificity 0,2,0) wins over it whenever both are present. */
.ld-pill--buy { background: linear-gradient(118deg, #E11D48 0%, #F43F5E 45%, #F97316 100%); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(225,29,72,.85); }
.ld-pill--buy .ic { color: currentColor; }

/* --- the footer on phones: tidy columns, readable spacing, nothing cramped ---------------- */
@media (max-width: 760px) {
  /* the extra bottom room keeps the copyright clear of the floating back-to-top button */
  .ld-foot__in { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 18px; text-align: center; padding: 28px 0 calc(78px + env(safe-area-inset-bottom)); }
  .ld-foot__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; width: 100%; flex: none; font-size: 15px; }
  .ld-foot__links a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 6px 8px; border-radius: 12px;
    text-align: center; line-height: 1.35; transition: background-color .25s ease-out, color .25s ease-out; }
  .ld-foot__links a:active { background: color-mix(in srgb, var(--ld-ink) 7%, transparent); }
  .ld-foot__links a:nth-child(odd):last-child { grid-column: 1 / -1; }
  .ld-foot__copy { width: 100%; max-width: 34ch; margin: 0 auto; padding-top: 14px; border-top: 1px solid var(--ld-line); line-height: 1.7; font-size: 12.5px; }
}
@media (max-width: 330px) { .ld-foot__links { grid-template-columns: 1fr; } .ld-foot__links a:nth-child(odd):last-child { grid-column: auto; } }

/* ---- 1.19.7 · a film slide fills its own box, and carries a speaker button ---------------------------------- */

/* The player used to be sized against the browser window (100vw / 56.25vw). In a slider that is not as tall or as
   wide as the window that spilled over the edges, so the film was never the size of the slide. These rules size it
   against the slide's own box instead, so it covers that box exactly, whatever shape the box is. */
.ld-hero__video { container-type: size; }
.ld-hero__video iframe {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: none; border: 0;
}
@supports (width: 1cqw) {
  .ld-hero__video iframe { width: max(100cqw, 177.7778cqh); height: max(100cqh, 56.25cqw); }
}

/* A browser only lets a film start on its own while it is silent, so every film slide starts muted and this is how
   the visitor turns the sound on. It sits opposite the subscribe button, clear of YouTube's own controls. */
.yt-sound {
  position: absolute; z-index: 7; top: 96px; inset-inline-start: 20px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 15px; border: 0; border-radius: 999px;
  font: inherit; font-size: 13.5px; font-weight: 800; line-height: 1;
  color: #fff; background: rgba(10, 10, 14, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); transition: background .18s ease, transform .16s ease;
}
.yt-sound:hover { background: rgba(10, 10, 14, .85); transform: translateY(-1px); }
.yt-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.yt-sound svg { width: 18px; height: 18px; display: block; }
.yt-sound .yt-sound__on { display: none; }
.yt-sound.is-on { background: #FF2A2A; box-shadow: 0 10px 24px -8px rgba(255, 42, 42, .7); }
.yt-sound.is-on .yt-sound__off { display: none; }
.yt-sound.is-on .yt-sound__on { display: block; }
@media (max-width: 640px) { .yt-sound { top: 78px; inset-inline-start: 12px; padding: 9px; } .yt-sound .yt-sound__tx { display: none; } }
@media (prefers-reduced-motion: reduce) { .yt-sound { transition: none; } }

/* The speaker button belongs to a film that is actually playing: it appears only once the player has answered, so a
   slide that fell back to being a picture never shows a sound switch that would do nothing. */
.yt-sound { opacity: 0; pointer-events: none; }
.ld-hero__video.is-ready .yt-sound { opacity: 1; pointer-events: auto; }
@supports (transition: opacity .2s) { .yt-sound { transition: opacity .3s ease, background .18s ease, transform .16s ease; } }