/* Norgrid Oy – Lenis + GSAP -animaatioiden tyylit */

/* Lenis hoitaa pehmeän vierityksen, joten selaimen oma smooth-scroll pois */
html.lenis, html.lenis body { height: auto; }
html { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Piilotetaan animoitavat elementit ennen kuin GSAP ottaa ne hallintaan (vältetään välähdys).
   main.js / motion.js poistaa luokan, jos kirjastot eivät lataudu. */
html.motion-ready .hero .kicker,
html.motion-ready .hero h1,
html.motion-ready .hero .lead,
html.motion-ready .hero .btn-row,
html.motion-ready .hero-art,
html.motion-ready .site-header .brand,
html.motion-ready .site-header .main-nav,
html.motion-ready .site-header .nav-toggle { visibility: hidden; }

/* Vierityksen edistymispalkki */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
  background: var(--orange); transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* Kiinteä yläpalkki, joka piiloutuu alas vieritettäessä */
.site-header { position: sticky; top: 0; z-index: 40; transition: box-shadow .3s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 16, 56, 0.25); }
.site-header .brand img { transition: width .3s ease; }
@media (min-width: 901px) {
  .site-header.is-scrolled { padding-top: 12px; padding-bottom: 12px; }
  .site-header.is-scrolled .brand img { width: 132px; height: auto; }
}
.site-header { transition: box-shadow .3s ease, padding .3s ease; }

/* Navigaation alleviivaus */
.main-nav a:not(.btn) { position: relative; }
@media (min-width: 901px) {
  .main-nav a:not(.btn):hover { text-decoration: none; }
  .main-nav a:not(.btn):not(.lang a)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--orange); transform: scaleX(0); transform-origin: right center;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1);
  }
  .main-nav a:not(.btn):hover::after,
  .main-nav a.is-active::after { transform: scaleX(1); transform-origin: left center; }
}

/* Painikkeiden mikrointeraktiot */
.btn { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn--primary:hover { box-shadow: 0 10px 24px rgba(230, 110, 0, 0.32); }
.btn--green:hover, .btn--green:focus-visible { box-shadow: 0 10px 24px rgba(11, 143, 63, 0.38); }

/* Hero: taustan hehku */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; z-index: -1; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
  right: -12vw; top: 50%; transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(36, 87, 230, 0.35), rgba(11, 143, 63, 0.06) 60%, transparent);
  pointer-events: none;
}
.hero-art img { will-change: transform; }

/* SplitText-rivien maski */
.line-mask { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* Kortit */
.service, .partner, .example, .facts li, .model, .vv-services li, .post { will-change: transform; }
.partner { transition: box-shadow .3s ease; }
.partner:hover { box-shadow: 0 16px 36px rgba(0, 16, 56, 0.10); }
.partner-logo { transition: scale .4s ease; }
.partner:hover .partner-logo { scale: 1.04; }


/* Koulutuksen aiheiden viivat piirretään animaatiolla */
.topics li { position: relative; border-bottom-color: transparent; }
.topics li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--navy-line); transform-origin: left center; transform: scaleX(var(--line, 1));
}

/* Pilotti-osion viivat */
.pilot { position: relative; border-color: transparent; }
.pilot::before, .pilot::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--border);
  transform: scaleX(var(--line, 1)); transform-origin: left center;
}
.pilot::before { top: 0; }
.pilot::after { bottom: 0; transform-origin: right center; }

@media (prefers-reduced-motion: reduce) {
  html.motion-ready * { visibility: visible !important; }
  .scroll-progress { display: none; }
}

/* Lisätietoja-alavalikon linkit ilman yläpalkin alleviivausanimaatiota */
.main-nav .nav-sub a::after { content: none; }

/* Heron koriste-elementit: pyöristetyt vinoneliöt tekstipalstan oikealla puolella.
   Alue alkaa 64 px tekstipalstan (max 640 px) oikeasta reunasta ja leikkaa sisältönsä,
   joten muodot eivät koskaan liiku tekstin päälle. */
.hero > .wrap { position: relative; z-index: 1; }
.hero-shapes {
  position: absolute; top: 0; bottom: 0; right: 0; z-index: 0;
  left: calc(5% + max(0px, (90% - 1200px) / 2) + 640px + 64px);
  overflow: hidden; pointer-events: none;
}
.hero-shape { position: absolute; will-change: transform; }
.hero-shape svg { display: block; width: 100%; height: auto; overflow: visible; will-change: transform; }
.hero-shape--a { width: clamp(260px, 26vw, 420px); right: -7%; top: 10%; }
.hero-shape--b { width: clamp(190px, 19vw, 300px); right: 3%; top: 46%; }
html.motion-ready .hero-shapes { visibility: hidden; }
@media (max-width: 1100px) { .hero-shapes { display: none; } }

/* Heron vinoneliöiden hover: sama tuntuma kuin oransseissa painikkeissa
   (vaalenee, hehkuu ja vetää kohti osoitinta). Vain muodot ottavat hiiren vastaan,
   ei koko alue, joten teksti ja painikkeet toimivat normaalisti. */
@media (hover: hover) and (pointer: fine) {
  .hero-shape { pointer-events: auto; transition: filter .3s ease; }
  .hero-shape:hover { filter: brightness(1.2) drop-shadow(0 10px 24px rgba(124, 154, 240, 0.45)); }
}

/* ---------- Preloader (istunnon ensimmäinen sivulataus) ---------- */
.preloader { display: none; }
html.show-preloader .preloader {
  display: flex; position: fixed; inset: 0; z-index: 10000;
  align-items: center; justify-content: center; background: var(--navy);
  /* Varmistus: jos skriptit eivät lataudu, preloader poistuu itsestään */
  animation: pl-failsafe .5s ease 5s forwards;
}
@keyframes pl-failsafe { to { opacity: 0; visibility: hidden; } }
.pl-logo { position: relative; width: min(560px, 76vw); aspect-ratio: 1069 / 475; will-change: transform; }
.pl-logo > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-cable-blue {
  background: var(--blue);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.pl-lines { overflow: visible; }
/* Alkutilat jo CSS:ssä, jottei valmis logo välähdä ennen kuin preloader.js ehtii ajoon */
html.show-preloader .pl-cable-blue { opacity: 0; }
html.show-preloader .pl-cable-white { clip-path: inset(0% 100% 0% 0%); }
html.show-preloader .pl-lines { visibility: hidden; }
html.show-preloader .pl-text { clip-path: inset(0% 0% 100% 0%); }
html.show-preloader .pl-final { opacity: 0; visibility: hidden; }

/* Yläpalkin linkit muuttuvat oransseiksi hoverissa (ei alavalikon linkit, joiden tausta on valkoinen) */
.main-nav > a:not(.btn) { transition: color .2s ease; }
.main-nav > a:not(.btn):hover,
.main-nav > a:not(.btn):focus-visible { color: var(--orange); }