/* About page styles. /assets/site.js adds `is-visible` to each [data-reveal]
   and [data-reveal-bio] element the first time it scrolls into view, which
   starts the transitions and keyframe animations below. */

/* Bigger body copy than the Tailwind text-sm, matching the home page's About block. */
.about-page p{font-size:1rem}

/* Heading, tagline and intro: fade and rise into place, a beat apart.
   Same rules the home page keeps in its inline <style>. */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,.8,.24,1),transform .7s cubic-bezier(.16,.8,.24,1)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
[data-reveal="1"]{transition-delay:.1s}
[data-reveal="2"]{transition-delay:.2s}

/* OUR SHOP heading size. Its text-3xl / sm:text-4xl classes aren't in the
   compiled Tailwind CSS (the build only kept classes the original app used),
   so they did nothing and it fell back to 16px. These rules do what those
   classes would: 30px on phones, 36px from 640px wide up. The var() values
   are Tailwind's own size settings, so it stays in step with the theme. */
.shop h2{font-size:var(--text-3xl);line-height:var(--text-3xl--line-height)}
@media (min-width:40rem){.shop h2{font-size:var(--text-4xl);line-height:var(--text-4xl--line-height)}}

/* Bios. Each one plays in four steps once it scrolls into view:
   1. a red line draws down its left edge,
   2. the role label fades in while its letter spacing tightens,
   3. the name is wiped in from left to right,
   4. the paragraphs rise into place one after another.
   --bio-delay pushes the whole sequence later (used to stagger the two bios). */
[data-reveal-bio]{position:relative;padding-left:24px}

/* Space between the two bios. Set here because the compiled Tailwind CSS only
   contains the gap classes the original app used, and gap-12/gap-16 aren't among them. */
.bios{gap:48px}
@media (min-width:768px){.bios{gap:64px}}

/* Step 1. The line is a pseudo element (a decorative box CSS draws, no extra
   HTML); scaleY(0) squashes it to nothing and the animation grows it from the top. */
[data-reveal-bio]::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:#c23b2c;transform:scaleY(0);transform-origin:top}
[data-reveal-bio].is-visible::before{animation:bio-line 1.2s cubic-bezier(.65,0,.35,1) var(--bio-delay,0s) both}

/* Step 2. inline-block so the span can be animated as a box. */
[data-reveal-bio] .bio-role{display:inline-block;opacity:0}
[data-reveal-bio].is-visible .bio-role{animation:bio-track .9s cubic-bezier(.16,.8,.24,1) calc(var(--bio-delay,0s) + .15s) both}

/* Step 3. clip-path hides everything right of a moving edge; animating the
   right inset from 100% to 0 uncovers the name like a curtain sliding open. */
[data-reveal-bio] .bio-name{clip-path:inset(0 100% 0 0)}
[data-reveal-bio].is-visible .bio-name{animation:bio-wipe .9s cubic-bezier(.65,0,.35,1) calc(var(--bio-delay,0s) + .35s) both}

/* Step 4. Each paragraph waits a little longer than the one before it. */
[data-reveal-bio] p{opacity:0}
[data-reveal-bio].is-visible p{animation:bio-rise .8s cubic-bezier(.16,.8,.24,1) calc(var(--bio-delay,0s) + var(--p-delay,.55s)) both}
[data-reveal-bio] p:nth-of-type(2){--p-delay:.7s}
[data-reveal-bio] p:nth-of-type(3){--p-delay:.85s}
[data-reveal-bio] p:nth-of-type(4){--p-delay:1s}

/* Two columns from 768px up: start the right hand column (its photos and bio)
   a beat after the left. On phones each column scrolls in on its own, so no
   delay is needed. */
@media (min-width:768px){
  .bio-col:nth-child(2) [data-reveal-bio]{--bio-delay:.25s}
  .bio-col:nth-child(2) .bio-carousel{transition-delay:.15s}
}

/* Bio photo carousels, run by /assets/bio-carousel.js. The photos are stacked
   on top of each other in a 4:3 box; only the one with .is-active is visible,
   and switching fades the old one out while the new one fades in. */
