/* Subpage entrances (Reservation, Contact, Account, Membership).
   The approved GSAP timeline, re-expressed in CSS so it starts with the first paint and
   never waits for a script download (the site serves scripts with no-store, so the
   script-driven entrance held the headline and the reservation form hidden on every
   visit). Same elements, delays, durations and easings (expo.out = .19,1,.22,1;
   power2.out = .25,.46,.45,.94; power3.out = .215,.61,.355,1). Form fields are never
   animated on their own; their panel unfolds as a whole, as before.
   Scoped to html.bw-motion (set in <head> by boot.js, never under reduced motion).
   fill-mode backwards: after the entrance nothing is held by the animation.
   The first click, tap, key or focus completes the entrance at once (.bw-entered, pages.js).
   Fades start at 1% opacity, not 0: compositor opacity animations from 0 are only counted
   as painted (LCP) when they end, although the text is on screen from the first frame. */

/* Headline lines (wrapped at build time; the same markup without motion is plain lines). */
.bw-line{display:block}
.bw-motion .bw-line{overflow:hidden;padding:0 .12em .14em 0;margin:0 -.12em -.14em 0}
.bw-motion .bw-line-inner{display:block}
.bw-motion .bw-line em{display:inline-block}

@keyframes bw-line-up{from{transform:translate3d(0,108%,0)}}
@keyframes bw-fade{from{opacity:.01}}
@keyframes bw-eyebrow{from{opacity:.01;letter-spacing:.42em}}
/* Focus may finish the entrance immediately: never move the form underneath input. */
@keyframes bw-unfold{from{opacity:.01}}
@keyframes bw-scene{from{transform:scale(1.08)}}

/* Intro copy. Contact and Account show theirs only from 901px: at narrower widths the
   intro is display:contents there and the approved entrance never animated it. */
.bw-motion :is(.reservation-scene-copy, .membership-hero > div) > .eyebrow{animation:bw-eyebrow 1.3s cubic-bezier(.215,.61,.355,1) .1s backwards}
.bw-motion :is(.reservation-scene-copy, .membership-hero > div) h1 .bw-line-inner{animation:bw-line-up 1.15s cubic-bezier(.19,1,.22,1) .2s backwards}
.bw-motion :is(.reservation-scene-copy, .membership-hero > div) h1 .bw-line:nth-child(2) .bw-line-inner{animation-delay:.3s}
.bw-motion :is(.reservation-scene-copy, .membership-hero > div) > :not(.eyebrow):not(h1){animation:bw-fade .9s cubic-bezier(.25,.46,.45,.94) .5s backwards}
@media (min-width:901px){
  .bw-motion :is(.inline-contact-heading, .signin-intro) .noir-intro-copy > .eyebrow{animation:bw-eyebrow 1.3s cubic-bezier(.215,.61,.355,1) .1s backwards}
  .bw-motion :is(.inline-contact-heading, .signin-intro) h1 .bw-line-inner{animation:bw-line-up 1.15s cubic-bezier(.19,1,.22,1) .2s backwards}
  .bw-motion :is(.inline-contact-heading, .signin-intro) h1 .bw-line:nth-child(2) .bw-line-inner{animation-delay:.3s}
  .bw-motion :is(.inline-contact-heading, .signin-intro) h1 .bw-line:nth-child(3) .bw-line-inner{animation-delay:.4s}
  /* The paragraph, then the block after it (stagger .07). */
  .bw-motion :is(.inline-contact-heading, .signin-intro) .noir-intro-copy > :not(.eyebrow):not(h1){animation:bw-fade .9s cubic-bezier(.25,.46,.45,.94) .5s backwards}
  .bw-motion :is(.inline-contact-heading, .signin-intro) > :not(.eyebrow):not(h1):not(.noir-intro-copy){animation:bw-fade .9s cubic-bezier(.25,.46,.45,.94) .57s backwards}
}
/* Panels fade in at their final coordinates; input never changes panel geometry. */
.bw-motion :is(.reservation-shell, .message-card, .signin-panel){animation:bw-unfold 1.2s cubic-bezier(.19,1,.22,1) .45s backwards}
.bw-motion :is(.noir-scene img, .membership-hero img){animation:bw-scene 2.4s cubic-bezier(.25,.46,.45,.94) backwards}
/* Membership's photo keeps the site's slow breathing (portal.css, on `scale`) alongside it. */
.bw-motion .membership-page .membership-hero img{animation:membership-photo-breathe 24s ease-in-out infinite alternate,bw-scene 2.4s cubic-bezier(.25,.46,.45,.94) backwards}
html.bw-motion.bw-entered :is(.reservation-scene-copy, .membership-hero > div, .inline-contact-heading, .signin-intro) *,
html.bw-motion.bw-entered .noir-scene img,
html.bw-motion.bw-entered :is(.reservation-shell, .message-card, .signin-panel){animation:none}
html.bw-motion.bw-entered .membership-page .membership-hero img{animation:membership-photo-breathe 24s ease-in-out infinite alternate}

/* Membership background (rear-cabin photograph): the seat and window sit right of the copy. */
html .membership-page.portal-landing .membership-hero img{object-position:75% 55%}
@media (max-width:900px){html .membership-page.portal-landing .membership-hero img{object-position:72% center}}

/* Membership keeps its approved welcome: the entrance waits underneath it and plays as the
   welcome leaves. */
html.bw-motion:has(> .membership-entrance) :is(.membership-hero, .membership-hero *){animation-play-state:paused}
html.bw-motion:has(> .membership-entrance) .membership-page .membership-hero img{animation-play-state:running,paused}

/* Membership blocks arrive in order (pages.js). They are held from the first paint so
   nothing flashes before the script runs; without the script boot.js drops bw-motion. */
.bw-motion:not(.bw-seq) #membership-main :is(.membership-tiers .section-heading, .membership-card, .bw-privileges-title, .membership-benefits > .eyebrow, .membership-benefits > h2, .bw-privileges thead th, .membership-benefit-grid > div, .bw-privileges tbody tr, .bw-privileges-foot, .portal-invite > *){opacity:0}
.bw-motion .bw-reveal{opacity:0;transform:translate3d(0,40px,0)}
.bw-motion .bw-reveal.bw-in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.215,.61,.355,1) var(--bw-d,0s),transform .85s cubic-bezier(.215,.61,.355,1) var(--bw-d,0s)}
.bw-motion .bw-reveal-inner{opacity:0;transform:translate3d(0,10px,0)}
.bw-motion .bw-in .bw-reveal-inner,.bw-motion .bw-reveal-inner.bw-in{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.215,.61,.355,1) var(--bw-d,0s),transform .55s cubic-bezier(.215,.61,.355,1) var(--bw-d,0s)}
.bw-motion .bw-reveal.bw-now,.bw-motion .bw-now .bw-reveal-inner{transition:none}

@media (prefers-reduced-motion: reduce){.bw-reveal,.bw-reveal-inner{opacity:1!important;transform:none!important}}

/* Scroll owns only the vertical offset. Keep the wide photograph’s layout centering. */
.bw-motion :is(.noir-scene img,.membership-hero img){translate:var(--bw-scene-x,0%) var(--bw-scene-y,0%)}
@media(min-width:1800px){.bw-motion .membership-page.portal-landing .membership-hero img{--bw-scene-x:-50%}}

/* The Journey entrance owns these panels; do not also fade their legacy parent. */
.bw-motion .noir-contact .inline-contact,.bw-motion .noir-account #signin{animation:none}