/* ==========================================================================
   Harmony Apartments - hero
   60 white / 30 navy / 10 orange
   ========================================================================== */

:root{
  /* brand */
  --white:#ffffff;
  --navy:#263377;
  --orange:#ff831d;
  --ink:#070b1c;            /* the black used in scrims - navy, never neutral */
  --cream:#f6f4ef;

  /* type */
  --f-display:"Gill Sans","Gill Sans MT","Gill Sans Nova","GillSans",
              "Montserrat",Calibri,"Trebuchet MS",sans-serif;
  --f-ui:"Montserrat","Gill Sans","Gill Sans MT",-apple-system,"Segoe UI",sans-serif;

  /* metrics */
  --bar-h:68px;
  --slot:19px;
  --rule:#ffffff;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-drop:cubic-bezier(.19,1,.22,1);   /* slow settle - the welcome */
}

@media (max-width:760px){ :root{ --bar-h:56px; --slot:16px; } }

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); }

body{
  margin:0;
  font-family:var(--f-ui);
  color:var(--white);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
img[hidden]{ display:none; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

::selection{ background:var(--orange); color:#fff; }

:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }


/* ==========================================================================
   Text buttons - one style, used at the top of the hero and in the bar
   ========================================================================== */

.tbtn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.45em 0;
  font-family:var(--f-ui);
  font-size:.745rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--white);
  white-space:nowrap;
  transition:transform .35s var(--ease), letter-spacing .35s var(--ease);
}
.tbtn__chev{
  width:.72em; height:.72em;
  color:currentColor;
  transition:transform .35s var(--ease);
}
.tbtn--drop:hover .tbtn__chev{ transform:translateY(2px); }


/* ==========================================================================
   Hero
   ========================================================================== */

.hero{
  position:relative;
  height:100vh;
  height:100svh;
  min-height:520px;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink);
}

.hero__media{
  position:absolute; inset:0;
  overflow:hidden;
  transition:opacity .5s var(--ease);
}

/* the outgoing frame is pushed out and the incoming one comes in behind it,
   always travelling the way the viewer asked for - so 11 back to 1 keeps
   moving forward rather than snapping the whole way back */
.hero__slide{
  position:absolute; inset:0;
  z-index:1;
  transform:translate3d(100%,0,0);
  transition:transform .78s cubic-bezier(.62,.02,.24,1);
  backface-visibility:hidden;
}
.hero__slide.is-moving{ will-change:transform; }
.hero__slide.is-active{ z-index:2; }

.hero__slide picture{ display:block; width:100%; height:100%; overflow:hidden; }

/* the pan lives on the image, the push on the slide, so they never fight */
.hero__slide img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.09) translate3d(0,0,0);
}
.hero__slide.is-active img{ animation:pan-l 8.4s linear forwards; }
.hero__slide.is-active:nth-child(even) img{ animation-name:pan-r; }

@keyframes pan-l{ from{ transform:scale(1.09) translate3d(1.6%,0,0); }
                  to  { transform:scale(1.09) translate3d(-1.6%,0,0); } }
@keyframes pan-r{ from{ transform:scale(1.09) translate3d(-1.6%,0,0); }
                  to  { transform:scale(1.09) translate3d(1.6%,0,0); } }

/* brand wash - pulls five different cameras into one set */
.hero__tint{
  position:absolute; inset:0; z-index:3;
  background:var(--navy);
  opacity:.13;
  pointer-events:none;
}

/* legibility: top for the mark, bottom for the bar, centre for the wordmark */
.hero__scrim{
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  background:
    radial-gradient(112% 70% at 50% 47%,
      rgba(7,11,28,.40) 0%, rgba(7,11,28,.13) 44%, rgba(7,11,28,0) 72%),
    linear-gradient(to bottom,
      rgba(7,11,28,.66) 0%, rgba(7,11,28,.20) 17%, rgba(7,11,28,0) 34%),
    linear-gradient(to top,
      rgba(7,11,28,.30) 0%, rgba(7,11,28,.10) 12%, rgba(7,11,28,0) 26%);
}


/* --- side zones --------------------------------------------------------- */

