/* KAYATEA v11.17 (11 Nov 2026), phones and small tablets up to 900 px wide.
   The five chapter cards on the home page (The Classics, The Blends ...) reveal like the rest of the site:
   the card fades in, the photo opens out from its centre and settles, then the name and line rise into place.
   Nothing moves on the card itself, so the row still swipes sideways only (the v11.13 iPhone fix stays).
   assets/js/v11-17.js adds html.js-rooms and .is-shown; without JavaScript the cards simply show.
   The waiting state has no transitions, so the cards go into it at once instead of animating into hiding. */
@media (max-width:900px){
  html.js-rooms .rooms .room{opacity:0;transition:none}
  html.js-rooms .rooms .room__img{clip-path:inset(13% 10% 13% 10%);transition:none}
  html.js-rooms .rooms .room__img img{transform:scale(1.16);transition:none}
  html.js-rooms .rooms .room__body{opacity:0;transform:translate3d(0,18px,0);transition:none}

  html.js-rooms .rooms .room.is-shown{opacity:1;transition:opacity .9s var(--apple) var(--d,0ms)}
  html.js-rooms .rooms .room.is-shown .room__img{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--apple) var(--d,0ms)}
  html.js-rooms .rooms .room.is-shown .room__img img{transform:none;transition:transform 2.2s var(--apple) var(--d,0ms)}
  html.js-rooms .rooms .room.is-shown .room__body{opacity:1;transform:none;transition:opacity 1s var(--apple) var(--d2,380ms),transform 1.2s var(--apple) var(--d2,380ms)}
  html.js-rooms .rooms .room.is-done .room__img{clip-path:none}
}