/* Crafted Atelier V3 — spatial choreography layer */
:root{
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-slow:1100ms;
  --motion-fast:420ms;
  --motion-x:0px;
  --motion-y:0px;
}
html{scroll-behavior:smooth}
body{overflow-x:clip}
.motion-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:10000;pointer-events:none;background:transparent}
.motion-progress>i{display:block;height:100%;width:100%;transform:scaleX(var(--motion-progress,0));transform-origin:left;background:currentColor;color:#b69d75;will-change:transform}
.motion-orbit{position:fixed;right:22px;bottom:22px;z-index:120;display:flex;align-items:center;gap:10px;pointer-events:none;color:rgba(255,255,255,.76);mix-blend-mode:difference;font-size:8px;letter-spacing:.18em;text-transform:uppercase}
.motion-orbit::before{content:"";width:30px;height:30px;border:1px solid currentColor;border-radius:50%;transform:rotate(var(--motion-orbit,0deg));background:linear-gradient(90deg,transparent 49%,currentColor 50% 52%,transparent 53%)}

/* Hero is treated like a shallow 3D room rather than a flat banner. */
[data-motion-hero]{perspective:1200px;isolation:isolate}
[data-motion-hero] .hero-home-media,[data-motion-hero] .quote-hero-bg{overflow:hidden;transform-style:preserve-3d}
[data-motion-hero] .hero-home-media img,[data-motion-hero] .quote-hero-bg img{transform:translate3d(calc(var(--hero-x,0) * 1px),calc(var(--hero-y,0) * 1px),0) scale(1.075);transition:transform 1.1s var(--motion-ease);will-change:transform}
[data-motion-hero] .hero-home-grid,[data-motion-hero] .quote-hero-grid{transform:translate3d(calc(var(--hero-x,0) * -.16px),calc(var(--hero-y,0) * -.12px),0);will-change:transform}
[data-motion-hero] .display span,[data-motion-hero] .display{filter:blur(0);transform-origin:left center}
.motion-ready [data-motion-hero] .display span{animation:motionLineIn 1.15s var(--motion-ease) both}
.motion-ready [data-motion-hero] .display span:nth-child(2){animation-delay:.1s}.motion-ready [data-motion-hero] .display span:nth-child(3){animation-delay:.2s}
@keyframes motionLineIn{from{opacity:0;transform:translateY(115%) rotate(1.5deg);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}

[data-motion-reveal],.motion-image-reveal{position:relative;overflow:hidden}
[data-motion-reveal] img,.motion-image-reveal img{clip-path:inset(0 0 100% 0);transform:scale(1.12);transition:clip-path 1.25s var(--motion-ease),transform 1.8s var(--motion-ease);will-change:clip-path,transform}
[data-motion-reveal].motion-in img,.motion-image-reveal.motion-in img{clip-path:inset(0);transform:scale(1)}

[data-parallax]{will-change:transform;transform:translate3d(0,var(--parallax-y,0px),0)}

/* Magnetic controls */
.motion-magnetic{position:relative;transform:translate3d(var(--mag-x,0),var(--mag-y,0),0);transition:transform .45s var(--motion-ease)}
.motion-magnetic::after{content:"";position:absolute;inset:-8px;border:1px solid currentColor;border-radius:999px;opacity:0;transform:scale(.82);transition:.45s var(--motion-ease);pointer-events:none}
.motion-magnetic:hover::after{opacity:.22;transform:scale(1)}

/* Tactile project/material surfaces */
.motion-tilt{transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translate3d(0,var(--lift,0),0);transition:transform .65s var(--motion-ease);will-change:transform}
.motion-tilt:hover{--lift:-6px}
.motion-tilt figure,.motion-tilt img{transform-style:preserve-3d}
.motion-tilt .project-tile-meta,.motion-tilt .portfolio-card-meta{transform:translateZ(28px)}

/* Homepage spatial stage */
[data-spatial-stage]{position:relative}
[data-spatial-stage]::before{content:"01 / SPATIAL STORY";position:absolute;top:22px;right:max(20px,calc((100vw - min(100% - 48px, 1320px))/2));font-size:8px;letter-spacing:.22em;text-transform:uppercase;opacity:.45}
.home-signature-lab .signature-card{overflow:hidden}
.home-signature-lab .signature-card::after{content:"";position:absolute;inset:auto -20% -45% auto;width:180px;aspect-ratio:1;border:1px solid rgba(118,95,61,.22);border-radius:50%;transform:translate3d(var(--motion-x),var(--motion-y),0);transition:transform .8s var(--motion-ease)}
.material-atelier-visual{transform-origin:center center}
.material-atelier-visual .floating-note{transition:transform .5s var(--motion-ease)}
.material-atelier-visual:hover .note-a{transform:translate(10px,10px)}
.material-atelier-visual:hover .note-b{transform:translate(-12px,-8px)}

/* Featured projects feel like layered editorial plates. */
.featured-projects .project-tile{isolation:isolate}
.featured-projects .project-tile:nth-child(odd){--drift-dir:-1}
.featured-projects .project-tile:nth-child(even){--drift-dir:1}
.featured-projects .project-tile figure::after,.portfolio-card figure::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.18) 50%,transparent 80%);transform:translateX(-130%) skewX(-10deg);transition:transform 1s var(--motion-ease);pointer-events:none}
.featured-projects .project-tile:hover figure::after,.portfolio-card:hover figure::after{transform:translateX(130%) skewX(-10deg)}

/* Portfolio spatial lens */
[data-spatial-portfolio]{position:relative}
.project-lens{position:fixed;z-index:250;left:0;top:0;width:min(34vw,520px);aspect-ratio:4/3;pointer-events:none;opacity:0;visibility:hidden;transform:translate3d(calc(var(--lens-x,0px) + 26px),calc(var(--lens-y,0px) + 26px),0) scale(.92) rotate(-1deg);transition:opacity .28s ease,visibility .28s,transform .48s var(--motion-ease);background:#1d1a14;color:white;box-shadow:0 30px 90px rgba(15,13,10,.26);overflow:hidden}
.project-lens.is-visible{opacity:1;visibility:visible;transform:translate3d(calc(var(--lens-x,0px) + 26px),calc(var(--lens-y,0px) + 26px),0) scale(1)}
.project-lens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03)}
.project-lens::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(16,13,9,.72),transparent 60%)}
.project-lens-copy{position:absolute;z-index:2;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;gap:18px;align-items:end}
.project-lens-copy strong{font-family:var(--serif);font-size:clamp(26px,2.5vw,46px);font-weight:500;line-height:.95}
.project-lens-copy span{font-size:8px;letter-spacing:.18em;text-transform:uppercase;opacity:.72;text-align:right}
.portfolio-card{transition:opacity .45s ease,transform .7s var(--motion-ease)}
.portfolio-grid:has(.portfolio-card:hover) .portfolio-card:not(:hover){opacity:.38;transform:scale(.985)}
.portfolio-card:hover{z-index:3}
.portfolio-card figure img{transform:scale(1.035) translate3d(0,var(--card-media-y,0),0)}
.portfolio-card:hover figure img{transform:scale(1.095) translate3d(0,var(--card-media-y,0),0)}
.portfolio-card-meta>span{transition:transform .45s var(--motion-ease)}
.portfolio-card:hover .portfolio-card-meta>span{transform:translate(8px,-8px) rotate(12deg)}
.portfolio-hero .display{max-width:9ch}
.portfolio-hero::after{content:"PORTFOLIO / 01";position:absolute;right:4vw;bottom:8vh;writing-mode:vertical-rl;font-size:8px;letter-spacing:.22em;opacity:.42}

/* Page section movement */
.section,.section-tight,.split-story,.cta-panel{--section-shift:0px}
.motion-section{transform:translate3d(0,var(--section-shift),0);will-change:transform}

