/* Homa Pod, built scene by scene in the home page's language: one held
   object per scene (the phone, the thumbnail, the cards), a giant word, a
   ground colour, and one thing to do. Copy is hers. */

.hp-s { position: relative; min-height: 100svh; overflow: clip; }
.hp-c { position: absolute; z-index: 4; display: grid; justify-items: start; }
.hp-c-bl { left: var(--m); bottom: 7vh; max-width: 30vw; }
.hp-c-br { right: var(--m); bottom: 7vh; max-width: 25vw; }
.hp-c-tl { left: var(--m); top: 17vh; max-width: 36vw; }
.hp-c p { margin-top: .8em; max-width: 42ch; }
.hp-c .cta { margin-top: clamp(18px, 3vh, 30px); }
.hp-h { margin-top: clamp(12px, 2vh, 20px); font-weight: 600; font-size: calc(var(--h) * .62); line-height: .98; letter-spacing: -0.03em; }
.hp-meta { margin-top: 18px; font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.hp-dark { background: var(--ink); color: var(--paper); }
.hp-dark:hover { background: var(--indigo-deep); }
.fit, .hp-giant, .hp-word, .hp-cw { white-space: nowrap; }

/* ---------------------------------------------------------------- 01 hero */
.hp-hero { background: var(--ink); color: var(--paper); }
.hp-giant { position: absolute; z-index: 1; left: 50%; top: 19vh; translate: -50% 0; margin: 0; font-weight: 800; font-variation-settings: "wdth" 125;
  line-height: .8; letter-spacing: -0.05em; color: var(--paper); }
.hp-phone { left: 50%; top: 50%; height: 76vh; --hr: -3deg; }
.hp-phone .ph-vid { opacity: 1; }
.hp-snd { position: absolute; z-index: 6; left: 50%; bottom: 6%; translate: -50% 0; display: inline-flex; align-items: center; gap: 2.4cqw;
  padding: 2.8cqw 4.6cqw; border-radius: 999px; background: rgba(255,255,255,.94); color: #111; font-size: 4.6cqw; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2cqw 6cqw rgba(0,0,0,.3); transition: scale .3s var(--snap), background .25s; }
.hp-snd:hover { scale: 1.05; }
.hp-snd i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--coral); }
.hp-snd[aria-pressed="true"] { background: var(--coral); }
.hp-snd[aria-pressed="true"] i { background: #fff; animation: rec 1s steps(1) infinite; }
.hp-snd:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* ------------------------------------------------------- 02 latest episode */
.hp-latest { --tx: rgba(239,238,232,.4); background: var(--indigo-deep); color: var(--paper); }
.hp-thumb { position: absolute; z-index: 3; right: calc(var(--m) + 1vw); top: 52%; translate: 0 -50%; width: 47vw; aspect-ratio: 16 / 9;
  rotate: 2deg; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1);
  transition: rotate .6s var(--ease), scale .6s var(--ease); }
.hp-thumb img, .hp-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-thumb video { opacity: 0; transition: opacity .5s var(--ease); }
.hp-thumb:hover, .hp-thumb:focus-visible { rotate: 0deg; scale: 1.02; }
.hp-thumb:hover video, .hp-thumb:focus-visible video { opacity: 1; }
.hp-play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; translate: -50% -50%; border-radius: 50%;
  background: var(--paper); box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: scale .4s var(--snap), opacity .4s; }
.hp-play::after { content: ""; position: absolute; left: 38%; top: 30%; border-left: 26px solid var(--ink); border-top: 18px solid transparent; border-bottom: 18px solid transparent; }
.hp-thumb:hover .hp-play { scale: .8; opacity: .0; }
.hp-thumb:focus-visible { outline: 3px solid var(--coral); outline-offset: 6px; }

