/*
 * Seilvind – rolig bevegelse med lav visuell støy.
 * Transform og opacity brukes for å unngå layoutforskyvning.
 * Siden fungerer uten JavaScript, og redusert bevegelse respekteres.
 */

/* Litt dybde og rytme ved første innlasting. */
@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow {
    animation: seilvind-enter .55s .06s cubic-bezier(.21,.8,.25,1) both;
  }
  .hero h1 {
    animation: seilvind-enter .7s .14s cubic-bezier(.21,.8,.25,1) both;
  }
  .hero .lead {
    animation: seilvind-enter .7s .23s cubic-bezier(.21,.8,.25,1) both;
  }
  .hero .prompt {
    animation: seilvind-enter .75s .33s cubic-bezier(.21,.8,.25,1) both;
  }
  .hero .hero-legal,
  .hero .chips,
  .hero .hero-bottom {
    animation: seilvind-enter .65s .48s cubic-bezier(.21,.8,.25,1) both;
  }
  .hero .product {
    animation: seilvind-preview-enter .9s .25s cubic-bezier(.18,.78,.18,1) both;
  }

  /* Nesten umerkelig liv i den illustrerte eksempelsiden. */
  .product-glow {
    animation: seilvind-glow 11s ease-in-out infinite;
    will-change: opacity, transform;
  }
  .web-art .art-orb {
    animation: seilvind-orb 12s ease-in-out infinite;
    will-change: transform;
  }
  .decor-star {
    display: inline-block;
    animation: seilvind-star 15s ease-in-out infinite;
  }
  .preview-dot {
    animation: seilvind-live 3.6s ease-in-out infinite;
  }
  .hero::before {
    animation: seilvind-ring 16s ease-in-out infinite;
  }

  /* Scroll-reveal er kun aktiv etter at JS har initialisert observeren. */
  .motion-ready [data-reveal] {
    opacity: 0;
    transform: translate3d(0,24px,0);
    transition:
      opacity .7s cubic-bezier(.2,.74,.22,1),
      transform .7s cubic-bezier(.2,.74,.22,1);
    transition-delay: var(--reveal-delay,0ms);
  }
  .motion-ready [data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

/* Interaksjoner er korte, og kun på pekere som kan holde musepekeren over. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .nav-cta,
  .cta,
  .chip,
  .step,
  .browser {
    transition:
      transform .27s cubic-bezier(.2,.75,.2,1),
      box-shadow .27s ease,
      background-color .27s ease,
      border-color .27s ease;
  }
  .nav-cta:hover,
  .cta:hover { transform: translateY(-3px); box-shadow: 0 11px 24px #164c3a25; }
  .nav-cta:active,
  .cta:active { transform: translateY(0); }
  .cta svg { transition: transform .22s ease; }
  .cta:hover svg { transform: translateX(4px); }
  .chip:hover { transform: translateY(-2px); border-color: #badcc7; box-shadow: 0 6px 16px #1f684014; }
  .step:hover { transform: translateY(-6px); border-color: #c7dfcc; box-shadow: 0 20px 36px #265c4818; }
  .product:hover .browser { transform: translateY(-4px); box-shadow: 0 32px 78px rgba(29,75,65,.16); }
}

/* Bytte mellom frisør, kafé og håndverker har en kort bekreftende overgang. */
.switch button {
  transition: background-color .24s ease, color .24s ease, box-shadow .24s ease;
}

@keyframes seilvind-enter {
  from { opacity: 0; transform: translate3d(0,20px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes seilvind-preview-enter {
  from { opacity: 0; transform: translate3d(16px,26px,0) scale(.97); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes seilvind-glow {
  0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: .68; transform: scale(1.045); }
}
@keyframes seilvind-orb {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-12px,10px,0); }
}
@keyframes seilvind-star {
  0%, 100% { opacity: .8; transform: rotate(-8deg) scale(1); }
  50% { opacity: 1; transform: rotate(12deg) scale(1.07); }
}
@keyframes seilvind-live {
  0%, 100% { box-shadow: 0 0 0 4px #cdecdf; }
  50% { box-shadow: 0 0 0 7px #cdecdf55; }
}
@keyframes seilvind-ring {
  0%, 100% { transform: translate3d(0,0,0) rotate(-4deg); }
  50% { transform: translate3d(-18px,10px,0) rotate(5deg); }
}

/* Aldri la visning av innhold avhenge av animasjon når bruker ønsker ro. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero .eyebrow,
  .hero h1,
  .hero .lead,
  .hero .prompt,
  .hero .hero-legal,
  .hero .chips,
  .hero .hero-bottom,
  .hero .product,
  .product-glow,
  .web-art .art-orb,
  .decor-star,
  .preview-dot,
  .hero::before { animation: none !important; }
  .nav-cta,.cta,.chip,.step,.browser,.switch button { transition: none !important; }
}