/*
Theme Name: TOYT Film Studios
Theme URI: https://technogant.com/toytinfo-wp
Author: Your Name
Description: Custom theme for TOYT Film Studios
Version: 1.0
*/

/* Your entire CSS from the HTML goes here */
/* Copy all CSS from <style> tag in the HTML */

 
  * {margin:0;padding:0;box-sizing:border-box;}
    html, body {
      height: 100%;
      margin: 0;
      background: #000;
      overflow: hidden;
      position: relative;
      font-family: Arial, sans-serif;
    }
    
    /* Background container */
    .bg-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
    }
    
    /* GIF background - full brightness */
    .bg-gif {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }

   /* Make the entire text-sequence cover the screen */
    .text-sequence {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
    }

    /* Middle text exactly centre */
    .middle-text {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 55px;
      font-weight: 700;
      color: #fc21f3;
      text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
      opacity: 0;
      white-space: nowrap;
      z-index: 6;
    }

    /* Typing animation for middle text - without cursor */
    .middle-text.typing {
      overflow: hidden;
      animation: typing 3s steps(30, end) forwards;
    }

    @keyframes typing {
      from { width: 0; opacity: 1; }
      to { width: 50%; opacity: 1; }
    }

    /* Slide to right animation - 2 seconds */
    @keyframes slideRight {
      from { 
        transform: translate(-50%, -50%);
        opacity: 1;
      }
      to { 
        transform: translate(50%, -50%);
        opacity: 0;
      }
    }

    /* Header pinned at top */
    .header-text {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 55px;
      font-weight: 700;
      color: #fc21f3;
      text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
      opacity: 0;
      z-index: 6;
    }

    /* Menu container centred (but below header text) */
    .menu-items {
      position: fixed;
      top: 52%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 6;
      opacity: 0; /* Initially hidden */
    }

    .menu-item {
      font-size: 50px;
      margin: 20px 0;
      color: #fc21f3;
      text-shadow: 2px 2px 6px rgba(0,0,0,0.8);
      opacity: 0;
      transform: translateY(30px);
    }

    /* Animations as before */
    .menu-item:nth-child(1) {animation: fadeInUp 0.8s forwards;}
    .menu-item:nth-child(2) {animation: fadeInUp 0.8s forwards;}
    .menu-item:nth-child(3) {animation: fadeInUp 0.8s forwards;}

    /* Keyframes */
    @keyframes fadeInDown {
      0% {opacity:0; transform:translate(-50%, -30px);}
      100% {opacity:1; transform:translate(-50%, 0);}
    }

    @keyframes fadeInUp {
      0% {opacity:0; transform:translateY(30px);}
      100% {opacity:1; transform:translateY(0);}
    }

    /* Bottom Controls Container */
    .bottom-controls {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 25px;
      z-index: 20;
    }

    /* Visitor Counter - Clean Style */
    .visitor-counter {
      font-size: 18px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
      text-shadow: 2px 2px 6px rgba(0,0,0,0.9);
    }

    /* Combined Music Player Icon with Overlap */
    .music-player {
      position: relative;
      display: flex;
      align-items: center;
    }

    .music-icon {
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
      border: 2px solid rgba(255, 255, 255, 0.3);
      position: relative;
      z-index: 2;
    }

    .music-icon:hover {
      background: rgba(0, 0, 0, 0.9);
      transform: scale(1.1);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
      border-color: rgba(255, 255, 255, 0.6);
    }

    .music-icon i {
      font-size: 15px;
      color: white;
      transition: all 0.3s ease;
    }

    .music-icon.playing i {
      color: #fc21f3;
      text-shadow: 0 0 8px rgba(255, 204, 0, 0.7);
    }

    /* Music note overlapping the play button */
    .music-note-overlap {
      position: absolute;
      top: -8px;
      right: -5px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3;
    }

    .music-note-overlap i {
      font-size: 12px;
      color: #fc21f3;
      transition: all 0.3s ease;
    }

    .music-icon.playing .music-note-overlap {
      animation: noteFloat 2s ease-in-out infinite;
    }

    .music-icon.playing .music-note-overlap i {
      color: #fc21f3;
    }

    .music-label {
      font-size: 10px;
      color: white;
      opacity: 0;
      transition: opacity 0.3s ease;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
      white-space: nowrap;
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translateX(-50%);
    }

    .music-player:hover .music-label {
      opacity: 1;
    }

    .volume-control {
      width: 80px;
      opacity: 0;
      transition: opacity 0.3s ease;
      position: absolute;
      bottom: -45px;
      left: 50%;
      transform: translateX(-50%);
    }

    .music-player:hover .volume-control {
      opacity: 1;
    }

    .volume-slider {
      width: 100%;
      height: 3px;
      -webkit-appearance: none;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2px;
      outline: none;
    }

    .volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: white;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

    .logo {
      position: absolute;
      left: 60px;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      z-index: 10;
    }

    .logo .vertical {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 190px;
      font-family: sans-serif;
      font-weight: 700;
      color: #fc21f3;
      position: relative;
      line-height: 0.75;
      text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    }

    .logo .vertical .letter {
      display: inline-block;
      opacity: 0;
      transform: translateY(-100vh) rotate(315deg) scale(0.5);
      will-change: transform, opacity;
    }

    .logo small {
      display: block;
      margin-top: 28px;
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #fc21f3;
      animation: subtitlePulse 2s ease-in-out infinite alternate;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    }

    .location {
      position: absolute;
      top: 30px;
      right: 40px;
      font-size: 24px;
      font-weight:700;
      color: #fc21f3;
      letter-spacing: 2px;
      animation: fadeInDown 2s ease;
      z-index: 10;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    }

    .website {
      position: absolute;
      bottom: 20px;
      right: 40px;
      font-size: 20px;
      font-weight:700;
      color: #fc21f3;
      text-decoration: none;
      padding: 8px 16px;
      border: 1px solid #fff;
      border-radius: 4px;
      transition: all .3s;
      animation: fadeInUp 2s ease;
      cursor:pointer;
      z-index: 10;
      background: rgba(0,0,0,0.3);
      text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    }
    .website:hover {
      background:#fff;
      color:#000;
      box-shadow:0 0 20px rgba(255,255,255,.3);
      text-shadow: none;
    }

    /* New Animations */
    @keyframes slideInFromSides {
      0% {
        opacity: 0;
        transform: translate(-150%, -50%);
      }
      50% {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%);
      }
    }

    @keyframes stayVisible {
      0%, 100% { opacity: 1; }
    }

    @keyframes fadeOut {
      to { opacity: 0; }
    }

    @keyframes fadeIn {
      to { opacity: 1; }
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.05); }
      100% { transform: scale(1); }
    }

    @keyframes musicGlow {
      0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
      50% { box-shadow: 0 4px 16px rgba(255, 204, 0, 0.4); }
    }

    @keyframes noteFloat {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-3px) scale(1.1); }
    }

    @keyframes letterFallAndGlow {
      0% {opacity:0;transform:translateY(-100vh) rotate(315deg) scale(0.5);}
      60% {opacity:1;transform:translateY(20px) rotate(250deg) scale(1.2);text-shadow:0 0 20px #fff,0 0 40px rgba(255,255,255,.4);}
      80% {transform:translateY(-10px) rotate(280deg) scale(0.9);}
      100% {opacity:1;transform:translateY(0) rotate(270deg) scale(1);text-shadow:0 0 10px #fff, 2px 2px 8px rgba(0,0,0,0.8);}
    }

    @keyframes letterExtraRotate {
      0% {transform:rotate(270deg);}
      50% {transform:rotate(360deg) scale(1.05);}
      100% {transform:rotate(450deg);}
    }

    @keyframes letterGlow {
      0%,100% {text-shadow:0 0 10px #fff, 2px 2px 8px rgba(0,0,0,0.8);}
      50% {text-shadow:0 0 25px #fff,0 0 45px rgba(255,255,255,.5), 2px 2px 8px rgba(0,0,0,0.8);}
    }

    @keyframes subtitlePulse {
      0% {opacity:.7;letter-spacing:3px;}
      100% {opacity:1;letter-spacing:4px;}
    }

    @keyframes fadeInDown {
      from {
        opacity:0;
        transform: translateX(-50%) translateY(-50px);
      }
      to {
        opacity:1;
        transform: translateX(-50%) translateY(0);
      }
    }

    @keyframes fadeInUp {
      from {opacity:0; transform:translateY(30px);}
      to {opacity:1; transform:translateY(0);}
    }

    @keyframes bloom {
      0% {opacity:0; transform:scale(0.5);}
      60% {opacity:1; transform:scale(1.1);}
      100% {opacity:1; transform:scale(1);}
    }

    @keyframes fadeInOut {
      0% {opacity:0;}
      10% {opacity:1;}
      70% {opacity:1;}
      100% {opacity:0;}
    }
    
    /* Enhanced Responsive Design */
    @media (max-width: 1440px) {
      .logo .vertical { font-size: 160px; }
      .middle-text { font-size: 48px; }
      .header-text { font-size: 48px; }
      .menu-item { font-size: 42px; }
    }
    
    @media (max-width: 1200px) {
      .logo { left: 40px; }
      .logo .vertical { font-size: 140px; }
      .middle-text { font-size: 42px; }
      .header-text { font-size: 42px; }
      .menu-item { font-size: 36px; }
      .location { font-size: 22px; right: 30px; }
      .website { font-size: 18px; right: 30px; }
    }
    
    @media (max-width: 1024px) {
      .logo { left: 30px; }
      .logo .vertical { font-size: 120px; }
      .logo small { font-size: 24px; }
      .middle-text { font-size: 36px; }
      .header-text { font-size: 36px; }
      .menu-item { font-size: 32px; }
      .location { font-size: 20px; right: 25px; }
      .website { font-size: 16px; right: 25px; }
    }
    
    @media (max-width: 900px) {
      .logo { left: 20px; }
      .logo .vertical { font-size: 100px; }
      .logo small { font-size: 20px; margin-top: 20px; }
      .middle-text { font-size: 32px; }
      .header-text { font-size: 32px; top: 25px; }
      .menu-item { font-size: 28px; }
      .location { font-size: 18px; right: 20px; top: 25px; }
      .website { font-size: 14px; right: 20px; padding: 6px 12px; }
    }
    
    @media (max-width: 768px) {
      .logo {
        position: relative;
        left: 0;
        top: 20%;
        transform: none;
        margin-bottom: 40px;
        width: 100%;
        text-align: center;
      }
      
      .header-text {
        top: 10%;
        text-align: center;
      }
      
      .middle-text {
        top: 60%;
        text-align: center;
      }
      
      .logo .vertical { font-size: 80px; }
      .logo small { font-size: 16px; margin-top: 15px; }
      .middle-text { font-size: 28px; }
      .header-text { font-size: 28px; }
      .menu-item { font-size: 24px; }
      .location { font-size: 16px; right: 15px; top: 20px; }
      .website { font-size: 12px; right: 15px; padding: 5px 10px; }
      .menu-items { 
        top: 54%;
        transform: translate(-50%, -50%);
      }
      .bottom-controls {
        gap: 20px;
        bottom: 15px;
      }
      .visitor-counter {
        font-size: 16px;
      }
      .music-icon {
        width: 36px;
        height: 36px;
      }
      .music-icon i {
        font-size: 14px;
      }
    }

    @media (max-width: 600px) {
      .logo .vertical { font-size: 70px; }
      .logo small { font-size: 14px; margin-top: 12%; }
      .middle-text { font-size: 24px; }
      .header-text { font-size: 24px; top: 15px; }
      .menu-item { font-size: 20px; }
      .location { font-size: 14px; right: 10px; top: 15px; }
      .website { font-size: 11px; right: 10px; padding: 4px 8px; }
      .menu-items { 
        top: 54%;
        transform: translate(-50%, -50%);
      }
      .bottom-controls {
        gap: 15px;
        bottom: 10px;
      }
      .visitor-counter {
        font-size: 14px;
      }
      .music-icon {
        width: 32px;
        height: 32px;
      }
      .music-icon i {
        font-size: 12px;
      }
    }

    @media (max-width: 480px) {
      .logo .vertical { font-size: 60px; }
      .logo small { font-size: 12px; margin-top: 10px; }
      .middle-text { font-size: 20px; }
      .header-text { font-size: 20px; top: 12%; }
      .menu-item { font-size: 18px; margin: 10px 0; }
      .location { font-size: 12px; right: 8px; top: 12px; }
      .website { font-size: 10px; right: 8px; padding: 3px 6px; }
      .menu-items { 
        top: 54%;
        transform: translate(-50%, -50%);
      }
      .bottom-controls {
        gap: 12px;
        bottom: 8px;
      }
      .visitor-counter {
        font-size: 12px;
      }
      .music-icon {
        width: 30px;
        height: 30px;
      }
      .music-icon i {
        font-size: 11px;
      }
    }

    @media (max-width: 360px) {
      .logo .vertical { font-size: 50px; }
      .logo small { font-size: 10px; margin-top: 8px; }
      .middle-text { font-size: 18px; }
      .header-text { font-size: 18px; top: 10px; }
      .menu-item { font-size: 16px;}
      .location { font-size: 11px; right: 6px; top: 10px; }
      .website { font-size: 9px; right: 6px; padding: 2px 5px; }
      .menu-items { 
        top: 54%;
        transform: translate(-50%, -50%);
      }
      .bottom-controls {
        gap: 10px;
        bottom: 6px;
      }
      .visitor-counter {
        font-size: 11px;
      }
      .music-icon {
        width: 28px;
        height: 28px;
      }
      .music-icon i {
        font-size: 10px;
      }
    }
    
    .menu-items,
.menu-items a {
  pointer-events: auto important!;
}
.menu-item {
  cursor: pointer;
}






/*founde page css*/

   /* --- RESET & GLOBAL STYLES --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Walbaum Display', serif;
            background-color: #000;
            overflow-x: hidden;
            margin: 0;
        }

        /* --- MAIN CONTAINER --- */
        .stage-container {
            position: relative;
            width: 100%;
            min-height: 100vh;
            /* Background GIF */
            background: url('assets/background.gif') no-repeat center center;
            background-size: cover;
            overflow: hidden;
            padding-bottom: 0;
        }

        /* --- TYPOGRAPHY & COLORS --- */
        .text-red { color: #E60000; text-shadow: 1px 1px 2px #000; }
        .text-gold { color: #FFD700; text-shadow: 1px 1px 2px #000; }
        .text-cyan { color: #00BFFF; text-shadow: 1px 1px 2px #000; }
        .text-white { color: #FFF; text-shadow: 1px 1px 2px #000; }
        .font-walbaum { font-family: 'Walbaum Display', serif; }
        
        /* TOYT SPECIFIC COLORS */
        .toyt-t1 { color: #FDC100; text-shadow: 1px 1px 2px #000; } /* First T - Gold/Yellow */
        .toyt-o { color: #E7E8EA; text-shadow: 1px 1px 2px #000; }  /* O - Light Gray */
        .toyt-y { color: #DA6DC8; text-shadow: 1px 1px 2px #000; }  /* Y - Pink/Purple */
        .toyt-t2 { color: #5095D8; text-shadow: 1px 1px 2px #000; } /* Second T - Blue */

        /* --- DECORATIVE RED BAR --- */
        .red-bar {
            position: absolute;
            top: 12%;
            left: 0;
            width: 100%;
            height: 15px;
            background-color: #E60000;
            z-index: 1;
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
        }

        /* --- IMAGE & CONTAINER STYLES --- */
        .item-container {
            position: absolute;
            z-index: 10;
            transition: transform 0.3s ease;
        }
        
        .item-container:hover {
            transform: scale(1.03);
            z-index: 20;
        }

        /* This is the key to removing the white background via CSS:
           mix-blend-mode: multiply; makes white pixels transparent.
        */
        .item-container img {
            width: 100%;
            height: auto;
            display: block;
            mix-blend-mode: multiply; /* Removes white background */
            /* Optional: slight brightness boost so they don't get too dark on the GIF */
            filter: contrast(1.1) brightness(1.1); 
        }
        
        /* Grayscale filter for specific photos */
        .bw-photo img {
            /* Keep multiply to remove white, add grayscale */
            filter: grayscale(100%) contrast(1.2); 
            mix-blend-mode: multiply;
        }

        /* --- ANIMATIONS --- */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate {
            animation: fadeInUp 1s ease-out forwards;
            opacity: 0;
        }
        .delay-1 { animation-delay: 0.2s; }
        .delay-2 { animation-delay: 0.4s; }
        .delay-3 { animation-delay: 0.6s; }
        .delay-4 { animation-delay: 0.8s; }
        .delay-5 { animation-delay: 1.0s; }

        /* --- LAYOUT POSITIONS (DESKTOP) --- */

        /* 1. Logo Section */
        .logo-section {
            top: 0; left: 0;
            display: flex; align-items: flex-start;
            padding: 38px;
        }
        .logo-vertical {
            display: flex; flex-direction: column;
            font-size: 3.5rem; line-height: 0.8;
            font-weight:bold;
        }
        .stars-out-text {
            writing-mode: vertical-rl; transform: rotate(360deg);
            font-size: 1.9rem; margin-left: 50px; margin-top: 110px;
            white-space: nowrap;
        }

        /* 2. Founders Title */
        .founders-title {
            position: absolute; top: 20%; left: 44%;
            transform: translateX(-50%);
            font-size: 5rem; z-index: 15; white-space: nowrap;
        }

        /* 3. Esther (Moved to top with no padding) */
        .esther-section {
            top: 0; left: 25%; width: 20%; text-align: center;
        }

        /* 4. Helen (Moved to top with no padding) */
        .helen-section {
            top: 0; right: 15%; width: 20%; text-align: center;
        }
        .hollywood-text {
            writing-mode: vertical-rl; position: absolute;
            right: -35px; top: 30%; font-size: 1.6rem;
        }

        /* 5. Oliver (Center) */
        .oliver-section {
            top: 32%; left: 45%;
            transform: translateX(-50%);
            width: 20%; text-align: center;
        }

        /* 6. RUTH - AT VERY BOTTOM RIGHT WITH RIGHT PADDING */
        .ruth-section {
            bottom: 0;
            right: 5%;
            width: 22%;
            text-align: center;
        }
        .ruth-details {
            position: absolute; 
            bottom: 10px;
            right: 20px;
        }
        .events-dir-text {
            writing-mode: vertical-rl; 
            position: absolute;
            right: -25px; 
            bottom: 15px;
            font-size: 1.5rem; 
            white-space: nowrap;
        }

        /* LEFT vertical name for Ruth */
        .ruth-text-left {
            position: absolute;
            left: -2px;
            top: 15%;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 25;
            color:#7D1E70;
            font-weight:bold;
        }

        .ruth-text-left .vertical-name {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
            font-size:1.5rem;
            line-height: 1;
            
        }

        .ruth-text-left .surname-text {
            font-size: 2rem;
            line-height: 1;
            margin-top: 6px;
        }

        /* Ruth first name stacked letter-by-letter */
        .ruth-first-name {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 1.9rem;
            line-height: 1;
        }

        .ruth-first-name span {
            margin-bottom: 5px; /* GAP between letters */
        }

        /* 7. Aditya - AT VERY BOTTOM LEFT WITH LEFT PADDING */
        .aditya-section {
            bottom: 0;
            left: 5%;
            width: 23%;
            display: flex; 
            align-items: flex-end;
        }
        .aditya-text-group {
            display: flex; 
            flex-direction: column;
            margin-left: -18px; 
            margin-bottom: 15px;
            z-index: 25;
            font-weight:bold;
        }
        .vertical-name {
            writing-mode: vertical-rl; 
            transform: rotate(180deg);
            font-size: 2rem; 
            line-height: 1;
        }
        .surname-text { 
            font-size: 2.3rem; 
            line-height: 1; 
            margin-left: 5px; 
        }
        .role-text { 
            font-size: 1.9rem; 
            margin-left: 35px; 
        }

        /* Labels OVERLAPPING on bottom of images */
        .img-label {
            position: absolute;
            bottom: 10px; /* Position at bottom of image */
            left: 0;
            width: 100%;
            font-size: 1.9rem;
            text-align: center;
            z-index: 25;
            padding: 5px 0;
            color:#000;
        }
        
        /* Specific positioning for each founder's label */
        .esther-label {
            bottom: 10px;
        }
        
        .helen-label {
            bottom: 10px;
            right: 0;
            text-align: center;
            padding-right: 10px;
        }
        
        .oliver-label {
            bottom: 10px;
            color:#fff;
        }

        .team-label {
            position: absolute; 
            font-size: 1.8rem; 
            z-index: 25;
        }
        .team-label.top-right { 
            top: -10px; 
            right: 10px; 
        }
        .team-label.bottom-left { 
            top: 30%; 
            left: 0; 
        }

        /* Footer - Positioned above Aditya and Ruth */
        .footer-url {
            position: absolute; 
            bottom: 5px;
            width: 100%;
            text-align: center; 
            font-size: 2rem; 
            z-index: 30;
        }

        /* TOYT vertical like "The Stars Are Out" */
        .toyt-vertical {
            writing-mode: vertical-rl;
            transform: rotate(360deg);
            font-size: 3.5rem;
            line-height: 1;
            display: flex;
            align-items: center;
        }

        .aditya-text-group .vertical-name {
            writing-mode: vertical-lr;   /* TOP to BOTTOM */
            transform: none;             /* remove rotate */
            letter-spacing: 6px;         /* gap between letters */
            font-size: 2.1rem;
            line-height: 1;
            transform: rotate(360deg);
        }

        /* Film studios text - UPDATED */
        .film-studios-text {
            color: #000000; /* Black text */
            text-shadow: 2px 2px 4px #5095D8; /* Blue shadow */
            font-size: 1.3rem; /* Increased from 1rem */
            letter-spacing: 3px; /* Slightly increased */
            margin-top: 12px;
            font-weight: bold;
        }

        /* --- RESPONSIVE MOBILE --- */
        @media (max-width: 900px) {
            .stage-container {
                height: auto; 
                display: flex; 
                flex-direction: column;
                align-items: center; 
                padding: 20px;
            }
            .red-bar, .stars-out-text, .events-dir-text, .hollywood-text { 
                display: none; 
            }
            
            .logo-section, .founders-title, .ruth-section, .esther-section,
            .oliver-section, .helen-section, .aditya-section, .footer-url, .team-label {
                position: relative; 
                top: auto; 
                left: auto; 
                right: auto; 
                bottom: auto;
                transform: none !important; 
                width: 90%; 
                max-width: 400px;
                margin-bottom: 30px; 
                text-align: center; 
                padding: 0;
            }

            .logo-section { 
                flex-direction: row; 
                justify-content: center; 
            }
            .logo-vertical { 
                flex-direction: row; 
                font-size: 2.5rem; 
            }
            .logo-vertical span { 
                margin: 0 5px; 
            }
            
            .aditya-section { 
                flex-direction: column; 
                align-items: center; 
            }
            .aditya-text-group { 
                flex-direction: row; 
                align-items: center; 
                margin: 10px 0 0 0; 
            }
            .vertical-name { 
                writing-mode: horizontal-tb; 
                transform: none; 
            }
            .surname-text, .role-text { 
                margin: 0 0 0 10px; 
            }
            
            .img-label {
                position: relative;
                bottom: auto;
                margin-top: -20px;
                background: transparent;
            }
            
            .team-label { 
                display: block; 
                margin-bottom: 5px; 
            }
            .footer-url { 
                margin-top: 20px; 
                bottom: auto;
            }
            
            /* Mobile TOYT colors */
            .toyt-t1, .toyt-o, .toyt-y, .toyt-t2 {
                margin: 0 2px;
            }
            
            /* Mobile film studios text */
            .film-studios-text {
                font-size: 1.1rem;
                letter-spacing: 2px;
            }
        }
        
        
        
        /* ================================
   FIX MOBILE SCROLLING ISSUE
   ================================ */
@media (max-width: 1024px) {

    html, body {
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden;
    }

    .stage-container {
        position: relative !important;
        height: auto !important;
        min-height: 100vh;
        overflow: visible !important;
        padding-bottom: 120px; /* ensures footer is reachable */
    }

    /* Neutralize absolute positioning on mobile */
    .item-container {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }
}