/* Kelluva sidosryhmäverkko. Liike on puhtaasti CSS-animaatiota (translate3d), jonka selain ajaa
   omalla säikeellään, joten se pysyy tasaisena vaikka sivun skripti olisi kiireinen.
   Skripti asettelee solmut vain kerran ja koon muuttuessa. */
.net { position: relative; width: 100%; max-width: 860px; margin: 36px auto 0; aspect-ratio: 16 / 10; }
.net svg { display: none; }
.net .ln { position: absolute; left: 0; top: 0; width: 1px; height: 2px; margin-top: -1px; background: var(--ink); opacity: .22; transform-origin: 0 50%; }
.net .n { --w: 190px; --ow: 260px; position: absolute; left: 0; top: 0; width: var(--w); margin: 0; padding: 12px 16px; border: 1.5px solid var(--ink); border-radius: calc(var(--r) + 8px); background: var(--bg); color: var(--ink); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: fx var(--dx, 9s) cubic-bezier(.45, 0, .55, 1) var(--ox, 0s) infinite alternate;
  box-shadow: var(--nsh, none); border-width: var(--nbw, 1.5px);
  transition: width var(--nt, 340ms) var(--ne, cubic-bezier(.23,1,.32,1)), scale var(--nt, 340ms) var(--ne, cubic-bezier(.23,1,.32,1)), translate var(--nt, 340ms) var(--ne, cubic-bezier(.23,1,.32,1)), box-shadow var(--nt, 340ms); }
.net .n.core { --w: 230px; --ow: 280px; background: var(--ink); color: var(--bg); padding: 16px 22px; }
.net .n b { display: block; font: 700 17px/1.15 var(--body); }
.net .n.core b { font: var(--hw) 26px/1.1 var(--head); }
.net .n > span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--soft); }
.net .n.core > span { color: var(--bg); opacity: .8; }
.net .more { display: grid; grid-template-rows: 0fr; opacity: 0; font-style: normal; font-size: 14px; line-height: 1.45; transition: grid-template-rows var(--nt, 340ms) var(--ne, cubic-bezier(.23,1,.32,1)), opacity calc(var(--nt, 340ms) * .7) var(--ne, cubic-bezier(.23,1,.32,1)), margin-top var(--nt, 340ms) var(--ne, cubic-bezier(.23,1,.32,1)); }
.net .more > div { overflow: hidden; min-height: 0; }
.net .more p { margin: 0; }
.net .more ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; }
.net .more li::marker { color: var(--soft); }
.net .n.open { --w: var(--ow); scale: var(--ns, 1.03); box-shadow: var(--nsh-open, 0 16px 32px -18px rgba(0,0,0,.35)); }
.net .n.open .more { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; transition-delay: 0s, 90ms, 0s; }
.net .n:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.net .nw { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; animation: fy var(--dy, 11s) cubic-bezier(.45, 0, .55, 1) var(--oy, 0s) infinite alternate; }
.net .nw.top { z-index: 6; }
.net .nw.fall { z-index: 5; }
/* muut solmut väistyvät: hento sumennus ja himmennys, avattu pysyy terävänä */
.net .n { transition-property: width, scale, translate, box-shadow, filter, opacity; }
.net.has-open .n:not(.open) { filter: blur(var(--nblur, 2px)); opacity: var(--nfade, .6); }
.net.has-open .ln, html[data-t] .net.has-open .ln { opacity: .05; }
.net .ln { transition: opacity var(--nt, 340ms); }
.net.off .n, .net.off .nw { animation-play-state: paused; }
.net .n.ghost { visibility: hidden; transition: none !important; animation: none !important; pointer-events: none; }
@keyframes fx { from { transform: translate3d(calc(-11px * var(--na, 1)), 0, 0); } to { transform: translate3d(calc(11px * var(--na, 1)), 0, 0); } }
@keyframes fy { from { transform: translate3d(0, calc(-10px * var(--na, 1)), 0); } to { transform: translate3d(0, calc(10px * var(--na, 1)), 0); } }
/* Toimialapallot: leijuvia ympyröitä ilman keskusta ja viivoja. Auki ne laajenevat kortiksi. */
.net.free { aspect-ratio: 16 / 8.6; max-width: 900px; }
.net.free .ln { display: none; }
.net.free .n { --w: 156px; --ow: 310px; --br: 78px; min-height: 156px; padding: 0 12px; border-radius: var(--br); display: flex; flex-direction: column; justify-content: center; text-align: center; hyphens: auto; overflow-wrap: anywhere;
  transition-property: width, scale, translate, box-shadow, filter, opacity, border-radius, padding, min-height; }
.net.free .n b { font-size: 16px; }
.net.free .n.open { --w: var(--ow); --br: 28px; padding: 18px 20px; }
.net.free .n.open .more { text-align: left; }
@media (max-width: 640px) {
  .net { aspect-ratio: 3 / 5.2; }
  .net.free { aspect-ratio: 3 / 5.6; }
  .net.free .n { --w: 124px; --ow: 244px; --br: 62px; min-height: 124px; padding: 0 8px; }
  .net.free .n.open { --w: var(--ow); padding: 14px 16px; }
  .net.free .n b { font-size: 15px; }
  .net .n { --w: 132px; --ow: 188px; padding: 10px 12px; min-height: 44px; } /* v2: kosketuskohde väh. 44 px */
  .net .n.core { --w: 150px; --ow: 200px; }
  .net .n > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .net .n { animation: none; } .net .nw { animation: none; } .net .n, .net .more { transition-duration: 1ms; } }

/* Suunta: Moderni = terävä ja nopea (Emil: pidättyvyys, lyhyt ease-out). Elegantti = pehmeä ja rauhallinen (Jakub: hienostunut viimeistely). */
html[data-t="moderni"] .net { --nd: .85; --na: .8; --nt: 220ms; --ns: 1.02; --nbw: 1px; --nsh: none; --nsh-open: 0 0 0 1px var(--ink); --nblur: 1.5px; --nfade: .6; }
html[data-t="moderni"] .net .ln { opacity: .3; height: 1px; margin-top: -.5px; }
html[data-t="elegantti"] .net { --nd: 1.6; --na: .9; --nt: 460ms; --ne: cubic-bezier(.16,1,.3,1); --ns: 1.04; --nbw: 1px; --nsh: 0 14px 28px -20px rgba(26,46,73,.35); --nsh-open: 0 26px 48px -22px rgba(26,46,73,.45); --nblur: 2px; --nfade: .55; }
html[data-t="elegantti"] .net .n { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
html[data-t="elegantti"] .net .n b { font-family: var(--head); font-weight: 500; font-size: 20px; letter-spacing: -.01em; }
html[data-t="elegantti"] .net .ln { opacity: .18; }

html[data-t="elegantti"] .net.free .n b { font-size: 18px; }

/* Tekijät: samat avautuvat kortit, mutta paikallaan (ei leijuntaa) */
.net.team { aspect-ratio: 16 / 6.2; max-width: 900px; }
.net.team .ln { display: none; }
.net.team .n, .net.team .nw { animation: none; }
.net.team .n { --w: 250px; --ow: 340px; }
@media (max-width: 640px) {
  .net.team { aspect-ratio: 3 / 3.7; }
  .net.team .n { --w: 150px; --ow: 230px; padding: 10px 12px; }
  .net.team .n > span { display: block; font-size: 13px; }
}