/* Personal Media Showcase — fullscreen cinematic series sections injected into the existing site only */
:root {
  --ms-text: rgba(255, 255, 255, 0.96);
  --ms-muted: rgba(255, 255, 255, 0.68);
  --ms-gold: rgb(255, 214, 102);
  --ms-nav: 6.25rem;
}

html.ms-media-showcase-enabled,
body.ms-media-showcase-enabled {
  scroll-behavior: smooth;
}

#media-showcase-section,
#media-showcase-section * {
  box-sizing: border-box;
}

.site-top-nav .ms-nav-injected {
  cursor: pointer;
  white-space: nowrap;
}

#media-showcase-section {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin: clamp(1.5rem, 3vw, 2.75rem) 0 0 calc(50% - 50vw);
  color: var(--ms-text);
  font-family: "Outfit", "Space Grotesk", system-ui, sans-serif;
}

.ms-series-divider {
  position: relative;
  min-height: auto;
  width: min(100vw, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  overflow: hidden;
  padding: clamp(2.25rem, 6vw, 4.5rem) clamp(1rem, 4vw, 4rem);
  background: transparent;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
  scroll-margin-top: calc(var(--ms-nav) + 1rem);
}

.ms-series-divider.ms-visible {
  opacity: 1;
  transform: translateY(0);
}

.ms-divider-line {
  display: block;
  width: min(34vw, 31rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), rgba(255,214,102,.54), rgba(255,255,255,.22), transparent);
}

.ms-divider-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0 1.25rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(8,10,22,.42);
  color: rgb(255, 214, 102);
  font: 950 clamp(.68rem, .95vw, .82rem)/1 "Space Grotesk", "Outfit", system-ui, sans-serif;
  letter-spacing: .36em;
  text-transform: uppercase;
  box-shadow: inset 0 0 1.2rem rgba(255,255,255,.04), 0 .7rem 2.4rem rgba(0,0,0,.28);
  white-space: nowrap;
}

.ms-scroll-stack {
  position: relative;
  width: 100%;
}

.ms-screen {
  position: relative;
  height: 100svh;
  min-height: 100svh;
  width: 100vw;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #030712;
  opacity: 0;
  transform: translateY(3rem) scale(1.012);
  transition: opacity 920ms cubic-bezier(.2,.8,.2,1), transform 920ms cubic-bezier(.2,.8,.2,1);
  scroll-margin-top: 0;
}

.ms-screen.ms-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ms-video-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: #030712;
  box-shadow: none !important;
}

.ms-video-wrap::before,
.ms-video-wrap::after {
  display: none !important;
}

.ms-video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  object-fit: cover;
  opacity: 0.62;
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.08) brightness(.78);
  transition: opacity 900ms ease, transform 900ms ease, filter 900ms ease;
}

.ms-screen.is-playing .ms-video {
  opacity: 0.8;
  transform: scale(1.01);
  filter: saturate(1.18) contrast(1.1) brightness(.92);
}

.ms-cinematic-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.78) 26%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.72) 100%),
    linear-gradient(180deg, rgba(0,0,0,.74), transparent 20%, transparent 74%, rgba(0,0,0,.82));
}

.ms-screen::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, black, transparent 70%);
}

.ms-screen::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0 12%, transparent 20% 78%, rgba(0,0,0,.5) 93% 100%);
}

.ms-screen-content {
  position: relative;
  z-index: 5;
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: calc(var(--ms-nav) + 1.2rem) clamp(1rem, 5.5vw, 5rem) clamp(3rem, 7vw, 6rem);
}

.ms-title-block {
  position: relative;
  width: min(68vw, 28rem);
  max-width: 28rem;
  padding-left: clamp(.55rem, 1vw, .9rem);
  transform: translateX(-2.4rem) scale(.94);
  opacity: 0;
  filter: blur(10px);
  transition: opacity 820ms cubic-bezier(.2,.8,.2,1) 140ms, transform 820ms cubic-bezier(.2,.8,.2,1) 140ms, filter 820ms cubic-bezier(.2,.8,.2,1) 140ms;
}

