/* ==================================================================
   field-bg.css — the fixed field, and the arrival onto it.

   The centre-opening reveal and the Contact us section used to live
   here too. They are a component now, in contact-reveal.css, because
   they are going onto pages that have no field.
   ================================================================== */

/* ==================================================================
   1. the field

   One canvas, fixed to the viewport, behind everything, animating
   whether or not the page is scrolling. It never takes a pointer
   event and it is never in the tab order.

   The host carries the world's ground colour as well, written by the
   script from the engine's own palette, so the canvas and the plate
   behind it cannot disagree by a level.
   ================================================================== */

.field-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  contain:strict;
}

.field-bg-canvas{
  display:block;
  width:100%;
  height:100%;
}

/* Everything in the document scrolls over the field. */
main,
footer.site{
  position:relative;
  z-index:1;
}

/* ==================================================================
   2. the arrival

   The selector's own elements leave, the field commits to the chosen
   world underneath them, the browser navigates, and this is the rest
   of that one movement: the nav settles down from the top edge while
   the hero rises from below, so the page opens outward from the
   middle. That is the same gesture the reveal sections use further
   down, which is what stops the arrival reading as a separate effect
   bolted to the front of the page.

   The selector also says which edge of its viewport this world
   occupied, and the arrival leans that way by a few pixels, so a
   visitor who chose Real Estate on the left sees the page assemble
   from the left. It is small on purpose. This is an institutional
   page, and the movement should be over before it asks to be
   admired.

   It is opt in and stays opt in. The head script on each page sets
   .did-arrive on the root only when the selector has just handed
   over, so a refresh, a direct visit, a back button and reduced
   motion all get a page that is simply present. Every element rests
   at opacity 1 with no transform and the animation only ever moves it
   away from that resting state and back, so an animation that never
   runs costs the visitor nothing.
   ================================================================== */

/* --arrive-x is the lean, taken from which edge of the selector this
   world occupied. --arrive-t is the tempo, taken from how long the
   selector's own exit took: the head script divides the contract's
   exitMs by the 720ms it was written against, so if that half of the
   movement is re-timed this half follows it instead of drifting out
   of step. Both default to a page that was simply opened. */
:root{--arrive-x:0px;--arrive-t:1;}
html[data-arrive-from="left"]  {--arrive-x:-12px;}
html[data-arrive-from="right"] {--arrive-x:12px;}
html[data-arrive-from="top"]   {--arrive-x:0px;}
html[data-arrive-from="bottom"]{--arrive-x:0px;}

@keyframes arriveDown{
  from{opacity:0;transform:translate(var(--arrive-x,0px),-10px)}
  to  {opacity:1;transform:none}
}
@keyframes arriveUp{
  from{opacity:0;transform:translate(var(--arrive-x,0px),16px)}
  to  {opacity:1;transform:none}
}

@media (prefers-reduced-motion:no-preference){

  /* the nav settles in from above */
  html.did-arrive .site .brand,
  html.did-arrive .nav-links > *,
  html.did-arrive .menu-btn{
    animation:arriveDown calc(.46s * var(--arrive-t,1)) cubic-bezier(.16,1,.3,1) both;
  }

  /* the hero rises from below. On an arrival this replaces the page's
     own entrance rather than running alongside it: two entrances at
     once is what makes an arrival look busy. */
  html.did-arrive [data-hero] > *{
    animation:arriveUp calc(.52s * var(--arrive-t,1)) cubic-bezier(.16,1,.3,1) both;
  }

  html.did-arrive .site .brand               {animation-delay:calc(.06s * var(--arrive-t,1))}
  html.did-arrive .menu-btn                  {animation-delay:calc(.10s * var(--arrive-t,1))}
  html.did-arrive .nav-links > *:nth-child(1){animation-delay:calc(.10s * var(--arrive-t,1))}
  html.did-arrive .nav-links > *:nth-child(2){animation-delay:calc(.14s * var(--arrive-t,1))}
  html.did-arrive .nav-links > *:nth-child(3){animation-delay:calc(.18s * var(--arrive-t,1))}
  html.did-arrive .nav-links > *:nth-child(4){animation-delay:calc(.22s * var(--arrive-t,1))}
  html.did-arrive .nav-links > *:nth-child(5){animation-delay:calc(.26s * var(--arrive-t,1))}
  html.did-arrive .nav-links > *:nth-child(6){animation-delay:calc(.30s * var(--arrive-t,1))}

  html.did-arrive [data-hero] > *:nth-child(1)  {animation-delay:calc(.20s * var(--arrive-t,1))}
  html.did-arrive [data-hero] > *:nth-child(2)  {animation-delay:calc(.28s * var(--arrive-t,1))}
  html.did-arrive [data-hero] > *:nth-child(3)  {animation-delay:calc(.36s * var(--arrive-t,1))}
  html.did-arrive [data-hero] > *:nth-child(n+4){animation-delay:calc(.44s * var(--arrive-t,1))}

  /* the first section follows the hero in, on the reveal machinery
     the page already has, so it is one movement through to the cards */
  html.js.did-arrive .pg-stack [data-reveal].is-in{
    transition-delay:calc(.50s * var(--arrive-t,1));
  }
}