/* Home page. Loads after site.css and only touches the hero (and centres the story line that follows it).
   The story: loose papers sit around the hero text, then, as you scroll, they drift in and the product window rises over them.
   Layers, back to front: papers (.g-papers), the window (.g-film), the hero text (.g-copy).
   Everything that moves is transform or opacity. Without scripts, or with reduced motion, or on a very short window, nothing moves:
   the papers sit around the text and the window follows it in the normal flow. */

:root {
  --hdr: 67.4px;                         /* sticky header height, measured; the stage sticks just under it */
  --sh: calc(100svh - var(--hdr));       /* one screen under the header */
  --D: calc(var(--sh) * 1.35);           /* scroll distance of the whole gathering */
  --sheet: #fbf9f3; --sheet-ink: #2b3f3e; --sheet-soft: #76837f; --sheet-line: #dbd5c6;
  --paper-edge: rgba(0, 0, 0, .06);
  --sheet-shadow: rgba(0, 0, 0, .09);
  --ease-move: cubic-bezier(.5, 0, .2, 1);
  --ease-drift: cubic-bezier(.3, .5, .4, 1);
}
@media (max-width: 760px) { :root { --hdr: 69px; } }
@media (max-width: 840px) { html:lang(es) { --hdr: 69px; } }   /* the Spanish nav gives way to the menu button sooner */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sheet: #e5dfcf; --sheet-line: #cbc4b2; --sheet-soft: #6c7975; --paper-edge: rgba(0, 0, 0, .3); --sheet-shadow: rgba(0, 0, 0, .34); }
}
:root[data-theme="dark"] { --sheet: #e5dfcf; --sheet-line: #cbc4b2; --sheet-soft: #6c7975; --paper-edge: rgba(0, 0, 0, .3); --sheet-shadow: rgba(0, 0, 0, .34); }

/* ---------- the section: static layout (the calm composition) ---------- */
.gather { position: relative; overflow-x: clip; display: flex; flex-direction: column; --wb: min(clamp(112px, 14vw, 290px), 24svh); --fs: min(clamp(2.3rem, 1.2rem + 3.4vw, 6.5rem), 10.5svh); --tz: calc(var(--fs) * 4.4); }
.g-stage { display: contents; }

.g-copy { position: relative; z-index: 2; order: 1; min-height: var(--sh); display: grid; place-items: center; padding: clamp(28px, 6svh, 72px) 20px; padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); text-align: center; }
.g-copy-in { display: grid; justify-items: center; width: 100%; }
.g-copy h1 { font-size: var(--fs); line-height: 1.03; letter-spacing: -.03em; max-width: 10.5em; }
.g-copy .lede { max-width: 42ch; margin: 22px auto 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.6rem); text-wrap: balance; }
.g-copy .cta { justify-content: center; margin-top: 32px; }
.g-copy .btn { min-height: 52px; padding-inline: 24px; font-size: 1.0625rem; }
.g-copy .meta { max-width: 58ch; margin: 20px auto 0; text-wrap: balance; font-size: clamp(.875rem, .8rem + .2vw, 1.1rem); }
html:lang(es) .gather { --fs: min(clamp(2.2rem, 1.1rem + 3.1vw, 5.6rem), 9.5svh); --tz: calc(var(--fs) * 5); }

.g-copy-in > * { animation: rise 520ms var(--ease) both; }
.g-copy-in > :nth-child(2) { animation-delay: 60ms; }
.g-copy-in > :nth-child(3) { animation-delay: 120ms; }
.g-copy-in > :nth-child(4) { animation-delay: 180ms; }