.ms-screen.ms-visible .ms-title-block {
  opacity: 1;
  transform: translateX(0) scale(1);
  filter: blur(0);
}

.ms-title-block::before {
  position: absolute;
  left: 0;
  top: .35rem;
  bottom: .35rem;
  width: .14rem;
  border-radius: 999px;
  content: "";
  background: linear-gradient(180deg, transparent, var(--ms-gold), rgba(255,255,255,.54), transparent);
  box-shadow: 0 0 1.6rem rgba(255,214,102,.34);
}

.ms-kicker {
  margin: 0 0 .8rem;
  color: rgba(255,255,255,.58);
  font: 900 clamp(.62rem, 1vw, .76rem)/1 "Space Grotesk", "Outfit", system-ui, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.ms-current-title {
  position: relative;
  margin: 0;
  width: fit-content;
  max-width: min(74vw, 31rem);
  line-height: 1;
}

.ms-title-logo {
  display: block;
  width: min(62vw, var(--ms-logo-width, 22rem));
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.72)) drop-shadow(0 0 1.2rem var(--ms-logo-glow, rgba(255,214,102,.18)));
  user-select: none;
  pointer-events: none;
}

.ms-logo-fallback {
  display: none;
  color: #fff;
  font: 950 clamp(2.1rem, 5.8vw, 4.8rem)/.85 "Space Grotesk", "Outfit", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.06em;
  text-shadow: 0 .08em .32em rgba(0,0,0,.85);
}

.ms-title-logo:not([src]),
.ms-title-logo[src=""] {
  display: none;
}

.ms-title-logo:not([src]) + .ms-logo-fallback,
.ms-title-logo[src=""] + .ms-logo-fallback {
  display: inline-block;
}

.ms-season-line {
  width: fit-content;
  margin: clamp(.72rem, 1.3vw, 1rem) 0 0;
  color: rgba(255,255,255,.91);
  font: 900 clamp(.82rem, 1.55vw, 1.1rem)/1.1 "Space Grotesk", "Outfit", system-ui, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 0 1.2rem rgba(255,214,102,.22), 0 .14rem .5rem rgba(0,0,0,.7);
}

.ms-scroll-hint {
  position: absolute;
  right: clamp(1.1rem, 4vw, 4rem);
  bottom: clamp(1.2rem, 4vw, 3rem);
  z-index: 6;
  color: rgba(255,255,255,.52);
  font: 900 .66rem/1 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.ms-scroll-hint::after {
  display: block;
  width: 1px;
  height: 3.4rem;
  margin: .9rem auto 0;
  content: "";
  background: linear-gradient(180deg, rgba(255,255,255,.72), transparent);
  animation: ms-scroll-line 1.6s cubic-bezier(.4,0,.2,1) infinite;
}

.ms-divider-hint {
  bottom: clamp(1.5rem, 4vw, 3rem);
}

.ms-screen-veil {
  position: absolute;
  inset: -18%;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 25%, rgba(255,214,102,.15) 35%, rgba(255,255,255,.58) 42%, rgba(96,165,250,.18) 50%, transparent 62% 100%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.1), transparent 52%);
  opacity: 0;
  transform: translateX(-120%) skewX(-18deg);
}

.ms-screen.ms-inview .ms-screen-veil {
  animation: ms-swipe 850ms cubic-bezier(.22,.75,.2,1) 160ms forwards;
}

