/* The homepage: the film (film.js) where motion is welcome and the screen can draw in 3D; anywhere else the story it
   is made from, in pictures and words. This file only places things and gives them their look. */

.film { position: relative; background: #070606; color: #f5f0e8 }
.film .stage { display: none }
/* The stage shows its first screen's ground at once; the picture and the frame of the reel come up over it when the
   film can draw. */
.filming .film .stage { display: block; position: sticky; top: 0; height: 100svh; overflow: hidden; background: radial-gradient(ellipse 55% 75% at 62% 50%, #0f5e4a, #0c5443 30%, #043529 64%, #01120d) }
.filming .film .stage :is(.gl, .hud, .sound) { opacity: 0; transition: opacity 1s ease }
.filming .film .stage.ready :is(.gl, .hud, .sound) { opacity: 1 }
.filming .story { display: none }
/* Until then its first screen's words are the story's own, set where the film sets them, which takes them over. */
.filming .film:not(.live) .story { display: block; position: absolute; inset: 0 0 auto }
.filming .film:not(.live) .story :is(.beat:not(.b-intro), picture) { display: none }
.filming .film:not(.live) .story .b-intro { height: 100svh }
.filming .film:not(.live) .story .b-intro .words { text-shadow: none }
.filming .film:not(.live) .story .b-intro h2 > span { display: block; text-wrap: balance }
.filming .top { position: fixed }
.gl { position: absolute; inset: 0; display: block; width: 100%; height: 100% }

/* The words: big, each line rising out of its own mask. */
.lines { position: absolute; inset: 0; pointer-events: none }
.say { position: absolute; left: var(--gutter); right: var(--gutter); top: clamp(104px, 15vh, 150px); visibility: hidden }
:is(.say, .story) h2 { font: 800 clamp(40px, 5.7vw, 104px)/.93 var(--display); letter-spacing: -.05em; color: #f5f0e8 }
.say h2 > span { display: block; overflow: hidden; padding: 0 .1em .1em 0; margin-bottom: -.1em; white-space: nowrap }
.say h2 > span > i { display: inline-block; font-style: normal; transform: translate3d(0, 112%, 0) }
.say h2 > span.ln { overflow: visible; white-space: normal; text-wrap: balance }
:is(.say, .story) p { max-width: 34ch; margin-top: clamp(14px, 2.2vh, 26px); font: 500 clamp(17px, 1.4vw, 22px)/1.35 var(--font); letter-spacing: -.01em; color: rgb(245 240 232 / .64) }
.say > :not(h2) { opacity: 0; visibility: hidden }
:is(.say, .story) .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; max-width: none; margin-top: clamp(22px, 3.4vh, 40px); color: rgb(245 240 232 / .8); pointer-events: auto }
/* The free days and price beside the button, in two lines, so the words take no more room than the button. */
.per { max-width: 9.5em; line-height: 1.3; text-wrap: balance }
.s-loyal h2 { font-size: clamp(48px, 7.4vw, 136px) }
/* The first screen: what Wrkr is, beside the worker in its brackets. The last: what you get, beside its computer. */
.s-intro { top: 50%; translate: 0 -52%; right: 46% }
:is(.s-intro, .story .b-intro) h2 { font-size: clamp(44px, 5.4vw, 100px) }
.s-hire { right: 58% }
:is(.s-hire, .story .b-hire) h2 { font-size: clamp(34px, 4.1vw, 74px) }
.gets { display: grid; gap: 7px; max-width: 34ch; margin: clamp(16px, 2.4vh, 28px) 0 0; padding: 0; list-style: none; font: 500 clamp(15px, 1.15vw, 19px)/1.3 var(--font); letter-spacing: -.01em; color: rgb(245 240 232 / .8) }
.gets li { position: relative; padding-left: 24px }
.gets li::before { content: ""; position: absolute; left: 3px; top: .36em; width: 10px; height: 5px; border: solid #7ff0c2; border-width: 0 0 2px 2px; rotate: -45deg }
/* While the worker's computer is up, the words keep to the left of it; the longest lines a little smaller. */
:is(.s-worker, .s-ask, .s-works, .s-asks, .s-result, .s-schedule, .s-watch, .s-yourai, .s-neither, .s-safe) { right: 61% }
:is(.s-worker, .s-ask, .s-works, .s-asks, .s-result, .s-schedule, .s-watch, .s-yourai, .s-neither, .s-safe) h2 { font-size: clamp(34px, 4.1vw, 74px) }
:is(.s-works, .s-schedule) h2 { font-size: clamp(30px, 3.5vw, 62px) }
/* A name the line turns over rolls to the next; the line's own mask hides the others. */
.say .roll { display: inline-block; height: .93em; vertical-align: top }
.say .roll > span { display: block; will-change: transform }
.say .roll b { display: block; height: .93em; margin-bottom: .32em; font-weight: inherit; white-space: nowrap }

/* Behind the words, while the product is up under them. */
.shade { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgb(5 12 10 / .96), rgb(5 12 10 / .94) 33%, rgb(5 12 10 / 0) 47%) }

/* The frame of a reel: its corners, the chapter, the timecode, the sound and how far along you are. */
.hud { position: absolute; inset: 0; z-index: 40; pointer-events: none; color: rgb(245 240 232 / .5); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase }
.hud .c { position: absolute; width: 14px; height: 14px; border: 0 solid currentColor }
.hud .tl { left: 14px; top: 14px; border-width: 1.5px 0 0 1.5px } .hud .tr { right: 14px; top: 14px; border-width: 1.5px 1.5px 0 0 }
.hud .bl { left: 14px; bottom: 14px; border-width: 0 0 1.5px 1.5px } .hud .br { right: 14px; bottom: 14px; border-width: 0 1.5px 1.5px 0 }
.chapter { position: absolute; left: var(--gutter); bottom: 26px; display: flex; gap: 14px }
.chapter .n { font-weight: 700 }
.tc { position: absolute; right: var(--gutter); bottom: 26px; font-variant-numeric: tabular-nums }
.hint { position: absolute; left: 50%; bottom: 66px; translate: -50% 0; transition: opacity .6s ease }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px }
.progress i { position: absolute; inset: 0; background: currentColor; transform-origin: 0 50%; transform: scaleX(0) }
.film .sound { position: absolute; z-index: 41; left: 50%; bottom: 16px; translate: -50% 0; display: flex; align-items: center; gap: 3px; height: 36px; padding: 0 14px 0 12px; border: 1.5px solid currentColor; border-radius: 99px; background: none; color: rgb(245 240 232 / .5); font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer }
.film .sound:hover, .film .sound[aria-pressed="true"] { color: #f5f0e8 }
.sound i { width: 3px; height: 12px; border-radius: 2px; background: currentColor; transform-origin: 50% 100%; scale: 1 .35 }
.sound i:nth-child(2) { scale: 1 .6 } .sound i:nth-child(3) { scale: 1 .45 }
.sound span { margin-left: 7px }
.sound[aria-pressed="true"] i { animation: eq .9s ease-in-out infinite alternate }
.sound[aria-pressed="true"] i:nth-child(2) { animation-delay: -.3s } .sound[aria-pressed="true"] i:nth-child(3) { animation-delay: -.6s }
@keyframes eq { to { scale: 1 1 } }

/* The story: each moment of the film as a still, with its words where the film sets them. */
.story { margin: 0; padding: 0; list-style: none }
.story .beat { position: relative }
.story img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; background: #070606 }
.story .words { position: absolute; left: var(--gutter); right: var(--gutter); top: clamp(104px, 15vh, 150px); text-shadow: 0 2px 40px rgb(0 0 0 / .45) }
.story h2 > span { display: inline }
.story .roll b { font-weight: inherit }
/* Where the product is under the words, a shade behind them, as in the film. */
.story :is(.b-ask, .b-works, .b-asks, .b-result, .b-schedule, .b-watch)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(5 12 10 / .96), rgb(5 12 10 / .94) 33%, rgb(5 12 10 / 0) 47%) }
.story .words { z-index: 2 }
.story .roll b:not(:first-child) { display: none }
.story :is(.b-worker, .b-ask, .b-works, .b-asks, .b-result, .b-schedule, .b-watch, .b-yourai, .b-neither, .b-safe) .words { right: 61% }
.story :is(.b-worker, .b-ask, .b-works, .b-asks, .b-result, .b-schedule, .b-watch, .b-yourai, .b-neither, .b-safe) h2 { font-size: clamp(34px, 4.1vw, 74px) }
.story :is(.b-works, .b-schedule) h2 { font-size: clamp(30px, 3.5vw, 62px) }
.story .b-intro .words { top: 50%; translate: 0 -52%; right: 46% }
.story :is(.b-intro, .b-hire) h2 > span { display: block }
.story .b-hire .words { right: 58% }

@media (max-width: 760px) {
  :is(.say, .story .words) { top: 100px; left: 20px; right: 20px }
  :is(.say, .story) h2 { font-size: 10.8vw }
  :is(.say, .story) p { font-size: 16px; margin-top: 12px }
  .s-loyal h2 { font-size: 13.4vw }
  .shade, .story :is(.b-ask, .b-works, .b-asks, .b-result, .b-schedule, .b-watch)::before { background: linear-gradient(180deg, rgb(5 12 10 / .88), rgb(5 12 10 / .7) 26%, rgb(5 12 10 / 0) 38%) }
  .say[class] { right: 20px }
  .story .beat .words { right: 20px }
  :is(.s-worker, .s-ask, .s-asks, .s-result, .s-watch, .s-yourai, .s-neither, .s-safe) h2,
  .story :is(.b-worker, .b-ask, .b-asks, .b-result, .b-watch, .b-yourai, .b-neither, .b-safe) h2 { font-size: 9vw }
  :is(.s-works, .s-schedule) h2, .story :is(.b-works, .b-schedule) h2 { font-size: 7.6vw }
  .s-intro, .story .beat.b-intro .words { top: 100px; translate: none }
  .story :is(.b-intro, .b-hire) h2 > span { display: inline }
  :is(.s-intro, .story .b-intro) h2 { font-size: 10.6vw }
  :is(.s-hire, .story .b-hire) h2 { font-size: 9vw }
  .gets { gap: 4px; margin-top: 12px; font-size: 14px }
  :is(.say, .story) .actions { gap: 12px 16px }
  .per { flex: 1 1 0; min-width: 0; font-size: 15px }
  .story img { aspect-ratio: 390 / 844 }
  .filming .film .stage { background: radial-gradient(ellipse 120% 60% at 50% 62%, #10654f, #084f3e 55%, #032c22) }
  .film .sound { bottom: 14px; height: 32px }
  .chapter, .tc { bottom: 58px }
  .chapter { gap: 10px }
  .hint { display: none }
}