.bio-carousel{position:relative;margin-bottom:40px}
.bc-slides{position:relative;aspect-ratio:4/3;overflow:hidden;background:#161616}
/* object-fit:cover fills the box and crops the edges, so photos of any shape fit.
   Each one starts zoomed in a touch and slowly eases back while it's showing,
   a gentle "Ken Burns" drift that keeps the photo from feeling static. */
.bc-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 6s linear}
.bc-slides img.is-active{opacity:1;transform:scale(1)}

/* Arrows: the same square buttons as the shop carousel, over the photo's sides. */
.bc-arrow{position:absolute;top:calc(50% - 12px);width:44px;height:44px;display:grid;place-items:center;transform:translateY(-50%);border:1px solid rgba(255,255,255,.15);background:rgba(12,12,13,.8);color:#ece9e4;cursor:pointer;transition:background-color .2s,border-color .2s}
.bc-prev{left:12px}
.bc-next{right:12px}
.bc-arrow:hover{background:#c23b2c;border-color:#c23b2c}
.bc-arrow:focus-visible,.bc-dots button:focus-visible{outline:2px solid #c23b2c;outline-offset:2px}

/* Dots, drawn as short bars to echo the red lines elsewhere on the page.
   The visible bar is 3px tall, but the button is 24px tall (padding plus
   background-clip) so it's easy to hit with a finger. */
.bc-dots{display:flex;gap:8px;margin-top:4px}
.bc-dots button{width:28px;height:24px;padding:10px 0;border:0;background:rgba(255,255,255,.2);background-clip:content-box;cursor:pointer;transition:background-color .3s}
.bc-dots button:hover{background-color:rgba(255,255,255,.45)}
.bc-dots button[aria-current]{background-color:#c23b2c}

/* Our Shop. Written here instead of with Tailwind classes because the compiled
   Tailwind CSS only has the grid and gap classes the original app used.
   .shop-layout puts the lounge photo carousel beside the text from 1024px up,
   and stacks them on smaller screens. The carousel drops the bios' bottom
   margin since the grid gap already spaces it. */
.shop-layout{display:grid;grid-template-columns:1fr;gap:40px;margin-top:48px;align-items:start}
@media (min-width:1024px){.shop-layout{grid-template-columns:1fr 1fr;gap:64px}}
.shop-layout .bio-carousel{margin-bottom:0}
/* Amenity cards: 1 column on phones, 2 (a 2x2 block) from 640px up. Each card
   gets a thin red rule on top, echoing the red line above the bios. */
.shop-amenities{display:grid;grid-template-columns:1fr;gap:32px;margin-top:40px;padding:0;list-style:none}
@media (min-width:640px){.shop-amenities{grid-template-columns:repeat(2,1fr)}}
.shop-amenities li{padding-top:20px;border-top:2px solid #c23b2c}
.shop-amenities svg{width:32px;height:32px;color:#c23b2c}
.shop-amenities h3{margin-top:16px;letter-spacing:.14em}
.shop-amenities p{margin-top:8px}
/* Cards fade up one after another rather than all at once. */
.shop-amenities li:nth-child(2){transition-delay:.1s}
.shop-amenities li:nth-child(3){transition-delay:.2s}
.shop-amenities li:nth-child(4){transition-delay:.3s}

/* `both` in the animations above keeps the start frame applied during the
   delay and the end frame once it finishes, so nothing flashes or snaps back. */
@keyframes bio-line{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes bio-track{from{opacity:0;letter-spacing:.35em}to{opacity:1;letter-spacing:normal}}
/* The end state uses negative left and right insets to give the slanted letters room: skewed
   words poke a little past the name's box, and inset(0) would shave them off. */
@keyframes bio-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -.5em 0 -.5em)}}
@keyframes bio-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Visitors who ask their OS for less motion just see everything, no animation. */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-reveal-bio] .bio-role,[data-reveal-bio] p,[data-reveal-bio].is-visible .bio-role,[data-reveal-bio].is-visible p{opacity:1;animation:none}
  [data-reveal-bio] .bio-name,[data-reveal-bio].is-visible .bio-name{clip-path:none;animation:none}
  [data-reveal-bio]::before,[data-reveal-bio].is-visible::before{transform:none;animation:none}
  .bc-slides img{transform:none;transition:none}
}