/* OMDREJNING — bevægelse. Hurtig, kontant og kinetisk som et gearskift.
   Kun aktiv når <html> har .motion; alt er slået fra ved prefers-reduced-motion. */
:root{--m-ease:cubic-bezier(.22,1,.36,1);--m-ease-soft:cubic-bezier(.25,1,.5,1);--m-ease-pop:cubic-bezier(.34,1.56,.64,1);--m-ease-io:cubic-bezier(.83,0,.17,1);--m-fade:.6s;--m-move:.95s;--m-clip:1.15s;--m-rise:56px;--m-stagger:75;--m-line-stagger:90;--m-char-stagger:24;--m-word-stagger:50;--m-settle:1500}

/* ---------- Kerne ---------- */
.m-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.m-line,.m-line-inner{display:block}
.m-word{display:inline-block;white-space:nowrap}
.m-char,.wave-char{display:inline-block;white-space:pre}
.media-mask{position:relative;overflow:hidden;min-width:0}
.media-mask>img{display:block;transform-origin:50% 50%}
#intro,.scroll-progress,.cursor-bubble{display:none}

@media screen and (prefers-reduced-motion:no-preference){
  .motion .m-line{clip-path:inset(-.3em -.6em -.32em -.6em)}
  .motion [data-reveal=words] .m-line{clip-path:none}
  .motion [data-reveal]{--d:0ms}
  .motion .media-mask>img{scale:var(--ms,1)}
  .motion .media-mask>[data-parallax]{--ms:1.14;will-change:transform}

  .motion [data-magnetic]{transform:translate3d(var(--mx,0px),var(--my,0px),0);transition:transform .8s cubic-bezier(.23,1.6,.4,1),color .35s,background-color .35s,border-color .35s}
  .motion [data-magnetic].is-magnet{transition:transform .25s var(--m-ease),color .35s,background-color .35s,border-color .35s}

  .motion :is([data-reveal=lines],[data-reveal=chars],[data-reveal=words]):not([data-split]){opacity:0}
  .motion :is([data-reveal=""],[data-reveal=up],[data-reveal=down],[data-reveal=left],[data-reveal=right],[data-reveal=fade],[data-reveal=pop],[data-reveal=blur]){transition:opacity var(--m-fade) var(--m-ease-soft) var(--d),translate var(--m-move) var(--m-ease) var(--d),scale var(--m-move) var(--m-ease-pop) var(--d),filter var(--m-move) var(--m-ease) var(--d)}
  .motion :is([data-reveal=""],[data-reveal=up]):not(.is-in){opacity:0;translate:0 var(--m-rise)}
  .motion [data-reveal=down]:not(.is-in){opacity:0;translate:0 calc(var(--m-rise) * -1)}
  .motion [data-reveal=left]:not(.is-in){opacity:0;translate:calc(var(--m-rise) * -1) 0}
  .motion [data-reveal=right]:not(.is-in){opacity:0;translate:var(--m-rise) 0}
  .motion [data-reveal=fade]:not(.is-in){opacity:0}
  .motion [data-reveal=pop]:not(.is-in){opacity:0;scale:.86}
  .motion [data-reveal=blur]:not(.is-in){opacity:0;filter:blur(12px);translate:0 calc(var(--m-rise) * .5)}

  .motion [data-reveal=lines] .m-line-inner{translate:0 130%;transition:translate var(--m-move) var(--m-ease) calc(var(--d) + var(--li) * var(--m-line-stagger) * 1ms)}
  .motion [data-reveal=chars] .m-char{translate:0 130%;transition:translate var(--m-move) var(--m-ease) calc(var(--d) + var(--ci) * var(--m-char-stagger) * 1ms)}
  .motion [data-reveal=words] .m-word{opacity:0;filter:blur(10px);translate:0 .45em;transition:opacity var(--m-fade) var(--m-ease-soft) calc(var(--d) + var(--wi) * var(--m-word-stagger) * 1ms),filter var(--m-move) var(--m-ease) calc(var(--d) + var(--wi) * var(--m-word-stagger) * 1ms),translate var(--m-move) var(--m-ease) calc(var(--d) + var(--wi) * var(--m-word-stagger) * 1ms)}
  .motion [data-reveal].is-in :is(.m-line-inner,.m-char,.m-word){translate:none;opacity:1;filter:none}

  .motion [data-reveal=clip]{clip-path:inset(100% 0 0 0 round 0 0 0 0 / 0 0 0 0);transition:clip-path var(--m-clip) var(--m-ease) var(--d)}
  .motion [data-reveal=clip][data-clip=left]{clip-path:inset(0 100% 0 0 round 0 0 0 0 / 0 0 0 0)}
  .motion [data-reveal=clip][data-clip=right]{clip-path:inset(0 0 0 100% round 0 0 0 0 / 0 0 0 0)}
  .motion [data-reveal=clip].is-in{clip-path:inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0)}
  .motion [data-reveal=clip].is-settled{clip-path:none}
  .motion [data-reveal=clip]>img{scale:calc(var(--ms,1) + .22);transition:scale calc(var(--m-clip) + .5s) var(--m-ease) var(--d)}
  .motion [data-reveal=clip].is-in>img{scale:var(--ms,1)}

  .motion [data-reveal=draw] :is(path,circle,line,polyline,polygon,rect){stroke-dasharray:1;stroke-dashoffset:1.001;transition:stroke-dashoffset 1.6s var(--m-ease-soft) var(--d)}
  .motion [data-reveal=draw].is-in :is(path,circle,line,polyline,polygon,rect){stroke-dashoffset:0}
  .motion [data-reveal=draw].is-settled :is(path,circle,line,polyline,polygon,rect){stroke-dasharray:none}

  .motion [data-reveal=rule]{position:relative;border-top-color:transparent}
  .motion [data-reveal=rule]::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--m-rule,currentColor);scale:0 1;transform-origin:0 50%;transition:scale var(--m-clip) var(--m-ease) var(--d)}
  .motion [data-reveal=rule].is-in::before{scale:1 1}

  .motion .scroll-progress{display:block;position:fixed;left:0;right:0;top:0;height:var(--m-progress-height,2px);z-index:60;pointer-events:none;background:var(--m-progress,currentColor);transform:scaleX(0);transform-origin:0 50%}
  .motion.intro #intro{display:flex;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center;overflow:hidden}

  .motion [data-smart-header]{position:sticky;top:0;z-index:20;transition:transform .7s var(--m-ease),background-color .45s ease,box-shadow .45s ease}
  .motion [data-smart-header].is-hidden{transform:translateY(-102%)}

  .motion .wave-char{will-change:transform}
  .motion .is-waving .wave-char{animation:m-wave .7s var(--m-ease) calc(var(--wi) * 32ms)}

  .motion dialog[open]{animation:m-dialog-in .8s var(--m-ease)}
  .motion dialog[open]::backdrop{animation:m-fade-in .5s ease}
  .motion dialog.is-closing{pointer-events:none}
  .motion dialog.is-closing::backdrop{opacity:0;transition:opacity .32s ease}

  @keyframes m-dialog-in{from{opacity:0;transform:translateY(34px) scale(.975)}}
  @keyframes m-fade-in{from{opacity:0}}
  @keyframes m-rise-in{from{opacity:0;transform:translateY(20px)}}
  @keyframes m-appear{to{opacity:1}}
  @keyframes m-shake{0%{opacity:0;transform:translateX(0)}20%{opacity:1;transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}100%{transform:none}}
  @keyframes m-wave{0%,100%{transform:none}40%{transform:translateY(-.14em)}}
  @keyframes m-underline{0%{background-size:100% 1px;background-position:100% 100%}45%{background-size:0 1px;background-position:100% 100%}46%{background-size:0 1px;background-position:0 100%}100%{background-size:100% 1px;background-position:0 100%}}
}

