/* 1.19.3 · Reusable YouTube subscribe box with an animated play icon. Used in footers, the landing and sliders.
   Brand-neutral reds so it reads on both IPN TV (classic) and Mr & Miss Iran (prime). */
.ytsub { --yt: #FF2A2A; --yt-ink: #fff;
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--yt) 12%, transparent), transparent 70%), rgba(255,255,255,.03);
  border: 1px solid color-mix(in srgb, var(--yt) 28%, transparent); }
.ytsub__ic { position: relative; flex: none; inline-size: 56px; block-size: 56px; display: grid; place-items: center;
  border-radius: 16px; background: var(--yt); color: var(--yt-ink); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--yt) 80%, transparent); }
.ytsub__play { inline-size: 30px; block-size: 30px; animation: ytsub-wiggle 3.2s ease-in-out infinite; }
.ytsub__ring { position: absolute; inset: 0; border-radius: 16px; border: 2px solid var(--yt); opacity: 0; animation: ytsub-ring 2.6s ease-out infinite; }
.ytsub__ring--2 { animation-delay: 1.3s; }
.ytsub__tx { flex: 1; min-inline-size: 0; }
.ytsub__tx strong { display: block; font-size: 16px; font-weight: 800; }
.ytsub__tx span { display: block; font-size: 13px; opacity: .72; margin-block-start: 3px; line-height: 1.5; }
.ytsub__btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: var(--yt); color: var(--yt-ink); font-weight: 800; font-size: 14px; text-decoration: none;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--yt) 80%, transparent); transition: transform .16s ease, box-shadow .16s ease; }
.ytsub__btn svg, .ytsub__btn .ic { inline-size: 20px; block-size: 20px; }
.ytsub__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--yt) 85%, transparent); }
.ytsub__btn:hover .ytsub__play, .ytsub:hover .ytsub__play { animation-duration: 1.2s; }

/* slim: one tight row for a footer column */
.ytsub--slim { padding: 12px 14px; gap: 12px; }
.ytsub--slim .ytsub__ic { inline-size: 44px; block-size: 44px; border-radius: 13px; }
.ytsub--slim .ytsub__play { inline-size: 24px; block-size: 24px; }
.ytsub--slim .ytsub__tx strong { font-size: 14px; }
.ytsub--slim .ytsub__tx span { display: none; }

/* slide: large, centred, for use as a slider panel */
.ytsub--slide { flex-direction: column; text-align: center; gap: 14px; padding: 32px 24px; }
.ytsub--slide .ytsub__ic { inline-size: 76px; block-size: 76px; border-radius: 22px; }
.ytsub--slide .ytsub__play { inline-size: 40px; block-size: 40px; }
.ytsub--slide .ytsub__tx strong { font-size: 22px; }
.ytsub--slide .ytsub__tx span { font-size: 14.5px; opacity: .8; }
.ytsub--slide .ytsub__btn { padding: 13px 26px; font-size: 15px; }

@media (max-width: 560px) {
  .ytsub:not(.ytsub--slide) { flex-wrap: wrap; }
  .ytsub:not(.ytsub--slide) .ytsub__btn { inline-size: 100%; justify-content: center; }
}
@keyframes ytsub-wiggle { 0%, 88%, 100% { transform: rotate(0) scale(1); } 92% { transform: rotate(-8deg) scale(1.08); } 96% { transform: rotate(8deg) scale(1.08); } }
@keyframes ytsub-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .ytsub__play, .ytsub__ring { animation: none; } .ytsub__ring { display: none; } }

/* 1.19.4 · subscribe button floating on the hero slider (IPN) */
.hero__sub { position: absolute; z-index: 6; top: 90px; inset-inline-end: 22px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; background: #FF2A2A; color: #fff; font-weight: 800; font-size: 13.5px; text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(255,42,42,.7); transition: transform .16s ease; }
.hero__sub svg, .hero__sub .ic { width: 19px; height: 19px; }
.hero__sub:hover { transform: translateY(-2px); }
@media (max-width: 640px) { .hero__sub { top: 74px; inset-inline-end: 12px; padding: 9px; } .hero__sub span { display: none; } }

/* 1.19.4 · video slide on the IPN hero: the film covers the slide; its own controls are reachable */
/* 1.19.6 · no black fill: the film's own first frame (the slide picture underneath) shows until the film paints,
   and stays put if YouTube is slow or blocked for the visitor, so a film slide is never an empty black panel. */
.hero__video { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.hero__video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; }
.hero__slide--video .hero__content, .hero__slide--video .hero__shade { display: none; }

/* 1.19.6 · the player fades in once YouTube has answered. Until then — and for good if YouTube cannot be reached —
   the film's own first frame underneath is what the visitor sees, never an empty panel. */
.hero__video iframe { opacity: 0; transition: opacity .45s ease; }
.hero__video.is-ready iframe { opacity: 1; }
.hero__slide--video.is-video-off .hero__content, .hero__slide--video.is-video-off .hero__shade { display: revert; }
@media (prefers-reduced-motion: reduce) { .hero__video iframe { transition: none; } }

/* ---- 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. */
.hero__video { container-type: size; }
.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) {
  .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: 90px; 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: 74px; 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; }
.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; } }