/* =========================================================
   motion.css – animationslager för startsidan
   Intro, ljusstrimmor och statisk systemöversikt.
   Bygger på variablerna i site.css.
   ========================================================= */


/* ---------- Ljusstrimmor ---------- */
.fx-host{position:relative;isolation:isolate}
.fx-ribbons{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
.home-hero .fx-ribbons{opacity:.95;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 82%,transparent 100%)}

/* ---------- Intro: tassen krymper in i loggan ---------- */
.fx-intro{position:fixed;inset:0;z-index:200;pointer-events:none;
  background:radial-gradient(55% 55% at 50% 48%,#1C4D3A 0%,var(--forest-deep) 58%,#07170F 100%)}
.fx-intro-brand{position:fixed;z-index:201;margin:0;pointer-events:none;color:#F4F8F4;transform-origin:50% 50%;will-change:transform}
.fx-intro-ico{position:relative;display:inline-grid;place-items:center;isolation:isolate;flex:none}
.fx-intro-tile{position:absolute;inset:-7px;z-index:-1;border-radius:12px;background:var(--mint);box-shadow:0 0 30px rgba(111,174,135,.45)}
html.fx-intro-on .header .brand{opacity:0}
.fx-intro-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.fx-intro-chip{position:fixed;left:0;top:0;z-index:202;display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:999px;white-space:nowrap;
  background:rgba(30,72,54,.72);border:1px solid rgba(207,227,209,.28);box-shadow:0 10px 30px -10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.12);
  color:#E3F2E7;font:500 .98rem/1 var(--font);letter-spacing:-.005em;opacity:0;will-change:transform,opacity}
.fx-intro-chip:before{content:"";width:8px;height:8px;border-radius:50%;background:#8FE0B4;box-shadow:0 0 10px #8FE0B4}
.fx-intro-cap{position:fixed;left:50%;z-index:202;display:grid;justify-items:center;gap:14px;transform:translateX(-50%);color:#CFE3D1;text-align:center;transition:opacity .35s ease,transform .35s ease}
.fx-intro-cap.is-out{opacity:0;transform:translate(-50%,8px)}
.fx-intro-tag{font:500 .9rem/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
.fx-intro-tag span{display:inline-block;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease;transition-delay:calc(450ms + var(--i) * 22ms)}
.fx-intro-cap.is-on .fx-intro-tag span{opacity:1;transform:none;filter:none}
.fx-intro-bar{position:relative;width:min(300px,64vw);height:2px;border-radius:2px;background:rgba(207,227,209,.16);overflow:hidden}
.fx-intro-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#6FAE87,#BFF5D6);box-shadow:0 0 12px #8FE0B4}
.fx-intro-cap.is-on .fx-intro-bar i{transform:scaleX(1);transition:transform 1.85s cubic-bezier(.45,.05,.25,1) .2s}
.fx-intro-status{position:relative;height:1em;width:300px;font:500 .78rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(207,227,209,.75)}
.fx-intro-status b{position:absolute;inset:0;font-weight:500;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .3s ease}
.fx-intro-cap.is-on .fx-intro-status b:nth-child(1){opacity:1;transform:none}
.fx-intro-cap.is-step2 .fx-intro-status b:nth-child(1){opacity:0;transform:translateY(-6px)}
.fx-intro-cap.is-step2 .fx-intro-status b:nth-child(2){opacity:1;transform:none}
.fx-intro-cap.is-step3 .fx-intro-status b:nth-child(2){opacity:0;transform:translateY(-6px)}
.fx-intro-cap.is-step3 .fx-intro-status b:nth-child(3){opacity:1;transform:none;color:#BFF5D6}
.fx-intro-cap.is-step3 .fx-intro-status b:nth-child(3):after{content:" \2713"}
@media(max-width:700px){.fx-intro-chip{font-size:.76rem;padding:6px 11px 6px 8px}.fx-intro-tag{font-size:.66rem;letter-spacing:.22em}}

/* ---------- Samlad systemöversikt, utan scrollstyrning ---------- */
.system-overview{padding:48px 0;background:radial-gradient(ellipse at 12% 15%,#1C4433,transparent 65%),var(--forest-deep);color:#C4D6C9}
.system-overview-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:20px}
.system-connect,.system-care{min-width:0;padding:28px 34px;border:1px solid rgba(207,227,209,.16);border-radius:var(--r-lg);background:rgba(22,57,42,.7)}
.system-overview .eyebrow{color:var(--accent);font-size:.7rem;margin-bottom:16px}
.system-overview h2{color:#fff;font-size:clamp(1.9rem,2.8vw,2.65rem);margin-bottom:16px;line-height:1.1}
.system-overview h2 span{color:var(--mint)}
.system-connect>p,.system-care>p{font-size:.98rem;line-height:1.65;margin-bottom:0}
.system-map{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);align-items:center;column-gap:110px;height:180px;margin:22px 0 18px}
.system-map svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.system-map path{fill:none;stroke:#6FAE87;stroke-opacity:.55;stroke-width:1;vector-effect:non-scaling-stroke}
.system-map .system-map-signal{stroke:var(--mint);stroke-opacity:.8;stroke-width:2;stroke-linecap:round;stroke-dasharray:1 99;animation:system-map-flow 7s linear infinite}
.system-map-signal:nth-of-type(3){animation-delay:-2.3s;animation-direction:reverse}
.system-map-signal:nth-of-type(4){animation-delay:-4.6s}
@keyframes system-map-flow{to{stroke-dashoffset:-100}}
.system-map-node{position:relative;justify-self:start;min-width:104px;padding:8px 12px;border:1px solid #426951;border-radius:10px;background:#163B2B;color:#D8E8DB;text-align:center;font-size:.8rem;line-height:1.4}
.system-map-node:nth-of-type(even){justify-self:end}
.system-map-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:68px;height:68px;background:var(--mint);border:7px solid #2D523D;border-radius:22px;box-shadow:0 0 0 1px rgba(207,227,209,.18)}
.system-map-center::after{content:"";position:absolute;inset:-8px;border:1px solid rgba(207,227,209,.3);border-radius:inherit;pointer-events:none;animation:system-map-breathe 5s ease-in-out infinite}
@keyframes system-map-breathe{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.65;transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.system-map .system-map-signal{display:none;animation:none}.system-map-center::after{animation:none}}
.system-contact{display:flex;flex-direction:column;gap:2px;padding-top:17px;border-top:1px solid rgba(207,227,209,.14);font-size:.83rem;color:#B7CCBE}
.system-contact strong{font-weight:550;color:#ECF3EC}
.system-care-list{margin:22px 0 0}
.system-care-list>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(207,227,209,.12);font-size:.84rem}
.system-care-list dt{color:#C4D6C9}
.system-care-list dd{margin:0;color:#E2EEE3;font-weight:500;text-align:right}
.system-care-list dd::before{content:"";display:inline-block;width:5px;height:5px;margin:0 8px 2px 0;border-radius:50%;background:var(--glow)}
.system-care .system-care-note{margin-top:18px;font-size:.83rem;color:#B7CCBE}
.system-start{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;margin-top:20px;padding:24px 34px;border-radius:var(--r-lg);background:var(--mint);color:#3B5A4A}
.system-start .eyebrow{color:var(--primary);margin-bottom:10px}
.system-start h2{color:var(--forest-deep);font-size:clamp(1.5rem,2.1vw,2rem);margin-bottom:10px}
.system-start p{font-size:.9rem;max-width:65ch;margin-bottom:0}
.system-start-actions{display:flex;flex-direction:column;align-items:center;gap:13px}
.system-start-actions .button{white-space:nowrap;font-size:.88rem}
.system-offer-link{font-size:.83rem;color:var(--forest);text-decoration:underline;text-underline-offset:4px;font-weight:550}
.system-offer-link span{display:inline-block;margin-left:5px}
.system-offer-link:hover{color:var(--primary)}
.system-overview + .spotlight-section{padding-top:clamp(56px,7vw,96px)}
@media(max-width:1000px){
  .system-connect,.system-care{padding:26px}
  .system-map{column-gap:76px}
  .system-map-node{min-width:88px;font-size:.72rem;padding:8px}
  .system-map-center{width:60px;height:60px;border-width:6px;border-radius:19px}
  .system-start{padding:26px;gap:24px}
}
@media(max-width:760px){
  .system-overview{padding:44px 0}
  .system-overview-grid{grid-template-columns:1fr;gap:16px}
  .system-connect,.system-care{padding:24px}
  .system-overview h2{font-size:1.9rem}
  .system-map{max-width:500px;margin-inline:auto}
  .system-start{grid-template-columns:1fr;gap:22px;margin-top:16px;padding:24px}
  .system-start h2{font-size:1.65rem}
  .system-start-actions{align-items:flex-start}
}
@media(max-width:380px){
  .system-connect,.system-care,.system-start{padding:20px}
  .system-map{column-gap:60px}
  .system-map-node{min-width:76px;font-size:.66rem;padding:8px 5px}
  .system-map-center{width:50px;height:50px;border-radius:16px}
  .system-map-center img{width:32px;height:32px}
  .system-care-list>div{font-size:.76rem;gap:8px}
  .system-start-actions .button{white-space:normal}
}
/* ---------- Slutkortet växer ut ur en ruta ---------- */
.cta-final.fx-grow-pending{clip-path:inset(46% 46% 46% 46% round 18px)}
.cta-final.fx-grow-pending > *{opacity:0}

html.fx-lite .cta-final.fx-grow-pending{clip-path:none}
html.fx-lite .cta-final.fx-grow-pending > *{opacity:1}

/* Täcker sidan direkt vid första besöket tills introt tar över (sätts i <head>) */
html.fx-pre::after{content:"";position:fixed;inset:0;z-index:199;background:radial-gradient(55% 55% at 50% 48%,#1C4D3A 0%,#0E2A20 58%,#07170F 100%)}
html.fx-pre::after{animation:fx-pre-out .3s 3.6s forwards}
@keyframes fx-pre-out{to{opacity:0;visibility:hidden}}