/* The 3D home page. Everything here is additive: nothing below applies unless
   <html> carries .dx, which the inline script in <head> sets only when motion
   is welcome and experience.js takes away again if WebGL is not there. */

.dx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;
  opacity:0;transition:opacity 1.4s ease}
html.dx-live .dx-canvas{opacity:1}
/* On a phone the canvas is as tall as the window gets with the browser's bar
   away, so it does not change size, and have to be rebuilt, when the bar moves. */
@media (pointer:coarse){.dx-canvas{height:100lvh}}
/* And there a section fades in where it stands. Sliding in as well meant its
   panels were blended over the moving scene again on every frame of the slide. */
@media (pointer:coarse){html.dx .reveal,html.dx .reveal-left,html.dx .reveal-right,html.dx .reveal-scale{transform:none}}

/* Two layers: the scene, with its landscape, and the page over it. The hero's
   own background is taken away so the scene shows through. With ?sky=old the
   carved wall comes back behind the scene, on the body, as it used to be. */
html.dx body{background:#141a14}
/* Until the scene is drawn, and if it never is, a still of the same landscape
   stands behind the hero where the scene will be. */
html.dx body::before{content:"";position:absolute;top:0;left:0;right:0;height:100vh;z-index:-1;
  background:url('/assets/peaks.webp') center/cover no-repeat}
html.dx-wall body::before{
  background:linear-gradient(to bottom,rgba(30,35,28,.4),rgba(30,35,28,.72)),
    url('/assets/wall.webp') center/cover no-repeat}
html.dx #app-wrapper{position:relative;z-index:1}
html.dx #hero{background:none!important}
html.dx #hero>.inset-0,html.dx .hero-particles{display:none}
html.dx #hero h1,html.dx #hero p{filter:drop-shadow(0 2px 22px rgba(0,0,0,.6))}
html.dx #hero .text-stone-400{color:#d6d3d1}

/* Sections stop being walls. Each opens with a clear stage for its heading,
   where the dragon waits, then a veil so the reading below keeps its ground.
   The stage is as tall as the coil round the heading and no taller: on a wide
   screen the coil grows with the screen while the heading and the padding
   under the last section do not, hence the sum; on a narrow one the wheel over
   Services is what needs the room. A link to a section lands with the dragon
   at rest. */
html.dx{--stage:28vh}
@media (min-width:900px){html.dx{--stage:max(4rem,calc(38vh - 110px))}}
html.dx #about,html.dx #services,html.dx #featured,html.dx #testimonials,html.dx #bulletin,html.dx #book{
  padding-top:var(--stage);scroll-margin-top:10vh;
  background:linear-gradient(180deg,rgba(20,26,20,0) 0,rgba(20,26,20,0) 20vh,rgba(20,26,20,.5) 50vh,
    rgba(20,26,20,.5) calc(100% - 22vh),rgba(20,26,20,0) 100%)!important}
/* The Bulletin's heading is the widest, so the coil round it is the tallest. */
@media (min-width:1100px){html.dx #bulletin{padding-top:calc(var(--stage) + 4rem)}}
html.dx #app-wrapper>footer{background:rgba(16,20,16,.84)!important}

html.dx .dx-h{position:relative;filter:drop-shadow(0 2px 20px rgba(0,0,0,.6))}
html.dx .dx-h::after{content:"";position:absolute;left:50%;bottom:.12em;width:min(62%,240px);height:1px;
  background:linear-gradient(90deg,transparent,#F4E4A6,transparent);
  transform:translateX(-50%) scaleX(0);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
html.dx .dx-here .dx-h::after{transform:translateX(-50%) scaleX(1)}

/* Glass over the landscape. In the About section it is over the reading
   only. The chart beside it is the painting lifted off its silk
   (tools/chart/cut_out.py), so it stands in the landscape as one more
   mountain in it: that half is left clear and the section has no veil. It is
   kept to the height of the screen so the whole of it is seen at once. */
html.dx #about{background:none!important}
html.dx #about .grid>:last-child,html.dx #bulletin-form{background:var(--glass);border:var(--glass-line);border-radius:18px;box-shadow:var(--glass-shadow);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
/* On a phone the blur is left off: it has to be worked out again on every
   frame the scene behind it moves, and the glass is nearly solid as it is. */
@media (pointer:coarse){html.dx .glass,html.dx #about .grid>:last-child,html.dx #bulletin-form{backdrop-filter:none;-webkit-backdrop-filter:none}}
html.dx #about .grid>:last-child{padding:clamp(1.25rem,3vw,2.5rem)}
html.dx #about-chart img{width:min(100%,(100vh - 9rem)*629/1121);margin:0 auto}
html.dx #bulletin-form{padding:1.75rem}
html.dx #services p,html.dx #featured p,html.dx #bulletin p,html.dx #book p{text-shadow:0 1px 16px rgba(0,0,0,.7)}
html.dx .service-card p{text-shadow:none}

/* Cards lean toward the pointer and catch a little light where it is. */
html.dx .dx-tilt{transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px)!important}
html.dx .service-card.dx-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(244,228,166,.1),transparent 60%)}

/* The trail down the edge of a wide screen. */
.dx-trail{display:none}
@media (min-width:1100px){
  html.dx-live .dx-trail{display:block;position:fixed;right:16px;top:50%;width:1px;height:42vh;transform:translateY(-50%);z-index:30;
    background:linear-gradient(180deg,transparent,rgba(212,175,55,.34) 8%,rgba(212,175,55,.34) 92%,transparent)}
  .dx-trail a{position:absolute;left:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
    border:1px solid rgba(212,175,55,.75);background:#1b2219;transition:background .6s,box-shadow .6s}
  .dx-trail a.on{background:#D4AF37;box-shadow:0 0 10px rgba(212,175,55,.6)}
  .dx-trail a::before{content:"";position:absolute;inset:-9px}
  .dx-trail a::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);white-space:nowrap;
    font:500 11px/1 Raleway,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#F4E4A6;
    background:rgba(16,20,16,.82);padding:6px 9px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s}
  .dx-trail a:hover::after,.dx-trail a:focus-visible::after{opacity:1}
  .dx-trail i{position:absolute;left:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
    background:#fff3c4;box-shadow:0 0 12px 3px rgba(255,214,130,.8);pointer-events:none}
}