/* style.css - RR Business Custom Styles */

/* --- 1. NAPIT (Apple Blue) --- */
/* Pakotetaan kirkas sininen ja pyöristetyt kulmat */

html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%; /* Estää iOS:ää muuttamasta tekstin kokoa itsestään */
}
.apple-btn {
  background-color: #0071e3 !important;
  color: #ffffff !important;
  border-radius: 9999px;
  font-weight: 600;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.apple-btn:hover {
  background-color: #0077ed !important;
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.4);
}

.apple-btn:active {
  transform: scale(0.98);
}

/* --- 2. KORTIT (Glassmorphism & Depth) --- */
/* PÄIVITETTY: Flexbox varmistaa että kortit ovat saman korkuisia ja napit alhaalla */
.apple-card {
  background: rgba(255, 255, 255, 0.95); /* Vaalea tausta */
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Pehmeä varjo */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  /* Nämä rivit korjaavat layoutin gridissä: */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Tummassa tilassa kortit */
.dark .apple-card {
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.apple-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.dark .apple-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

/* Lisätiedot-osion nuolen pehmeä kääntyminen */
.detail-toggle svg {
  transition: transform 0.3s ease;
}

/* --- 3. NAVIGAATIO (Blur effect) --- */
.glass-nav {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s ease;
}

.dark .glass-nav {
  background: rgba(0, 0, 0, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- 4. MOBIILIVALIKKO (Korjaus) --- */
/* Tämä estää valikon aukeamisen desktopilla tai itsestään */
#mobile-menu {
  display: none;
}

#mobile-menu.menu-visible {
  display: flex !important;
}

/* Varmistus: Piilota aina jos ruutu on leveä (Desktop/Tablet) */
@media (min-width: 768px) {
  #mobile-menu,
  #mobile-menu.menu-visible {
      display: none !important;
  }
}

/* --- 5. LOMAKKEEN KENTÄT --- */
.apple-input {
  width: 100%;
  padding: 16px 20px;
  border-radius: 12px;
  background-color: #f2f2f7;
  border: 1px solid transparent;
  outline: none;
  font-size: 15px;
  color: #1d1d1f;
  transition: all 0.2s ease;
}

.dark .apple-input {
  background-color: #2c2c2e;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.apple-input:focus {
  background-color: #ffffff;
  border-color: #0071e3;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.dark .apple-input:focus {
  background-color: #3a3a3c;
}

textarea.apple-input {
  resize: none;
}

/* --- 6. VALINTAPILLERIT (Lomake) --- */
.type-pill {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
  background-color: #f5f5f7;
  color: #1d1d1f;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  user-select: none;
  border: 1px solid transparent;
}

.dark .type-pill {
  background-color: #2c2c2e;
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.type-pill:hover {
  background-color: #e5e5ea;
}

.type-pill.active {
  background-color: #0071e3 !important;
  color: white !important;
  box-shadow: 0 4px 10px rgba(0, 113, 227, 0.3);
}

/* --- 7. ANIMAATIOT --- */

/* Scroll Reveal (Elementit liukuvat esiin) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Taustan kelluvat pallot */
@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}

.animate-float {
  animation: float 20s ease-in-out infinite;
}

/* UKK / FAQ Animaatio */
.faq-answer {
  transition: max-height 0.4s ease-out;
}
.faq-icon {
  transition: transform 0.3s ease;
}

/* Apu-luokka piilotukseen */
.hidden-custom {
  display: none !important;
}
/* --- 8. LISÄTYT HIENOSÄÄDÖT (OSIO 4) --- */

/* Kelluvien valopallojen animaatio */
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -50px) scale(1.1); }
  66% { transform: translate(-20px, 20px) scale(0.9); }
}

.animate-float-slow {
  animation: float-slow 15s ease-in-out infinite;
}

/* Korttien dynaaminen hover-efekti */
.apple-card {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow;
}

.apple-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12) !important;
  border-color: rgba(0, 113, 227, 0.3) !important;
}

/* Tekstien porrastettu ilmestyminen (Stagger) */
.reveal-child {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active .reveal-child {
  opacity: 1;
  transform: translateY(0);
}
/* Estää automaattisen zoomauksen lomakkeissa iPhonella */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  textarea,
  select {
      font-size: 16px !important;
  }
}

/* Taustamuotojen perusasetukset */
#background-elements {
  filter: blur(80px); /* Pehmentää reunoja */
  opacity: 0.3; /* Tekee elementeistä läpikuultavia */
}

.background-shape-1,
.background-shape-2,
.background-shape-3 {
  width: 300px;
  height: 300px;
  border-radius: 50%; /* Pyöreitä muotoja */
  position: absolute;
  animation: moveShapes 20s infinite alternate ease-in-out; /* Animaatio */
}