/* Transparent wordmark sizing/glow per series */
.ms-style-stranger {
  --ms-logo-width: 25rem;
  --ms-logo-glow: rgba(255,16,42,.48);
}
.ms-style-stranger .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(26,0,4,.82) 26%, rgba(0,0,0,.32) 58%, rgba(0,0,0,.76) 100%),
    radial-gradient(circle at 20% 50%, rgba(255,16,42,.18), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.78), transparent 22%, rgba(0,0,0,.82));
}
.ms-style-stranger .ms-season-line { color: #ffb6bd; }

.ms-style-henry {
  --ms-logo-width: 24rem;
  --ms-logo-glow: rgba(250,204,21,.4);
}
.ms-style-henry .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.94), rgba(21,38,85,.7) 42%, rgba(0,0,0,.78)),
    radial-gradient(circle at 22% 52%, rgba(250,204,21,.18), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.72), transparent 24%, rgba(0,0,0,.8));
}

.ms-style-gameoverse,
.ms-style-glitch {
  --ms-logo-width: 24rem;
  --ms-logo-glow: rgba(255,109,64,.48);
}
.ms-style-gameoverse .ms-title-logo,
.ms-style-glitch .ms-title-logo {
  animation: ms-logo-glitch 2.8s steps(2, end) infinite;
}
.ms-style-gameoverse .ms-cinematic-overlay,
.ms-style-glitch .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.95), rgba(22,10,42,.72) 42%, rgba(0,0,0,.76)),
    radial-gradient(circle at 23% 49%, rgba(34,211,238,.16), transparent 28%),
    radial-gradient(circle at 30% 58%, rgba(244,63,94,.12), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.76), transparent 24%, rgba(0,0,0,.82));
}

.ms-style-circus {
  --ms-logo-width: 30rem;
  --ms-logo-glow: rgba(255,79,216,.4);
}
.ms-style-circus .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.94), rgba(36,20,58,.68) 43%, rgba(0,0,0,.74)),
    radial-gradient(circle at 18% 44%, rgba(255,79,216,.18), transparent 30%),
    radial-gradient(circle at 30% 57%, rgba(34,211,238,.12), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.72), transparent 24%, rgba(0,0,0,.8));
}

.ms-style-murder {
  --ms-logo-width: 25rem;
  --ms-logo-glow: rgba(163,230,53,.44);
}
.ms-style-murder .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.95), rgba(6,38,25,.68) 42%, rgba(0,0,0,.78)),
    radial-gradient(circle at 20% 52%, rgba(163,230,53,.16), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.76), transparent 24%, rgba(0,0,0,.82));
}

.ms-style-wednesday {
  --ms-logo-width: 24rem;
  --ms-logo-glow: rgba(168,85,247,.36);
}
.ms-style-wednesday .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(28,18,42,.72) 45%, rgba(0,0,0,.82)),
    radial-gradient(circle at 20% 50%, rgba(168,85,247,.16), transparent 36%),
    linear-gradient(180deg, rgba(0,0,0,.78), transparent 24%, rgba(0,0,0,.84));
}



.ms-style-arcane {
  --ms-logo-width: 22rem;
  --ms-logo-glow: rgba(193, 132, 78, .48);
}
.ms-style-arcane .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(46,30,22,.72) 42%, rgba(0,0,0,.8)),
    radial-gradient(circle at 20% 50%, rgba(193,132,78,.18), transparent 36%),
    radial-gradient(circle at 34% 60%, rgba(96,165,250,.08), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,.78), transparent 24%, rgba(0,0,0,.84));
}
.ms-style-arcane .ms-season-line {
  color: #d9b389;
}

@keyframes ms-swipe {
  0% { opacity: 0; transform: translateX(-120%) skewX(-18deg); }
  30% { opacity: 1; }
  68% { opacity: .8; }
  100% { opacity: 0; transform: translateX(120%) skewX(-18deg); }
}

@keyframes ms-scroll-line {
  0%, 100% { transform: scaleY(.42); opacity: .36; transform-origin: top; }
  50% { transform: scaleY(1); opacity: .96; transform-origin: top; }
}