/* ---------- OMDREJNING ---------- */
.spin-badge{display:none}

@media screen and (prefers-reduced-motion:no-preference){
  :root{--m-progress:var(--lime);--m-progress-height:4px}
  .motion .scroll-progress{box-shadow:0 1px 0 var(--ink)}

  /* Intro: hjulet snurrer, ordet slår op, og limefladen trækkes væk */
  .motion.intro #intro{background:var(--lime);color:var(--ink);transition:transform .95s var(--m-ease-io)}
  .motion.intro #intro.is-leaving{transform:translateY(-101%)}
  #intro .intro-inner{display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:0 22px;transition:translate .95s var(--m-ease-io)}
  #intro.is-leaving .intro-inner{translate:0 32vh}
  #intro .intro-wheel{width:clamp(44px,7vw,104px);height:clamp(44px,7vw,104px);fill:none;stroke:var(--ink);stroke-linecap:round;animation:o-pop .8s var(--m-ease-pop) both,o-spin 1.15s linear infinite}
  #intro .intro-word{font-family:var(--display);font-size:clamp(40px,9.5vw,150px);line-height:1;letter-spacing:-.02em;overflow:hidden;padding:.08em 0;white-space:nowrap}
  #intro .intro-word span{display:inline-block;translate:0 115%;animation:o-rise .75s var(--m-ease) forwards;animation-delay:calc(var(--i) * 38ms + 140ms)}
  @keyframes o-pop{from{scale:0}}
  @keyframes o-spin{to{rotate:360deg}}
  @keyframes o-rise{to{translate:0 0}}

  /* Header og navigation */
  .motion .site-header.is-scrolled{box-shadow:0 1px 0 rgb(22 24 21 / .14)}
  .motion .main-nav.is-open>*{animation:m-rise-in .6s var(--m-ease) backwards}
  .motion .main-nav.is-open>:nth-child(2){animation-delay:.05s}
  .motion .main-nav.is-open>:nth-child(3){animation-delay:.1s}
  .motion .main-nav.is-open>:nth-child(4){animation-delay:.15s}
  .motion .is-waving .wave-char{animation:o-wave .55s var(--m-ease) calc(var(--wi) * 26ms)}
  @keyframes o-wave{0%,100%{transform:none}35%{transform:translateY(-.13em) rotate(-5deg)}}

  /* Knapper: limefarven fejer ind fra venstre */
  .motion .button{position:relative;isolation:isolate;overflow:hidden}
  .motion .button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sweep,var(--lime));transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--m-ease-io)}
  .motion .button-lime{--sweep:var(--ink)}
  .motion :is(.planner,.closing-cta) .button-dark{--sweep:var(--white)}
  .motion .text-link{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px}
  .motion .main-nav>a:not(.button){background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px;transition:background-size .45s var(--m-ease)}

  /* Hero: limefladen fejer hen over billedet og afslører det */
  .motion [data-reveal=clip][data-clip=wipe]{clip-path:none}
  .motion [data-reveal=clip][data-clip=wipe]::after{content:"";position:absolute;inset:0;z-index:2;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
  .motion [data-reveal=clip][data-clip=wipe].is-in::after{animation:o-wipe 1.25s var(--m-ease-io) var(--d) both}
  .motion [data-reveal=clip][data-clip=wipe]>img{opacity:0}
  .motion [data-reveal=clip][data-clip=wipe].is-in>img{opacity:1;transition:opacity 0s linear calc(var(--d) + .62s),scale 1.7s var(--m-ease) calc(var(--d) + .62s)}
  @keyframes o-wipe{0%{transform:scaleX(0);transform-origin:0 50%}49%{transform:scaleX(1);transform-origin:0 50%}51%{transform:scaleX(1);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}

  .motion .spin-badge{display:grid;place-items:center;position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(16px,3vw,44px);z-index:3;width:clamp(104px,11vw,168px);aspect-ratio:1;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 18px 40px -18px rgb(0 0 0 / .55)}
  .motion .spin-badge[data-reveal]{transition:opacity .35s ease var(--d),scale 1s var(--m-ease-pop) var(--d),rotate 1.3s var(--m-ease) var(--d)}
  .motion .spin-badge[data-reveal]:not(.is-in){opacity:0;scale:0;rotate:-140deg}
  .motion .spin-badge .badge-ring{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;stroke:none}
  .motion .spin-badge .badge-ring text{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:.08em}
  .motion .spin-badge .badge-arrow{width:32%;height:32%;stroke-width:1.7}
  .motion .hero-image .hotspot{opacity:0;scale:.4;transition:opacity .35s ease,scale .7s var(--m-ease-pop)}
  .motion .hero-image.is-in .hotspot{opacity:1;scale:1;transition-delay:calc(var(--d) + 1.2s + var(--hi,0) * 130ms)}

  /* Rullebånd */
  .motion .manifesto.is-marquee{padding-left:0;padding-right:0;overflow:hidden;justify-content:flex-start}
  .marquee-track{display:flex;flex:none;width:max-content;will-change:transform}
  .marquee-group{display:flex;flex:none;align-items:center;gap:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px)}
  .marquee-group p{white-space:nowrap}

  /* Sektionsoverskrift: linjen tegnes */
  .motion .section-index[data-reveal]:after{scale:0 1;transform-origin:0 50%;transition:scale 1.1s var(--m-ease) calc(var(--d) + .15s)}
  .motion .section-index[data-reveal].is-in:after{scale:1 1}

  /* Harmonika */
  .motion .service-list details.is-animating .service-detail{overflow:hidden}
  .motion summary svg{transition:rotate .55s var(--m-ease)}
  .motion details[open]:not(.is-closing) summary svg{rotate:180deg}
  .motion details[open] .plus-vertical{display:inline}
  .motion summary .plus-vertical{transform-box:fill-box;transform-origin:50% 50%;transition:scale .45s var(--m-ease)}
  .motion details[open]:not(.is-closing) .plus-vertical{scale:1 0}
  .motion summary h3{transition:translate .5s var(--m-ease)}
  .motion .add-service svg{transition:transform .45s var(--m-ease)}

  /* Planlægger */
  .motion .bike-options span{background:linear-gradient(var(--ink),var(--ink)) no-repeat 50% 100%/100% 0 transparent;transition:background-size .45s var(--m-ease),background-color .2s ease,color .3s ease}
  .motion .bike-options input:hover+span{background:linear-gradient(var(--ink),var(--ink)) no-repeat 50% 100%/100% 0 rgba(22,24,21,.09)}
  .motion .bike-options input:checked+span{background:linear-gradient(var(--ink),var(--ink)) no-repeat 50% 100%/100% 100% transparent}
  .motion .bike-options input:checked:hover+span{background:linear-gradient(#353A2D,#353A2D) no-repeat 50% 100%/100% 100% transparent}
  .motion .service-options input:checked{animation:o-check .45s var(--m-ease-pop)}
  .motion .service-options input:checked:after{animation:o-tick .4s var(--m-ease) .05s backwards}
  @keyframes o-check{40%{scale:1.25}}
  @keyframes o-tick{from{opacity:0;transform:translateY(-1px) rotate(-45deg) scale(.2)}}
  .motion .form-error:not([hidden]){animation:m-shake .55s var(--m-ease-soft)}
  .motion .note-field textarea{transition:box-shadow .35s var(--m-ease),background-color .3s ease}
  .motion .note-field textarea:focus{background-color:rgb(255 255 255 / .35);box-shadow:4px 4px 0 var(--ink)}
  .motion .selection-status{transition:opacity .3s ease}

  /* Trin */
  .motion .steps li[data-reveal]{position:relative;border-bottom-color:transparent}
  .motion .steps li[data-reveal]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--rule);scale:0 1;transform-origin:0 50%;transition:scale 1.1s var(--m-ease) calc(var(--d) + .1s)}
  .motion .steps li[data-reveal].is-in::after{scale:1 1}
  .motion .steps li[data-reveal]:last-child::after{display:none}
  .motion .steps li[data-reveal] .step-number{transition:opacity .6s ease calc(var(--d) + .12s),translate .9s var(--m-ease) calc(var(--d) + .12s)}
  .motion .steps li[data-reveal]:not(.is-in) .step-number{opacity:0;translate:-24px 0}

  /* Dialoger */
  .motion .dialog[open]>*{animation:m-rise-in .7s var(--m-ease) backwards}
  .motion .dialog[open]>:nth-child(2){animation-delay:.06s}
  .motion .dialog[open]>:nth-child(3){animation-delay:.11s}
  .motion .dialog[open]>:nth-child(4){animation-delay:.16s}
  .motion .dialog[open]>:nth-child(5){animation-delay:.21s}
  .motion .dialog[open]>:nth-child(n+6){animation-delay:.26s}
  .motion .plan-dialog[open] .plan-recap>div{animation:m-rise-in .7s var(--m-ease) backwards}
  .motion .plan-dialog[open] .plan-recap>div:nth-child(1){animation-delay:.2s}
  .motion .plan-dialog[open] .plan-recap>div:nth-child(2){animation-delay:.27s}
  .motion .plan-dialog[open] .plan-recap>div:nth-child(3){animation-delay:.34s}
  .motion .download-status:not(:empty){animation:m-rise-in .5s var(--m-ease)}
  .motion .icon-button{transition:background-color .25s ease,transform .5s var(--m-ease)}

  @keyframes o-arrow-diag{0%{transform:none;opacity:1}45%{transform:translate(110%,-110%);opacity:0}46%{transform:translate(-70%,70%);opacity:0}100%{transform:none;opacity:1}}
  @keyframes o-arrow-right{0%{transform:none;opacity:1}45%{transform:translateX(110%);opacity:0}46%{transform:translateX(-70%);opacity:0}100%{transform:none;opacity:1}}
}

@media screen and (prefers-reduced-motion:no-preference) and (hover:hover){
  .motion .button:hover::before{transform:scaleX(1);transform-origin:0 50%}
  .motion .button-dark:hover{background:var(--ink);color:var(--ink)}
  .motion .button-lime:hover{background:var(--lime);color:var(--lime)}
  .motion .button:hover .arrow-diag{animation:o-arrow-diag .65s var(--m-ease-io)}
  .motion .button:hover .arrow-right{animation:o-arrow-right .65s var(--m-ease-io)}
  .motion .add-service:hover svg{transform:translateX(6px)}
  .motion .main-nav>a:not(.button):hover{text-decoration:none;background-size:100% 2px}
  .motion .text-link:hover{text-decoration:none;animation:m-underline .9s var(--m-ease)}
  .motion summary:hover h3{translate:10px 0}
  .motion .icon-button:hover{transform:rotate(90deg)}
}