/* the window with the film */
.g-film { order: 2; position: relative; z-index: 1; margin: 8px auto 0; width: min(calc(100vw - 40px), 640px); display: flex; flex-direction: column; align-items: center; gap: 16px; padding-bottom: var(--section); }
.g-window { width: 100%; border-radius: 12px; overflow: hidden; background: #f3efe5; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .05), 0 28px 70px rgba(0, 0, 0, .16); }
.g-bar { position: relative; height: 36px; display: flex; align-items: center; padding-inline: 14px; background: #e9e3d6; border-bottom: 1px solid #d3cdbf; }
.tl { display: flex; gap: 8px; }
.tl i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.tl i:nth-child(1) { background: #ff5f57; } .tl i:nth-child(2) { background: #febc2e; } .tl i:nth-child(3) { background: #28c840; }
.g-title { position: absolute; left: 0; right: 0; text-align: center; font: 600 .8125rem/1 var(--sans); color: #5a6b68; pointer-events: none; }
.g-screen { position: relative; aspect-ratio: 954 / 907; overflow: hidden; background: #f3efe5; }
/* the Documents still, cropped to its own content: the still's drawn title bar is cut off, the CSS bar above replaces it */
.g-screen img { position: absolute; max-width: none; width: calc(1020 / 954 * 100%); left: calc(-33 / 954 * 100%); top: calc(-93 / 907 * 100%); }
.g-modal { padding: 0; border: 0; border-radius: 12px; background: #000; width: min(92vw, calc(86svh * .8)); max-width: none; overflow: visible; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.g-modal::backdrop { background: rgba(10, 20, 20, .6); }
.g-modal video { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; background: #000; }
.g-close { position: absolute; z-index: 1; top: -48px; right: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.g-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.g-film .play { flex: none; }

/* a slightly deeper paper behind the window, so the cream window reads; it fades in as the papers gather */
.g-back { display: none; }

/* the papers */
.g-papers { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: var(--sh); pointer-events: none; animation: g-fade 700ms var(--ease) 120ms both; }
@keyframes g-fade { from { opacity: 0; } }
.g-p { position: absolute; z-index: var(--z, 1); width: var(--w); left: calc(50% + var(--x) - var(--w) / 2); top: calc(50% + var(--y) - var(--w) * var(--ar) / 2); }
.g-sheet { position: relative; width: 100%; height: calc(var(--w) * var(--ar)); overflow: hidden; background: var(--sheet); color: var(--sheet-ink); border-radius: 2px; padding: 1.25em 1.2em; font: 400 calc(var(--w) / 16)/1.3 var(--sans);
  box-shadow: 0 0 0 1px var(--paper-edge), 0 1px 2px var(--sheet-shadow), 0 calc(5px + 14px * var(--d)) calc(12px + 26px * var(--d)) var(--sheet-shadow);
  transform: translate3d(0, 0, 0) rotate(var(--r)) scale(var(--sc)); }
.g-sheet > * { display: block; }
/* the paper text is drawn as generated content: it is decoration (the sheets are aria-hidden), not copy to read */
.cl::before, .tt::before, .dt::before, .row em::before { content: attr(data-t); }
.cl { font-size: .62em; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--sheet-soft); line-height: 1.25; }
.tt { margin-top: .5em; font: 600 1.18em/1.15 var(--serif); letter-spacing: -.01em; }
.dt { margin-top: .2em; font-size: .68em; color: var(--sheet-soft); }
.rule { height: 1px; background: var(--sheet-line); margin: .8em 0 .45em; }
.ln { height: .34em; border-radius: .3em; background: var(--sheet-line); margin-top: .72em; width: 100%; }
.ln.m { width: 84%; } .ln.s { width: 62%; } .ln.xs { width: 36%; }
.sig { width: 42%; margin-top: .8em; overflow: visible; fill: none; stroke: var(--sheet-ink); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.row { display: flex; align-items: center; gap: .8em; margin-top: .62em; }
.row .ln { margin-top: 0; flex: 1; } .row .ln.v { flex: none; width: 24%; }
.row.hit { margin-inline: -.5em; padding: .32em .5em; background: #dfe7dd; border-radius: 2px; font-size: .68em; font-weight: 600; color: var(--sheet-ink); }
.row.hit em { font-style: normal; }
.letter .ln { margin-top: .78em; }
.folded::after { content: ""; position: absolute; left: 0; right: 0; top: 36%; height: 1px; background: rgba(0, 0, 0, .07); box-shadow: 0 1px 0 rgba(255, 255, 255, .55); }
.stapled::before { content: ""; position: absolute; left: .9em; top: .8em; width: 1.5em; height: .16em; border-radius: .1em; background: #8f9693; transform: rotate(-24deg); box-shadow: 0 .05em .05em rgba(0, 0, 0, .3); }
.scan .img { position: relative; height: 0; padding-bottom: 54%; margin-top: .9em; background: #262a2b; border-radius: 2px; overflow: hidden; }
.scan .img::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: radial-gradient(circle at 50% -10%, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, 0) 60%); clip-path: polygon(50% 0, 96% 100%, 4% 100%); }
.scan .ln:first-of-type { margin-top: .9em; }
.snap { padding: .42em; background: var(--sheet); }
.photo { height: 100%; border-radius: 1px; background: #d7cfba; box-shadow: inset 0 0 2.2em rgba(0, 0, 0, .2); padding: 1.1em .9em; }
.photo svg { width: 100%; height: 100%; stroke: #3b474c; stroke-width: 2.2; opacity: .85; }
.slip { padding-inline: 1em; }
.slip .tt { font-size: 1.05em; }

/* positions around the text (centre of the stage is 0,0); depth sets size, shadow and how fast it moves
   --x --y offset of the paper's centre, --w width, --ar height / width, --r tilt, --sc depth scale, --d shadow depth,
   --k parallax rate (1 = moves with the page), --a --b when it starts and ends gathering (share of the whole scroll) */
.p1 { --gap: 96px; --x: calc(-1 * (var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap))); --y: calc(var(--sh) * -.27); --w: calc(var(--wb) * .92); --ar: 1.32; --r: -7deg; --sc: .9;  --d: .15; --z: 1; --k: .30; --a: .30; --b: .66; }
.p2 { --gap: 28px; --x: calc(-1 * (var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap))); --y: calc(var(--sh) * .09);  --w: calc(var(--wb) * 1.1);  --ar: 1.32; --r: 4deg;  --sc: 1.04; --d: 1;   --z: 4; --k: .82; --a: .12; --b: .52; }
.p3 { --gap: 120px; --x: calc(-1 * (var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap))); --y: calc(var(--sh) * .45); --w: calc(var(--wb) * .98); --ar: 1.32; --r: -3deg; --sc: 1;    --d: .55; --z: 2; --k: .52; --a: .16; --b: .58; }
.p4 { --gap: 60px; --x: calc(var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap));  --y: calc(var(--sh) * -.29); --w: calc(var(--wb) * .94); --ar: 1.32; --r: 6deg;  --sc: .92; --d: .2;  --z: 1; --k: .34; --a: .32; --b: .68; }
.p5 { --gap: 24px; --x: calc(var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap));  --y: calc(var(--sh) * .02);  --w: calc(var(--wb) * .98); --ar: 1.2;  --r: -5deg; --sc: 1.05; --d: .9;  --z: 4; --k: .9;  --a: .14; --b: .54; }
.p6 { --gap: 130px; --x: calc(var(--tz) + var(--w) * (var(--sc) / 2 + .1) + var(--gap)); --y: calc(var(--sh) * .38); --w: calc(var(--wb) * .66); --ar: 1.9;  --r: 4deg;  --sc: .96; --d: .45; --z: 2; --k: .5;  --a: .18; --b: .6; }

@media (max-width: 1100px) { .p3 { --gap: 70px; } .p6 { --gap: 80px; } }
/* upright tablets and narrow windows: no room at the sides, so four papers sit in the corners above and below the text */
@media (max-aspect-ratio: 1/1) {
  .gather { --wb: clamp(104px, 19vw, 190px); }
  .p3, .p6 { display: none; }
  .p1 { --x: calc(var(--wb) * -.2 - 28vw); --y: calc(var(--sh) * -.37); }
  .p4 { --x: calc(var(--wb) * .2 + 28vw);  --y: calc(var(--sh) * -.39); }
  .p2 { --x: calc(var(--wb) * -.1 - 30vw); --y: calc(var(--sh) * .38); }
  .p5 { --x: calc(var(--wb) * .1 + 30vw);  --y: calc(var(--sh) * .4); }
  /* the text scrolls up past these two, so they fade out in place first */
  .p1, .p4 { --k: .1; --a: .02; --b: .08; }
  html.g-live .p1 .g-sheet, html.g-live .p4 .g-sheet { animation-name: g-leave; }
}
/* phones: two small papers at the bottom corners, nothing above the text (the text would scroll over it) */
@media (max-width: 600px) {
  .gather { --wb: 92px; }
  .p1, .p3, .p4, .p6 { display: none; }
  .p2 { --x: -31vw; --y: calc(var(--sh) * .45);  --w: calc(var(--wb) * 1);    --k: .5; --a: .2;  --b: .56; }
  .p5 { --x: 33vw;  --y: calc(var(--sh) * .42);  --w: calc(var(--wb) * .96); --k: .6; --a: .22; --b: .58; }
}
/* a short window: the text tightens to keep the buttons in view, and the papers keep to the far edges (none on a landscape phone) */
@media (max-height: 560px) {
  .gather { --wb: clamp(96px, 11vw, 150px); }
  .g-copy { padding-block: 16px; }
  .g-copy h1 { font-size: min(var(--fs), 10svh); max-width: 20em; }
  .g-copy .lede { margin-top: 12px; font-size: min(1.1rem, 5svh); max-width: 52ch; }
  .g-copy .cta { margin-top: 18px; }
  .g-copy .btn { min-height: 44px; }
  .g-copy .meta { margin-top: 12px; }
  .p2, .p3, .p5, .p6 { display: none; }
  .p1 { --x: calc(-50vw + var(--w) / 2 + 28px); --y: calc(var(--sh) * -.1); }
  .p4 { --x: calc(50vw - var(--w) / 2 - 28px);  --y: calc(var(--sh) * .1); }
}
@media (max-height: 560px) and (max-width: 1000px) { .g-papers { display: none; } }

/* the story line that follows: centred, to sit under the window */
.pile .wrap { justify-items: center; text-align: center; }
.pile .big { max-width: 18ch; }

/* ---------- live: the gathering, tied to scroll ---------- */
@media (prefers-reduced-motion: no-preference) and (min-height: 561px) {
  html.g-live .gather { display: block; }
  html.g-live .gather::after { content: ""; display: block; height: var(--D); }   /* the scroll distance; it has to be content, not padding, or the sticky stage has no room to stick */
  html.g-live .g-stage { display: block; position: sticky; top: var(--hdr); height: var(--sh); z-index: 1; }
  html.g-live .g-copy { margin-top: calc(var(--sh) * -1); }
  html.g-live .g-film { position: absolute; z-index: 3; inset: 0; margin: auto; padding: 0; order: 0; height: max-content; width: var(--fw); gap: 16px; --fw: min(calc(100vw - 40px), 860px, calc((var(--sh) - 150px) / .951)); will-change: transform, opacity; }
  html.g-live .g-back { display: block; position: absolute; inset: 0; background: var(--paper-deep); opacity: 0; }
  html.g-live .g-sheet { will-change: transform, opacity; }
  html.g-live .g-p { will-change: transform; }

  @keyframes g-away { to { opacity: 0; pointer-events: none; } }
  @keyframes g-drift { to { transform: translate3d(0, calc(var(--k) * var(--a) * var(--D) * -1), 0); } }
  @keyframes g-back { 0% { opacity: 0; } 36%, 84% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes g-leave { to { opacity: 0; } }
  @keyframes g-gather {
    from { transform: translate3d(0, 0, 0) rotate(var(--r)) scale(var(--sc)); opacity: 1; }
    78% { opacity: 1; }
    to { transform: translate3d(calc(var(--x) * -1), calc(var(--y) * -1 + var(--k) * var(--a) * var(--D)), 0) rotate(calc(var(--r) * -.3)) scale(calc(var(--sc) * .7)); opacity: 0; }
  }
  @keyframes g-rise {
    0% { transform: translate3d(0, calc(50% + var(--sh) * .6), 0) scale(.97); opacity: 0; animation-timing-function: linear; }
    6% { opacity: 1; }
    58% { transform: translate3d(0, calc((50% + var(--sh) * .6) * .04), 0) scale(.995); animation-timing-function: cubic-bezier(.3, .6, .3, 1); }
    68%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  }
}

/* native scroll-driven animation: one named timeline on the section, from the moment the stage sticks to the moment it lets go */
@media (prefers-reduced-motion: no-preference) and (min-height: 561px) {
  @supports (animation-timeline: scroll()) {
    html.g-native .gather { view-timeline-name: --g; view-timeline-axis: block; view-timeline-inset: var(--hdr) 0px; }
    html.g-native .g-copy-in { animation: g-away linear both; animation-timeline: --g; animation-range: contain 3% contain 30%; }
    html.g-native .g-back { animation: g-back linear both; animation-timeline: --g; animation-range: contain 6% contain 100%; }
    html.g-native .g-p { animation: g-drift var(--ease-drift) both; animation-timeline: --g; animation-range: contain 0% contain calc(var(--a) * 100%); }
    html.g-native .g-sheet { animation: g-gather var(--ease-move) both; animation-timeline: --g; animation-range: contain calc(var(--a) * 100%) contain calc(var(--b) * 100%); }
    html.g-native .g-film { animation: g-rise linear both; animation-timeline: --g; animation-range: contain 0% contain 100%; }
  }
  /* the same keyframes, paused and stepped by a small script (one passive scroll listener) where there are no scroll timelines */
  html.g-scrub .g-copy-in { animation: g-away linear both paused; animation-duration: .27s; animation-delay: calc((.03 - var(--p, 0)) * 1s); }
  html.g-scrub .g-back { animation: g-back linear both paused; animation-duration: .94s; animation-delay: calc((.06 - var(--p, 0)) * 1s); }
  html.g-scrub .g-p { animation: g-drift var(--ease-drift) both paused; animation-duration: calc(var(--a) * 1s); animation-delay: calc(var(--p, 0) * -1s); }
  html.g-scrub .g-sheet { animation: g-gather var(--ease-move) both paused; animation-duration: calc((var(--b) - var(--a)) * 1s); animation-delay: calc((var(--a) - var(--p, 0)) * 1s); }
  html.g-scrub .g-film { animation: g-rise linear both paused; animation-duration: 1s; animation-delay: calc(var(--p, 0) * -1s); }
}


/* Keep the film length with its label on narrow phones */
#full { text-wrap: balance; }