/* ------------------------------------------------------------- 03 topics */
.hp-topics { --tc: var(--indigo-deep); --tx: var(--paper); background: var(--tc); color: var(--tx); transition: background .6s var(--ease), color .6s var(--ease); }
.hp-topics[data-topic="1"] { --tc: var(--coral);  --tx: var(--ink); }
.hp-topics[data-topic="2"] { --tc: var(--violet); --tx: var(--ink); }
.hp-topics[data-topic="3"] { --tc: var(--paper);  --tx: var(--ink); }
.hp-topics .hp-c-tl { top: 15vh; max-width: 44vw; }
.hp-dots { display: flex; gap: clamp(16px, 1.6vw, 26px); margin-top: clamp(24px, 4vh, 40px); }
.hp-dot { display: grid; justify-items: center; gap: 10px; }
.hp-dot i { width: clamp(46px, 3.8vw, 62px); aspect-ratio: 1; border-radius: 50%; display: block; transition: scale .35s var(--snap), box-shadow .3s; }
.hp-dot[data-i="0"] i { background: var(--indigo); }
.hp-dot[data-i="1"] i { background: var(--coral); }
.hp-dot[data-i="2"] i { background: var(--violet); }
.hp-dot[data-i="3"] i { background: var(--paper); }
.hp-dot i { box-shadow: inset 0 0 0 1.5px rgba(20,20,15,.18), 0 8px 18px rgba(0,0,0,.18); }
.hp-dot:hover i { scale: 1.08; }
.hp-dot[aria-pressed="true"] i { box-shadow: 0 0 0 3px var(--tc), 0 0 0 5px var(--tx); }
.hp-dot span { font-weight: 600; font-size: clamp(10px, .76vw, 12px); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hp-dot:focus-visible i { outline: 2px solid var(--tx); outline-offset: 6px; }
.hp-picked { margin-top: clamp(22px, 3.6vh, 34px) !important; font-size: clamp(18px, 1.4vw, 23px); line-height: 1.4; max-width: 34ch !important; min-height: 4.2em; }
.hp-note { margin-top: clamp(18px, 3vh, 30px) !important; font-size: 15px; opacity: .78; }
.hp-topphone { left: 72%; top: 46%; height: 70vh; --hr: 3deg; transition: rotate .5s var(--snap); }
.hp-topphone .ph-vid { opacity: 1; }
.hp-topphone.is-flip { --hr: -4deg; }
.hp-word { position: absolute; z-index: 1; left: 50%; bottom: -4vh; translate: -50% 0; margin: 0; font-weight: 800; font-variation-settings: "wdth" 125;
  line-height: .8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px var(--tx); opacity: .9; }

/* ------------------------------------------------------- 04 conversations */
.hp-pin { position: relative; }
.hp-people .s-pin { color: var(--paper); }
.hp-room { opacity: .3; }
.hp-room::after { background: linear-gradient(90deg, rgba(20,20,15,.9), rgba(20,20,15,.4)); }
.hp-lines { position: absolute; z-index: 3; left: 46vw; right: var(--m); top: 50%; margin: 0; padding: 0; list-style: none;
  display: grid; gap: 4vh; translate: 0 calc(-12vh - var(--lp, 0) * 1vh); transition: translate .6s var(--ease); }
.hp-lines li { font-weight: 600; font-size: calc(var(--h) * .62); line-height: 1; letter-spacing: -0.03em; opacity: .2; transition: opacity .5s var(--ease); }
.hp-lines li.is-on { opacity: 1; }
.hp-point { position: absolute; z-index: 3; left: var(--m); right: var(--m); bottom: 8vh; margin: 0; max-width: 60ch; font-size: clamp(17px, 1.3vw, 22px);
  opacity: 0; translate: 0 20px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.hp-point b { font-weight: 700; }
.hp-point.is-on { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------ 05 episodes */
.hp-eps { padding: clamp(120px, 17vh, 190px) var(--m) clamp(90px, 13vh, 150px); min-height: 0; }
.hp-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(500px, 100%), 1fr)); gap: clamp(24px, 2.4vw, 40px);
  margin-top: clamp(36px, 6vh, 64px); }
.hp-card { display: grid; gap: 16px; align-content: start; color: var(--ink); }
.hp-scene { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--g);
  container-type: size; box-shadow: 0 24px 50px rgba(0,0,0,.14); transition: translate .5s var(--ease), box-shadow .5s; }
a.hp-card:hover .hp-scene, a.hp-card:focus-visible .hp-scene { translate: 0 -6px; box-shadow: 0 34px 70px rgba(0,0,0,.2); }
.hp-cw { position: absolute; z-index: 1; left: 50%; top: 20%; translate: -50% 0; font-weight: 800; font-variation-settings: "wdth" 125;
  line-height: .8; letter-spacing: -0.05em; color: var(--paper); transition: translate .8s var(--ease); }