.zone{
  position:absolute; top:0; bottom:0;
  width:25%;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0; border:0; margin:0;
  background:none;
  color:var(--white);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.zone--prev{ left:0; }
.zone--next{ right:0; }

/* a pool of shade around the arrow only - not a curtain down the whole edge */
.zone__wash{
  position:absolute;
  top:50%; left:50%;
  width:min(300px,90%); height:300px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  opacity:0;
  background:radial-gradient(closest-side, rgba(7,11,28,.30), rgba(7,11,28,0) 100%);
  transition:opacity .5s var(--ease);
  pointer-events:none;
}

/* present enough to find, quiet enough to miss - a bonus, not a control */
.zone__arrow{
  position:relative;
  width:clamp(20px,1.7vw,26px);
  height:clamp(20px,1.7vw,26px);
  color:var(--white);
  opacity:0;
  transition:opacity .45s var(--ease), transform .5s var(--ease);
}
.zone--prev .zone__arrow{ transform:rotate(90deg)  translateY(-10px); }
.zone--next .zone__arrow{ transform:rotate(-90deg) translateY(-10px); }

.zone:hover .zone__wash,
.zone.is-hot .zone__wash{ opacity:1; }

.zone:hover .zone__arrow,
.zone:focus-visible .zone__arrow,
.zone.is-hot .zone__arrow{ opacity:1; }
.zone--prev:hover .zone__arrow,
.zone--prev:focus-visible .zone__arrow,
.zone--prev.is-hot .zone__arrow{ transform:rotate(90deg)  translateY(0); }
.zone--next:hover .zone__arrow,
.zone--next:focus-visible .zone__arrow,
.zone--next.is-hot .zone__arrow{ transform:rotate(-90deg) translateY(0); }


/* --- top row ------------------------------------------------------------ */

.hero__top{
  position:absolute; top:0; left:0; right:0;
  z-index:8;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(16px,4vw,48px);
  padding:clamp(15px,2.4vh,26px) clamp(20px,4vw,56px) 0;
}
.hero__top .drop{ justify-self:start; }
.hero__top .tbtn--drop{ margin-top:.6em; }
.hero__top .tbtn--book{ justify-self:end;    margin-top:.6em; }

.hero__mark{ display:block; justify-self:center; line-height:0; }
.hero__mark img{
  width:clamp(132px,14.5vw,228px);
  height:auto;
}


/* --- Apartments list ---------------------------------------------------- */
/* One at the top, arriving first, the rest following it down. It stays put
   once open - only a click away from it or a scroll closes it. The picked
   one steps right and grows, with the same chevron as everything else. */

.drop{ position:relative; }
.drop .tbtn--drop{
  background:none; border:0; padding:.45em 0; cursor:pointer;
  font:inherit; font-size:.745rem; font-weight:500; letter-spacing:.19em;
  text-transform:uppercase; color:var(--white);
}
.drop.is-open .tbtn__chev{ transform:rotate(180deg); }

.drop__list{
  position:absolute;
  top:calc(100% + 20px); left:0;
  margin:0; padding:0;
  list-style:none;
  pointer-events:none;
}
.drop.is-open .drop__list{ pointer-events:auto; }

.drop__item{
  opacity:0;
  transform:translateY(-14px);
  transition:opacity .42s var(--ease), transform .42s var(--ease);
  transition-delay:calc((7 - var(--i)) * 40ms);      /* unwinds on the way out */
}
.drop.is-open .drop__item{
  opacity:1;
  transform:none;
  transition-delay:calc(var(--i) * 60ms);
}

.drop__link{
  position:relative;
  display:block;
  padding:.62em 0;                  /* stacked well apart */
  margin:.16em 0;
  background:none; border:0;
  font-family:var(--f-ui);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--white);
  white-space:nowrap;
  cursor:pointer;
  transition:transform .32s var(--ease);
}
.drop__link span{
  display:inline-block;
  transform-origin:left center;
  transition:transform .32s var(--ease);
}

