/* The front page, "The box that opens as you scroll", on top of start.css. The box was modelled and
   rendered in Blender (tools/boxrender.py), cut out with transparency, so it stands on the page's own sky in either
   theme. js/f.js draws it on one canvas through a camera that follows it as it opens; the cards' links are HTML
   above it, moved with the same camera. The cards carry pictures only, no names. The stage is sticky while its
   section scrolls past, and the page ends with it; only the box moves. Only transforms and opacity change. */
.lp-f main { padding-block: 0; }   /* the stage starts at the very top and the page ends with it */
.f-scroll { position: relative; height: 340vh; }
/* the header is part of the stage, so from the first bit of scroll nothing but the box moves. Everything stands on the
   page's middle line: the words centred over the box, the two together in the middle of the space under the header
   (on a wide screen with a pointer the words go left and the card right, the box still in the middle) */
.f-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template: "top" auto "." minmax(0, 1fr) "copy" auto "box" auto "." minmax(0, 1fr) / minmax(0, 1fr); row-gap: 10px; }
.f-stage > .top { grid-area: top; width: 100%; align-self: start; }
.f-copy { grid-area: copy; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.f-copy .e-title { font-size: clamp(30px, 4vw, 52px); }
.f-hint { display: none; margin: 0; color: var(--muted); font-size: 14px; font-weight: 800; }
.e-title { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(36px, 4.1vw, 60px); line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; }
.e-lead { margin: 0; color: var(--muted); font-size: clamp(16px, 1.45vw, 20px); font-weight: 800; line-height: 1.45; }
.e-open { margin-top: 6px; padding: 14px 26px; border: 0; font: inherit; font-size: 18px; font-weight: 900; cursor: pointer; }
.e-open svg { width: 22px; height: 22px; transition: transform .35s cubic-bezier(.2,.9,.3,1.3); }
.e-open:hover svg { transform: translateY(3px); }

/* the box: shown once everything the shut box needs has come, all at once */
.f-frame { --fw: min(100vw - 32px, calc((100svh - 290px) * 1780 / 1930)); grid-area: box; position: relative; width: var(--fw); aspect-ratio: 1780 / 1930; justify-self: center; opacity: 0; transition: opacity .5s; }
.is-ready .f-frame { opacity: 1; }
.f-frame { overflow: clip; overflow-clip-margin: 14px; }   /* the camera's empty margins must not widen the page */
#box { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.f-scene { position: absolute; inset: 0; transform-origin: 0 0; pointer-events: none; }
.is-moving :is(.f-scene, .f-tray) { will-change: transform; }   /* while the box moves the cards' layer glides as it is; at rest it is drawn sharp again */
.f-lower, .f-tray { position: absolute; inset: 0; pointer-events: none; }
.f-block { position: absolute; inset: 0; pointer-events: none; }
.at-raised .f-block { pointer-events: auto; }   /* the raised tray stands over the lower cards: they are not reached through it */

/* the cards: links while the box rests open */
.f-set { position: absolute; inset: 0; pointer-events: none; }
.f-item { position: absolute; inset: 0; color: inherit; text-decoration: none; outline: none; pointer-events: none; }
.f-cshadow { position: absolute; border-radius: 14%; background: radial-gradient(ellipse at 50% 60%, rgba(10,30,26,.5), rgba(10,30,26,.18) 52%, transparent 72%); opacity: 0; transform: translateY(3%) scale(1.14); pointer-events: none; transition: opacity .3s; }
.f-lift { position: absolute; inset: 0; pointer-events: none; transition: transform .5s cubic-bezier(.2,1.3,.35,1); }
.f-pop { position: absolute; inset: 0; background: var(--img) 0 0 / 100% 100% no-repeat; opacity: 0; pointer-events: none; cursor: pointer; transition: opacity .15s; }
.f-pop::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--x0); width: var(--w); background: linear-gradient(104deg, transparent 32%, rgba(255,255,255,.5) 48%, rgba(255,255,255,.15) 54%, transparent 68%); translate: -115% 0; }
.at-open #setA .f-pop, .at-raised .f-set .f-pop { pointer-events: auto; }
.f-item.is-soon .f-pop { cursor: default; }
.f-item:is(:hover, :focus-visible) .f-pop { opacity: 1; }
.f-item:is(:hover, :focus-visible) .f-pop::after { translate: 115% 0; transition: translate 1s cubic-bezier(.3,.1,.3,1) .08s; }
.f-item:is(:hover, :focus-visible) .f-lift { transform: translateY(-1.1%) scale(1.04); }
.f-item:is(:hover, :focus-visible) .f-cshadow { opacity: 1; }
/* each card's loop over its picture while the box rests open (js/f.js plays it): it starts on the picture as the render
   shows it, so it fades in without a change; it takes the sheen when pointed at, and the dimming when another card is */
.f-live { position: absolute; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .45s; }
.f-live video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; }
.f-live::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(104deg, transparent 32%, rgba(255,255,255,.5) 48%, rgba(255,255,255,.15) 54%, transparent 68%); translate: -115% 0; }
.f-live::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(10,31,26,.36); opacity: 0; transition: opacity .3s; }
.f-item.is-live .f-live { opacity: 1; }
.f-item:is(:hover, :focus-visible) .f-live::before { translate: 115% 0; transition: translate 1s cubic-bezier(.3,.1,.3,1) .08s; }
.is-dim .f-item:not(:hover, :focus-visible) .f-live::after { opacity: 1; }

