/* sf.css · p04's "San Francisco:" grows its city (js/sf.js places and moves it). The city's name gets a line of its own
   with sky above it; as it scrolls in, its letters warm from ink into a Golden Gate sunset and photo-collage San Francisco
   pops up out of them, as in "Move fast and make things": real things, cut out, with a few drawn bits (Karl's face, the
   ding ding!). The photos stand behind the letters; only the cable car and Karl sit in front, and never on a letter.
   Every stop of the sunset holds 3:1 or more on its paper (AA for large text), and a thin halo of paper keeps each letter
   clear of the photos behind it. Without js/sf.js none of this applies and the heading stands plain. */
.sf{--sun:linear-gradient(100deg,#c23a1f 0%,#e0482c 18%,#a8571a 34%,#8a6a00 48%,#0f7c8c 66%,#1d5fa8 84%,#5b3fb0 100%);
  --halo:var(--paper);
  position:relative;margin:28px calc(-1 * var(--pad)) 0;padding:0 var(--pad);font-size:clamp(min(28px,7.8vw),6.6vw,84px)}
html[data-variant="noir"] .sf{--sun:linear-gradient(100deg,#ff8a6a 0%,#ffa25a 18%,#ffc04d 34%,#ffe27a 48%,#7fe3ee 66%,#8fb8ff 84%,#c9bdf6 100%)}
.sf h2{margin:0;font-size:1em}
.sf.on{padding-top:2em;padding-bottom:.25em;overflow:hidden;overflow:clip}
.sf.on h2{position:relative;z-index:1}
.sf.on .sf-city{display:block;white-space:nowrap}
.sf-w{display:inline-block}
.sf-c{display:inline-block;transform-origin:50% 92%}
.sf.on .sf-c{--g:0;color:var(--ink);color:color-mix(in srgb,var(--ink) calc((1 - var(--g)) * 100%),transparent)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sf.on .sf-c{background:var(--sun);background-size:var(--gw,100%) 100%;background-position:calc(var(--lx,0px) * -1) 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 1px var(--halo)) drop-shadow(0 0 .05em var(--halo))}
}

/* the art: behind the words (sun, peaks, bridge, pyramid, Coit, fog), and in front of them (the cable car, Karl, the shouts) */
.sf-art,.sf-front{display:none}
.sf.on .sf-art,.sf.on .sf-front{display:block;position:absolute;inset:0;pointer-events:none}
.sf.on .sf-front{z-index:2}
.sf-i{position:absolute;display:block;max-width:none;opacity:0;transform-origin:50% 100%;will-change:transform,opacity}
.sf-i img{display:block;width:100%;height:100%;max-width:none}
/* Twin Peaks: the photo of the two hills fills the bottom of its box, Sutro Tower (drawn, the collage's graphic half) the rest */
.sf-peaks img{position:absolute;left:0;bottom:0;height:62%;object-fit:contain}
.sf-peaks .sutro{position:absolute;left:52%;bottom:44%;height:56%;width:auto;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sutro .leg{stroke:#c8322a;stroke-width:5}
.sutro .band{stroke:#fff;stroke-width:5;stroke-dasharray:11 13}
.sutro .tip{stroke:#c8322a;stroke-width:2.5}
html[data-variant="noir"] .sutro .band{stroke:#f3f2ea}
img.sf-i{object-fit:contain}
.sf-sun{transform-origin:50% 50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,214,120,.95),rgba(255,190,90,.6) 38%,rgba(255,150,80,.18) 70%,rgba(255,150,80,0)),
    repeating-conic-gradient(from 4deg,rgba(255,196,96,.32) 0 7deg,rgba(255,196,96,0) 7deg 22deg);
  -webkit-mask:radial-gradient(closest-side,#000 55%,transparent);mask:radial-gradient(closest-side,#000 55%,transparent)}
html[data-variant="noir"] .sf-sun{opacity:.75}
.sf-fog{transform-origin:85% 60%;-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.sf.on .sf-fog{pointer-events:auto;filter:opacity(.74)}   /* thin enough that the bridge shows through it */
/* noir: the fog behind the letters goes dim, so even its palest letters keep 3:1 (about #484848 on the black page) */
html[data-variant="noir"] .sf-fog{filter:brightness(.45) opacity(.6)}
html[data-variant="noir"] .sf-karl>img{filter:brightness(.72)}
.sf-car{transform-origin:50% 100%;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 .06em .05em rgba(0,0,0,.28))}
.sf-karl{transform-origin:50% 70%;pointer-events:auto;cursor:pointer}
.sf-karl svg{position:absolute;left:24%;top:34%;width:52%;height:auto;overflow:visible;fill:#2a2a33;stroke:#2a2a33;stroke-width:3;stroke-linecap:round}
.sf-karl svg path{fill:none}
.sf-karl .eye{transform-box:fill-box;transform-origin:50% 50%}
.sf-pow{position:absolute;opacity:0;padding:.25em .55em;font-family:inherit;font-weight:900;line-height:1;font-stretch:125%;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  color:#0b0b0c;background:#f6f08a;border:2px solid #0b0b0c;border-radius:999px;box-shadow:3px 3px 0 #0b0b0c;transform-origin:20% 100%}
.sf-toot{background:#d6f3ff}

/* once grown: the car rocks on its cable, the fog breathes, Karl blinks, Sutro's lights would too if he had them */
@media (prefers-reduced-motion:no-preference){
  .sf.grown .sf-car{animation:sf-rock 1.3s ease-in-out infinite alternate}
  .sf.grown .sf-fog{animation:sf-drift 8s ease-in-out infinite alternate}
  .sf.grown .sf-karl{animation:sf-float 4.5s ease-in-out infinite alternate}
  .sf.grown .sf-karl .eye{animation:sf-blink 4.2s steps(1) infinite}
}
@keyframes sf-rock{to{translate:0 -.035em}}
@keyframes sf-drift{to{translate:-.35em .04em}}
@keyframes sf-float{to{translate:.08em -.08em}}
@keyframes sf-blink{0%,92%{scale:1 1}93%,97%{scale:1 .1}98%,100%{scale:1 1}}