/* the chevron sits out in the margin so the labels stay flush when at rest */
.drop__chev{
  position:absolute;
  left:-1.5em; top:50%;
  width:.72em; height:.72em;
  margin-top:-.36em;
  color:currentColor;
  opacity:0;
  transform:rotate(-90deg) translateY(4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}

.drop__link:hover,
.drop__link:focus-visible,
.drop__link.is-picked{ transform:translateX(18px); }

.drop__link:hover span,
.drop__link:focus-visible span,
.drop__link.is-picked span{ transform:scale(1.22); }

.drop__link:hover .drop__chev,
.drop__link:focus-visible .drop__chev,
.drop__link.is-picked .drop__chev{ opacity:1; transform:rotate(-90deg) translateY(0); }


/* --- centre ------------------------------------------------------------- */

.hero__centre{
  position:absolute;
  left:50%; top:49%;
  transform:translate(-50%,-50%);
  z-index:5;
  width:min(88vw,760px);
  text-align:center;
  pointer-events:none;
}

.hero__eyebrow,
.hero__place{
  margin:0;
  font-family:var(--f-display);
  font-weight:400;
  text-transform:uppercase;
}

.hero__eyebrow{
  font-size:clamp(.66rem,1.05vw,.86rem);
  letter-spacing:.52em;
  text-indent:.52em;
  position:relative;
  z-index:1;
  margin-bottom:clamp(14px,2.1vh,24px);
}

/* The name, or the floor plan of whichever apartment is being shown. One
   swaps for the other: the outgoing one swipes left and fades, the incoming
   one just fades. */
.hero__art{
  position:relative;
  z-index:2;                        /* the two lines emerge from behind it */
  transform-origin:50% 50%;
  transition:opacity .4s var(--ease), transform .9s var(--ease-drop);
}

.hero__wordmark{
  width:clamp(224px,36vw,498px);
  height:auto;
  margin:0 auto;
}

/* The floor plans are built and ready in assets/img/plans; they are not shown
   in the hero for now. harmony-plans still generates them. */

.hero__place{
  font-size:clamp(.78rem,1.3vw,1.02rem);
  letter-spacing:.36em;
  text-indent:.36em;
  position:relative;
  z-index:1;
  margin-top:clamp(20px,3.6vh,38px);
}


/* --- indicator ---------------------------------------------------------- */
/* Display only. Six slots at most, the row sliding under them as the reel
   advances, and the slots tapering off at either end where there is more
   beyond. Always a dim white until an arrow is engaged. */

.hero__dots{
  position:absolute;
  left:50%;
  bottom:calc(var(--bar-h) + clamp(30px,5.4vh,58px));
  transform:translateX(-50%);
  z-index:7;
  pointer-events:none;
  opacity:.45;                      /* dim, but never gone */
  transition:opacity .45s var(--ease);
}
body.is-engaged .hero__dots{ opacity:1; }

.dots__win{ overflow:hidden; }
.dots__row{
  display:flex;
  transition:transform .55s var(--ease);
}

.dot{
  flex:0 0 var(--slot);
  height:var(--slot);
  display:grid;
  place-items:center;
}
.dot::after{
  content:"";
  display:block;
  width:5px; height:5px;
  border-radius:3px;
  background:rgba(255,255,255,.72);
  transform:scale(var(--s,1));
  transition:width .45s var(--ease), transform .45s var(--ease),
             background-color .45s var(--ease);
}
.dot.is-on::after{
  width:15px;
  background:var(--white);
}


/* ==========================================================================
   The bar - footer at rest, header once past the hero
   ========================================================================== */

.bar{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--bar-h);
  z-index:70;
  display:flex;
  align-items:center;
  transform:translate3d(0,calc(100svh - var(--bar-h)),0);
  will-change:transform;

  /* glass: almost all blur, barely any pigment.
     --dock is driven by scroll (0 = footer, 1 = header) so the darkening
     happens gradually on the way up, never as a step change at the top. */
  --dock:0;
  background:rgba(14,24,78,calc(.10 + .46 * var(--dock)));
  -webkit-backdrop-filter:blur(5px) saturate(102%) brightness(calc(.58 - .28 * var(--dock)));
  backdrop-filter:blur(5px) saturate(102%) brightness(calc(.58 - .28 * var(--dock)));
}

