/* NAVE RUTICUTI — versão limpa */

.nave-page{
  overflow-x:hidden;
  background:
    radial-gradient(circle at 50% 10%,rgba(244,206,82,.17),transparent 30%),
    linear-gradient(180deg,#fff8eb 0%,#f5ead8 100%);
}

.nave-stage{
  position:relative;
  width:min(1480px,calc(100% - 28px));
  margin:0 auto;
  padding:28px 0 58px;
}

.nave-shell{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:28px;
  background:#1c2230;
  box-shadow:0 30px 70px rgba(56,39,25,.20);
  transform-origin:center center;
}

/* camada de escurecimento da viagem */
.nave-shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:50;
  background:#000;
  opacity:0;
  pointer-events:none;
}

.nave-shell.is-shaking::after{
  animation:naveDarken 1.15s ease-in forwards;
}

.nave-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;
}

/* QUATRO CAPAS — nada além delas é desenhado por CSS */
.destination-grid{
  position:absolute;
  left:15.2%;
  top:29.5%;
  width:68.2%;
  height:32.3%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.55%;
  z-index:5;
  pointer-events:none;
}

.destination{
  position:relative;
  min-width:0;
  height:100%;
}

.destination-cover{
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:5%;
  background:transparent;
}

.destination-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:5%;
}


/* SEGUNDA PÁGINA DA NAVE — capas um pouco menores no desktop
   A segunda página é identificada pelo espaço vazio automático.
   A primeira página permanece exatamente como está. */
@media(min-width:721px){

  .destination-grid:has(.destination-empty) .destination{
    display:flex;
    align-items:flex-start;
    justify-content:center;
  }

  .destination-grid:has(.destination-empty) .destination-cover{
    width:92%;
    height:88%;
  }

}

/* HALO DA CAPA SELECIONADA — mesma cor do botão */

/* vermelho */
.destination:nth-child(1).is-selected .destination-cover{
  box-shadow:
    0 0 0 4px rgba(230,63,61,.98),
    0 0 26px rgba(230,63,61,.88);
}

/* amarelo */
.destination:nth-child(2).is-selected .destination-cover{
  box-shadow:
    0 0 0 4px rgba(255,218,76,.98),
    0 0 26px rgba(255,202,58,.88);
}

/* verde */
.destination:nth-child(3).is-selected .destination-cover{
  box-shadow:
    0 0 0 4px rgba(76,190,103,.98),
    0 0 26px rgba(76,190,103,.88);
}

/* azul */
.destination:nth-child(4).is-selected .destination-cover{
  box-shadow:
    0 0 0 4px rgba(62,140,232,.98),
    0 0 26px rgba(62,140,232,.88);
}

/* HOTSPOTS: invisíveis, apenas recebem clique */
.hotspot{
  position:absolute;
  z-index:20;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:transparent;
  cursor:pointer;
  opacity:0;
}

.hotspot:focus-visible{
  opacity:1;
  outline:4px solid rgba(255,255,255,.95);
  outline-offset:2px;
}

/* 4 botões grandes desenhados embaixo das capas */
.select{
  top:62.4%;
  width:5.3%;
  aspect-ratio:1/1;
  border-radius:50%;
}

.select-1{left:22.2%}
.select-2{left:39.3%}
.select-3{left:56.4%}
.select-4{left:73.6%}

/* setas laranja desenhadas nas laterais */
.hotspot-prev{
  left:10.3%;
  top:45.7%;
  width:5.7%;
  aspect-ratio:1/1;
  border-radius:50%;
}

.hotspot-next{
  right:9.6%;
  top:45.7%;
  width:5.7%;
  aspect-ratio:1/1;
  border-radius:50%;
}

/* VIAJAR grande central */
.hotspot-travel{
  left:40.4%;
  top:74.7%;
  width:19.2%;
  height:16.2%;
  border-radius:50%;
}

.hotspot-travel:disabled{
  cursor:default;
}

/* brinquedos da cabine */
.hotspot-bip{
  left:20.4%;
  top:82.4%;
  width:8.5%;
  height:11%;
}

.hotspot-lights{
  right:2.7%;
  top:77.5%;
  width:8.8%;
  height:14%;
}

.hotspot-turbo{
  right:18.1%;
  top:81.9%;
  width:7.3%;
  height:12%;
}

/* DECOLAGEM */
.nave-shell.is-shaking{
  animation:naveShake 1.15s linear;
}

.nave-shell.is-lit{
  filter:brightness(1.10) saturate(1.10);
}

.nave-shell.is-turbo{
  animation:naveTurbo .72s ease-in-out;
}

