/* A little magic, in the same colours: nothing here changes what's on a page or how to use it. magic.js sets the positions. */
@media (prefers-reduced-motion:no-preference){
  /* moving between pages: a soft crossfade, the header stays still */
  @view-transition{navigation:auto}
  .top{view-transition-name:mg-top}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
  /* choosing on the agencies and developers page: the next step opens in a circle (teams.js) */
  html.mg-wipe::view-transition-old(root),html.mg-wipe::view-transition-new(root){animation:none;mix-blend-mode:normal}
  html.mg-wipe::view-transition-image-pair(root){isolation:auto}
  html.mg-wipe::view-transition-new(root){z-index:2}

  /* the big circles drift with the mouse and the page, and breathe */
  .hero:before,.hero:after,.page-hero:before{translate:calc(var(--mg-x,0)*-18px) calc(var(--mg-y,0)*-14px + var(--mg-s,0)*.1px);transition:translate 1s cubic-bezier(.22,1,.36,1);animation:mg-breathe 13s ease-in-out infinite alternate}
  .hero:after{translate:calc(var(--mg-x,0)*26px) calc(var(--mg-y,0)*20px + var(--mg-s,0)*-.06px);animation-delay:-5s}
  @keyframes mg-breathe{from{scale:1}to{scale:1.07}}

  /* the phone floats a little over the laptop */
  .duo .laptop,.duo .phone{transition:translate .9s cubic-bezier(.22,1,.36,1)}
  .duo .laptop{translate:calc(var(--mg-x,0)*-6px) calc(var(--mg-y,0)*-4px)}
  .duo .phone{translate:calc(var(--mg-x,0)*12px) calc(var(--mg-y,0)*9px)}

  /* headlines arrive word by word */
  .mg-w{display:inline-block;animation:mg-word .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0)*55ms)}
  @keyframes mg-word{from{opacity:0;transform:translateY(.42em)}to{opacity:1;transform:none}}

  /* buttons: a press, an arrow that leans forward, and a light passing over */
  .btn{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background-color .25s,scale .15s}
  .btn:active{scale:.97}
  .btn svg{transition:translate .3s cubic-bezier(.22,1,.36,1)}
  .btn:hover svg{translate:4px 0}
  html[dir=rtl] .btn:hover svg{translate:-4px 0}
  .btn:not(.line):not(.white):not(.profile):not(.sm){position:relative;overflow:hidden;isolation:isolate}
  .btn:not(.line):not(.white):not(.profile):not(.sm):after{content:'';position:absolute;inset:0 auto 0 -40%;z-index:-1;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);pointer-events:none}
  .btn:not(.line):not(.white):not(.profile):not(.sm):hover:after{left:115%;transition:left .75s cubic-bezier(.22,1,.36,1)}
}

@media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
  /* cards: a soft light of their own colour follows the mouse */
  .point,.dur,.pbtn,.pick,.seatcalc,.plan{position:relative}
  .point:before,.dur:before,.pbtn:before,.pick:before,.seatcalc:before,.plan:before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c,var(--ocean)) 16%,transparent),transparent 70%)}
  .point:hover:before,.dur:hover:before,.pbtn:hover:before,.pick:hover:before,.seatcalc:hover:before,.plan:hover:before{opacity:1}
  .point>*,.pbtn>*,.pick>*{position:relative}
  .pick>.pk-go{position:absolute}
  .picks.two .pick>.pk-go{position:relative;top:auto;right:auto;bottom:auto}

  /* the choice cards: a line draws along the bottom, the arrow goes forward */
  .picks.two .pick{overflow:hidden}
  .picks.two .pick:after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1)}
  html[dir=rtl] .picks.two .pick:after{transform-origin:right}
  .picks.two .pick:hover:after{transform:scaleX(1)}
  .picks.two .pick .pk-go{transition:translate .35s cubic-bezier(.22,1,.36,1)}
  .picks.two .pick:hover .pk-go{translate:6px 0}
  html[dir=rtl] .picks.two .pick:hover .pk-go{translate:-6px 0}
}