@keyframes ms-logo-glitch {
  0%, 86%, 100% { transform: translate(0,0); filter: drop-shadow(0 1rem 2rem rgba(0,0,0,.72)) drop-shadow(0 0 1.2rem var(--ms-logo-glow)); }
  88% { transform: translate(.12rem,-.08rem); filter: drop-shadow(.18rem 0 rgba(34,211,238,.62)) drop-shadow(-.18rem 0 rgba(244,63,94,.58)); }
  90% { transform: translate(-.1rem,.06rem); }
  92% { transform: translate(.05rem,.02rem); }
}

@keyframes ms-orbit {
  to { transform: rotate(360deg); }
}



.ms-screen.ms-visible .ms-title-logo {
  animation: ms-logo-enter 980ms cubic-bezier(.18,.88,.18,1) both;
}

.ms-screen.ms-visible .ms-season-line {
  animation: ms-season-enter 900ms cubic-bezier(.18,.88,.18,1) 190ms both;
}

.ms-style-stranger { --ms-logo-width: 21rem; }
.ms-style-henry { --ms-logo-width: 20rem; }
.ms-style-circus { --ms-logo-width: 24rem; }
.ms-style-murder { --ms-logo-width: 21rem; }
.ms-style-wednesday { --ms-logo-width: 19rem; }
.ms-style-arcane { --ms-logo-width: 20rem; }

@keyframes ms-logo-enter {
  0% { opacity: 0; transform: translateX(-1.8rem) scale(.92); filter: blur(14px) drop-shadow(0 1rem 2rem rgba(0,0,0,.72)); }
  62% { opacity: 1; transform: translateX(.18rem) scale(1.018); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes ms-season-enter {
  0% { opacity: 0; transform: translateY(.7rem); letter-spacing: .38em; }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1120px) {
  .site-top-nav .nav-glass-strip:has(.ms-nav-injected) {
    gap: .4rem;
  }

  .site-top-nav .ms-nav-injected {
    padding-inline: .72rem;
    font-size: .68rem;
    letter-spacing: .12em;
  }
}

@media (max-width: 720px) {
  :root { --ms-nav: 5.25rem; }

  #media-showcase-section {
    margin-top: clamp(3.5rem, 9vw, 5rem);
  }

  .ms-series-divider {
    min-height: 70svh;
  }

  .ms-divider-copy h2 {
    font-size: clamp(3.1rem, 16vw, 5.8rem);
  }

  .ms-screen,
  .ms-screen-content {
    height: 100svh;
    min-height: 100svh;
  }

  .ms-screen-content {
    justify-content: center;
    padding: calc(var(--ms-nav) + 1rem) 1.2rem 5rem;
  }

  .ms-title-block {
    width: min(90vw, 28rem);
    max-width: 90vw;
  }

  .ms-title-logo {
    width: min(78vw, var(--ms-logo-width, 23rem));
  }

  .ms-style-circus { --ms-logo-width: 23rem; }
  .ms-style-stranger { --ms-logo-width: 21rem; }
  .ms-style-henry { --ms-logo-width: 20rem; }
  .ms-style-gameoverse,
  .ms-style-glitch { --ms-logo-width: 19rem; }
  .ms-style-murder { --ms-logo-width: 20rem; }
  .ms-style-wednesday { --ms-logo-width: 20rem; }
  .ms-style-arcane { --ms-logo-width: 20rem; }

  .ms-kicker {
    font-size: .58rem;
    letter-spacing: .18em;
  }

  .ms-season-line {
    font-size: clamp(.78rem, 4vw, 1rem);
    letter-spacing: .14em;
  }

  .ms-scroll-hint {
    right: .9rem;
    bottom: 1.15rem;
    font-size: .56rem;
  }
}


@media (max-width: 720px) {
  .ms-series-divider {
    gap: .75rem;
    padding: 2.2rem .9rem;
  }

  .ms-divider-line {
    width: min(24vw, 9rem);
  }

  .ms-divider-pill {
    min-height: 2.55rem;
    padding: 0 .95rem;
    font-size: .6rem;
    letter-spacing: .24em;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.ms-media-showcase-enabled,
  body.ms-media-showcase-enabled {
    scroll-behavior: auto;
    }

  .ms-series-divider,
  .ms-screen,
  .ms-video,
  .ms-title-block,
  .ms-title-logo {
    transition: none !important;
    animation: none !important;
  }

  .ms-screen.ms-inview .ms-screen-veil,
  .ms-scroll-hint::after,
  .ms-divider-orbit {
    animation: none !important;
  }
}


/* ===== Scroll + clarity hotfix ===== */
html.ms-media-showcase-enabled,
body.ms-media-showcase-enabled {
  scroll-snap-type: none !important;
  overscroll-behavior-y: auto;
}

#media-showcase-section {
  scroll-snap-type: none !important;
}

.ms-scroll-stack {
  scroll-snap-type: none !important;
}

.ms-series-divider,
.ms-screen {
  scroll-snap-align: none !important;
}

.ms-screen {
  height: 100svh !important;
  min-height: 100svh !important;
  opacity: 1;
  transform: none;
}

.ms-screen.ms-visible {
  opacity: 1;
  transform: none;
}

.ms-video {
  width: 100vw !important;
  height: 100svh !important;
  opacity: 1 !important;
  object-fit: cover !important;
  transform: scale(1.006) !important;
  filter: saturate(1.08) contrast(1.04) brightness(1.02) !important;
}

.ms-screen.is-playing .ms-video {
  opacity: 1 !important;
  transform: scale(1) !important;
  filter: saturate(1.12) contrast(1.05) brightness(1.05) !important;
}

/* Remove the square/grid overlay that made the active video unclear */
.ms-screen::before {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
}

.ms-screen::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.22) 0 10%, transparent 22% 78%, rgba(0,0,0,.28) 94% 100%) !important;
}

.ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.58) 22%, rgba(0,0,0,.16) 48%, rgba(0,0,0,.22) 100%) !important;
}

.ms-title-block {
  width: min(70vw, 26rem);
  max-width: 26rem;
}

.ms-title-logo {
  width: min(58vw, var(--ms-logo-width, 21rem));
  filter:
    drop-shadow(0 1rem 2.2rem rgba(0,0,0,.82))
    drop-shadow(0 0 1.15rem var(--ms-logo-glow, rgba(255,214,102,.2))) !important;
}

.ms-season-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: clamp(.75rem, 1.25vw, 1.05rem);
  padding: .58rem .85rem .54rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    rgba(0,0,0,.26);
  color: rgba(255,255,255,.94);
  font: 950 clamp(.72rem, 1.35vw, .98rem)/1 "Space Grotesk", "Outfit", system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 1rem rgba(255,255,255,.045),
    0 .55rem 1.5rem rgba(0,0,0,.34),
    0 0 1.2rem var(--ms-logo-glow, rgba(255,214,102,.18));
}

.ms-style-arcane {
  --ms-logo-width: 22rem;
  --ms-logo-glow: rgba(193, 132, 78, .5);
}
.ms-style-arcane .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(46,30,22,.58) 24%, rgba(0,0,0,.14) 52%, rgba(0,0,0,.24) 100%) !important,
    radial-gradient(circle at 20% 50%, rgba(193,132,78,.16), transparent 34%) !important;
}
.ms-style-arcane .ms-season-line {
  color: #f1d4ae;
  border-color: rgba(217,179,137,.26);
}

.ms-scroll-hint {
  opacity: .82;
}

.ms-scroll-armed .ms-scroll-hint {
  color: rgb(255,214,102);
  opacity: 1;
  text-shadow: 0 0 1rem rgba(255,214,102,.45);
}