@keyframes naveShake{
  0%{transform:translate(0,0) rotate(0);}
  7%{transform:translate(-10px,5px) rotate(-.35deg);}
  14%{transform:translate(11px,-5px) rotate(.38deg);}
  21%{transform:translate(-9px,-5px) rotate(-.34deg);}
  28%{transform:translate(12px,4px) rotate(.40deg);}
  35%{transform:translate(-11px,5px) rotate(-.38deg);}
  42%{transform:translate(10px,-6px) rotate(.36deg);}
  49%{transform:translate(-12px,-4px) rotate(-.40deg);}
  56%{transform:translate(11px,6px) rotate(.38deg);}
  63%{transform:translate(-10px,4px) rotate(-.34deg);}
  70%{transform:translate(9px,-5px) rotate(.32deg);}
  77%{transform:translate(-8px,-4px) rotate(-.28deg);}
  84%{transform:translate(7px,3px) rotate(.24deg);}
  91%{transform:translate(-5px,-2px) rotate(-.18deg);}
  100%{transform:translate(0,0) rotate(0);}
}

@keyframes naveDarken{
  0%{opacity:0;}
  35%{opacity:.05;}
  60%{opacity:.28;}
  82%{opacity:.65;}
  100%{opacity:.96;}
}

@keyframes naveTurbo{
  0%,100%{
    transform:scale(1);
  }

  35%{
    transform:scale(1.006);
    filter:brightness(1.14);
  }

  60%{
    transform:scale(.997);
    filter:brightness(1.04);
  }
}

.nave-hint{
  margin:18px 0 0;
  color:var(--muted);
  text-align:center;
  font-size:.95rem;
  font-weight:800;
}


/* =========================================================
   CENA EXTERNA DE VOO
   Fica escondida até o JavaScript ativar.
========================================================= */

.flight-scene{
  position:absolute;

  left:0;
  top:28px;

  width:100%;
  aspect-ratio:16/9;

  overflow:hidden;

  z-index:100;

  border-radius:28px;

  background:#07183f;

  box-shadow:
    0 30px 70px rgba(7,17,48,.30);
}

.flight-scene[hidden]{
  display:none!important;
}


/* CÉU */

.flight-sky{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  display:block;
  overflow:hidden;
}

.flight-sky-image{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  display:block;

  object-fit:cover;

  transform:scale(1.04);

  user-select:none;
  pointer-events:none;

  will-change:transform;
}


/* FOGUETE */

.flight-rocket{
  position:absolute;

  left:50%;
  top:110%;

  width:27%;
  max-width:430px;
  height:auto;

  z-index:5;

  display:block;

  transform:
    translate(-50%,-50%)
    scale(.80);

  transform-origin:center center;

  opacity:0;

  user-select:none;
  pointer-events:none;

  filter:
    drop-shadow(0 18px 20px rgba(0,0,0,.34));

  will-change:
    top,
    transform,
    opacity;
}


/* =========================================================
   ANIMAÇÃO DA NAVE EXTERNA
   O JS vai adicionar .is-flying.
========================================================= */

.flight-scene.is-flying .flight-sky-image{
  animation:
    flightSkyMove 3.8s ease-in-out forwards;
}

.flight-scene.is-flying .flight-rocket{
  animation:
    flightRocket 3.8s
    cubic-bezier(.18,.65,.25,1)
    forwards;
}


/*
   A nave:
   1. surge por baixo
   2. sobe grande
   3. ganha altura
   4. vai ficando pequena
   5. desaparece no espaço
*/

@keyframes flightRocket{

  0%{
    top:112%;

    transform:
      translate(-50%,-50%)
      scale(.76)
      rotate(-1deg);

    opacity:0;
  }

  10%{
    opacity:1;
  }

  28%{
    top:63%;

    transform:
      translate(-50%,-50%)
      scale(.94)
      rotate(.8deg);

    opacity:1;
  }

  48%{
    top:40%;

    transform:
      translate(-50%,-50%)
      scale(.84)
      rotate(-.6deg);

    opacity:1;
  }

  68%{
    top:18%;

    transform:
      translate(-50%,-50%)
      scale(.62)
      rotate(.5deg);

    opacity:1;
  }

  84%{
    top:0%;

    transform:
      translate(-50%,-50%)
      scale(.38)
      rotate(-.3deg);

    opacity:1;
  }

  100%{
    top:-28%;

    transform:
      translate(-50%,-50%)
      scale(.14)
      rotate(0deg);

    opacity:.15;
  }
}


/*
   O céu mexe quase nada.
   É só para aumentar a sensação de deslocamento.
*/

