/* Fade version (see fade.js): every card is a fixed full-screen layer; the current one is shown and the
   next fades in over it. Loaded after stack.css, so these rules replace the stacking ones. */
html.phone-fade{scroll-snap-type:y mandatory!important;scroll-behavior:auto!important;--tb:0px}
/* The invisible scroll track: one screen per card, one snap stop per card. */
.fade-track{display:none}
.phone-fade .fade-track{display:block;position:relative;width:1px;pointer-events:none}
.phone-fade .fade-track i{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always}
.phone-fade .snap-rail{display:none!important}

/* Cards: stacked in place. Hidden ones are also moved far off screen, so the slideshow, the video and the
   embedded tour and map treat them as scrolled away. */
.phone-fade body>section.fade-card{position:fixed!important;inset:0!important;top:0!important;
  height:auto!important;min-height:0!important;margin:0!important;
  overflow:hidden;
  opacity:0;visibility:hidden;z-index:1!important;transform:translate3d(0,300%,0);
  box-shadow:none!important;transition:opacity var(--fade-ms,700ms) ease}
.phone-fade body>section.fade-card.is-leaving{opacity:1;visibility:visible;z-index:2!important;transform:none;transition:none}
.phone-fade body>section.fade-card.is-current{opacity:1;visibility:visible;z-index:3!important;transform:none}
.phone-fade .media-card.fade-card{overflow:hidden}

/* Photo cards: the blurred photo stays put behind text that scrolls inside the card. */
.phone-fade .photo-card .card-bg{position:fixed;inset:0;z-index:-1}
.phone-fade .photo-card .card-bg-pin{position:absolute;inset:0;height:auto}

/* The hero's "Scroll" cue reads as a swipe here. */
.phone-fade .explore-cue{pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .phone-fade body>section.fade-card{transition:none}
}
/* The hero's "Scroll" cue belongs to the hero only. */
.phone-fade:not(.on-hero) .explore-cue{opacity:0!important;visibility:hidden!important;transition:opacity .3s ease,visibility .3s ease}
/* Media cards (video, gallery, tour, map) start loading a little ahead, so they are ready by the time
   they fade in: the next card down is laid out in place (still invisible) instead of far off screen. */
.phone-fade body>section.fade-card.is-next{transform:none}

/* Arrival motion: as a card fades in, its photo / video / map settles from slightly larger, and its
   headline rises a short way into place just after. Runs each time a card becomes current. */
@keyframes fadeSettle{from{scale:1.04}to{scale:1}}
@keyframes fadeRise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.phone-fade .fade-card.is-current .card-bg-pin,
.phone-fade .fade-card.is-current .tour-phone,
.phone-fade .fade-card.is-current .reel-stage,
.phone-fade .fade-card.is-current .map,
.phone-fade .fade-card.is-current .matterport-frame{animation:fadeSettle 1.6s cubic-bezier(.22,.61,.36,1) both}
.phone-fade .fade-card:not(.hero).is-current .section-head h2,
.phone-fade .fade-card.is-current .description-lead,
.phone-fade .fade-card.is-current .loc-title{animation:fadeRise .9s cubic-bezier(.16,1,.3,1) .25s both}
.phone-fade .fade-card.is-current .intro-copy,
.phone-fade .fade-card.is-current .loc-copy,
.phone-fade .fade-card.is-current .gallery-cue{animation:fadeRise .9s cubic-bezier(.16,1,.3,1) .4s both}
.phone-fade .media-card.fade-card{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .phone-fade .fade-card.is-current *{animation:none!important}
}

/* Revised: all the words on a card (headline, body text, captions, counters and buttons) come in together,
   as one slower fade with a gentle rise, just after the card arrives. The photo / video still settles behind. */
@keyframes fadeTextIn{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}
.phone-fade .fade-card:not(.hero).is-current .section-head h2,
.phone-fade .fade-card.is-current .description-lead,
.phone-fade .fade-card.is-current .loc-title,
.phone-fade .fade-card.is-current .intro-copy,
.phone-fade .fade-card.is-current .loc-copy,
.phone-fade .fade-card.is-current .gallery-cue{animation:none}
.phone-fade .fade-card.is-current .card-inner,
.phone-fade .media-card.fade-card.is-current .soft-lock-zone,
.phone-fade #gallery.is-current .reel-caption,
.phone-fade #gallery.is-current .reel-hud,
.phone-fade #gallery.is-current .reel-play,
.phone-fade #tour.is-current .card-play,
.phone-fade .fade-card.is-current .card-explore{animation:fadeTextIn 1.5s cubic-bezier(.33,.0,.2,1) .35s both}
.phone-fade #presented.is-current>.compass-signoff{animation:fadeTextIn 1.5s cubic-bezier(.33,.0,.2,1) .35s both}

/* While the video plays, or the 3D tour / map is being explored, the title and button clear away as
   before (the arrival fade above must not hold them on screen). */
.phone-fade #tour.is-playing:not(.is-paused) .card-play,
.phone-fade #tour.is-playing .soft-lock-zone,
.phone-fade .is-exploring .card-explore,
.phone-fade .is-exploring .soft-lock-zone{animation:none!important;opacity:0!important;pointer-events:none!important}
.phone-fade #tour.is-playing.is-paused .card-play{animation:none!important;opacity:1!important}

/* Phones (2026-10-15): between the pages after Welcome, the page you leave fades out to the off-white and the
   next one fades up from it, like the Welcome page and the desktop. An old stacking rule (".phone-stack
   .content{opacity:1!important}" in stack.css) had kept every waiting page fully opaque, so they switched
   instantly. */
html.phone-fade body{background:#f3eee6}
.phone-fade body>section.fade-card.content:not(.is-current):not(.is-leaving){opacity:0!important}
.phone-fade body>section.fade-card.content.is-current{opacity:1!important}
.phone-fade body>section.fade-card.content.is-leaving{opacity:0!important;transition:opacity .45s ease!important}
html.phone-fade:has(body>section.fade-card.content.is-leaving) body>section.fade-card.content.is-current{transition:opacity .7s ease .4s!important}
/* Leaving the Welcome page keeps its own fade (the Welcome film fades away over the Overview). */
html.phone-fade:has(body>section.fade-card:not(.content).is-leaving) body>section.fade-card.content.is-current{transition:none!important}
@media(prefers-reduced-motion:reduce){.phone-fade body>section.fade-card.content{transition:none!important}}