/* no backdrop-filter: fall back to pigment, or the bar disappears */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bar{ background:rgba(14,24,78,calc(.62 + .24 * var(--dock))); }
}
.bar::before,
.bar::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px;
  background:var(--rule);
}
.bar::before{ top:0;    opacity:calc(1 - var(--dock)); }  /* footer: rule above */
.bar::after { bottom:0; opacity:var(--dock);          }  /* header: rule below */

/* Coming Home, the rule is held back entirely - it would otherwise jump from
   the bar's bottom edge to its top mid-descent, which reads as the bar
   dropping a couple of pixels. It is drawn afterwards instead, out from the
   centre to both edges. */
.bar::before{
  transform-origin:50% 50%;
  transition:transform .8s var(--ease);
}
body.is-homing .bar::before{ opacity:0; }
body.is-homing .bar::after { opacity:0; transition:opacity .6s var(--ease); }
.bar.is-drawing::before{ transform:scaleX(0); transition:none; }

.bar__inner{
  width:100%;
  max-width:660px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  justify-items:center;
}

.bar .tbtn{ font-size:.7rem; letter-spacing:.17em; }

@media (max-width:760px){
  .bar__inner{ padding:0 14px; gap:8px; }
  .bar .tbtn{ font-size:.545rem; letter-spacing:.09em; }
}

@media (max-width:620px){
  .hero__top{ padding:clamp(13px,1.9vh,20px) 16px 0; gap:12px; }
  .hero__top .tbtn{ font-size:.575rem; letter-spacing:.12em; gap:.4em; }
  .hero__mark img{ width:112px; }
  .hero__eyebrow{ letter-spacing:.42em; text-indent:.42em; }
  .hero__place{ letter-spacing:.28em; text-indent:.28em; }
  .hero__wordmark{ width:min(66vw,300px); }
  .zone__arrow{ width:28px; height:28px; }
}


/* the hero leaves the flow and fades in under the bar; the space it vacates
   is held open with padding so nothing behind it shifts */
.hero.is-descending{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  will-change:transform,opacity;
}


/* ==========================================================================
   Load-in

   A plain white field over the page until the first frame has decoded, then
   it lifts. Nothing arrives half-drawn, and nothing has to be watched.
   ========================================================================== */

.veil{
  position:fixed; inset:0;
  z-index:900;
  background:var(--white);
  pointer-events:none;
}
body.is-ready .veil{ animation:veil-out .85s var(--ease) both; }
@keyframes veil-out{ from{ opacity:1; } to{ opacity:0; } }

.veil.is-done{ display:none; }


/* ==========================================================================
   The welcome

   The image arrives on its own and is left to be looked at. Then the greeting
   drops in a line at a time, then the header, then the footer rising to mirror
   it. Nothing responds to the pointer until the whole thing has landed.

     2.00s  Harmony Apartments, on its own
     3.15s  Welcome to rises out of it, Weston-super-Mare sinks out of it
     4.20s  the mark
     4.40s  Apartments / Booking
     5.45s  the footer, Home first then the two either side
     6.70s  live
   ========================================================================== */

.js .hero__centre > *,
.js .hero__top > *,
.js .hero__dots,
.js .bar,
.js .bar .tbtn{ opacity:0; }

