/* Responsive: show only the main Wisme character on tablet/mobile and disable its animations */

@media (max-width: 1024px) {
  /* Prevent horizontal overflow on small devices and use safe paddings */
  html, body {
    overflow-x: hidden !important;
  }

  /* Ensure main containers align with device edges */
  .hero, .hero .hero-container, .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  /* Put non-character 3D objects in the HERO visually behind the mascot
     Keep feature-scene elements (like conversational scenes) unaffected. */
  .hero .objects-container .object-3d:not(.character) {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(0.86) !important;
    opacity: 0.28 !important;
    visibility: visible !important;
    pointer-events: none !important;
    filter: blur(0.6px) saturate(0.9) !important;
    z-index: 1 !important; /* behind the character in the hero */
  }

  /* Center the character inside the objects container */
  .objects-container {
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    pointer-events: none !important;
    min-height: 220px;
    min-width: auto !important; /* remove fixed min width that caused overflow */
    height: auto !important;
    overflow: visible !important;
  }

  /* Make sure the character is visible and centered (no left/right offset) */
  .object-3d.character {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    left: 50% !important;
    top: 18% !important;
    transform: translateX(-50%) !important; /* center horizontally */
    margin: 0 !important;
    z-index: 20 !important; /* bring character above all objects */
    max-width: 100% !important;
    width: 50vw !important; /* reduce side width so character is narrower */
    height: auto !important;
    pointer-events: auto !important;
  }

  /* Resize the character to fit the viewport and apply subtle float animation */
  .object-3d.character img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    animation: floatUpDown 3.5s ease-in-out infinite !important;
    will-change: transform;
    /* ensure the image paints above the subtle background objects */
    position: relative !important;
    z-index: 21 !important;
  }

  /* Hide decorative particles around the character */
  .character-particles { display: none !important; }

  /* Lift the character slightly so it doesn't overlap the prototype card */
  .object-3d.character {
    top: -18px !important; /* move character up */
    margin-bottom: 6px !important;
  }

  /* Add extra bottom spacing in the hero so the audio/prototype card sits below the character */
  .hero .hero-container {
    padding-bottom: 100px !important;
    padding-top: 10px !important; /* reduce top whitespace on mobile */
  }

  /* Ensure proper spacing for bottom elements */
  .hero-content {
    margin-bottom: 30px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* Fix: conversational scene - keep desk/table inside the rounded scene on tablet */
  .conversational-scene {
    position: relative !important;
    overflow: hidden !important; /* clip any oversized desk parts */
    border-radius: 18px !important;
    min-height: 320px !important; /* ensure there's room for the desk */
  }

  /* Center and reduce desk/table size so it doesn't overflow the scene
     Use absolute bottom positioning so the desk sits lower inside the rounded scene */
  .conversational-scene .scene-desk {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 72% !important; /* smaller desk on tablet */
    max-width: 480px !important;
    bottom: 8% !important; /* sit towards the lower part of the scene */
    z-index: 2 !important;
    margin: 0 auto !important;
  }

  .conversational-scene .scene-desk .desk-image,
  .conversational-scene .desk-image {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Ensure the audio/player and scroll indicator are below the character and visible */
  .audio-player {
    margin-top: 8px !important;
    position: relative !important;
    z-index: 12 !important;
  }

  /* Hide the 'Explore Below' indicator and arrow on small screens */
  .scroll-indicator,
  .scroll-indicator .down-arrow {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Simple up-down float animation for the character image */
  @keyframes floatUpDown {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
  }

  /* (Animation applied above in the consolidated selector) */
}

@media (max-width: 480px) {
  .object-3d.character img { width: 100% !important; max-width: 75vw !important; }
  .objects-container { min-height: 180px; padding-top: 6px; min-width: auto !important; }

  .object-3d.character { width: 75vw !important; top: 14% !important; }

  /* Mobile: make the desk smaller and better centered inside its scene */
  .conversational-scene .scene-desk {
    width: 58% !important;
    max-width: 320px !important;
    bottom: 6% !important; /* keep desk lower on mobile */
  }

  /* Feature sections: Show mobile-optimized images on tablet/mobile */
  .feature-section .feature-visual .feature-image-container > *:not(.mobile-scene) {
    display: none !important; /* Hide desktop scene components */
  }

  /* Simple reset - remove all margins and complex layouts */
  body .feature-section,
  body .feature-section .container,
  body .feature-section .feature-grid,
  body .feature-section .feature-visual,
  body .feature-section .feature-image-container {
    margin: 0 auto !important;
    padding: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Direct centering without transforms */
  body .feature-section .feature-visual {
    display: block !important;
    min-height: 420px !important;
    position: relative !important;
  }

  /* Mobile: Position tree, character and grass properly */
  .hero {
    position: relative !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  .hero .hero-container {
    position: relative !important;
    z-index: 5 !important;
  }

  body .hero .object-3d.tree {
    position: absolute !important;
    left: 5% !important;
    bottom: 10px !important;
    width: 80px !important;
    height: auto !important;
    z-index: 2 !important;
  }

  body .hero .object-3d.character {
    position: absolute !important;
    left: 50% !important;
    bottom: 10px !important;
    transform: translateX(-50%) !important;
    width: 70px !important;
    height: auto !important;
    z-index: 3 !important;
  }

  /* Mobile: Show only grass-1 with proper positioning */
  body .hero .grass-1 {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 40px !important;
    background: url('../assets/images/grass-1.png') repeat-x bottom center !important;
    background-size: contain !important;
    z-index: 1 !important;
    opacity: 1 !important;
  }

  body .hero .grass-2,
  body .hero .grass-3,
  body .hero .grass-4 {
    display: none !important;
  }

  /* Center feature images */
  body .feature-section .feature-visual::after {
    content: "" !important;
    display: block !important;
    width: 320px !important;
    height: 420px !important;
    margin: 0 auto !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Individual feature backgrounds */
  body .feature-section.conversational-learning .feature-visual::after {
    background-image: url('../assets/images/features-mobile/1/image.png') !important;
  }

  body .feature-section.ai-study-buddy .feature-visual::after {
    background-image: url('../assets/images/features-mobile/2/image.png') !important;
  }

  body .feature-section.personalized-reinforcement .feature-visual::after {
    background-image: url('../assets/images/features-mobile/3/image.png') !important;
  }

  body .feature-section.bite-sized-episodes .feature-visual::after {
    background-image: url('../assets/images/features-mobile/4/image.png') !important;
  }

  body .feature-section.smarter-content .feature-visual::after {
    background-image: url('../assets/images/features-mobile/5/image.png') !important;
  }

  body .feature-section.gamification .feature-visual::after {
    background-image: url('../assets/images/features-mobile/6/image.png') !important;
  }

  /* Force text alignment and spacing */
  body .feature-section .feature-content {
    padding: 0 20px !important;
    text-align: center !important;
  }

  /* Tablet sizes */
  @media (min-width: 768px) {
    /* Larger feature images for tablet */
    body .feature-section .feature-visual::after {
      width: 400px !important;
      height: 560px !important;
    }

    /* Tablet: Adjust tree and character sizes */
    body .hero .object-3d.tree {
      width: 120px !important;
      left: 10% !important;
      bottom: 15px !important;
    }

    body .hero .object-3d.character {
      width: 100px !important;
      bottom: 15px !important;
    }

    /* Tablet: Show all grass layers with proper positioning */
    body .hero .grass-1,
    body .hero .grass-2,
    body .hero .grass-3,
    body .hero .grass-4 {
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      background-repeat: repeat-x !important;
      background-position: bottom center !important;
      background-size: contain !important;
      opacity: 1 !important;
    }

    /* Layer specific heights and z-indices */
    body .hero .grass-1 {
      height: 50px !important;
      z-index: 1 !important;
    }

    /* Ensure coming soon text and app store buttons are visible */
    .hero .coming-soon-text,
    .hero .app-store-button {
      position: relative !important;
      z-index: 10 !important;
      opacity: 1 !important;
      visibility: visible !important;
      display: block !important;
      margin: 15px auto !important;
      text-align: center !important;
    }

    body .hero .grass-2 {
      display: block !important;
      position: absolute !important;
      bottom: 20px !important;
      left: 0 !important;
      width: 100% !important;
      height: 60px !important;
      background: url('../assets/images/grass-2.png') repeat-x bottom center !important;
      background-size: auto 100% !important;
      z-index: 2 !important;
    }

    body .hero .grass-3 {
      display: block !important;
      position: absolute !important;
      bottom: 40px !important;
      left: 0 !important;
      width: 100% !important;
      height: 40px !important;
      background: url('../assets/images/grass-3.png') repeat-x bottom center !important;
      background-size: auto 100% !important;
      z-index: 3 !important;
    }

    body .hero .grass-4 {
      display: block !important;
      position: absolute !important;
      bottom: 50px !important;
      left: 0 !important;
      width: 100% !important;
      height: 30px !important;
      background: url('../assets/images/grass-4.png') repeat-x bottom center !important;
      background-size: auto 100% !important;
      z-index: 4 !important;
    }
  }

  /* Tablet specific adjustments */
  @media (min-width: 768px) {
    body .feature-section .feature-visual::after {
      width: 400px !important;
      height: 560px !important;
    }
  }

  /* Add padding around the video player so controls are not at the screen edge */
  .video-player, .video-container {
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  /* On tablet/mobile also add safe padding for main video element */
  .video-player video, .video-container video {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
}