/* Quotation motion stays calmer and task focused. */
body[data-page="quotation"] .motion-orbit{display:none}
body[data-page="quotation"] .quote-step{animation:quoteStepIn .65s var(--motion-ease) both}
@keyframes quoteStepIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media (max-width: 900px), (pointer:coarse){
  .project-lens{display:none!important}
  .motion-tilt{transform:none!important}
  [data-motion-hero] .hero-home-media img,[data-motion-hero] .quote-hero-bg img{transform:scale(1.04)}
  .motion-orbit{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .motion-progress,.motion-orbit,.project-lens{display:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-motion-reveal] img,.motion-image-reveal img{clip-path:none!important;transform:none!important}
  [data-parallax],.motion-tilt,.motion-magnetic,[data-motion-hero] .hero-home-media img,[data-motion-hero] .quote-hero-bg img,[data-motion-hero] .hero-home-grid,[data-motion-hero] .quote-hero-grid{transform:none!important}
}

/* Homepage scrollytelling stack */
.spatial-story{position:relative;padding:110px 0 180px;background:#ece4d5}
.spatial-story-intro{width:var(--container);margin:0 auto 70px;display:grid;grid-template-columns:.55fr 1.15fr .7fr;gap:34px;align-items:end}
.spatial-story-intro .heading-lg{margin:0}.spatial-story-intro>p:last-child{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.7}
.spatial-stack{width:var(--container);margin:auto;display:grid;gap:34px}
.spatial-panel{position:sticky;top:calc(var(--header-h) + 26px);min-height:72vh;display:grid;grid-template-columns:1.25fr .75fr;overflow:hidden;border:1px solid rgba(72,59,40,.16);box-shadow:0 28px 70px rgba(38,31,22,.12);transform-origin:center top}
.spatial-panel-one{background:#e9dfce;z-index:1}.spatial-panel-two{background:#c5b292;z-index:2;top:calc(var(--header-h) + 48px)}.spatial-panel-three{background:#29251e;color:#f6f2e9;z-index:3;top:calc(var(--header-h) + 70px)}
.spatial-panel-media{min-height:72vh}.spatial-panel-media img{width:100%;height:100%;object-fit:cover}
.spatial-panel-copy{padding:clamp(36px,5vw,78px);display:flex;flex-direction:column;justify-content:flex-end}
.spatial-panel-copy>span{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--brown);margin-bottom:auto}.spatial-panel-three .spatial-panel-copy>span{color:#d9c7a7}
.spatial-panel-copy h3{font-family:var(--serif);font-size:clamp(40px,5vw,76px);font-weight:500;line-height:.98;margin:0 0 24px}.spatial-panel-copy p{margin:0;max-width:520px;font-size:13px;line-height:1.75;color:var(--ink-soft)}.spatial-panel-three .spatial-panel-copy p{color:rgba(255,255,255,.68)}
@media(max-width:900px){.spatial-story{padding:80px 0}.spatial-story-intro{grid-template-columns:1fr}.spatial-panel,.spatial-panel-two,.spatial-panel-three{position:relative;top:auto;grid-template-columns:1fr;min-height:0}.spatial-panel-media{min-height:52vh}.spatial-panel-copy{min-height:420px}.spatial-panel-copy>span{margin-bottom:80px}}
.portfolio-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f6f2e9 0%,#eee5d7 100%)}
.portfolio-hero::before{content:"WORK";position:absolute;left:-.03em;bottom:-.17em;font-family:var(--serif);font-size:min(31vw,520px);line-height:.72;color:rgba(111,88,57,.07);letter-spacing:-.06em;pointer-events:none}
.portfolio-hero .container{position:relative;z-index:1;padding-bottom:8vh}
.portfolio-editorial-intro{position:relative;overflow:hidden}
.portfolio-editorial-intro::after{content:"CURATED / NOT CATALOGUED";position:absolute;right:3vw;top:50%;writing-mode:vertical-rl;font-size:8px;letter-spacing:.22em;opacity:.35}