@keyframes drop { from{ opacity:0; transform:translateY(-44px); } to{ opacity:1; transform:none; } }
@keyframes lift { from{ opacity:0; transform:translateY(30px); }  to{ opacity:1; transform:none; } }
@keyframes ease-out-up  { from{ opacity:0; transform:translateY(54px); }  to{ opacity:1; transform:none; } }
@keyframes ease-out-down{ from{ opacity:0; transform:translateY(-54px); } to{ opacity:1; transform:none; } }
@keyframes soft{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dim { from{ opacity:0; } to{ opacity:.45; } }

/* the name arrives first and alone, then the two lines part from behind it */
/* The clock. The front page runs the full welcome; a page opened on an
   apartment runs the same sequence in half the time, and one reached
   through a view transition (is-quick) in a third - see main.js. */
body{
  --t-art:2.00s; --t-lines:3.15s; --t-info:1.5s;
  --t-mark:4.20s; --t-drop:4.40s;
  --t-bar:5.45s; --t-nav:5.55s; --t-dots:6.35s;
}
body.is-apt{
  --t-art:1.20s; --t-info:1.50s;
  --t-mark:2.00s; --t-drop:2.15s;
  --t-bar:2.40s; --t-nav:2.50s; --t-dots:2.90s;
}
body.is-apt.is-quick{
  --t-art:.20s; --t-info:.55s;
  --t-mark:1.00s; --t-drop:1.10s;
  --t-bar:1.30s; --t-nav:1.40s; --t-dots:1.80s;
}

body.is-ready .hero__art{ animation:soft .95s var(--ease) var(--t-art) both; }
body.is-ready .hero__eyebrow { animation:ease-out-up   .9s var(--ease-drop) var(--t-lines) both; }
body.is-ready .hero__place   { animation:ease-out-down .9s var(--ease-drop) var(--t-lines) both; }

body.is-ready .hero__top > *{ animation:drop .9s var(--ease-drop) both; }
body.is-ready .hero__mark   { animation-delay:var(--t-mark); }
body.is-ready .hero__top .drop,
body.is-ready .hero__top .tbtn--book{ animation-delay:var(--t-drop); }

/* the bar carries a scroll-driven transform, so only its opacity is animated
   here and the lift is put on the buttons instead */
body.is-ready .bar{ animation:soft .75s var(--ease) var(--t-bar) both; }
body.is-ready .bar .tbtn{ animation:lift .85s var(--ease-drop) both; }
body.is-ready .bar .tbtn:nth-child(2){ animation-delay:var(--t-nav); }   /* Home, mirroring the mark */
body.is-ready .bar .tbtn:nth-child(1),
body.is-ready .bar .tbtn:nth-child(3){ animation-delay:calc(var(--t-nav) + .23s); }

body.is-ready .hero__dots{ animation:dim .9s var(--ease) var(--t-dots) both; }

/* the welcome has landed: drop the animations so nothing outranks a hover or
   a state change from here on */
body.is-live .hero__centre > *,
body.is-live .hero__top > *,
body.is-live .bar,
body.is-live .bar .tbtn{ animation:none; opacity:1; transform:none; }

body.is-live .hero__dots{ animation:none; opacity:.45; }
body.is-live.is-engaged .hero__dots{ opacity:1; }

body.is-live .tbtn:hover,
body.is-live .tbtn:focus-visible{ transform:translateY(-3px) scale(1.07); }

/* nothing is touchable until the welcome has finished */
.js .zone,
.js .drop{ pointer-events:none; }
body.is-live .zone,
body.is-live .drop{ pointer-events:auto; }


/* ==========================================================================
   The apartment state

   Picking an apartment from the list does three things at once, and this is
   the middle one (the reel re-points in main.js, the page below is swapped
   by site.js): Welcome to and Weston-super-Mare go back behind the mark the
   way they came out of it, the mark steps up and settles at about half its
   size, and under it the apartment's name, its three facts and its one line
   arrive one after another on the hero's own curve. Going home runs it the
   other way, quicker.

   The lines are absolutely positioned under the mark's new place rather
   than laid out under the two that left, so nothing in the flow moves and
   the mark's step is the only thing the eye has to follow.
   ========================================================================== */

.hero__centre{
  --mark-w:clamp(224px,36vw,498px);
  --mark-h:calc(var(--mark-w) * .2586);     /* the wordmark is 785 x 203 */
  --lift:clamp(44px,9vh,96px);
  --shrink:.58;
}
@media (max-width:620px){ .hero__centre{ --mark-w:min(66vw,300px); } }

.hero__eyebrow,
.hero__place{ transition:opacity .5s var(--ease), transform .7s var(--ease-drop); }

.hero__info{
  position:absolute;
  left:0; right:0;
  top:50%;
  transform:translateY(-50%);
  margin:0 auto;
  max-width:min(88vw,640px);
  z-index:1;
  text-align:center;
}
.hero__info > p{
  margin:0;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .8s var(--ease-drop);
}
.hero__name{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.9rem,3.6vw,3rem);
  line-height:1.02;
  letter-spacing:-.012em;
}
.hero__facts{
  margin-top:clamp(10px,1.6vh,16px) !important;
  font-family:var(--f-ui);
  font-size:clamp(.66rem,.95vw,.78rem);
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:0;
}
.hero__facts i{ font-style:normal; opacity:.5; padding:0 .7em; }
.hero__line{
  margin:clamp(12px,2vh,20px) auto 0 !important;
  max-width:44ch;
  font-family:var(--f-display);
  font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.5;
}

