/* FORM & RO — bevægelse. Blød, taktil og rolig som ler, der formes.
   Kun aktiv når <html> har .motion; alt er slået fra ved prefers-reduced-motion. */
:root{--m-ease:cubic-bezier(.19,1,.22,1);--m-ease-soft:cubic-bezier(.33,1,.68,1);--m-ease-pop:cubic-bezier(.19,1,.22,1);--m-ease-io:cubic-bezier(.65,0,.35,1);--m-fade:1.3s;--m-move:1.6s;--m-clip:1.9s;--m-rise:30px;--m-stagger:120;--m-line-stagger:140;--m-char-stagger:32;--m-word-stagger:80;--m-settle:2000}

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

/* ---------- FORM & RO ---------- */
.product-mask{display:block}

@media screen and (prefers-reduced-motion:no-preference){
  :root{--m-progress:var(--ink)}

  /* Intro: en vase tegnes med én linje, og rummet åbner sig blødt */
  .motion.intro #intro{background:var(--canvas);color:var(--ink);transition:opacity 1s ease,visibility 0s linear 1s}
  .motion.intro #intro.is-leaving{opacity:0;visibility:hidden}
  #intro .intro-inner{display:grid;justify-items:center;gap:22px;transition:scale 1.2s var(--m-ease),filter 1s ease}
  #intro.is-leaving .intro-inner{scale:1.08;filter:blur(10px)}
  #intro .intro-vase{width:clamp(84px,9vw,124px);height:auto;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
  #intro .intro-vase path{stroke-dasharray:1;stroke-dashoffset:1.001;animation:f-draw 1.5s var(--m-ease-io) .1s forwards}
  #intro .intro-vase path+path{animation-delay:.9s;animation-duration:.6s}
  #intro .intro-word{font-family:var(--serif);font-size:clamp(28px,3.4vw,46px);letter-spacing:.04em;opacity:0;translate:0 14px;filter:blur(6px);animation:f-rise 1.2s var(--m-ease) .7s forwards}
  @keyframes f-draw{to{stroke-dashoffset:0}}
  @keyframes f-rise{to{opacity:1;translate:0 0;filter:blur(0)}}

  /* Lerets struktur: et næsten usynligt korn over hele siden */
  .motion body::after{content:"";position:fixed;inset:-60%;z-index:70;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .18 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");animation:f-grain 1.4s steps(5) infinite}
  @keyframes f-grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(5%,-7%)}60%{transform:translate(-3%,8%)}80%{transform:translate(7%,3%)}100%{transform:translate(0,0)}}

  /* Header */
  .motion .site-header[data-smart-header]{background:var(--canvas);box-shadow:0 0 0 100vmax var(--canvas);clip-path:inset(0 -100vmax)}
  .motion .site-header nav.is-open a{animation:m-rise-in .8s var(--m-ease) backwards}
  .motion .site-header nav.is-open a:nth-child(2){animation-delay:.06s}
  .motion .site-header nav.is-open a:nth-child(3){animation-delay:.12s}
  .motion .menu-toggle span{display:inline-block;transition:rotate .6s var(--m-ease)}
  .motion .menu-toggle[aria-expanded=true] span{rotate:180deg}

  /* Knapper: farven stiger op som en bue */
  .motion .button{position:relative;isolation:isolate;overflow:hidden}
  .motion .button::before{content:"";position:absolute;inset:-1px;z-index:-1;background:var(--sweep,#7a4247);border-radius:50% 50% 0 0/60% 60% 0 0;transform:translateY(101%);transition:transform .85s var(--m-ease),border-radius .85s var(--m-ease)}
  .motion .button-outline{--sweep:var(--ink)}
  .motion .button span[aria-hidden]{display:inline-block;transition:transform .6s var(--m-ease)}
  .motion .text-link{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/100% 1px;padding-bottom:2px}

  /* Billeder: åbner sig som en bue */
  .motion [data-reveal=clip][data-clip=arch]:not(.is-in){clip-path:inset(34% 24% 0 24% round 50% 50% 0 0 / 38% 38% 0 0)}
  .motion [data-reveal=rule]>*{opacity:0;transition:opacity 1.2s ease calc(var(--d) + .45s)}
  .motion [data-reveal=rule].is-in>*{opacity:1}
  .motion :is(.hero-media figcaption,.collection-note)[data-reveal=rule]{--m-rule:var(--rule);color:transparent;transition:color 1.2s ease calc(var(--d) + .45s)}
  .motion :is(.hero-media figcaption,.collection-note)[data-reveal=rule].is-in{color:var(--muted)}
  .motion .footer-bottom[data-reveal=rule]{--m-rule:var(--rule)}

  /* Kollektionen */
  .motion .filters{position:relative}
  .motion .filters.has-indicator .filter.active:after{display:none}
  .filter-indicator{position:absolute;top:0;bottom:0;left:0;z-index:-1;width:0;border-radius:999px;background:var(--ink);pointer-events:none}
  .motion .filters.has-indicator .filter.active{background:transparent}
  .filter-indicator.is-ready{transition:transform .8s var(--m-ease),width .8s var(--m-ease)}
  .motion .filter{transition:color .35s ease}
  .motion .product[data-reveal] .product-mask{clip-path:inset(100% 0 0 0);transition:clip-path var(--m-clip) var(--m-ease) var(--d)}
  .motion .product[data-reveal].is-in .product-mask{clip-path:inset(0)}
  .motion .product[data-reveal] .product-image{scale:1.3;transition:scale calc(var(--m-clip) + .4s) var(--m-ease) var(--d),transform 1.2s var(--m-ease),filter .4s ease}
  .motion .product[data-reveal].is-in .product-image{scale:1}
  .motion .product[data-reveal] :is(.product-heading,.product-material){opacity:0;translate:0 18px;transition:opacity 1s ease calc(var(--d) + .35s),translate 1.3s var(--m-ease) calc(var(--d) + .35s)}
  .motion .product[data-reveal].is-in :is(.product-heading,.product-material){opacity:1;translate:none}
  .motion .product-arrow{transition:transform .7s var(--m-ease)}
  .motion .cursor-bubble{display:block;position:fixed;left:0;top:0;z-index:65;pointer-events:none}
  .cursor-bubble span{display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--ink);color:var(--canvas);font-family:var(--serif);font-size:15px;scale:0;transition:scale .55s var(--m-ease)}
  .cursor-bubble.is-visible span{scale:1}

  /* Værkstedet */
  .motion .workshop-steps[data-reveal]:before{scale:0 1;transform-origin:0 50%;transition:scale 1.5s var(--m-ease) var(--d)}
  .motion .workshop-steps[data-reveal].is-in:before{scale:1 1}
  .motion .workshop-steps[data-reveal] li{opacity:0;translate:0 22px;transition:opacity 1.1s ease,translate 1.4s var(--m-ease)}
  .motion .workshop-steps[data-reveal] li:nth-child(1){transition-delay:calc(var(--d) + .2s)}
  .motion .workshop-steps[data-reveal] li:nth-child(2){transition-delay:calc(var(--d) + .34s)}
  .motion .workshop-steps[data-reveal] li:nth-child(3){transition-delay:calc(var(--d) + .48s)}
  .motion .workshop-steps[data-reveal].is-in li{opacity:1;translate:none}
  .motion :is(select,textarea){transition:border-color .3s ease,box-shadow .5s var(--m-ease),background-color .3s ease}
  .motion :is(select,textarea):focus{background-color:#fbf8f2;box-shadow:0 14px 30px -20px rgb(83 44 47 / .6)}
  .motion .form-error:not([hidden]){animation:m-shake .6s var(--m-ease-soft)}
  .motion .plan-result:not([hidden]){animation:m-rise-in 1.1s var(--m-ease)}
  .motion .plan-result:not([hidden]) :is(dl>div,.technique-tip,.button-outline){animation:m-rise-in 1s var(--m-ease) backwards}
  .motion .plan-result:not([hidden]) dl>div:nth-child(1){animation-delay:.15s}
  .motion .plan-result:not([hidden]) dl>div:nth-child(2){animation-delay:.23s}
  .motion .plan-result:not([hidden]) dl>div:nth-child(3){animation-delay:.31s}
  .motion .plan-result:not([hidden]) .technique-tip{animation-delay:.4s}
  .motion .plan-result:not([hidden]) .button-outline{animation-delay:.48s}
  .motion .download-status:not(:empty){animation:m-rise-in .6s var(--m-ease)}

  /* Produktdialog */
  .motion #product-dialog[open] .dialog-layout>.product-image{animation:f-arch 1.7s var(--m-ease) both}
  @keyframes f-arch{from{clip-path:inset(30% 22% 0 22% round 50% 50% 0 0 / 34% 34% 0 0);background-size:auto 118%}to{clip-path:inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0);background-size:auto 100%}}
  .motion #product-dialog[open] .dialog-copy>*{animation:m-rise-in 1s var(--m-ease) backwards}
  .motion #product-dialog[open] .dialog-copy>:nth-child(1){animation-delay:.2s}
  .motion #product-dialog[open] .dialog-copy>:nth-child(2){animation-delay:.27s}
  .motion #product-dialog[open] .dialog-copy>:nth-child(3){animation-delay:.34s}
  .motion #product-dialog[open] .dialog-copy>:nth-child(4){animation-delay:.41s}
  .motion #product-dialog[open] .dialog-copy>:nth-child(n+5){animation-delay:.48s}
  .motion .dialog-close span{display:inline-block;transition:rotate .6s var(--m-ease)}
}

@media screen and (prefers-reduced-motion:no-preference) and (hover:hover){
  .motion .button:hover::before{transform:none;border-radius:0}
  .motion .button:hover{background:var(--ink)}
  .motion .button-outline:hover{background:transparent;color:var(--canvas)}
  .motion .button:hover span[aria-hidden]{transform:translate(3px,-3px)}
  .motion .planner-submit:hover span[aria-hidden]{transform:translateX(5px)}
  .motion #download-plan:hover span[aria-hidden]{transform:translateY(3px)}
  .motion .text-link:hover{animation:m-underline 1s var(--m-ease)}
  .motion .product-trigger:hover .product-image{transform:scale(1.05);filter:brightness(1.04)}
  .motion .product-trigger:hover .product-arrow{transform:translateX(10px)}
  .motion .dialog-close:hover span{rotate:90deg}
}