@import url('./root.css');
    :root {
      --logo-size: min(35vw, 200px);
      --circle-radius: min(45vw, 220px);
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f8f9fa;
      color: #333;
      min-height: 100vh;
      overflow-x: hidden;
    }

    body.hide-content header,
    body.hide-content main,
    body.hide-content footer {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 1.2s ease;
    }


    .landing-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #1a1a2e;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      perspective: 1200px;
    }

    .landing-overlay.fade {
      opacity: 0;
      visibility: hidden;
      transition: opacity 1.2s ease;
    }

    .landing-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 12;
      animation: logo-pop 2.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 4.8s;
    }

    .landing-logo img {
      width: var(--logo-size);
      height: var(--logo-size);
      object-fit: contain;
      filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    }
   .web-landing-logo img {
  width: calc(var(--logo-size) - 4vw);
  height: calc(var(--logo-size) - 4vw);
}

    .landing-img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(20vw, 130px);
      height: min(20vw, 130px);
      transform: translate(-50%, -50%);
      opacity: 0;
      z-index: 10;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .landing-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s ease;
    }

    .landing-img:hover img {
      transform: scale(1.15);
    }

    .landing-img.delay0 {
      animation-delay: 0.1s;
    }
    .landing-img.delay1 {
      animation-delay: 0.3s;
    }
    .landing-img.delay2 {
      animation-delay: 0.5s;
    }
    .landing-img.delay3 {
      animation-delay: 0.7s;
    }
    .landing-img.delay4 {
      animation-delay: 0.9s;
    }
    .landing-img.delay5 {
      animation-delay: 1.1s;
    }
    .landing-img.delay6 {
      animation-delay: 1.3s;
    }
    .landing-img.delay7 {
      animation-delay: 1.5s;
    }
    .landing-img.delay8 {
      animation-delay: 1.7s;
    }

    .landing-top {
      animation: fly-top 1.4s forwards;
    }
    .landing-bottom {
      animation: fly-bottom 1.4s forwards;
    }
    .landing-left {
      animation: fly-left 1.4s forwards;
    }
    .landing-right {
      animation: fly-right 1.4s forwards;
    }
    .landing-top-left {
      animation: fly-top-left 1.4s forwards;
    }
    .landing-top-right {
      animation: fly-top-right 1.4s forwards;
    }
    .landing-bottom-left {
      animation: fly-bottom-left 1.4s forwards;
    }
    .landing-bottom-right {
      animation: fly-bottom-right 1.4s forwards;
    }
    .landing-zoom {
      animation: fly-zoom 1.4s forwards;
    }

    @keyframes logo-pop {
      0% { transform: translate(-50%, -50%) scale(0.3) rotate(-20deg); opacity: 0; }
      60% { transform: translate(-50%, -50%) scale(1.1) rotate(5deg); opacity: 1; }
      100% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
    }

    @keyframes fly-top {
      0% { transform: translate(-50%, -150%) rotateX(-45deg) rotateY(0) rotateZ(-15deg) scale(0.3); opacity: 0; }
      100% { transform: translate(calc(-50% + 0vmin), calc(-50% - var(--circle-radius))) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
    }
    @keyframes fly-bottom {
      0% { transform: translate(-50%, 150%) rotateX(45deg) rotateY(0) rotateZ(15deg) scale(0.3); opacity: 0; }
      100% { transform: translate(calc(-50% + 0vmin), calc(-50% + var(--circle-radius))) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
    }
    @keyframes fly-left {
      0% { transform: translate(-150%, -50%) rotateX(0) rotateY(-45deg) rotateZ(-15deg) scale(0.3); opacity: 0; }
      100% { transform: translate(calc(-50% - var(--circle-radius)), calc(-50% + 0vmin)) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
    }
    @keyframes fly-right {
      0% { transform: translate(150%, -50%) rotateX(0) rotateY(45deg) rotateZ(15deg) scale(0.3); opacity: 0; }
      100% { transform: translate(calc(-50% + var(--circle-radius)), calc(-50% + 0vmin)) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
    }
    @keyframes fly-top-left {
      0% { transform: translate(-150%, -150%) rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg) scale(0.3); opacity: 0; }
      100% { transform: translate(calc(-50% - var(--circle-radius)*0.707), calc(-50% - var(--circle-radius)*0.707)) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
    }
    @keyframes fly-top-right {
      0% { transform: translate(150%, -150%) rotateX(-30deg) rotateY(30deg) rotateZ(30deg) scale(0.3); opacity: 0; }
      100% { transform: translate(calc(-50% + var(--circle-radius)*0.707), calc(-50% - var(--circle-radius)*0.707)) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
    }
    @keyframes fly-bottom-left {
      0% { transform: translate(-150%, 150%) rotateX(30deg) rotateY(-30deg) rotateZ(30deg) scale(0.3); opacity: 0; }
      100% { transform: translate(calc(-50% - var(--circle-radius)*0.707), calc(-50% + var(--circle-radius)*0.707)) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
    }
    @keyframes fly-bottom-right {
      0% { transform: translate(150%, 150%) rotateX(30deg) rotateY(30deg) rotateZ(-30deg) scale(0.3); opacity: 0; }
      100% { transform: translate(calc(-50% + var(--circle-radius)*0.707), calc(-50% + var(--circle-radius)*0.707)) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1; }
    }
    @keyframes fly-zoom {
      0% { transform: translate(-50%, -50%) scale(0) rotate(45deg); opacity: 0; filter: blur(20px); }
      70% { transform: translate(-50%, -50%) scale(1.1); filter: blur(0); }
      100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }

    @media (max-width: 900px) {
      :root {
        --circle-radius: min(55vw, 220px);
      }
      
      
      .landing-img {
        width: min(25vw, 120px);
        height: min(25vw, 120px);
      }
    }

    @media (max-width: 600px) {
      :root {
        --circle-radius: min(65vw, 165px);
        --logo-size: min(50vw, 145px);
      }
      
     
      
      .landing-img {
        width: min(30vw, 100px);
        height: min(30vw, 100px);
      }
    }