a.hp-card:hover .hp-cw { translate: -54% 0; }
.hp-cphone { left: 72%; top: 56%; height: 84cqh; --hr: 5deg; transition: rotate .6s var(--snap), top .6s var(--ease); }
a.hp-card:hover .hp-cphone, a.hp-card:focus-visible .hp-cphone { --hr: 0deg; top: 50%; }
.hp-cphone .ph-in > img, .hp-cphone .ph-in > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hp-cphone video { opacity: 0; transition: opacity .4s; }
a.hp-card:hover .hp-cphone video { opacity: 1; }
.hp-cap { display: grid; gap: 6px; }
.hp-cap b { font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.hp-cap em { font-style: normal; font-weight: 600; }
.hp-cap strong { font-weight: 700; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.1; letter-spacing: -0.02em; }
.hp-cap span { max-width: 52ch; opacity: .8; }
.hp-cap i { margin-top: 6px; font-style: normal; font-weight: 700; font-size: var(--c); letter-spacing: .16em; text-transform: uppercase; }
a.hp-card:focus-visible { outline: none; }
a.hp-card:focus-visible .hp-scene { outline: 3px solid var(--indigo-deep); outline-offset: 4px; }
.is-soon .hp-scene { background: transparent; box-shadow: inset 0 0 0 2px rgba(20,20,15,.18); display: flex; justify-content: center; align-items: center; gap: 4cqw; }
.hp-slot { height: 62cqh; aspect-ratio: 629 / 1304; border-radius: 4cqw; border: 2px dashed rgba(20,20,15,.3); }
.hp-slot:nth-child(2) { translate: 0 -4cqh; }

/* -------------------------------------------------- 06 take something */
.hp-take .s-pin { color: var(--ink); }
.hp-tphone { left: 72%; top: 52%; height: 76vh; --hr: 3deg; }
.hp-stack { background: #F2F2F7; }
.hp-tk { position: absolute; inset: 14% 8% 10%; display: grid; align-content: space-between; padding: 9cqw 8cqw; border-radius: 6cqw;
  background: var(--paper); color: var(--ink); box-shadow: 0 3cqw 8cqw rgba(0,0,0,.14);
  transition: translate .6s var(--ease), rotate .6s var(--ease), scale .6s var(--ease), opacity .5s; }
.hp-tk img { width: 16cqw; border-radius: 22%; }
.hp-tk p { margin: 0; font-weight: 800; font-variation-settings: "wdth" 108; font-size: 9cqw; line-height: 1.04; letter-spacing: -0.03em; }
.hp-tk { translate: 0 calc(var(--d, 0) * 4cqh); scale: calc(1 - var(--d, 0) * .05); z-index: calc(10 - var(--d, 0)); opacity: calc(1 - var(--d, 0) * .25); }
.hp-tk.is-gone { translate: -130% -4%; rotate: -14deg; opacity: 0; }
.hp-later { margin-top: clamp(26px, 4vh, 40px) !important; font-size: 15px; opacity: .8; }
.hp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-chips span { padding: 8px 15px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 600; font-size: 14px; }

/* ---------------------------------------------------------- 07 about */
.hp-about { min-height: 0; padding: clamp(110px, 15vh, 170px) var(--m); }
.hp-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 110px); }
.hp-two p { margin-top: .8em; max-width: 44ch; }
.hp-two .cta { margin-top: clamp(20px, 3.4vh, 32px); }
.hp-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-ctas .cta { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .hp-tk, .hp-lines, .hp-point, .hp-thumb, .hp-cw, .hp-cphone { transition: none; }
}

/* ------------------------------------------------------------ narrow */
@media (max-width: 1180px) {
  .hp-phone { height: 62vh; }
  .hp-c-bl, .hp-c-br { max-width: 28vw; }
  .hp-thumb { width: 44vw; }
}
@media (max-width: 860px) {
  .hp-s { padding: 0 var(--m) 9vh; }
  .hp-c, .hp-c-bl, .hp-c-br, .hp-c-tl { position: relative; left: auto; right: auto; top: auto; bottom: auto; max-width: none; }
  .hp-hero { padding-top: 63vh; }
  .hp-hero .hp-c-br { margin-top: 18px; }
  .hp-giant { top: 11vh; }
  .hp-phone { top: 33vh; height: 46vh; }
  .hp-latest { padding-top: 15vh; }
  .hp-thumb { position: relative; right: auto; top: auto; translate: none; width: 100%; rotate: 0deg; margin-top: 30px; }
  .hp-topics { padding-top: 15vh; padding-bottom: 30vh; }
  .hp-topphone { display: none; }
  .hp-topics .hp-c-tl { top: auto; max-width: none; }
  .hp-dots { gap: 12px; }
  .hp-people .hp-c-tl, .hp-take .hp-c-tl { position: absolute; left: var(--m); right: var(--m); top: 11vh; }
  .hp-lines { left: var(--m); top: 62%; }
  .hp-lines li { font-size: 1.7rem; }
  .hp-point { bottom: 4vh; }
  .hp-tphone { left: 50%; top: 71%; height: 40vh; }
  .hp-later, .hp-chips { display: none; }
  .hp-two { grid-template-columns: 1fr; }
}
.hp-c .lab, .hp-two .lab { white-space: nowrap; }
.hp-meta { white-space: nowrap; }