/* Home-page hero: the cycling people from the ads, shared with the /start-* landing pages
   (make-start-pages.py holds the source of these rules). The hero is dark, so the fixed
   header's text is light until it sticks. */
:root{--on-dark:#F4F1EC;--on-dark-soft:rgba(244,241,236,.72);--accent:#5B7A57;--ease:cubic-bezier(.22,.61,.36,1);--serif:'Cormorant Garamond',Georgia,'Iowan Old Style',serif;--sans:Inter,-apple-system,'Helvetica Neue',sans-serif}
.room-pic.p-due{background-image:url("../img/ad-due-tomorrow.jpg")}
.room-pic.p-zoom{background-image:url("../img/ad-zoom.jpg")}
.room-pic.p-night{background-image:url("../img/ad-night-shift.jpg")}
.room-pic{background-position:50% 38%}
body.dark-hero .site-header:not(.is-stuck) .brand,body.dark-hero .site-header:not(.is-stuck) .site-nav a{color:var(--on-dark)}
body.dark-hero .site-header:not(.is-stuck) .site-nav a:hover{border-bottom-color:var(--on-dark)}
.room-copy{padding-top:7rem}
.room-copy p{margin:0}
.room-copy p+p{margin:0}
.room-words{transition:opacity .45s ease}
.room-words.is-swapping{opacity:0}
.room .appstore img{height:54px}
.notify-strip{background:var(--paper-warm);padding:clamp(2rem,5vw,3rem) var(--gutter);text-align:center}
.notify-strip .offer{margin:0 auto 1rem;max-width:34rem;color:var(--ink-soft)}
.notify-strip .notify__note{margin:0.9rem auto 0;max-width:34rem}
.bar .appstore img{height:40px}
/* ---------- The room ---------- */
.room{position:relative;min-height:100svh;background:var(--stone);color:var(--on-dark);
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.room-pic{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:50% 40%;
  opacity:0;transition:opacity 1.6s var(--ease);will-change:opacity,transform}
.room-pic.is-on{opacity:1;animation:drift 14s linear forwards}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.room-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(27,25,23,.42) 0%,rgba(27,25,23,0) 26%,rgba(27,25,23,0) 44%,rgba(27,25,23,.84) 100%)}
.room-top-unused{position:absolute;top:0;left:0;right:0;padding:calc(16px + env(safe-area-inset-top)) var(--gutter) 0;
  display:flex;align-items:center;justify-content:space-between}
.room-copy{position:relative;padding:0 var(--gutter) calc(22px + env(safe-area-inset-bottom));max-width:620px}
.room-h1{font:300 clamp(40px,11vw,64px)/1.0 var(--serif);letter-spacing:-.01em;margin:0 0 14px;color:var(--on-dark)}
.room-h1 em{font-style:italic;font-weight:300}
.room-lede{font:300 clamp(16px,4.2vw,19px)/1.5 var(--sans);color:var(--on-dark-soft);max-width:34rem;margin-bottom:22px}
.get{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.appstore{display:inline-block;line-height:0;transition:opacity .3s ease,transform .3s ease}
.appstore img{display:block;height:54px;width:auto}
.appstore:active{transform:scale(.97)}
.get-note{font-size:13px;color:var(--on-dark-soft)}

/* the room row: name, hear button, and the dots that say which room */
.here{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid rgba(244,241,236,.22)}
.hear{flex:0 0 auto;width:48px;height:48px;border-radius:999px;border:1px solid rgba(244,241,236,.55);
  background:rgba(27,25,23,.25);color:var(--on-dark);cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s ease,border-color .3s ease}
.hear:hover,.hear.is-playing{background:var(--accent);border-color:var(--accent)}
.hear svg{width:16px;height:16px;fill:currentColor}
.hear .ic-pause{display:none}
.hear.is-playing .ic-play{display:none}
.hear.is-playing .ic-pause{display:block}
.here-text{flex:1 1 auto;min-width:0}
.here-name{font:400 18px/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--on-dark);transition:opacity .5s ease}
.here-song{font-size:13px;color:var(--on-dark-soft);transition:opacity .5s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.here-text.is-swapping .here-name,.here-text.is-swapping .here-song{opacity:0}
.dots{display:flex;gap:0;flex:0 0 auto;padding:0;margin:0;list-style:none}
.dots button{width:18px;height:32px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.dots button span{display:block;width:7px;height:7px;border-radius:999px;background:rgba(244,241,236,.4);transition:transform .4s var(--ease),background .4s ease}
.dots button[aria-current="true"] span{background:var(--on-dark);transform:scale(1.5)}

/* ---------- The bar ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:10;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(27,25,23,.86);color:var(--on-dark);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  transform:translateY(110%);transition:transform .45s var(--ease)}
.bar.is-shown{transform:none}
.bar-text{font:400 16px/1.2 var(--serif)}
.bar-text small{display:block;font:300 12px/1.3 var(--sans);color:var(--on-dark-soft);margin-top:2px}
.bar .appstore img{height:40px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .room-pic{transition:none}
  .room-pic.is-on{animation:none}
  .bar{transition:none}
  .here-name,.here-song{transition:none}
}


/* site.css gives every section its block padding; the hero does not want it. */
section.room{padding:0}
.room-copy p.room-lede{margin:0 0 22px}
/* Wide screens: the person sits to the right of the copy. Last so it wins. */
@media (min-width:900px){.room-pic{background-position:68% 38%}.room-copy{padding-bottom:3.5rem}}
/* The rule above the play control runs the full width, same margin both sides (Charles, 3 Oct). */
.room-copy{max-width:none}
.room-h1,.room-lede{max-width:620px}