/* Hide floating Support Me while media section is active; JS also hides text-matched buttons */
body.ms-inside-media [aria-label*="Support" i],
body.ms-inside-media [title*="Support" i],
body.ms-inside-media .support,
body.ms-inside-media .support-me,
body.ms-inside-media [class*="support" i] {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

@media (max-width: 720px) {
  .ms-title-block {
    width: min(88vw, 24rem);
    max-width: 88vw;
  }

  .ms-title-logo {
    width: min(78vw, var(--ms-logo-width, 21rem));
  }

  .ms-style-arcane { --ms-logo-width: 20rem; }

  .ms-season-line {
    font-size: clamp(.68rem, 3.5vw, .88rem);
    letter-spacing: .12em;
    padding: .52rem .72rem .48rem;
  }

  .ms-cinematic-overlay {
    background:
      linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 34%, rgba(0,0,0,.12) 70%, rgba(0,0,0,.26) 100%) !important;
  }
}


/* ===== Arabic / RTL safety fix =====
   Keeps this showcase identical to the English layout even if Arabic text is used.
*/
#media-showcase-section,
#media-showcase-section * {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

#media-showcase-section {
  left: auto !important;
  right: auto !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  overflow-x: clip !important;
}

.ms-fullscreen-showcase,
.ms-scroll-stack,
.ms-series-divider,
.ms-screen,
.ms-video-wrap,
.ms-video {
  width: 100vw !important;
  max-width: none !important;
}

.ms-screen,
.ms-screen-content,
.ms-video-wrap,
.ms-video {
  height: 100svh !important;
  min-height: 100svh !important;
}

.ms-screen-content {
  align-items: flex-start !important;
  text-align: left !important;
}

.ms-title-block,
.ms-current-title,
.ms-title-logo,
.ms-logo-fallback,
.ms-season-line,
.ms-kicker {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}

.ms-title-block {
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.ms-divider-pill {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.ms-logo-fallback {
  max-width: min(78vw, 28rem);
  overflow-wrap: normal;
  word-break: normal;
}



/* Henry Danger: The Movie logo/screen */
.ms-style-henrymovie {
  --ms-logo-width: 27rem;
  --ms-logo-glow: rgba(255, 193, 59, .54);
}

.ms-style-henrymovie .ms-cinematic-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(65,38,8,.54) 25%, rgba(0,0,0,.12) 52%, rgba(0,0,0,.28) 100%) !important,
    radial-gradient(circle at 22% 50%, rgba(255,193,59,.2), transparent 35%) !important;
}

.ms-style-henrymovie .ms-title-logo {
  width: min(64vw, var(--ms-logo-width, 27rem));
}

.ms-movies-divider {
  margin-top: 0 !important;
}

@media (max-width: 720px) {
  .ms-style-henrymovie {
    --ms-logo-width: 23rem;
  }

  .ms-style-henrymovie .ms-title-logo {
    width: min(84vw, var(--ms-logo-width, 23rem));
  }
}


/* Hide Arcane number kicker when requested */
.ms-kicker-hidden {
  display: none !important;
}

/* ===== Zoko portfolio custom refinements ===== */

:root {
  --zoko-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04));
  --zoko-glass-border: rgba(255,255,255,0.14);
  --zoko-glass-shadow: 0 20px 70px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.15);
  --zoko-glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 44%, rgba(255,255,255,0) 70%);
}

.zoko-glass-card,
.interactive-surface,
.footer-modal-action,
.site-modal-card,
.marquee-shell,
.site-top-nav.glass,
.server-feature,
.project-card {
  position: relative;
  overflow: hidden;
  background: var(--zoko-glass-bg) !important;
  border: 1px solid var(--zoko-glass-border) !important;
  box-shadow: var(--zoko-glass-shadow) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.35) !important;
  backdrop-filter: blur(28px) saturate(1.35) !important;
}

.zoko-glass-card::before,
.interactive-surface::before,
.footer-modal-action::before,
.site-modal-card::before,
.marquee-shell::before,
.site-top-nav.glass::before,
.server-feature::before,
.project-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--zoko-glass-highlight);
  pointer-events: none;
  opacity: 0.95;
}

