/* KLITRO — bevægelse. Langsom, blød og redaktionel som tidevandet.
   Kun aktiv når <html> har .motion; alt er slået fra ved prefers-reduced-motion. */
:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-ease-soft:cubic-bezier(.33,1,.68,1);--m-ease-pop:cubic-bezier(.16,1,.3,1);--m-ease-io:cubic-bezier(.76,0,.24,1);--m-fade:1.1s;--m-move:1.45s;--m-clip:1.75s;--m-rise:38px;--m-stagger:110;--m-line-stagger:130;--m-char-stagger:30;--m-word-stagger:70;--m-settle:1900}

/* ---------- 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%}}
}

/* ---------- KLITRO ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  :root{--m-progress:var(--navy)}

  /* Intro: ordmærket træder frem, og tæppet trækker sig op som tidevand */
  .motion.intro #intro{background:var(--navy);color:#fff;clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--m-ease-io)}
  .motion.intro #intro.is-leaving{clip-path:inset(0 0 100% 0)}
  #intro .intro-inner{display:grid;justify-items:center;gap:24px;transition:translate 1.05s var(--m-ease-io),opacity .6s ease}
  #intro.is-leaving .intro-inner{translate:0 -70px;opacity:0}
  #intro .intro-word{font-family:var(--serif);font-size:clamp(36px,5.2vw,68px);line-height:1;letter-spacing:.32em;margin-right:-.32em}
  #intro .intro-word span{display:inline-block;opacity:0;translate:0 .55em;filter:blur(6px);animation:k-letter 1.1s var(--m-ease) forwards;animation-delay:calc(var(--i) * 75ms + 120ms)}
  #intro .intro-line{display:block;width:clamp(90px,10vw,140px);height:1px;background:rgb(255 255 255 / .55);scale:0 1;animation:k-line 1.2s var(--m-ease) .5s forwards}
  #intro .intro-sub{font-size:12px;letter-spacing:.32em;text-transform:uppercase;opacity:0;animation:m-appear 1s ease .75s forwards}
  @keyframes k-letter{to{opacity:1;translate:0 0;filter:blur(0)}}
  @keyframes k-line{to{scale:1 1}}

  /* Header */
  .motion .site-header[data-smart-header]{position:fixed;left:0;right:0;background-color:rgb(255 255 255 / 0);transition:transform .7s var(--m-ease),background-color .45s ease,box-shadow .45s ease,color .45s ease}
  .motion .site-header.is-scrolled{background-color:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);box-shadow:0 1px 0 var(--line)}
  .motion #site-nav.is-open>*{animation:m-rise-in .7s var(--m-ease) backwards}
  .motion #site-nav.is-open>:nth-child(2){animation-delay:.05s}
  .motion #site-nav.is-open>:nth-child(3){animation-delay:.1s}
  .motion #site-nav.is-open>:nth-child(4){animation-delay:.15s}

  /* Links: linjen tegnes ind og bølger igennem */
  .motion .text-link{border-bottom-color:transparent;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px}
  .motion .text-link span[aria-hidden],.motion .button span[aria-hidden]{display:inline-block;transition:transform .6s var(--m-ease)}
  .motion .scroll-cue span{animation:k-bob 2.8s var(--m-ease-soft) infinite}
  .motion [data-reveal=clip][data-clip=frame]:not(.is-in){clip-path:inset(9% 7% 9% 7% round 22px 22px 22px 22px / 22px 22px 22px 22px)}
  .motion [data-reveal=clip][data-clip=frame]>img{transition-duration:2.6s}
  @keyframes k-bob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(5px)}}

  /* Knapper: farven stiger op nedefra */
  .motion .button{position:relative;isolation:isolate;overflow:hidden}
  .motion .button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--sweep,var(--navy));transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s var(--m-ease)}
  .motion .button-navy{--sweep:#2f5c67}
  .motion .button-sand{--sweep:#fff}

  /* Værelser */
  .motion .room-tabs{position:relative}
  .motion .room-tabs.has-indicator button[aria-selected=true]:after{display:none}
  .tab-indicator{position:absolute;left:0;bottom:-1px;width:0;height:4px;background:var(--navy);pointer-events:none}
  .tab-indicator.is-ready{transition:transform .8s var(--m-ease),width .8s var(--m-ease)}
  .motion .room-tabs button{transition:color .4s ease}
  .motion .room-image{transition:object-position 1.6s var(--m-ease)}

  /* Planlægger og dialoger */
  .motion .dialog[open]>*{animation:m-rise-in .9s var(--m-ease) backwards}
  .motion .dialog[open]>:nth-child(2){animation-delay:.07s}
  .motion .dialog[open]>:nth-child(3){animation-delay:.13s}
  .motion .dialog[open]>:nth-child(4){animation-delay:.19s}
  .motion .dialog[open]>:nth-child(5){animation-delay:.25s}
  .motion .dialog[open]>:nth-child(n+6){animation-delay:.31s}
  .motion .walk-ideas li{animation:m-rise-in .9s var(--m-ease) backwards}
  .motion .walk-ideas li:nth-child(1){animation-delay:.3s}
  .motion .walk-ideas li:nth-child(2){animation-delay:.4s}
  .motion .walk-ideas li:nth-child(3){animation-delay:.5s}
  .motion .plan-recap:not([hidden]){animation:m-rise-in .9s var(--m-ease)}
  .motion .plan-recap:not([hidden]) dl>div{animation:m-rise-in .8s var(--m-ease) backwards}
  .motion .plan-recap:not([hidden]) dl>div:nth-child(1){animation-delay:.12s}
  .motion .plan-recap:not([hidden]) dl>div:nth-child(2){animation-delay:.18s}
  .motion .plan-recap:not([hidden]) dl>div:nth-child(3){animation-delay:.24s}
  .motion .plan-recap:not([hidden]) dl>div:nth-child(4){animation-delay:.3s}
  .motion .plan-recap:not([hidden]) dl>div:nth-child(5){animation-delay:.36s}
  .motion .plan-recap:not([hidden]) dl>div:nth-child(6){animation-delay:.42s}
  .motion .form-errors:not([hidden]){animation:m-shake .6s var(--m-ease-soft)}
  .motion .field :is(input,select,textarea){transition:border-color .3s ease,box-shadow .4s var(--m-ease)}
  .motion .field :is(input,select,textarea):focus{box-shadow:0 8px 24px -14px rgb(23 56 65 / .55)}
  .motion .close-button{transition:background-color .3s ease,transform .6s var(--m-ease)}
}

@media screen and (prefers-reduced-motion:no-preference) and (hover:hover){
  .motion #site-nav>a,.motion .plain-button{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:background-size .7s var(--m-ease),color .3s ease}
  .motion .plain-button{background-position:0 calc(100% - 8px)}
  .motion #site-nav>a:hover,.motion .plain-button:hover{background-size:100% 1px}
  .motion .text-link:hover{animation:m-underline 1s var(--m-ease)}
  .motion .text-link:hover span[aria-hidden],.motion .button:not(:disabled):hover span[aria-hidden]{transform:translateX(5px)}
  .motion #download-plan:not(:disabled):hover span[aria-hidden]{transform:translateY(3px)}
  .motion .button:not(:disabled):hover::before{transform:scaleY(1)}
  .motion .button-outline:hover{background:transparent}
  .motion .button-navy:hover{background:var(--navy)}
  .motion .button-sand:hover{background:var(--sand)}
  .motion .close-button:hover{transform:rotate(90deg)}
}