/* in: the lines go back behind the mark, the mark steps up, the words arrive */
body.is-apt .hero__eyebrow{ opacity:0; transform:translateY(26px); }
body.is-apt .hero__place  { opacity:0; transform:translateY(-26px); }
body.is-apt .hero__art    { opacity:0; transform:translateY(calc(-1 * var(--lift))) scale(var(--shrink)); }
body.is-live.is-apt .hero__info > p{ opacity:1; transform:none; }
body.is-live.is-apt .hero__facts{ opacity:.82; }
body.is-live.is-apt .hero__info > p:nth-child(1){ transition-delay:.32s; }
body.is-live.is-apt .hero__info > p:nth-child(2){ transition-delay:.46s; }
body.is-live.is-apt .hero__info > p:nth-child(3){ transition-delay:.58s; }

/* out: the words leave first and quickly, then the two lines come back */
body.is-live:not(.is-apt) .hero__info > p{ transition-duration:.25s,.25s; transition-delay:0s; }
body.is-live:not(.is-apt) .hero__eyebrow,
body.is-live:not(.is-apt) .hero__place{ transition-delay:.22s; }

/* the welcome, on a page opened on an apartment: the two lines never come
   out, and the words drop in on the clock instead of on a transition */
body.is-apt.is-ready .hero__eyebrow,
body.is-apt.is-ready .hero__place,
body.is-apt.is-ready .hero__art{ animation:none; }
body.is-apt.is-ready .hero__info{ opacity:1; }               /* the container; its lines do the arriving */
body.is-apt.is-ready .hero__info > p{ animation:lift .85s var(--ease-drop) both; }
body.is-apt.is-ready .hero__info > p:nth-child(1){ animation-delay:var(--t-info); }
body.is-apt.is-ready .hero__info > p:nth-child(2){ animation-delay:calc(var(--t-info) + .15s); }
body.is-apt.is-ready .hero__info > p:nth-child(3){ animation-delay:calc(var(--t-info) + .28s); }
body.is-apt.is-ready .hero__facts{ animation-name:lift-dim; }
@keyframes lift-dim{ from{ opacity:0; transform:translateY(30px); } to{ opacity:.82; transform:none; } }
body.is-live .hero__info > p{ animation:none; }

/* reached through a view transition there is no veil: the frame is already
   on screen, brought there by the picture that was clicked */
html.handover .veil{ display:none; }

/* the last item in the list is a way to all seven, not a pick */
a.drop__link{ text-decoration:none; }
.drop__item--all{ margin-top:.5em; }
.drop__item--all .drop__link{ opacity:.78; }
.drop__item--all .drop__link:hover,
.drop__item--all .drop__link:focus-visible{ opacity:1; }


/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  body.is-ready .veil{ animation-duration:.4s; }

  .hero__slide.is-active img{ animation:none; transform:scale(1.02); }
  .hero__slide{ transition-duration:.3s; }
  body.is-ready .hero__centre > *,
  body.is-ready .hero__top > *,
  body.is-ready .bar .tbtn{ animation:soft .4s ease .2s both; }
  body.is-ready .bar{ animation:soft .4s ease .2s both; }
  body.is-ready .hero__dots{ animation:dim .4s ease .3s both; }
  .zone__arrow,.tbtn,.dot,.hero__dots,.bar{ transition-duration:.01ms; }
  .hero__eyebrow,.hero__place,.hero__art,.hero__info > p{ transition-duration:.2s; transition-delay:0s !important; }
  body.is-apt.is-ready .hero__info > p{ animation:soft .4s ease .3s both; }
}