.zoko-glass-card::after,
.interactive-surface::after,
.footer-modal-action::after,
.site-modal-card::after,
.marquee-shell::after,
.site-top-nav.glass::after,
.server-feature::after,
.project-card::after {
  content: "";
  position: absolute;
  inset: auto 10% -42% 10%;
  height: 46%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.12), rgba(255,255,255,0));
  filter: blur(34px);
  pointer-events: none;
  opacity: 0.7;
}

.hero-copy-parallax.zoko-hero-trimmed {
  max-width: 38rem;
}

.hero-copy-parallax.zoko-hero-trimmed > .hero-title {
  margin-bottom: 1.25rem !important;
}

.hero-copy-parallax.zoko-hero-trimmed .hero-cta-row {
  margin-top: 1.5rem !important;
}

.hero-copy-parallax .zoko-hidden-empty,
.site-top-nav .zoko-hidden-empty {
  display: none !important;
}

.zoko-footer-credit {
  display: inline-block;
  cursor: default;
  text-decoration: none !important;
}

/* Premium Viro 3D hover card */
.server-feature.zoko-viro-card,
.server-feature .zoko-viro-link {
  transform-style: preserve-3d;
}

.server-feature.zoko-viro-card {
  isolation: isolate;
  transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms cubic-bezier(.22,1,.36,1), border-color 280ms ease;
  will-change: transform;
}

.server-feature.zoko-viro-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 78, 78, 0.42), rgba(255, 78, 78, 0.1) 22%, rgba(0,0,0,0) 52%),
    linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02) 35%, rgba(0,0,0,0.1) 100%);
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 0;
}

.server-feature.zoko-viro-card::after {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 40, 40, 0.26), rgba(20, 0, 0, 0.18) 34%, rgba(0,0,0,0) 68%),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 34%);
  filter: blur(28px);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
  z-index: 0;
}

.server-feature.zoko-viro-card:hover {
  border-color: rgba(255, 82, 82, 0.34) !important;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(255, 82, 82, 0.16),
    0 0 38px rgba(255, 58, 58, 0.24),
    0 0 88px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

.server-feature.zoko-viro-card:hover::before,
.server-feature.zoko-viro-card:hover::after {
  opacity: 1;
}

.server-feature.zoko-viro-card .server-card-layout,
.server-feature.zoko-viro-card .zoko-viro-link {
  position: relative;
  z-index: 1;
}

.server-feature.zoko-viro-card .server-logo-wrap,
.server-feature.zoko-viro-card .flex-1,
.server-feature.zoko-viro-card .inline-flex {
  transform: translateZ(18px);
  transition: transform 280ms cubic-bezier(.22,1,.36,1), filter 280ms ease;
}

.server-feature.zoko-viro-card:hover .server-logo-wrap {
  transform: translateZ(34px) scale(1.04);
  filter: drop-shadow(0 10px 22px rgba(255, 72, 72, 0.24));
}

.server-feature.zoko-viro-card:hover .flex-1 {
  transform: translateZ(24px);
}

.server-feature.zoko-viro-card:hover .inline-flex:last-child {
  transform: translateZ(38px) translateX(2px);
}

.server-feature.zoko-viro-card .zoko-viro-link {
  transition: transform 280ms cubic-bezier(.22,1,.36,1);
}

.server-feature.zoko-viro-card:hover .zoko-viro-link {
  transform: translateZ(20px);
}


/* ===== Accounts glass UI ===== */
.zoko-accounts-trigger {
  position: relative;
  overflow: hidden;
}

.zoko-accounts-trigger::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 48%, rgba(255,255,255,0));
  pointer-events: none;
}

.zoko-accounts-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: radial-gradient(circle at top, rgba(255,255,255,0.06), transparent 26%), rgba(5, 8, 18, 0.74);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.zoko-accounts-modal {
  position: relative;
  width: min(100%, 58rem);
  border-radius: 2rem;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  box-shadow: 0 30px 90px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  backdrop-filter: blur(28px) saturate(1.35);
  overflow: hidden;
}

