/* Lagerlöfs Magasin – motion and depth (24 Oct 2026, Alexander: "mer märkbar, kraftigare djup och fler effekter").
   Everything here is switched on by motion.js with html.lgm-mo, which is never set with prefers-reduced-motion
   or without JavaScript – then every element is simply visible as before. Only transform/opacity/clip-path
   are animated (GPU), nothing changes the layout, and no effect takes pointer events. */

/* 1. Entrances: blocks rise and tip forward into place in 3D, staggered */
html.lgm-mo .lgm-rv{opacity:0;transform:perspective(1100px) translate3d(0,var(--rv-y,72px),0) rotateX(var(--rv-rx,14deg)) scale(.965);transform-origin:50% 100%;
  transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.35s cubic-bezier(.16,1,.3,1);transition-delay:var(--rv-d,0ms)}
html.lgm-mo .lgm-rv.is-in{opacity:1;transform:none}
html.lgm-mo .lgm-rv.is-done{transition:none;will-change:auto}

/* 2. Pictures open like a curtain while the image settles from a deep zoom */
html.lgm-mo .lgm-rv-img{clip-path:inset(22% 8% 22% 8%);transition:clip-path 1.5s cubic-bezier(.77,0,.18,1);transition-delay:var(--rv-d,0ms)}
html.lgm-mo .lgm-rv-img img{transform:scale(1.32);transition:transform 2.2s cubic-bezier(.16,1,.3,1);transition-delay:var(--rv-d,0ms)}
html.lgm-mo .lgm-rv-img.is-in{clip-path:inset(0 0 0 0)}
html.lgm-mo .lgm-rv-img.is-in img{transform:scale(1)}

/* 3. Headlines: word by word from below a mask, with a slight roll */
html.lgm-mo .lgm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
html.lgm-mo .lgm-w>span{display:inline-block;transform:translate3d(0,108%,0) rotate(5deg);transform-origin:0 100%;transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--rv-d,0ms) + var(--w-d,0ms))}
html.lgm-mo .is-in .lgm-w>span,html.lgm-mo .lgm-w.is-in>span{transform:none}

/* 4. Depth layers (cover, Sälja bostad, reportage, start page story): positions come from motion.js */
.lgm-depth-wrap{position:absolute!important;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:paint}
.lgm-depth-bg{position:absolute;inset:-9% -5%;will-change:transform}
html.lgm-mo .cover.has-depth{background-image:none!important}
html.lgm-mo .lgm-kb{animation:lgm-kb 22s ease-in-out infinite alternate}
@keyframes lgm-kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
html.lgm-mo [data-lgm-par]{will-change:transform}

/* 5. 3D tilt with a moving light on cards and pictures (mouse/trackpad only) */
html.lgm-mo.lgm-fine .lgm-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .5s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d;position:relative}
html.lgm-mo.lgm-fine .lgm-tilt.is-tilting{transition:transform .12s linear}
html.lgm-mo.lgm-fine .lgm-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
html.lgm-mo.lgm-fine .lgm-tilt.is-tilting::after{opacity:1}
html.lgm-mo.lgm-fine .lgm-tilt .lgm-card-img img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
html.lgm-mo.lgm-fine .lgm-tilt:hover .lgm-card-img img{transform:scale(1.07) translateZ(30px)}

/* 6. Magnetic buttons */
html.lgm-mo.lgm-fine .lgm-mag{transition:transform .45s cubic-bezier(.16,1,.3,1)}

/* 0. From the first painted frame the page is covered in claret, so the cover never flashes before the page turn
   (motion.js was still loading). motion.js takes over with .lgm-curtained; without it the cover lifts by itself. */
