/* ===================================================================
   Visorium Studio — experience.css
   Filmiska scroll-/interaktionslager (endast CSS, ingen JS krävs).
   Laddas efter styles.css. Allt är progressiv förbättring – om en
   webbläsare saknar stöd händer inget trasigt, bara mindre effekt.
   Respekterar prefers-reduced-motion.
   =================================================================== */

/* ---- 1. Scroll-progressbar högst upp ----
   Använder CSS scroll-timeline där det finns; annars visas ingen bar. */
html::before{
  content:"";position:fixed;top:0;left:0;height:3px;width:100%;z-index:300;
  transform-origin:0 50%;transform:scaleX(var(--scrollp,0)); /* JS-fallback via experience.js */
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 10px rgba(45,142,255,.35);
}
@supports (animation-timeline: scroll()){
  html::before{
    animation:aura-progress linear;
    animation-timeline:scroll(root);
  }
}
@keyframes aura-progress{to{transform:scaleX(1)}}

/* ---- 2. Filmisk scroll-reveal med mjuk blur ----
   Bygger vidare på .reveal (styles.css sätter .in via IntersectionObserver). */
.reveal{
  filter:blur(10px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
}
.reveal.in{filter:blur(0)}

/* ---- 3. Kort: mjuk 3D-lyft + glans-svep vid hover ---- */
.card{will-change:transform}
.card{transition:transform .35s var(--ease),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px) scale(1.012)}
.card .card-icon{transition:transform .35s var(--ease),box-shadow .3s}
.card:hover .card-icon{transform:translateY(-2px) scale(1.06);box-shadow:0 0 22px -6px rgba(45,142,255,.45)}

/* Glans-svep över knappar */
.btn-accent{position:relative;overflow:hidden}
.btn-accent::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);
}
.btn-accent:hover::after{left:130%}

/* ---- 4. Stat-siffror & eyebrow får en subtil glöd (levande UI) ---- */
.stat-num{text-shadow:0 0 18px rgba(45,142,255,.2)}
.eyebrow .dot{animation:aura-pulse 2.6s ease-in-out infinite}
@keyframes aura-pulse{0%,100%{box-shadow:0 0 0 4px var(--accent-soft)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.05)}}

/* ---- 5. Process-steg tonar in i sekvens (vänster → höger) ---- */
.steps .step{transition:transform .4s var(--ease),background .3s}
.steps .step:hover{background:rgba(255,255,255,.85)}
.steps .step.reveal:nth-child(1){transition-delay:0ms}
.steps .step.reveal:nth-child(2){transition-delay:140ms}
.steps .step.reveal:nth-child(3){transition-delay:280ms}
.steps .step.reveal:nth-child(4){transition-delay:420ms}
.steps .step.reveal:nth-child(5){transition-delay:560ms}

/* ---- 6. 3D-tilt med glans (styrs av experience.js) ----
   Kortet lutar mot muspekaren; .tilt-glare är ljusglansen som följer den. */
.card,.work{transform-style:preserve-3d}
.card .tilt-glare,.work .tilt-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(380px circle at var(--glare-x,50%) var(--glare-y,50%),
    rgba(255,255,255,.22),transparent 62%);
  opacity:0;transition:opacity .3s var(--ease);
}
.card:hover .tilt-glare,.work:hover .tilt-glare{opacity:1}

/* ---- 7. Magnetiska knappar (styrs av experience.js) ---- */
.magnetic{translate:var(--mag-x,0) var(--mag-y,0);transition:translate .25s var(--ease)}

/* ---- 8. Aurora-glöd som följer muspekaren (skapas av experience.js) ---- */
.aura-cursor{
  position:fixed;top:0;left:0;z-index:1;pointer-events:none;
  width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(45,142,255,.07) 0%,rgba(15,168,201,.04) 40%,transparent 70%);
  filter:blur(14px);opacity:0;transition:opacity .6s var(--ease);
}
.aura-cursor.is-on{opacity:1}

/* ---- 9. Reducerad rörelse: stäng av allt rörligt ---- */
@media(prefers-reduced-motion:reduce){
  html::before{display:none}
  .reveal{filter:none;transition:none}
  .card,.btn-accent::after,.eyebrow .dot{transition:none;animation:none}
  .card:hover{transform:none}
  .tilt-glare,.aura-cursor{display:none}
  .magnetic{translate:none;transition:none}
}