/* the card beside the box (js/f-info.js): only where there is room and a pointer; soft shapes, the tool's own colour */
.f-info { display: none; grid-area: info; align-self: center; }
.f-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 24px; border-radius: 30px; background: var(--surface); color: var(--fg); box-shadow: 0 1px 0 rgba(20,62,56,.06), 0 22px 50px -26px rgba(20,48,40,.45); --tc: var(--fox); }
.f-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 92px; border-radius: 30px 30px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 16%, transparent), transparent); pointer-events: none; }
.f-card > * { position: relative; }
.f-card h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(24px, 1.9vw, 32px); line-height: 1.05; letter-spacing: -.01em; }
.f-card-head { display: flex; align-items: center; gap: 14px; }
.f-card-head p { margin: 4px 0 0; color: var(--muted); font-size: clamp(13.5px, .9vw, 16px); font-weight: 800; line-height: 1.35; }
.f-card-pic { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px; background: color-mix(in srgb, var(--tc) 14%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 30%, transparent); color: var(--fg); }
.f-card-pic svg { width: 40px; height: 42px; }
.f-card-intro { margin: 0; font-size: clamp(15px, 1.05vw, 18px); font-weight: 700; line-height: 1.5; }
.f-card h3 { margin: 2px 0 -4px; color: var(--muted); font-size: 12.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.f-card-uses { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.f-card-uses li { display: flex; align-items: center; gap: 12px; font-size: clamp(14.5px, 1vw, 17px); font-weight: 800; line-height: 1.3; }
.f-card-sym { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: color-mix(in srgb, var(--tc) 15%, var(--surface)); color: color-mix(in srgb, var(--tc) 82%, #143E38); }
.f-card-sym svg { width: 20px; height: 20px; }
.f-card-go { align-self: flex-start; margin-top: 4px; }
.f-card-go svg { width: 18px; height: 18px; }
.f-card-soon { align-self: flex-start; margin-top: 4px; padding: 8px 16px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tc) 14%, var(--surface)); color: color-mix(in srgb, var(--tc) 70%, #143E38); font-size: 14px; font-weight: 900; }
.f-card.is-hint { align-items: flex-start; gap: 10px; }
.f-card.is-hint::before { background: linear-gradient(180deg, rgba(31,168,155,.12), transparent); }
.f-card.is-hint p { margin: 0; color: var(--muted); font-size: 15.5px; font-weight: 800; line-height: 1.45; }
.f-card-logo { display: grid; width: 54px; height: 56px; color: var(--fg); }
.f-card-logo svg { width: 100%; height: 100%; }
.f-card-dots { display: flex; gap: 6px; margin-top: 6px; }
.f-card-dots i { width: 12px; height: 12px; border-radius: 50%; opacity: .85; }
@media (min-width: 1200px) and (hover: hover) {   /* the box in the middle, the words on its left and the card on its right */
  .lp-f main, .lp-f .f-stage > .top { max-width: 1680px; }
  .f-stage { --side: clamp(250px, 18vw, 360px); --gap: clamp(8px, 2.4vw, 36px); grid-template: "top top top" auto "copy box info" minmax(0, 1fr) / minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--gap); row-gap: 0; }
  .f-copy { align-items: flex-start; gap: 16px; text-align: left; }
  .f-hint { display: block; }
  .f-frame { width: min(calc(min(100vw - 32px, 1680px) - 2 * var(--side) - 2 * var(--gap)), calc((100svh - 92px) * 1780 / 1930)); }
  .f-copy .e-title { font-size: clamp(32px, 2.9vw, 56px); }
  .f-info { display: block; max-width: clamp(300px, 23vw, 460px); margin-left: -28px; }   /* into the empty edge of the box's picture */
  #box { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent); }   /* the faint floor shadow fades out instead of ending in a line, now that the page goes on beside the picture */
}

/* without motion the box simply stands open, with every card */
.is-still .f-scroll { height: auto; }
.is-still .f-stage { position: relative; height: auto; min-height: 100svh; }

@media (max-width: 860px) {
  .f-stage { row-gap: 6px; }
  .f-copy { gap: 10px; }
  .f-copy .e-title { font-size: clamp(28px, 8vw, 40px); }
  .f-copy .e-lead { font-size: 15px; }
  .f-copy .e-open { padding: 10px 20px; font-size: 16px; }
  /* edge to edge: the box has its own margin in the picture, and every pixel makes its cards bigger */
  .f-frame { --fw: min(100vw, calc((100svh - 270px) * 1780 / 1930)); width: var(--fw); justify-self: start; margin-inline: calc((100% - var(--fw)) / 2); }
  .f-frame { overflow-clip-margin: 0px; }   /* edge to edge, a margin past the frame would widen the page (and a phone would zoom out) */
}
@media (prefers-reduced-motion: reduce) { .f-lift, .f-pop::after, .f-frame { transition: none !important; } }