/* Startsidan (design: Startsida meetemmi v2.dc.html). Det mesta ligger som stilar i index.html, precis som i designen.
   Här: hovring, animationer och det som designen räknade ut i JS efter fönstrets bredd. */
html { scroll-behavior: smooth; }
html, body { margin: 0; background: #F7F8FA; }
a { color: #0C0E12; text-decoration: none; }
a:hover { color: #3A4BE0; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #3A4BE0; outline-offset: 2px; }
#chatt-form input:focus-visible { outline: none; }
input::placeholder { color: #8A909A; }

@keyframes meIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mePop { 0% { opacity: 0; transform: translate(-50%,12px) scale(.8); } 60% { opacity: 1; transform: translate(-50%,-3px) scale(1.03); } 100% { opacity: 1; transform: translate(-50%,0) scale(1); } }
@keyframes meBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mePopL { 0% { opacity: 0; transform: translateY(12px) scale(.86); } 60% { opacity: 1; transform: translateY(-2px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes meDot { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* Gestaltens rörelser (samma som i app/public/styles.css) */
@keyframes gRot { to { transform: rotate(360deg) } }
@keyframes gBreath { 0%,100% { transform: scale(1) } 50% { transform: scale(1.035) } }
@keyframes gBeckon { 0%,62%,100% { transform: scale(1) } 74% { transform: scale(1.055) } 86% { transform: scale(.992) } }
@keyframes gRipple { 0% { transform: scale(1); opacity: .6 } 100% { transform: scale(1.6); opacity: 0 } }

.h-svart { transition: transform .15s, background .2s; }
.h-svart:hover { background: #23262D !important; color: #fff !important; }
.h-svart:active { transform: scale(.98); }
.h-chip:hover { box-shadow: 0 0 0 1px rgba(12,14,18,.2) !important; }
.h-kansla { transition: transform .15s; }
.h-kansla:active { transform: scale(.95); }

/* Pratbubblorna: en rad när det får plats, annars radbryts de i stället för att klippas på mobilen */
#hero-say { top: var(--say-top, 520px); }
.say { width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; white-space: normal; }

/* Sidhuvudet */
.nav-full { display: none !important; }
.cta-nav { padding: 0 18px; }
@media (min-width: 1000px) { .nav-full { display: flex !important; } }
@media (max-width: 419px) { .cta-nav { padding: 0 14px; } }

/* Demosamtalet i toppen: vid sidan av Emmi på bred skärm, annars staplat över henne */
.demo-sida { display: none; }
@media (min-width: 1180px) { .demo-sida { display: block; } .demo-stack { display: none !important; } }

/* Lär-sektionen */
#lar-ruta { grid-template-columns: minmax(0,1fr); }
.lar-filer { min-height: 250px; }
.lar-chatt { min-height: 230px; }
@media (min-width: 900px) {
  #lar-ruta { grid-template-columns: minmax(0,1fr) 320px minmax(0,1fr); }
  .lar-filer { min-height: 300px; }
  .lar-chatt { min-height: 200px; }
}

/* Jag ser ut som ni */
.form-rutnat { max-width: 100%; grid-template-columns: minmax(0,1fr); grid-template-areas: 'emmi' 'head' 'gal'; }
.form-head { align-items: center; text-align: center; }
.form-scen { height: 200px; }
.galleri { gap: 20px; justify-content: flex-start; }
.g-kort { width: 252px; }
@media (min-width: 700px) {
  .form-rutnat { max-width: 1180px; grid-template-columns: minmax(0,1fr) 220px; grid-template-areas: 'head emmi' 'gal gal'; }
  .form-head { align-items: flex-start; text-align: left; }
  .form-scen { height: 240px; }
  .galleri { gap: 28px; }
}
@media (min-width: 1200px) { .galleri { justify-content: center; } }
@media (min-width: 1460px) {
  .form-rutnat { max-width: 1480px; grid-template-columns: minmax(0,1fr) 300px; grid-template-areas: 'head emmi' 'gal emmi'; }
  .form-scen { height: 420px; }
  .galleri { gap: 24px; justify-content: flex-start; }
  .g-kort { width: 240px; }
}
.galleri { scrollbar-width: none; }
.galleri::-webkit-scrollbar { display: none; }

/* Emmi bakom priset */
.pris-peek { right: -24px; bottom: calc(100% - 64px); }
.pris-say { right: 24px; }
@media (min-width: 900px) {
  .pris-peek { right: -90px; bottom: calc(100% - 96px); }
  .pris-say { right: auto; left: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}