/* The dragon's journey: each chapter carries an engraved scene that spreads in as ink, drifts behind the copy and holds a moving fog. */

.nb-chapter{isolation:isolate;overflow:hidden}
.nb-scene{position:absolute;inset:0;z-index:-1;pointer-events:none}
.nb-scene--band{bottom:auto;height:min(100%,110vh)}
.nb-scene-fade{position:absolute;inset:0;-webkit-mask-image:var(--fade);mask-image:var(--fade)}
@property --ms{syntax:'<length>';inherits:false;initial-value:0px}
.nb-scene-ink{position:absolute;inset:0;--ms:0px;-webkit-mask:url(assets/journey/blot.webp) no-repeat;mask:url(assets/journey/blot.webp) no-repeat;-webkit-mask-size:var(--ms) var(--ms);mask-size:var(--ms) var(--ms);-webkit-mask-position:calc(var(--fx,50%) - var(--ms) / 2) calc(var(--fy,50%) - var(--ms) / 2);mask-position:calc(var(--fx,50%) - var(--ms) / 2) calc(var(--fy,50%) - var(--ms) / 2);transition:--ms 2.6s cubic-bezier(.33,0,.2,1)}
.nb-chapter.nb-in .nb-scene-ink{--ms:var(--ms-end,4000px)}
.nb-chapter.nb-inked .nb-scene-ink{-webkit-mask:none;mask:none}
.nb-scene-art{position:absolute;top:-8vh;bottom:-8vh;left:0;right:0;background:var(--art) var(--pos,right center)/var(--size,cover) no-repeat;transform:translate3d(0,calc((var(--p,.5) - .5) * -12vh),0) scale(calc(1.05 - var(--p,.5) * .05));transform-origin:50% 0;will-change:transform}
.nb-scene--light .nb-scene-art{mix-blend-mode:multiply;opacity:var(--strength,1)}
.nb-scene--ghost .nb-scene-art{mix-blend-mode:screen;opacity:var(--strength,.3)}

/* The hatch: scene recedes behind the subject, which stands on the ledge */
.b-growth-sticky.nb-chapter .b-growth-art{mix-blend-mode:normal}
.b-growth-sticky.nb-chapter .nb-range--hero{display:none!important}
.nb-scene--hero .nb-scene-art{transition:opacity 1.2s ease}
.b-growth-sticky:not(.nb-in) .nb-scene-art{opacity:0}
.nb-haze{position:absolute;inset:0;background:radial-gradient(ellipse var(--hoard-w,600px) 70% at var(--hoard-x,70%) 55%,rgba(243,237,223,.62),rgba(243,237,223,0) 70%)}
.nb-ground{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:calc(var(--w) * .2);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(23,36,35,.55),rgba(23,36,35,.22) 50%,transparent);transition:opacity .6s ease}
.nb-ground--egg{--x:var(--egg-x);--y:var(--egg-y);--w:var(--egg-w)}
.nb-ground--hoard{--x:var(--hoard-x);--y:var(--hoard-y);--w:var(--hoard-w);opacity:0}
.b-growth[data-sequence=complete] .nb-ground--egg{opacity:0}
.b-growth[data-sequence=complete] .nb-ground--hoard{opacity:1}
.b-growth:has(.b-growth-art:is([data-living=egg],[data-living=hatch],[data-living=idle])) .nb-ground--egg{opacity:var(--nb-egg-shadow,1);transition:none}
.b-growth:has(.b-growth-art:is([data-living=egg],[data-living=hatch],[data-living=idle])) .nb-ground--hoard{opacity:var(--nb-hoard-shadow,0);transition:none}

/* Full-color scenes inside the dark bands, dimmed so the band's copy stays first */
.nb-scene--color .nb-scene-art{opacity:var(--strength,1);filter:brightness(.82) saturate(1.05)}
.nb-tint{position:absolute;inset:0;background:var(--band,currentColor);opacity:var(--tint)}
.nb-scene--color .nb-fog{opacity:.12}

