/* Home: paint opening, 3D crown, statements stacking up, three stops on the trip */
.intro { position: relative; height: 190vh; height: 190svh; background: #fff; }
.intro__pin { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.intro__ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: crosshair; }
.no-gl .intro__ink { display: none; }
.no-gl .intro__pin { background: #fff url(/art/new/breathe-easy.webp) center / min(90vw, 900px) no-repeat; }

.intro__type {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; pointer-events: none; padding: 0 var(--gutter);
}
.intro__name {
  margin: 0; font-size: clamp(60px, 15.5vw, 250px); font-weight: 500; line-height: .88; letter-spacing: -.035em;
  font-variation-settings: "opsz" 96; mix-blend-mode: difference; white-space: nowrap;
}
.intro__name .ch { display: inline-block; transform-origin: 50% 80%; will-change: transform, opacity; }
.intro__name .sp { display: inline-block; width: .22em; }

/* the crown signature as smooth round piping: home.js stacks slices of the logo, each worn back from the edge
   by what a round tube would be at that depth */
.crown {
  position: relative; width: clamp(200px, 27vw, 430px); aspect-ratio: 875 / 482; margin: clamp(2px, 1vw, 14px) auto 0;
  transform-style: preserve-3d; pointer-events: auto; cursor: pointer; will-change: transform;
  --shine: 50%;
}
.crown i {
  position: absolute; inset: -4.84% -2.67%; display: block;   /* the slices carry a small margin around the signature */
  background: center / 100% 100% no-repeat;
  backface-visibility: visible;
}
.crown i.shadow { opacity: .9; }

.intro__say {
  margin: clamp(14px, 2vw, 26px) 0 0; min-height: 1.3em; mix-blend-mode: difference;
  font-size: clamp(1.5rem, 3.1vw, 2.9rem); line-height: 1.12; font-weight: 800; font-variation-settings: "wdth" 68; letter-spacing: -.005em;
}
.intro__say .wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.intro__say .wd > span { display: inline-block; transform: translateY(110%) rotate(6deg); transform-origin: 0 100%; animation: say-in .7s cubic-bezier(.2,.8,.1,1) forwards; }
.intro__say.out .wd > span { animation: say-out .4s cubic-bezier(.6,0,.9,.3) forwards; }
@keyframes say-in { to { transform: none; } }
@keyframes say-out { from { transform: none; } to { transform: translateY(-115%) rotate(-5deg); } }

.intro__hint, .intro__go {
  position: absolute; bottom: clamp(18px, 3vw, 34px); z-index: 3; margin: 0; color: #fff; mix-blend-mode: difference;
  font-size: 1.125rem; font-weight: 650; opacity: 0; animation: fade-in 1s ease 3.4s forwards; pointer-events: none;
}
@keyframes fade-in { to { opacity: 1; } }
.intro__hint { left: var(--gutter); }
.intro__go { right: var(--gutter); padding-right: 30px; }
.intro__go::after { content: ""; position: absolute; right: 6px; top: -2px; width: 2px; height: 30px; background: currentColor; transform-origin: top; animation: go-line 1.8s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes go-line { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1) translateY(30px); opacity: 0; } }
@media (max-width: 600px) { .intro__hint { bottom: 62px; } .intro__go { left: var(--gutter); right: auto; } }

/* statements on statements: each line lands on the pile as you scroll */
.stack { position: relative; height: 600vh; height: 600svh; background: #000; color: #fff; }
.stack__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 1100px; }
.stack__lines { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 14vh; }
.stack__lines li {
  position: absolute; left: 0; right: 0; bottom: 0; transform-origin: 0 100%; will-change: transform, opacity;
  font-size: clamp(2.3rem, 7.4vw, 7.6rem); line-height: .98; font-weight: 850; font-variation-settings: "wdth" 66; letter-spacing: -.02em; text-wrap: balance;
  opacity: 0;
}
.stack__lines li.it { font-family: var(--display); font-style: italic; font-weight: 500; font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.stack__lines li:nth-child(3) { color: var(--teal); }
.stack__lines li:nth-child(5) { color: var(--pink); }
.stack__lines li:nth-child(8) { color: #e2bd55; }

/* the three stops */
.stops { background: #000; }
.stop { position: relative; display: block; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; text-decoration: none; }
.stop__view { position: absolute; inset: 0; overflow: hidden; clip-path: inset(var(--iy, 0%) var(--ix, 0%) round var(--rad, 0px)); will-change: clip-path; }
.stop__view img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); will-change: transform; }
.stop__view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.72)); }
.stop__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(28px, 7vh, 80px); display: grid; gap: 8px; justify-items: start; }
.stop__when { font-weight: 800; font-variation-settings: "wdth" 68; font-size: 1.5rem; color: #e2bd55; }
.stop__name { font-size: clamp(2.8rem, 8.6vw, 8.4rem); font-style: italic; line-height: .95; max-width: 13ch; text-wrap: balance; }
.stop__about { font-size: clamp(1.2rem, 1.8vw, 1.5rem); max-width: 40ch; line-height: 1.4; }
.stop__cta { margin-top: 12px; display: inline-flex; align-items: center; min-height: 54px; padding: 0 28px; border-radius: 999px; background: #fff; color: #000; font-weight: 700; transition: background .2s, transform .3s cubic-bezier(.2,.7,.1,1); }
.stop:hover .stop__cta, .stop:focus-visible .stop__cta { background: #e2bd55; transform: translateX(8px); }
.stop:hover .stop__view img { transform: scale(calc(var(--zoom, 1) + .03)); transition: transform 1.2s cubic-bezier(.2,.7,.1,1); }
.stop:focus-visible { outline: none; } .stop:focus-visible .stop__cta { outline: 3px solid var(--teal); outline-offset: 3px; }

/* Footer */
.foot { background: #000; color: #fff; padding: clamp(70px, 9vw, 120px) var(--gutter) 40px; border-top: 1px solid #222; }
.foot__lead { font-size: clamp(2.2rem, 5vw, 4.4rem); margin: 0 0 18px; }
.foot__mail { font-size: clamp(1.4rem, 2.6vw, 2.2rem); font-weight: 500; text-underline-offset: 6px; }
.foot__links { list-style: none; padding: 0; margin: 36px 0 60px; display: flex; flex-wrap: wrap; gap: 14px 34px; }
.foot__links a { text-underline-offset: 5px; }
.foot__small { color: #a5a5a5; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .intro { height: 100svh; } .stack { height: auto; } .stack__pin { position: static; height: auto; padding: 80px 0; }
  .stack__lines { position: static; padding: 0 var(--gutter); } .stack__lines li { position: static; opacity: 1; margin-bottom: .3em; }
}

/* the crown signature, set at the end of "We are all kings." */
.crown-mark {
  display: inline-block; height: 1.05em; aspect-ratio: 875 / 482; margin-left: .22em; vertical-align: -.22em;
  -webkit-mask: url(/assets/img/signature-white.png) center / contain no-repeat; mask: url(/assets/img/signature-white.png) center / contain no-repeat;
  background: linear-gradient(112deg, #c9a23a 0%, #fff3c4 45%, #e2bd55 60%, #8a6a1c 100%);
}
.intro__say .crown-mark { background: #fff; height: 1em; vertical-align: -.2em; }

/* the trip, marked down the right edge: where you are, and a way to jump */
.trip { position: fixed; right: clamp(14px, 2vw, 30px); top: 50%; translate: 0 -50%; z-index: 40; display: grid; gap: 4px; color: #fff; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.95)) drop-shadow(0 1px 7px rgba(0,0,0,.65)); }
.trip a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 34px; color: inherit; text-decoration: none; }
.trip a::after { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; transition: background .3s, scale .3s; }
.trip a[aria-current="true"]::after { background: currentColor; scale: 1.35; }
.trip a span { font-weight: 650; opacity: 0; translate: 8px 0; transition: opacity .25s, translate .25s; white-space: nowrap; }
.trip a:hover span, .trip a:focus-visible span, .trip a[aria-current="true"] span { opacity: 1; translate: 0 0; }
@media (max-width: 760px) { .trip a span { display: none; } .trip { right: 8px; } }

/* room around each masked word so italic swashes and descenders aren't clipped */
.stack__lines .w-mask { padding: .14em .09em .2em; margin: -.14em -.09em -.2em; }
.stack__lines { transform-origin: 0 100%; }

/* the line under the crown: no mask, no edge. Words drift apart into wisps and gather back out of them (home.js drives --k, 1 = wisp, 0 = type) */
.intro__say { --k: 1; will-change: filter, opacity; letter-spacing: calc(var(--k) * .09em); }
.intro__say .wd { overflow: visible; padding: 0; display: inline-block; transform: translate(calc(var(--rx) * var(--k) * .9em), calc(var(--ry) * var(--k) * .7em - var(--k) * .35em)) rotate(calc(var(--rr) * var(--k) * 14deg)) scale(calc(1 + var(--k) * .28)); }
.intro__say .crown-mark { transform: translateY(calc(var(--k) * -.4em)) scale(calc(1 + var(--k) * .3)); }

/* the name, raised, and back to turning into the negative of whatever paint runs under it: white face, grey depth, all blended as a difference */
.intro__name {
  mix-blend-mode: difference; color: #fff; --dx: .55; --dy: .85; --s: .0058em; will-change: transform;
  text-shadow:
    calc(var(--dx) * var(--s) * 1) calc(var(--dy) * var(--s) * 1) 0 #d4d4d4,
    calc(var(--dx) * var(--s) * 2) calc(var(--dy) * var(--s) * 2) 0 #cacaca,
    calc(var(--dx) * var(--s) * 3) calc(var(--dy) * var(--s) * 3) 0 #c0c0c0,
    calc(var(--dx) * var(--s) * 4) calc(var(--dy) * var(--s) * 4) 0 #b6b6b6,
    calc(var(--dx) * var(--s) * 5) calc(var(--dy) * var(--s) * 5) 0 #acacac,
    calc(var(--dx) * var(--s) * 6) calc(var(--dy) * var(--s) * 6) 0 #a2a2a2,
    calc(var(--dx) * var(--s) * 7) calc(var(--dy) * var(--s) * 7) 0 #989898,
    calc(var(--dx) * var(--s) * 8) calc(var(--dy) * var(--s) * 8) 0 #8e8e8e,
    calc(var(--dx) * var(--s) * 9) calc(var(--dy) * var(--s) * 9) 0 #848484,
    calc(var(--dx) * var(--s) * 10) calc(var(--dy) * var(--s) * 10) 0 #7a7a7a,
    calc(var(--dx) * var(--s) * 11) calc(var(--dy) * var(--s) * 11) 0 #707070,
    calc(var(--dx) * var(--s) * 12) calc(var(--dy) * var(--s) * 12) 0 #666,
    calc(var(--dx) * var(--s) * 13) calc(var(--dy) * var(--s) * 13) 0 #5c5c5c,
    calc(var(--dx) * var(--s) * 14) calc(var(--dy) * var(--s) * 14) 0 #525252;
}
@media (max-width: 600px) { .intro__name { --s: .0075em; } }

/* the line under the crown keeps one fixed box, so a longer or wrapped line never nudges the crown and the name above it */
.intro__say { height: 1.3em; min-height: 0; white-space: nowrap; }
@media (max-width: 700px) { .intro__say { height: 2.5em; white-space: normal; } }