:root {
    --peg-width-desktop: 300px;
    --peg-width-mobile: 150px;
  }

  /* Escena: contenedor relativo (contexto de posicionamiento) */
  .scene 
  {
	  background: linear-gradient(
  to bottom,
  #C0DEED 00%,
  #C0DEED 10%,
  #8ecaff 10%,
  #e6f7ff 80%,
  #C0DEED 80%,
  #C0DEED 100%
);
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }

  /* Nubes (solo decorativas) */
  .cloud {
    position:absolute;
    top: 8%;
    left: -340px;
    width: 300px;
    height: 150px;
    background: rgba(255,255,255,0.9);
    border-radius: 100px;
    filter: blur(8px);
    animation: moveClouds 60s linear infinite;
  }
  .cloud.small { top: 45%; left: -200px; width:180px; height:90px; animation-duration: 90s; opacity:0.6; }
  .cloud.tiny  { top: 70%; left: -120px; width:120px; height:60px; animation-duration: 120s; opacity:0.5; }

  @keyframes moveClouds {
    from { transform: translateX(0); }
    to   { transform: translateX(140vw); }
  }

  /* ----- Estructura del pegaso: wrapper (mueve) + inner (voltea) ----- */

  /* wrapper: se mueve horizontalmente con translateX (no afecta layout) */
  .pegaso-wrapper {
    position: absolute;
    top: 40%;
    left: 0;
    width: var(--peg-width-desktop);
    height: auto;
    transform-origin: center;
    will-change: transform;
    animation: fly 20s ease-in-out infinite, updown 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
  }

  /* pegaso-inner: elemento que contiene la imagen y realiza solo el flip (scaleX) */
  .pegaso-inner {
    width: 100%;
    height: 100%;
    transform-origin: center;
    will-change: transform;
    animation: flip 20s ease-in-out infinite;
  }

  /* la imagen en sí */
  .pegaso-inner img {
    display:block;
    width:100%;
    height:auto;
    animation: wings 0.4s ease-in-out infinite;
    user-select: none;
    pointer-events: none;
  }

  /* animación de vuelo horizontal (transform para evitar reflow) */
  @keyframes fly {
    0%   { transform: translateX(0vw); }
    49%  { transform: translateX( calc(99vw - var(--peg-width-desktop) ) ); }
    50%  { transform: translateX( calc(99vw - var(--peg-width-desktop) ) ); }
    100% { transform: translateX(0vw); }
  }

  /* movimiento vertical sutil */
  @keyframes updown {
    0%   { top: 40%; }
    50%  { top: 35%; }
    100% { top: 40%; }
  }

  /* flip independiente (solo scaleX en inner) */
  @keyframes flip {
    0%,49% { transform: scaleX(1); }
    50%,100% { transform: scaleX(-1); }
  }

  /* aleteo (solo rotación ligera de la imagen) */
  @keyframes wings {
    0%   { transform: rotate(-2deg) scale(1.02); }
    50%  { transform: rotate(2deg)  scale(1.00); }
    100% { transform: rotate(-2deg) scale(1.02); }
  }

  /* partículas */
  .sparkle {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff, rgba(255,255,255,0.1));
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.85));
    animation: sparkleMove var(--spark-time,1.6s) ease-out forwards;
    z-index: 9999;
  }
  @keyframes sparkleMove {
    0% { transform: translateX(0) translateY(0) scale(1); opacity: 1; }
    60% { opacity: 0.85; }
    100% { transform: translateX(calc(var(--spark-dir) * 90px)) translateY(25px) scale(0.35); opacity: 0; }
  }

  /* responsive: ajuste de tamaño del pegaso y partículas */
  @media (max-width:600px) {
    :root { --peg-width-desktop: 180px; }
    .sparkle { width: 10px; height: 10px; }
    @keyframes fly { 0% { transform: translateX(0vw); } 45% { transform: translateX( calc(99vw - var(--peg-width-mobile) ) ); } 50% { transform: translateX( calc(99vw - var(--peg-width-mobile) ) ); } 100% { transform: translateX(0vw); } }
  }
  
  
  .cloud2
  {
  position:relative;
  top:9%;
  background:url('../img/clouds.png') repeat-x;
  height:175px;
  width:100%;
  animation:rev-cloudani 20s linear infinite;
  transform: rotate(180deg);
}

 .cloud3{
 position:absolute;
 top:81%;
 transform:translate(0px, -175px);
  background:url('../img/clouds.png') repeat-x;
  height:175px;
  width:100%;
  animation:cloudani 10s linear infinite;
}

@keyframes cloudani{
  from{
    background-position:0 0;
  }
  to{
    background-position:100% 0;
  }
}

@keyframes rev-cloudani{
  from{
    background-position:100% 0;
  }
  to{
    background-position:0 0;
  }
}