/* Set piece: the scene's stage sits under the section art, and only that stage is lit */
.nb-scene--set .nb-scene-art{inset:0;transform:none;background-size:var(--set-size,cover);background-position:var(--set-pos,center);filter:brightness(.7) saturate(1.05)}
.nb-scene--set:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 44% 70% at var(--light-x,67%) 45%,transparent 30%,rgba(23,36,35,.55) 100%)}
.nb-pool,.nb-ground,.nb-shaft,.nb-dust{position:absolute;pointer-events:none}
.nb-pool{transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,236,196,.6),rgba(255,226,180,.2) 55%,rgba(255,226,180,0));mix-blend-mode:soft-light}
.nb-ground{transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(20,18,14,.62),rgba(20,18,14,.25) 55%,transparent)}
.nb-shaft{background:linear-gradient(100deg,rgba(255,244,214,0),rgba(255,244,214,.38) 45%,rgba(255,244,214,0));transform:skewX(-14deg);transform-origin:top;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent);mix-blend-mode:screen;animation:nb-shaft 7s ease-in-out infinite alternate}
.nb-dust{background-image:radial-gradient(1.6px 1.6px at 12% 18%,#fff8e6 60%,transparent),radial-gradient(1.2px 1.2px at 64% 34%,#fff8e6 60%,transparent),radial-gradient(1.8px 1.8px at 38% 72%,#fff8e6 60%,transparent),radial-gradient(1.1px 1.1px at 82% 58%,#fff8e6 60%,transparent),radial-gradient(1.4px 1.4px at 24% 46%,#fff8e6 60%,transparent);background-size:140px 160px;opacity:.6;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent);animation:nb-dust 26s linear infinite}
.nb-fore{position:absolute;z-index:5;pointer-events:none;background:var(--fore) center bottom/100% auto no-repeat;filter:brightness(.8);-webkit-mask-image:radial-gradient(ellipse 50% 100% at 50% 100%,#000 60%,transparent);mask-image:radial-gradient(ellipse 50% 100% at 50% 100%,#000 60%,transparent);opacity:0;transition:opacity 1.6s ease 1s}
.nb-chapter.nb-in>.nb-fore{opacity:1}
.nb-caption{position:relative;z-index:6;text-shadow:0 0 3px rgba(23,36,35,.95),0 1px 14px rgba(23,36,35,.95)}
@keyframes nb-shaft{from{opacity:.7}to{opacity:1}}
@keyframes nb-dust{to{background-position:60px 320px}}


/* Services page: the cave spans the full width behind the intro, not the page's 1000px column */
.services-page.nb-chapter{position:relative}
.services-page>.nb-scene,.services-page>.nb-fore{max-width:none;margin:0}
.services-page .sv-hoard-art{position:relative;z-index:2}
.services-page.nb-chapter .sv-hoard figcaption{display:none}


/* Living hatch: the videos are framed 1620x1040 around the rig's 1170x780 box so the egg, wing and tail all fit */
.nb-living{position:absolute;z-index:4;pointer-events:none}
.nb-living video{position:absolute;left:-9.487%;top:-13.59%;width:138.462%;height:133.333%;max-width:none;object-fit:fill;opacity:0}
/* Each hand-off lands on an identical frame, so the switch is an instant cut with nothing to fade */

/* Breathing: a canvas redraws the idle video with only the chest swelling; the video itself stays hidden under it */
.nb-living canvas{position:absolute;left:-9.487%;top:-13.59%;width:138.462%;height:133.333%;opacity:0}
.b-growth-art[data-living=idle] .nb-living[data-breath=on] .nb-living-breath{opacity:1}
.b-growth-art[data-living=idle] .nb-living[data-breath=on] .nb-living-part{opacity:0}
.nb-living-mouth{position:absolute;max-width:none;pointer-events:none;opacity:0;mix-blend-mode:plus-lighter}
.b-growth-art[data-living=idle] .nb-living[data-mouth=shut] .nb-living-mouth{opacity:1}
/* The open mouth fades out of the video under the patch, and the patch adds back in, so the two sum to one solid snout */
.nb-living{isolation:isolate}
.b-growth-art[data-living=idle] .nb-living[data-mouth=shut] .nb-living-part{-webkit-mask-image:radial-gradient(10.417% 6.611% at 42.59% 26.44%,transparent 72%,#000 100%);mask-image:radial-gradient(10.417% 6.611% at 42.59% 26.44%,transparent 72%,#000 100%)}
.b-growth-art[data-living=egg] .nb-living-hatch,.b-growth-art[data-living=hatch] .nb-living-hatch,.b-growth-art[data-living=idle] .nb-living-part.on{opacity:1}
/* The egg in the video wiggles with the drawn egg's tremor, pivoting at its base */
.nb-living-hatch{transform:translateX(var(--slide,0px)) rotate(var(--shell-tremor,0deg));transform-origin:68.1% 75.8%}

/* Phones: the box is the whole video frame */
.nb-living--fit video{left:0;top:0;width:100%;height:100%}
.nb-living--fit{transform-origin:67.84% 24.13%}
.nb-ground--egg{translate:var(--nb-egg-sx,0px) var(--nb-egg-sy,0px)}
.nb-ground--hoard{translate:0 var(--nb-hoard-sy,0px)}
@media(max-width:699px){.b-growth-sticky:has(.b-growth-art[data-living=egg],.b-growth-art[data-living=hatch],.b-growth-art[data-living=idle]) .nb-ground{opacity:0}}


/* While a video carries the hatch, the drawn egg and rig stay in place, invisible, so the egg can still be clicked */
.b-growth-art[data-living=egg]>.b-shell,.b-growth-art[data-living=hatch]>.b-shell,.b-growth-art[data-living=idle]>.b-shell,
.b-growth-art[data-living=egg]>.b-hero-coil,.b-growth-art[data-living=hatch]>.b-hero-coil,.b-growth-art[data-living=idle]>.b-hero-coil{opacity:0!important}

/* Chapter 01 landing: the clip sits over its patch of the valley, soft at the top and sides; its bottom runs past the section's edge so the dragon rises out of it */
.nb-landing{position:absolute;max-width:none;object-fit:fill;opacity:0;transition:opacity .5s ease;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 6%);-webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 6%);mask-composite:intersect}
.nb-landing--on{opacity:1}

/* Fog: a tileable strip twice the frame's width slides one tile and repeats */
.nb-fog{position:absolute;top:0;bottom:0;left:0;width:max(200%,440vh);background:url(assets/journey/mist.webp) repeat-x 0 0/50% 100%;opacity:var(--fog,.55);animation:nb-fog 110s linear infinite}
.nb-fog+.nb-fog{opacity:calc(var(--fog,.55) * .6);animation-duration:170s;animation-direction:reverse;background-position:0 30%}
.nb-scene--ghost .nb-fog{opacity:var(--fog,.14)}
@keyframes nb-fog{to{transform:translateX(-50%)}}

/* Phones: chapter 01 makes room for its scene below the copy */
@media(max-width:899px){#b-perspective.nb-chapter.nb-in,#b-perspective.nb-chapter.nb-chapter{padding-bottom:calc(64vw + 40px)}}

/* The traced dragon flies a path across the chapter as you scroll */
.nb-flight{position:absolute;z-index:-1;left:0;top:0;width:var(--dw,22%);pointer-events:none;transform:translate3d(var(--tx,0),var(--ty,0),0);will-change:transform;opacity:0;transition:opacity 1.2s ease}
.nb-chapter.nb-in .nb-flight{opacity:1}
.nb-flight img{display:block;width:100%;animation:nb-glide 5.5s ease-in-out infinite}
@keyframes nb-glide{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-1deg)}}

/* Chapter 01 becomes a full scene with the copy on the paper side */
@media(min-width:900px){
 #b-perspective.nb-chapter.nb-in,#b-perspective.nb-chapter.nb-chapter{min-height:min(92vh,880px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:90px 7% 110px}
 .b-growth-meaning.nb-chapter h2{max-width:9.5em;font-size:clamp(44px,4.6vw,72px)}
 .b-growth-meaning.nb-chapter p{max-width:30em;margin-left:0;font-size:19px}
}


.paused .nb-fog,.paused .nb-flight img,.paused .nb-shaft,.paused .nb-dust{animation:none}
.paused .nb-scene-ink{transition:none;-webkit-mask:none;mask:none}
.paused .nb-flight{opacity:1;transition:none}
@media(prefers-reduced-motion:reduce){
 .nb-fog,.nb-flight img,.nb-shaft,.nb-dust{animation:none}
 .nb-fore{transition:none}
 .nb-scene-ink{transition:none;-webkit-mask:none!important;mask:none!important}
 .nb-flight{opacity:1;transition:none}
}

/* Case studies: the terrace spans the full width behind the intro, past its centered column */
.case-library .case-intro.nb-chapter{overflow:visible}
.case-library .case-intro>.nb-scene{position:absolute;top:0;left:calc(50% - 50vw);right:calc(50% - 50vw);width:auto;margin:0;padding:0}
.case-library .case-intro.nb-chapter>.nb-range{display:none}
.case-library .case-intro .case-dragon-scene{position:relative;z-index:2}
/* The hoard rests on the terrace: a wide soft shadow across the stone and a dark one where it touches */
.case-library .case-intro.nb-chapter .case-dragon-art:before,.case-library .case-intro.nb-chapter .case-dragon-art:after{content:"";position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;border-radius:50%}
.case-library .case-intro.nb-chapter .case-dragon-art:before{bottom:-5%;width:122%;height:28%;background:radial-gradient(closest-side,rgba(6,8,7,.78),rgba(6,8,7,.4) 55%,transparent)}
.case-library .case-intro.nb-chapter .case-dragon-art:after{bottom:2.5%;width:96%;height:10%;background:radial-gradient(closest-side,rgba(4,5,4,.92),rgba(4,5,4,.55) 60%,transparent)}
.case-library .case-intro.nb-chapter .case-dragon-art>img{z-index:1;filter:drop-shadow(0 6px 8px rgba(4,5,4,.55))}
.case-library .case-intro.nb-chapter .case-dragon-smoke{z-index:2}

/* Phones and tablets: no fog. Mobile Safari flashes the drifting layers while scrolling. */
@media(max-width:899px),(pointer:coarse){.nb-fog{display:none}}


/* Wide screens: the Services band and its cave run to the screen edges, past the page's 1500px column */
@media(min-width:1501px){
 body:has(.services-page){overflow-x:clip}
 .services-page.nb-chapter{overflow:visible;box-shadow:0 0 0 100vmax #172423;clip-path:inset(0 -100vmax)}
 .services-page>.nb-scene{left:calc(50% - 50vw);right:calc(50% - 50vw)}
}