@keyframes flightSkyMove{

  0%{
    transform:
      scale(1.04)
      translateY(0);
  }

  50%{
    transform:
      scale(1.07)
      translateY(1%);
  }

  100%{
    transform:
      scale(1.10)
      translateY(2%);
  }
}


@media(max-width:980px){

  .nave-stage{
    width:calc(100% - 16px);
  }

  .nave-shell{
    border-radius:20px;
  }

  .flight-scene{
    border-radius:20px;
  }
}


/* =========================================================
   MOBILE — SOMENTE telas até 720px
========================================================= */

@media(max-width:720px){

  .nave-stage{
    width:100%;
    margin:0 auto;
    padding:10px 0 38px;
  }

  .nave-shell{
    width:100%;
    max-width:100%;
    margin:0;
    aspect-ratio:9/16;
    border-radius:0;
    transform:none;
    transform-origin:center center;
  }

  .nave-art{
    width:100%;
    height:100%;
    object-fit:cover;
  }


  /* ========================================
     CAPAS MOBILE
  ======================================== */

  .destination-grid{
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:block;
  }

  .destination{
    position:absolute;
    left:31%;
    width:37.6%;
    height:16.3%;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .destination:nth-child(1){
    top:13.6%;
  }

  .destination:nth-child(2){
    top:32.5%;
  }

  .destination:nth-child(3){
    top:51.5%;
  }

  .destination:nth-child(4){
    top:70.3%;
  }

  .destination-cover{
    width:56%;
    height:92%;
    border-radius:5%;
    background:transparent;
  }

  .destination-cover img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:5%;
  }


  /* ========================================
     BOTÕES COLORIDOS MOBILE
  ======================================== */

  .select{
    width:9%;
    aspect-ratio:1/1;
    border-radius:50%;
  }

  .select-1{
    left:45.5%;
    top:27.25%;
  }

  .select-2{
    left:45.5%;
    top:45.9%;
  }

  .select-3{
    left:45.5%;
    top:64.85%;
  }

  .select-4{
    left:45.5%;
    top:81.85%;
  }


  /* ========================================
     MAIS HISTÓRIAS — BOTÃO DIREITO
  ======================================== */

  .hotspot-next{
    display:block;
    opacity:1;

    right:3.7%;
    top:45.1%;

    width:19.2%;
    aspect-ratio:1/1;

    border-radius:50%;
    background:transparent;
  }

  .hotspot-next::after{
    content:"MAIS  ›";

    position:absolute;
    left:50%;
    top:118%;

    transform:translateX(-50%);

    min-width:78px;
    padding:7px 14px;

    border:2px solid #b97828;
    border-radius:999px;

    background:
      linear-gradient(
        180deg,
        #fff8df 0%,
        #f4dfb4 100%
      );

    color:#74451f;

    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:900;
    letter-spacing:.12em;

    text-align:center;
    white-space:nowrap;

    box-shadow:
      0 3px 0 #9b5d22,
      0 7px 14px rgba(56,39,25,.22),
      inset 0 1px 0 rgba(255,255,255,.9);

    text-shadow:
      0 1px 0 rgba(255,255,255,.7);
  }

  .hotspot-next:active::after{
    transform:
      translateX(-50%)
      translateY(2px);

    box-shadow:
      0 1px 0 #9b5d22,
      0 4px 8px rgba(56,39,25,.18);
  }


  /* ========================================
     VIAJAR MOBILE
  ======================================== */

  .hotspot-travel{
    left:28%;
    top:87%;
    width:44%;
    height:11%;
    border-radius:28%;
  }


  /*
     Controles que ainda não usamos no mobile.
     O NEXT ficou ATIVO acima.
  */

  .hotspot-prev,
  .hotspot-bip,
  .hotspot-lights,
  .hotspot-turbo{
    display:none;
  }


  .nave-shell.is-shaking{
    animation:none;
  }


  .nave-hint{
    position:relative;
    z-index:2;
    margin-top:18px;
    padding:0 18px;
  }


  /* ========================================
     CENA DE VOO MOBILE
  ======================================== */

  .flight-scene{
    left:0;
    top:10px;

    width:100%;
    aspect-ratio:9/16;

    border-radius:0;
  }

  .flight-rocket{
    width:54%;
    max-width:none;
  }
}


@media(prefers-reduced-motion:reduce){

  .nave-shell,
  .destination-cover{
    animation:none!important;
    transition:none!important;
  }

  .flight-scene.is-flying .flight-sky-image,
  .flight-scene.is-flying .flight-rocket{
    animation:none!important;
  }
}