@media screen and (prefers-reduced-motion: no-preference){
  html:not(.lgm-curtained)::after{content:"";position:fixed;inset:0;z-index:2147482001;background:var(--claret,#7a1b2a);pointer-events:none;animation:lgm-pre-lift .01s 2.5s forwards}
}
@keyframes lgm-pre-lift{to{visibility:hidden}}

/* 8. Page change: a page turns in from the right edge (real page loads) / turns away (arrival, view change) */
.lgm-curtain{position:fixed;inset:0;z-index:2147482000;pointer-events:none;perspective:2400px;visibility:hidden}
.lgm-curtain i{position:absolute;inset:0;background:var(--ink,#16130f);transform-origin:0 50%;transform:rotateY(-95deg);box-shadow:-60px 0 120px rgba(0,0,0,.35)}
.lgm-curtain i+i{background:var(--claret,#7a1b2a)}
.lgm-curtain b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 clamp(34px,6vw,72px)/1 var(--f-display,Georgia,serif);color:#f6f2ea;letter-spacing:.02em;opacity:0;white-space:nowrap}
html.lgm-leaving .lgm-curtain,html.lgm-arriving .lgm-curtain{visibility:visible}
/* leaving: the dark page turns in, the claret page follows, the name appears (≈1.3 s) */
html.lgm-leaving .lgm-curtain i{animation:lgm-turn-in 1.1s cubic-bezier(.6,0,.3,1) forwards}
html.lgm-leaving .lgm-curtain i+i{animation-delay:.18s}
html.lgm-leaving .lgm-curtain b{animation:lgm-fade .5s .7s forwards}
/* arriving on a sub-page: a rest with the name, then the pages turn away calmly (≈2.3 s) */
html.lgm-arriving .lgm-curtain i{transform:none;transform-origin:100% 50%;animation:lgm-turn-out 1.6s cubic-bezier(.55,0,.25,1) .65s forwards}
html.lgm-arriving .lgm-curtain i+i{animation-delay:.45s}
html.lgm-arriving .lgm-curtain b{opacity:1;animation:lgm-unfade .5s .35s forwards}
/* the first visit to the start page (once per visit): a long rest with the name, then a very slow turn (≈4.6 s) */
html.lgm-arriving.lgm-welcome .lgm-curtain i{animation-duration:2.8s;animation-delay:1.8s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
html.lgm-arriving.lgm-welcome .lgm-curtain i+i{animation-delay:1.45s}
html.lgm-arriving.lgm-welcome .lgm-curtain b{animation:lgm-welcome-name 1.9s ease-in-out forwards}
@keyframes lgm-welcome-name{0%{opacity:0;transform:translate(-50%,-46%)}30%{opacity:1;transform:translate(-50%,-50%)}62%{opacity:1}100%{opacity:0;transform:translate(-50%,-53%)}}
@keyframes lgm-turn-in{from{transform:rotateY(-95deg)}to{transform:rotateY(0)}}
@keyframes lgm-turn-out{from{transform:rotateY(0)}to{transform:rotateY(95deg)}}
@keyframes lgm-fade{to{opacity:1}}
@keyframes lgm-unfade{to{opacity:0}}

/* 9. Reading progress on articles and the reportage */
.lgm-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:2147481000;background:var(--claret,#7a1b2a);transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none}

/* 10. Lines draw themselves (section rules and the steps of Sälja bostad) */
html.lgm-mo .lgm-rv-line{background-image:linear-gradient(var(--ink,#16130f),var(--ink,#16130f));background-repeat:no-repeat;background-size:0 1px;background-position:0 0;border-top-color:transparent!important;transition:background-size 1.4s cubic-bezier(.77,0,.18,1);transition-delay:var(--rv-d,0ms)}
html.lgm-mo .lgm-rv-line.is-in{background-size:100% 1px}

@media (max-width:760px){
  html.lgm-mo .lgm-rv{--rv-y:44px;--rv-rx:10deg}
  html.lgm-mo .lgm-rv-img{clip-path:inset(14% 4% 14% 4%)}
}
@media print{html.lgm-mo .lgm-rv,html.lgm-mo .lgm-rv-img,html.lgm-mo .lgm-w>span{opacity:1!important;transform:none!important;clip-path:none!important}.lgm-curtain,.lgm-progress{display:none!important}}