/* styles.css — Containerfabrikken.no
   Delte stilregler som gjelder på tvers av alle sider.
*/

/* ════════════════════════════════════════════
   BUTTON HOVER STATES
   Mørkere hover-versjon av samme farge — globalt.
   Bruker attribute-selectors så ingen HTML-filer
   trenger å endres.
   ════════════════════════════════════════════ */

/* Primær CTA — burgundy → mørkere burgundy */
a[style*="background-color:#8B2F2F"],
a[style*="background:#8B2F2F"],
button[style*="background-color:#8B2F2F"],
button[style*="background:#8B2F2F"] {
  transition: background-color 0.15s ease !important;
}
a[style*="background-color:#8B2F2F"]:hover,
a[style*="background:#8B2F2F"]:hover,
button[style*="background-color:#8B2F2F"]:hover,
button[style*="background:#8B2F2F"]:hover {
  background-color: #6E1F1F !important;
}

/* Ghost på mørk bakgrunn — 10% → 20% hvit opacity */
a[style*="background:rgba(255,255,255,0.1)"]:hover,
button[style*="background:rgba(255,255,255,0.1)"]:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Sekundær på mørk bakgrunn — 8% → 15% hvit opacity */
a[style*="background:rgba(255,255,255,0.08)"]:hover,
button[style*="background:rgba(255,255,255,0.08)"]:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ════════════════════════════════════════════
   NAVBAR LINK HOVER
   Lyser opp fra 80% → 100% hvit + underline slide-in
   ════════════════════════════════════════════ */
header nav a[style*="color:rgba(255,255,255,0.8)"] {
  position: relative;
  text-decoration: none;
  transition: color 0.18s ease;
}
header nav a[style*="color:rgba(255,255,255,0.8)"]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1.5px;
  background: rgba(255,255,255,0.6);
  transition: width 0.2s ease;
}
header nav a[style*="color:rgba(255,255,255,0.8)"]:hover {
  color: #fff !important;
}
header nav a[style*="color:rgba(255,255,255,0.8)"]:hover::after {
  width: 100%;
}

/* ════════════════════════════════════════════
   SCROLL-REVEAL
   Styres av IntersectionObserver i main.js.
   data-animate: start usynlig, glir opp ved inntreden.
   data-delay: 1–4 for stagget timing.
   ════════════════════════════════════════════ */
[data-animate] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate][data-delay="1"] { transition-delay: 0.10s; }
[data-animate][data-delay="2"] { transition-delay: 0.20s; }
[data-animate][data-delay="3"] { transition-delay: 0.30s; }
[data-animate][data-delay="4"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Undertrykk overgangsanimasjon ved prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  a[style*="background-color:#8B2F2F"],
  a[style*="background:#8B2F2F"],
  button[style*="background-color:#8B2F2F"],
  button[style*="background:#8B2F2F"] {
    transition-duration: 0.01ms !important;
  }
}