/* Muoto 1: Ylävasen */
.background-shape-1 {
  background: linear-gradient(45deg, #FF6B6B, #534FFF); /* Vaaleanpunainen-sininen */
  top: -50px;
  left: -50px;
  animation-delay: 0s;
  transform: translate(0, 0) scale(1);
}

/* Muoto 2: Keskusta */
.background-shape-2 {
  background: linear-gradient(135deg, #1ABC9C, #3498DB); /* Turkoosi-sininen */
  top: 30%;
  left: 40%;
  animation-delay: 7s; /* Eri viive eri liikkeelle */
  transform: translate(0, 0) scale(1.1);
}

/* Muoto 3: Ala-oikea */
.background-shape-3 {
  background: linear-gradient(90deg, #F39C12, #E67E22); /* Oranssi-keltainen */
  bottom: -50px;
  right: -50px;
  animation-delay: 14s;
  transform: translate(0, 0) scale(0.9);
}

/* Avainruudut animaatiolle */
@keyframes moveShapes {
  0% {
      transform: translate(0, 0) scale(1);
  }
  33% {
      transform: translate(50px, -80px) scale(1.1);
  }
  66% {
      transform: translate(-50px, 80px) scale(0.9);
  }
  100% {
      transform: translate(0, 0) scale(1);
  }
}

/* Varmistetaan, että dark mode muuttaa värejä tai piilottaa tarvittaessa */
/* Taustamuotojen perusasetukset - Laskettu näkyvyyttä ja lisätty sumua */
#background-elements {
  filter: blur(120px); /* Enemmän sumua = hienovaraisempi */
  opacity: 0.15; /* Erittäin matala näkyvyys, jotta teksti nousee esiin */
}

.background-shape-1,
.background-shape-2,
.background-shape-3 {
  width: 45vw; /* Suurempi koko tekee väriliu'usta tasaisemman */
  height: 45vw;
  border-radius: 50%;
  position: absolute;
  animation: moveShapes 25s infinite alternate ease-in-out;
}

/* Muoto 1: Syvä laivastonsininen */
.background-shape-1 {
  background: radial-gradient(circle, #1a2a6c, #26d0ce00);
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

/* Muoto 2: Murrettu harmaa/sininen */
.background-shape-2 {
  background: radial-gradient(circle, #2c3e50, #00000000);
  top: 40%;
  right: -5%;
  animation-delay: -5s;
}

/* Muoto 3: Erittäin tumma violetti/musta */
.background-shape-3 {
  background: radial-gradient(circle, #0f0c29, #302b6300);
  bottom: -10%;
  left: 20%;
  animation-delay: -10s;
}

/* Pehmeämpi ja hitaampi liike */
@keyframes moveShapes {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { transform: translate(10%, 15%) rotate(10deg) scale(1.1); }
}

/* Dark mode - vieläkin tummempi */
body.dark #background-elements {
  opacity: 0.12;
}
/* Varmistetaan logon fonttien painot */
.font-semibold { font-weight: 600; }
.font-light { font-weight: 300; }

/* Group-hover efekti Solutions-osalle */
.group:hover .text-appleBlue {
    color: #534FFF; /* Käytetään brändiväriäsi */
}

/* Partikkelianimaatio */
/* --- KORJATTU PARTIKKELIANIMAATIO --- */

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  20% {
    opacity: 0.8; /* NOSTETTU: Oli 0.2 -> Nyt 0.6 jotta näkyy */
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(-120vh) scale(1.2); /* KORJATTU: px -> vh (liikkuu koko ruudun läpi) */
  }
}

.particle {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(59, 130, 246, 0.4); /* VARMISTUS: Sininen väri jos Tailwind-luokka ei toimi */
  animation-name: floatUp;
  animation-timing-function: linear; /* Muutettu: Linear tekee liikkeestä tasaisempaa */
  animation-iteration-count: infinite;
  pointer-events: none;
  z-index: 1; /* Varmistetaan että on background-shape elementtien päällä */
}
/* --- PREMIUM DARK MINIMALIST STYLES --- */

/* Input-kenttä: Tumma tausta, vaalea teksti */
.minimal-input {
  background-color: rgba(255, 255, 255, 0.03); /* Todella tumma läpinäkyvä */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Hienovarainen reunus */
  color: #ffffff !important; /* Pakota valkoinen teksti */
  transition: all 0.2s ease;
}

/* Kun kenttä valitaan */
.minimal-input:focus, .minimal-input:focus-within {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3); /* Kirkkaampi reuna valittaessa */
  outline: none;
}

/* Placeholder teksti (himmeä harmaa) */
.minimal-input::placeholder {
  color: #6b7280; 
}

/* Painike: Valkoinen (kontrasti tummaa vasten) */
.minimal-btn {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-weight: 700;
  border: none;
  transition: transform 0.2s, opacity 0.2s;
}

.minimal-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.minimal-btn:active {
  transform: translateY(0);
}
/* --- SUCCESS ANIMATION --- */
@keyframes successPop {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-success-pop {
  animation: successPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }