/* LUMIÈRE motion layer. Decorative only: content stays readable without it,
   and prefers-reduced-motion switches it off. Only transform and opacity animate,
   so the browser can run everything on the compositor. */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);     /* long, soft landing */
  --ease-io:cubic-bezier(.65,0,.35,1);      /* curtains and masks */
  --dur-in:1.05s;
  --dur-out:.45s;
  --rise:46px;
}

/* ---------- page transitions (cross-document View Transitions) ---------- */
.site-head{view-transition-name:site-head}
.site-foot{view-transition-name:site-foot}
main{view-transition-name:page}
::view-transition-old(page){animation:lm-page-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(page){animation:lm-page-in .5s var(--ease-out) both}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
::view-transition-group(site-head){animation:none}
@keyframes lm-page-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes lm-page-in{from{opacity:0;transform:translateY(22px)}}

.nav-bar{position:fixed;left:0;top:env(safe-area-inset-top,0px);height:2px;width:100%;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--glow)),var(--accent));transform:scaleX(0);transform-origin:0 50%;opacity:0;box-shadow:0 0 12px rgba(var(--glow),.8)}
.nav-bar.go{opacity:1;animation:lm-bar 1.6s var(--ease-out) forwards}
@keyframes lm-bar{0%{transform:scaleX(0)}40%{transform:scaleX(.55)}100%{transform:scaleX(.9)}}

/* ---------- hero headline (classic hero, when shown) ---------- */
.hero h1.fx-mask{clip-path:inset(0 0 100% 0);transform:translateY(.25em);transition:clip-path 1.2s var(--ease-out),transform 1.2s var(--ease-out)}
.hero h1.fx-mask.is-in{clip-path:inset(-.2em -.2em -.3em -.2em);transform:none}
.hero .eyebrow,.hero .lead,.hero .btns,.hero .hint,.hero-facts{animation:lm-rise 1s var(--ease-out) both}
.hero .eyebrow{animation-delay:.05s}.hero .lead{animation-delay:.35s}.hero .btns{animation-delay:.48s}.hero .hint{animation-delay:.6s}.hero-facts{animation-delay:.7s}
@keyframes lm-rise{from{opacity:0;transform:translateY(18px)}}
.hero h1 em{background:linear-gradient(100deg,var(--fg) 20%,var(--accent) 45%,var(--fg) 70%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lm-sheen 7s ease-in-out infinite}
@keyframes lm-sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* ---------- generic reveal: rises from below, or drops in when scrolling back up ---------- */
.fx-rv{opacity:0;transform:translate3d(0,var(--rise),0);
  transition:opacity var(--dur-out) ease,transform var(--dur-out) ease}
.fx-rv.from-top{transform:translate3d(0,calc(var(--rise) * -1),0)}
.fx-rv.is-in{opacity:1;transform:none;
  transition:opacity var(--dur-in) var(--ease-out) var(--d,0ms),transform calc(var(--dur-in) + .2s) var(--ease-out) var(--d,0ms)}

/* ---------- headings: letters rise one by one ---------- */
.sw-w{display:inline-block;white-space:nowrap}
.fx-split .sw-c{display:inline-block;opacity:0;transform:translate3d(0,.6em,0) rotate(5deg);transform-origin:0 100%;
  transition:opacity .25s ease,transform .3s ease}
.fx-split.from-top .sw-c{transform:translate3d(0,-.6em,0) rotate(-5deg)}
.fx-split.is-in .sw-c{opacity:1;transform:none;
  transition:opacity .7s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(min(var(--ci),36) * 18ms)}
.fx-split em .sw-c{color:var(--accent)}

/* ---------- eyebrow line draws in ---------- */
.fx-head .eyebrow,.fx-head .is-style-lm-eyebrow{display:flex;align-items:center;gap:12px}
.fx-head .eyebrow::before,.fx-head .is-style-lm-eyebrow::before{content:"";height:1px;width:28px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .4s ease}
.fx-head.is-in .eyebrow::before,.fx-head.is-in .is-style-lm-eyebrow::before{transform:scaleX(1);transition:transform 1s var(--ease-out) .15s}

/* ---------- photos open like a curtain ---------- */
.fx-cover{clip-path:inset(100% 0 0 0);transition:clip-path .5s var(--ease-io)}
.fx-cover.from-top{clip-path:inset(0 0 100% 0)}
.fx-cover img,.fx-cover .ill{scale:1.16;transition:scale .5s ease}
.fx-cover.is-in{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease-io) var(--d,0ms)}
.fx-cover.is-in img,.fx-cover.is-in .ill{scale:1;transition:scale 1.8s var(--ease-out) var(--d,0ms)}

/* ---------- parallax and drifting columns (individual transform properties compose with the reveals) ---------- */
.fx-par{translate:0 var(--py,0px);will-change:translate}
.stage .fx-par,.scene .fx-par{height:116%!important;top:-8%!important}
.fx-drift{translate:0 var(--drift,0px)}

/* ---------- call to action: words switch on like lamps while scrolling ---------- */
.fx-fill .sw-w{color:color-mix(in srgb,var(--fg) 20%,transparent);transition:color .6s var(--ease-out),text-shadow .6s var(--ease-out)}
.fx-fill .sw-w.lit{color:var(--fg);text-shadow:0 0 28px rgba(var(--glow),.35)}
.fx-fill em .sw-w.lit{color:var(--accent)}

/* ---------- custom cursor ---------- */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:300;opacity:0;transition:opacity .25s}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:rgb(var(--glow));box-shadow:0 0 10px rgba(var(--glow),.9)}
.cur-ring{width:38px;height:38px;margin:-19px 0 0 -19px}
.cur-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(var(--glow),.55);transition:transform .45s var(--ease-out),background .3s,border-color .3s}
.cur-ring span{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-accent);opacity:0;transition:opacity .2s}
.cur-hover .cur-ring::before{transform:scale(1.5);background:rgba(var(--glow),.12);border-color:rgba(var(--glow),.8)}
.cur-label .cur-ring::before{transform:scale(2.1);background:var(--accent);border-color:var(--accent)}
.cur-label .cur-ring span{opacity:1}
.cur-label .cur-dot{opacity:0}
.cur-text .cur-ring::before{transform:scale(.6)}
.cur-down .cur-ring::before{transform:scale(.8)}

/* ---------- light that follows the pointer ---------- */
.stage::after,.scene::after,.tool::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;z-index:1;
  background:radial-gradient(260px circle at var(--lx,50%) var(--ly,40%),rgba(var(--glow),.22),transparent 70%)}
.tool,.lm-cards .wp-block-column{position:relative}
.stage:hover::after,.scene:hover::after,.tool:hover::after{opacity:1}
.pcard .stage .ill{transition:transform .9s var(--ease-out)}
.pcard:hover .stage .ill{transform:translateY(-6px) scale(1.03)}
.pcard .stage .stage-img{transition:transform .9s var(--ease-out)}
.pcard:hover .stage .stage-img{transform:scale(1.04)}
.pcard h3,.proj h3,.ncard h3{transition:color .3s}
.pcard:hover h3,.proj:hover h3,.ncard:hover h3{color:var(--accent)}

/* ---------- buttons ---------- */
.btn,.wp-block-button__link{transition:background .3s,color .3s,translate .45s var(--ease-out)}

/* ---------- smart header ---------- */
.site-head{transition:transform .5s var(--ease-out),box-shadow .3s}
.head-hide .site-head{transform:translateY(calc(-100% - env(safe-area-inset-top,0px)))}
.head-scrolled .site-head{box-shadow:0 10px 30px -18px rgba(0,0,0,.45)}

/* ---------- ticker ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(18px,2.4vw,28px);background:var(--bg)}
.mq-row{display:flex;width:max-content;will-change:transform}
.mq-row span{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,32px);padding-right:clamp(18px,2.4vw,32px);
  font:400 var(--t-h2)/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap;color:var(--fg);transform:skewX(var(--skew,0deg))}
.mq-row span:nth-child(even){color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 55%,transparent)}
.mq-row i{width:10px;height:10px;border-radius:50%;background:rgb(var(--glow));box-shadow:0 0 14px rgba(var(--glow),.9);flex:none}

/* ---------- back to top with scroll progress ---------- */
.to-top{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:80;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(8px);color:var(--fg);cursor:pointer;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .35s,transform .5s var(--ease-out)}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:100%;height:100%;transform:rotate(-90deg)}
.to-top circle{fill:none;stroke-width:2}
.to-top .trk{stroke:var(--line)}
.to-top .bar{stroke:var(--accent);stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round}
.to-top path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:22px 22px}
.to-top:hover .bar{stroke:rgb(var(--glow))}

/* ---------- reading progress ---------- */
.read-progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:2px;z-index:120;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* ---------- link underline that draws in ---------- */
.link-arrow{border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease-out)}
.link-arrow:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- reduced motion: everything still and visible ---------- */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(page),::view-transition-new(page),::view-transition-old(root),::view-transition-new(root){animation:none}
  .hero h1.fx-mask{clip-path:none;transform:none}
  .fx-rv,.fx-split .sw-c{opacity:1!important;transform:none!important}
  .fx-cover{clip-path:none!important}.fx-cover img,.fx-cover .ill{scale:1!important}
  .fx-par,.fx-drift{translate:none!important}
  .hero h1 em{animation:none}
  .site-head{transition:none}
  .nav-bar{display:none}
}