#introOverlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: 'Bebas Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  z-index: 999999;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s;
}

#introOverlay.fade-out {
  opacity: 0;
  transform: scale(1.06);
  pointer-events: none;
  visibility: hidden;
}

    /* Cinematic Vignette */
    .vignette {
      position: fixed;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.9) 100%);
      z-index: 10;
    }

    /* Impact Screen Flash */
    .flash-overlay {
      position: fixed;
      inset: 0;
      background: #ffffff;
      opacity: 0;
      pointer-events: none;
      z-index: 20;
    }

    .flash-overlay.animate {
      animation: superFlash 0.35s ease-out 1.24s forwards;
    }

    /* A Comrade Original Intro Overlay (1 sec duration, solid black on initial paint to prevent any glitch) */
    .comrade-intro {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      background: #000000;
      pointer-events: none;
      opacity: 1;
      user-select: none;
    }

    .comrade-intro.animate {
      animation: comradeIntroFadeOut 1.05s ease-in-out forwards;
    }

    .intro-badge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      animation: comradeBadgeAnim 1.05s ease-in-out forwards;
    }

    .intro-prefix {
      color: #999999;
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(0.6rem, 0.9vw, 0.75rem);
      font-weight: 600;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      padding-left: 0.35em;
      margin-bottom: 2px;
    }

    .intro-brand {
      color: #E50914; /* Netflix / Comrade Red */
      font-family: 'Montserrat', 'Bebas Neue', sans-serif;
      font-size: clamp(1.4rem, 2.8vw, 2.2rem);
      font-weight: 900;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      padding-left: 0.18em;
      line-height: 1;
      text-shadow: 0 0 18px rgba(229, 9, 20, 0.6);
    }

    .intro-suffix {
      color: #999999;
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(0.55rem, 0.8vw, 0.68rem);
      font-weight: 700;
      letter-spacing: 0.4em;
      padding-left: 0.4em;
      text-transform: uppercase;
      margin-top: 4px;
    }

    /* Grouped Header (Name + Subtitle strictly Below It) */
    .brand-header {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
      z-index: 15;
      pointer-events: auto;
    }

    .brand-header.animate {
      animation: slideUpToTop 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards;
    }

    /* Main Name Stage */
    .name-container {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 0.04em;
    }

    /* Halves - Clean bold white, completely straight, hidden off-screen until intro finishes */
    .half {
      display: inline-flex;
      color: #FFFFFF;
      font-family: 'Bebas Neue', 'Montserrat', sans-serif;
      font-size: clamp(3.6rem, 10vw, 7.2rem);
      font-weight: 900;
      letter-spacing: 0.1em;
      line-height: 1;
      white-space: nowrap;
      will-change: transform, opacity;
      opacity: 0;
      text-shadow: 0 4px 30px rgba(0, 0, 0, 0.95), 0 0 45px rgba(229, 9, 20, 0.22);
    }

    /* Super-fast Left Half (starts right after 1s intro) */
    .from-left {
      transform: translateX(-120vw);
    }

    .from-left.animate {
      animation: superFastLeft 0.28s cubic-bezier(0.05, 0.9, 0.2, 1) 1.0s both;
    }

    /* Super-fast Right Half (starts right after 1s intro) */
    .from-right {
      transform: translateX(120vw);
    }

    .from-right.animate {
      animation: superFastRight 0.28s cubic-bezier(0.05, 0.9, 0.2, 1) 1.0s both;
    }

    /* Subtitle strictly BELOW the Name in Bold Netflix Red */
    .story-subtitle {
      margin-top: clamp(10px, 1.8vh, 18px);
      color: #E50914; /* Netflix Red */
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: clamp(0.72rem, 1.25vw, 0.92rem);
      font-weight: 800;
      letter-spacing: 0.45em;
      text-transform: uppercase;
      white-space: nowrap;
      padding-left: 0.45em;
      pointer-events: none;
      opacity: 0;
      text-shadow: 0 0 16px rgba(229, 9, 20, 0.7);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .story-subtitle::before,
    .story-subtitle::after {
      content: '';
      width: 24px;
      height: 2px;
      background: linear-gradient(90deg, transparent, #E50914);
      display: inline-block;
    }

    .story-subtitle::after {
      background: linear-gradient(90deg, #E50914, transparent);
    }

    .story-subtitle.animate {
      animation: subtitleReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.82s forwards;
    }

    /* Photo Container - Centered with balanced headroom and clear foot room */
    .photo-wrapper {
      position: fixed;
      left: 50%;
      top: 55%;
      transform: translate(-50%, calc(-50% + 40px));
      opacity: 0;
      z-index: 8;
      pointer-events: none;
      display: flex;
      justify-content: center;
      align-items: center;
      will-change: transform, opacity;
    }

    /* Dim Netflix Ambient Red Backlight Behind Photo */
    .photo-wrapper::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(320px, 48vw, 520px);
      height: clamp(320px, 48vw, 520px);
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(229, 9, 20, 0.38) 0%, rgba(180, 0, 10, 0.18) 45%, rgba(90, 0, 5, 0.05) 65%, transparent 75%);
      filter: blur(52px);
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
      animation: dimRedBreath 5s ease-in-out infinite alternate;
    }

    @keyframes dimRedBreath {
      0% {
        opacity: 0.65;
        transform: translate(-50%, -50%) scale(0.95);
      }
      100% {
        opacity: 0.92;
        transform: translate(-50%, -50%) scale(1.05);
      }
    }

    .photo-wrapper.animate {
      animation: photoRevealCenter 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.65s forwards;
    }

    .profile-photo {
      height: clamp(270px, 46vh, 430px);
      max-width: 90vw;
      width: auto;
      object-fit: contain;
      display: block;
      filter: none;
      position: relative;
      z-index: 1;
      -webkit-mask-image: linear-gradient(to bottom, #000 82%, rgba(0, 0, 0, 0.45) 94%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 82%, rgba(0, 0, 0, 0.45) 94%, transparent 100%);
    }

    /* Canvas for Netflix Light Streaks */
    #ribbonCanvas {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 2;
      width: 100vw;
      height: 100vh;
    }

    /* Bottom Action Bar (Tagline + Play Button with Rounded Corners) */
    .bottom-bar {
      position: fixed;
      bottom: clamp(16px, 3vh, 28px);
      left: 50%;
      transform: translate(-50%, 25px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      z-index: 25;
      opacity: 0;
      pointer-events: auto;
      will-change: transform, opacity;
    }

    .bottom-bar.animate {
      animation: bottomBarReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.28s forwards;
    }

    /* Tagline above the Play button - Elevated Glass Pill */
    .role-tagline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(14, 14, 14, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(12px);
      padding: 7px 24px;
      border-radius: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(229, 9, 20, 0.12);
      font-family: 'Montserrat', sans-serif;
      font-size: clamp(0.7rem, 1.1vw, 0.86rem);
      letter-spacing: 0.15em;
      text-transform: uppercase;
      user-select: none;
    }

    .role-primary {
      color: #FFFFFF;
      font-weight: 800;
    }

    .role-divider {
      color: #E50914;
      font-weight: 900;
      font-size: 1.1em;
    }

    .role-secondary {
      color: #D6D6D6;
      font-weight: 600;
    }

    /* Play Button with Modern Netflix Styling */
    .play-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      background-color: #FFFFFF;
      color: #000000;
      border: none;
      outline: none;
      padding: 12px 38px;
      font-family: 'Montserrat', sans-serif;
      font-size: 1.05rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      border-radius: 6px;
      cursor: pointer;
      box-shadow: 0 4px 22px rgba(255, 255, 255, 0.28);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      user-select: none;
    }

    .play-btn:hover {
      transform: scale(1.05);
      background-color: #E50914;
      color: #FFFFFF;
      box-shadow: 0 8px 30px rgba(229, 9, 20, 0.65);
    }

    .play-btn:active {
      transform: scale(0.96);
    }

    .play-icon {
      width: 18px;
      height: 18px;
      fill: currentColor;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }

    .play-btn:hover .play-icon {
      transform: translateX(2px);
    }

    /* Top Left Brand Pill */
    .top-brand-pill {
      position: fixed;
      top: clamp(16px, 3vh, 26px);
      left: clamp(18px, 3.5vw, 36px);
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 50;
      user-select: none;
      font-family: 'Montserrat', sans-serif;
    }

    .top-brand-logo {
      color: #E50914;
      font-size: 1.35rem;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 1;
      text-shadow: 0 0 14px rgba(229, 9, 20, 0.5);
    }

    .top-brand-tag {
      color: #FFFFFF;
      font-size: 0.82rem;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      line-height: 1;
    }

    /* Top-right Profile Avatar Link */
    .top-profile-link {
      position: fixed;
      top: clamp(16px, 3vh, 26px);
      right: clamp(18px, 3.5vw, 36px);
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      z-index: 50;
      cursor: pointer;
      background: rgba(20, 20, 20, 0.65);
      border: 1px solid rgba(255, 255, 255, 0.16);
      backdrop-filter: blur(10px);
      padding: 4px 10px 4px 5px;
      border-radius: 4px;
      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .top-profile-link:hover {
      transform: scale(1.05);
      border-color: rgba(229, 9, 20, 0.6);
      box-shadow: 0 0 10px rgba(229, 9, 20, 0.35);
    }

    .top-profile-thumb {
      width: 28px;
      height: 28px;
      border-radius: 3px;
      object-fit: cover;
      object-position: center 20%;
      border: 1px solid transparent;
      transition: border-color 0.2s ease;
    }

    .top-profile-link:hover .top-profile-thumb {
      border-color: #FFFFFF;
    }

    .top-profile-name {
      font-family: 'Montserrat', sans-serif;
      font-size: 0.78rem;
      font-weight: 700;
      color: #FFFFFF;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .top-profile-arrow {
      color: #FFFFFF;
      font-size: 0.75rem;
      transition: transform 0.2s ease;
    }

    .top-profile-link:hover .top-profile-arrow {
      transform: rotate(180deg);
    }

    /* Keyframes */
    @keyframes comradeIntroFadeOut {
      0%, 82% {
        opacity: 1;
        visibility: visible;
      }
      100% {
        opacity: 0;
        visibility: hidden;
      }
    }

    @keyframes comradeBadgeAnim {
      0% {
        opacity: 0;
        transform: scale(0.92);
      }
      15% {
        opacity: 1;
        transform: scale(1);
      }
      80% {
        opacity: 1;
        transform: scale(1.02);
      }
      100% {
        opacity: 0;
        transform: scale(1.06);
      }
    }

    @keyframes superFastLeft {
      0% {
        transform: translateX(-120vw);
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      85% {
        transform: translateX(4px);
        opacity: 1;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes superFastRight {
      0% {
        transform: translateX(120vw);
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      85% {
        transform: translateX(-4px);
        opacity: 1;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes superFlash {
      0% {
        opacity: 0.7;
      }
      100% {
        opacity: 0;
      }
    }

    /* Slide up after appearance in center - leaving comfortable breathing room from top */
    @keyframes slideUpToTop {
      0%, 46% {
        top: 50%;
        transform: translate(-50%, -50%);
      }
      100% {
        top: clamp(20px, 4.2vh, 38px);
        transform: translate(-50%, 0);
      }
    }

    /* Mobile Phones & Tablets (< 768px)
       Moves ASHISH down below the fixed top navbar pills (.top-brand-pill & .top-profile-link)
       so it has proper breathing room and balanced cinematic hierarchy */
    @media (max-width: 768px) {
      /* Top Header elements - prevent any collision/overlap on phone screens */
      .top-brand-pill {
        top: clamp(12px, 2.2vh, 18px);
        left: clamp(12px, 3.2vw, 20px);
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        z-index: 60;
      }

      .top-brand-logo {
        font-size: clamp(1.05rem, 3.8vw, 1.22rem);
        letter-spacing: 1.2px;
        line-height: 1;
      }

      .top-brand-tag {
        font-size: 0.52rem;
        letter-spacing: 0.22em;
        line-height: 1;
        opacity: 0.85;
      }

      .top-profile-link {
        top: clamp(12px, 2.2vh, 18px);
        right: clamp(12px, 3.2vw, 20px);
        padding: 3px 8px 3px 4px;
        gap: 5px;
        z-index: 60;
        background: rgba(14, 14, 14, 0.75);
      }

      .top-profile-thumb {
        width: 24px;
        height: 24px;
      }

      .top-profile-name {
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        max-width: 75px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .top-profile-arrow {
        font-size: 0.65rem;
      }

      @keyframes slideUpToTop {
        0%, 46% {
          top: 50%;
          transform: translate(-50%, -50%);
        }
        100% {
          top: clamp(75px, 11vh, 95px);
          transform: translate(-50%, 0);
        }
      }

      .brand-header {
        width: 100%;
        padding: 0 16px;
      }

      .half {
        font-size: clamp(2.8rem, 13vw, 4.4rem);
      }

      .story-subtitle {
        font-size: clamp(0.64rem, 2.5vw, 0.78rem);
        letter-spacing: 0.32em;
        padding-left: 0.32em;
        margin-top: 8px;
        gap: 8px;
      }

      .story-subtitle::before,
      .story-subtitle::after {
        width: 14px;
      }

      .photo-wrapper {
        top: 58%;
      }

      .profile-photo {
        height: clamp(230px, 41vh, 340px);
        max-width: 88vw;
      }

      .bottom-bar {
        bottom: clamp(14px, 2.5vh, 24px);
        width: auto;
        max-width: 94vw;
        gap: 10px;
      }

      .role-tagline {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 18px;
        border-radius: 16px;
        max-width: 92vw;
        text-align: center;
        white-space: normal;
        background: rgba(14, 14, 14, 0.88);
        border: 1px solid rgba(255, 255, 255, 0.16);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), 0 0 15px rgba(229, 9, 20, 0.15);
      }

      .role-divider {
        display: none !important;
      }

      .role-primary {
        font-size: clamp(0.7rem, 3.1vw, 0.82rem);
        font-weight: 800;
        letter-spacing: 0.12em;
        color: #FFFFFF;
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
      }

      .role-secondary {
        font-size: clamp(0.58rem, 2.5vw, 0.7rem);
        font-weight: 600;
        letter-spacing: 0.08em;
        color: #D6D6D6;
        line-height: 1.25;
        text-align: center;
        white-space: nowrap;
      }

      .play-btn {
        padding: 10px 32px;
        font-size: 0.95rem;
      }
    }

    /* Subtitle entrance */
    @keyframes subtitleReveal {
      0% {
        opacity: 0;
        transform: translateY(14px);
        letter-spacing: 0.55em;
      }
      100% {
        opacity: 0.95;
        transform: translateY(0);
        letter-spacing: 0.45em;
      }
    }

    /* Photo entrance as name shifts up - appears in center */
    @keyframes photoRevealCenter {
      0% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 40px)) scale(0.96);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    /* Bottom Bar Entrance */
    @keyframes bottomBarReveal {
      0% {
        opacity: 0;
        transform: translate(-50%, 25px);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, 0);
      }
    }