.zoko-accounts-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(88, 101, 242, 0.2), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(37, 211, 102, 0.18), transparent 22%),
    radial-gradient(circle at 50% 85%, rgba(255, 65, 108, 0.17), transparent 25%);
  pointer-events: none;
}

.zoko-accounts-modal-inner {
  position: relative;
  z-index: 1;
  padding: 1.4rem;
}

.zoko-accounts-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.zoko-accounts-chip {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.zoko-accounts-title {
  margin: .35rem 0 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.04em;
  color: white;
}

.zoko-accounts-sub {
  margin: .8rem 0 0;
  max-width: 38rem;
  color: rgba(255,255,255,0.68);
  font-size: 1rem;
  line-height: 1.8;
}

.zoko-accounts-close {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.88);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}

.zoko-accounts-close:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.1);
}

.zoko-accounts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.zoko-account-card {
  position: relative;
  min-height: 17rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 44px rgba(0,0,0,0.26);
  overflow: hidden;
  text-decoration: none !important;
  transition: transform .24s cubic-bezier(.22,1,.36,1), box-shadow .24s ease, border-color .24s ease;
}

.zoko-account-card::before {
  content: "";
  position: absolute;
  inset: auto -10% -36% -10%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.14), rgba(255,255,255,0));
  filter: blur(30px);
  pointer-events: none;
}

.zoko-account-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 22px 58px rgba(0,0,0,0.36);
}

.zoko-account-card.is-discord:hover { border-color: rgba(88, 101, 242, 0.32); }
.zoko-account-card.is-tiktok:hover { border-color: rgba(255, 67, 124, 0.28); }
.zoko-account-card.is-whatsapp:hover { border-color: rgba(37, 211, 102, 0.3); }

.zoko-account-icon {
  width: 4rem;
  height: 4rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1.25rem;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.07);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.zoko-account-icon svg {
  width: 2rem;
  height: 2rem;
  display: block;
  fill: currentColor;
}

.zoko-account-card.is-discord .zoko-account-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 24px rgba(88, 101, 242, 0.22); }
.zoko-account-card.is-tiktok .zoko-account-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 24px rgba(255, 67, 124, 0.2); }
.zoko-account-card.is-whatsapp .zoko-account-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 24px rgba(37, 211, 102, 0.22); }

.zoko-account-name {
  margin-top: .9rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.zoko-account-handle {
  margin-top: .35rem;
  color: rgba(255,255,255,0.68);
  font-size: .95rem;
  line-height: 1.6;
  word-break: break-word;
}

.zoko-account-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  align-self: flex-start;
  padding: .72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
}

@media (max-width: 980px) {
  .zoko-accounts-grid { grid-template-columns: 1fr; }
  .zoko-account-card { min-height: 14rem; }
}

/* Safety fix: never let the intro loader trap the page */
.intro-loader {
  pointer-events: none !important;
  animation: zoko-loader-auto-hide 360ms ease 900ms forwards !important;
}

@keyframes zoko-loader-auto-hide {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Fast loading helper */
.ms-video:not([src]) {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 45%), #030712;
}

.ms-kicker-hidden {
  display: none !important;
}


/* Immediate media restore */
.ms-title-logo {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ms-video {
  opacity: 1 !important;
  visibility: visible !important;
}


/* Sound unlock helper: appears only if browser blocks audio */
#media-showcase-section.ms-needs-sound-tap::after {
  content: "Tap once to enable sound";
  position: fixed;
  left: 50%;
  bottom: clamp(1.25rem, 4vw, 2rem);
  transform: translateX(-50%);
  z-index: 9999;
  padding: .8rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 214, 102, .34);
  background: rgba(8, 10, 18, .66);
  color: rgba(255, 245, 214, .96);
  font: 900 .78rem/1 "Space Grotesk", "Outfit", system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 18px 56px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16);
  pointer-events: none;
}

html[lang="ar"] #media-showcase-section.ms-needs-sound-tap::after {
  content: "اضغط مرة لتشغيل الصوت";
}