/* Page build (2026-11-05): the transition between pages, after the scroll-driven "From a line to a button" build on metic.studio.
   A dot, guides, a column grid, a wireframe of the next page, its type, its image; the next page opens on that same frame and it
   scales up into the real page. Drawn in the site's own dark ground and chamfers. Timings are ms at --k: 1; build.js sets --k
   from SPEED. Everything's end state is its base style, so .done (the frame on the next page) just turns the animations off. */
.bt { --a: #f4574a; --ink: #e1e3e4; --ground: #151618; --line: rgba(225,227,228,.26); --k: 1;
  position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; contain: strict; color: var(--ink); cursor: progress;
  font: 400 16px/1.5 "Google Sans", Roboto, Arial, sans-serif; letter-spacing: normal; text-transform: none; text-align: left; }
.bt *, .bt *::before, .bt *::after { box-sizing: border-box; }
.bt.done *, .bt.done *::before, .bt.done *::after { animation: none !important; }
/* a stuck overlay must never block the page: on the next page it clears itself even if the script dies */
.bt.done { animation: btGone .3s linear 6s forwards; }
@keyframes btGone { to { opacity: 0; visibility: hidden; } }
/* first visit: solid from the first paint (nothing to open from), only the ground until the page's text can be read */
.bt.first { animation: btGone .3s linear 10s forwards; }
.bt.first .bt-ground { animation: none; }
.bt.hold > :not(.bt-ground) { display: none; }

/* ground: opens from the click */
.bt-ground { position: absolute; inset: 0; background: var(--ground) radial-gradient(rgba(225,227,228,.09) 1px, transparent 1.2px) 0 0 / 24px 24px;
  animation: btOpen calc(300ms * var(--k)) cubic-bezier(.3,.7,.2,1) both; }
@keyframes btOpen { from { clip-path: circle(0 at var(--cx) var(--cy)); } to { clip-path: circle(150vmax at var(--cx) var(--cy)); } }

/* the dot: from the click to the middle of the frame, then gone */
.bt-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--a); opacity: 0;
  animation: btDot calc(620ms * var(--k)) cubic-bezier(.16,1,.3,1) both; }
.bt-dot::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--a); border-radius: 50%; }
@keyframes btDot {
  0% { opacity: 1; transform: translate(var(--cx), var(--cy)) scale(0); }
  14% { opacity: 1; transform: translate(var(--cx), var(--cy)) scale(1); }
  62% { opacity: 1; transform: translate(var(--mx), var(--my)) scale(1); }
  100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(.2); }
}

/* guides: measured from the mock, full bleed. Frame edges gray, the content's edges in the accent */
.bt-g { position: absolute; background: var(--a); opacity: 0; animation: btGuide calc(1040ms * var(--k)) cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--d) * var(--k)); }
.bt-g.edge { background: var(--line); }
.bt-g.h { left: 0; right: 0; height: 1px; --from: scaleX(0); transform-origin: var(--o, 0) 50%; }
.bt-g.v { top: 0; bottom: 0; width: 1px; --from: scaleY(0); transform-origin: 50% var(--o, 0); }
@keyframes btGuide { 0% { opacity: 1; transform: var(--from); } 34% { transform: none; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* the column grid inside the frame */
.bt-cols { position: absolute; display: flex; gap: 1.4%; padding: 0 2%; }
.bt-cols i { flex: 1; background: var(--a); opacity: 0; transform-origin: 50% 0; animation: btCol calc(900ms * var(--k)) cubic-bezier(.16,1,.3,1) both; animation-delay: calc((340ms + var(--i) * 22ms) * var(--k)); }
@keyframes btCol { 0% { opacity: .11; transform: scaleY(0); } 34% { opacity: .11; transform: none; } 76% { opacity: .11; transform: none; } 100% { opacity: 0; transform: none; } }

/* the frame: traces itself, then fills solid over the grid */
.bt-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bt-frame path { fill: var(--ground); stroke: var(--line); stroke-width: 1; stroke-dasharray: 1; animation: btTrace calc(460ms * var(--k)) cubic-bezier(.5,0,.2,1) both calc(420ms * var(--k)), btFill calc(240ms * var(--k)) linear both calc(1060ms * var(--k)); }
@keyframes btTrace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes btFill { from { fill-opacity: 0; } to { fill-opacity: 1; } }

/* the mock: the next page at full size, scaled down into the frame */
.bt-page { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; }
.bt-bar { flex: none; width: 100%; height: 48px; display: flex; align-items: center; gap: 36px; padding: 0 28px 0 84px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #c4c7c8; border-bottom: 1.5px solid var(--line);
  animation: btWire calc(300ms * var(--k)) ease both calc(620ms * var(--k)); }
.bt-bar b { font-weight: 500; } .bt-bar b:nth-child(2) { margin-right: auto; }
.bt-copy { position: relative; width: 100%; text-align: center; padding: clamp(64px, 11vh, 128px) 16px 0; }
.bt-eye { min-height: 24px; margin: 0 0 24px; font-size: 18px; color: var(--ink); animation: btFade calc(240ms * var(--k)) ease both calc(960ms * var(--k)); }
.bt-eye:empty { display: none; }
.bt-title { position: relative; max-width: 54rem; min-height: 2.16em; margin: 0 auto; font: 500 clamp(2.5rem, 5.6vw, 4.75rem)/1.08 "Google Sans", Roboto, Arial, sans-serif; letter-spacing: -1px; text-wrap: balance; color: var(--ink);
  animation: btType calc(340ms * var(--k)) cubic-bezier(.3,.7,.2,1) both calc(860ms * var(--k)); }
.bt-sub { position: relative; max-width: 40rem; min-height: 3em; margin: clamp(18px, 2.4vw, 28px) auto 0; font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.5; text-wrap: balance; color: var(--ink);
  animation: btFade calc(280ms * var(--k)) ease both calc(1000ms * var(--k)); }
@keyframes btType { from { clip-path: inset(-5% 100% -10% 0); } to { clip-path: inset(-5% -2% -10% 0); } }
@keyframes btFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes btWire { from { opacity: 0; } to { opacity: 1; } }

/* wireframe boxes sit around the copy and hand over to the type */
.bt-wire { position: absolute; pointer-events: none; border: 1.5px solid var(--a); opacity: 0; animation: btBox calc(560ms * var(--k)) ease both calc(620ms * var(--k)); }
.bt-wire.t { inset: -8px 0; } .bt-wire.s { inset: 0; border: 0; background: repeating-linear-gradient(180deg, rgba(225,227,228,.2) 0 .55em, transparent .55em 1.5em); }
@keyframes btBox { 0% { opacity: 0; } 30% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }

.bt-art { position: relative; flex: 1 1 auto; min-height: 0; margin-top: clamp(40px, 6vh, 64px); width: min(100% - 48px, 1392px); overflow: hidden; background: #1c1d20; border: 1.5px solid var(--line);
  animation: btWire calc(280ms * var(--k)) ease both calc(700ms * var(--k)); }
.bt-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; animation: btFade calc(320ms * var(--k)) ease both calc(1120ms * var(--k)); }
.bt-x { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; animation: btBox calc(700ms * var(--k)) ease both calc(700ms * var(--k)); }
.bt-x path { fill: none; stroke: var(--line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bt-cards { display: none; }

/* split: copy left, media right (Franklin, Crew Check-In) */
.bt-page.split { display: block; }
.bt-page.split .bt-main { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center; width: min(100% - 48px, 1392px); height: min(100% - 74px, 860px); margin: 0 auto; }
.bt-page.split .bt-copy { text-align: left; padding: 0 0 0 8.5%; }
.bt-page.split .bt-eye { font-size: 16px; margin-bottom: 14px; }
.bt-page.split .bt-title { max-width: none; min-height: 1.08em; letter-spacing: -1.5px; font-size: clamp(2.75rem, 5.4vw, 4.75rem); }
.bt-page.split .bt-sub { max-width: 34em; margin: 20px 0 0; font-size: 1.0625rem; line-height: 1.6; }
.bt-page.split .bt-art { width: 100%; height: 86%; margin: 0; }
.bt-page.split .bt-art img { object-fit: contain; padding: clamp(20px, 3vw, 40px); object-position: 50% 50%; }
.bt-main { display: contents; }

/* home: side sheet + project cards */
.bt-page.home { display: block; }
.bt-page.home .bt-bar { display: none; }
.bt-page.home .bt-main { position: absolute; left: 0; top: 0; bottom: 0; width: 26.6%; display: block; border-right: 1.5px solid var(--line); }
.bt-page.home .bt-copy { z-index: 1; text-align: left; padding: 32px 28px 0; }
.bt-page.home .bt-eye { display: none; }
.bt-page.home .bt-title { min-height: 0; font-size: 57px; font-weight: 400; line-height: 64px; letter-spacing: normal; max-width: none; }
.bt-page.home .bt-sub { max-width: none; min-height: 96px; margin-top: 20px; font-size: 16px; line-height: 24px; color: #c4c7c8; text-wrap: wrap; }
.bt-page.home .bt-art { position: absolute; inset: 0; width: auto; margin: 0; border: 0; }
.bt-page.home .bt-art img { object-fit: cover; object-position: 50% 100%; filter: grayscale(1) brightness(.62); }
.bt-page.home .bt-cards { position: absolute; left: calc(26.6% + 25px); right: 24px; top: 32px; bottom: 0; display: grid; grid-template-columns: 4fr 1fr; grid-template-rows: 694fr 431fr; gap: 24px; }
.bt-card { position: relative; background: #1c1d20; border: 1.5px solid var(--line); padding: 32px; animation: btWire calc(300ms * var(--k)) ease both calc(calc(680ms + var(--i) * 70ms) * var(--k)); }
.bt-card:first-child { grid-column: 1 / -1; }
.bt-card::before { content: ""; display: block; width: min(40%, 420px); height: 96px; background: repeating-linear-gradient(180deg, rgba(225,227,228,.2) 0 14px, transparent 14px 32px); }
.bt-card:last-child::before { width: 60%; }

/* measurements + foot row */
.bt-n { position: absolute; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; color: #ff8a80; white-space: nowrap; opacity: 0; animation: btBox calc(760ms * var(--k)) ease both; animation-delay: calc(var(--d) * var(--k)); }
.bt-foot { position: absolute; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; color: #c4c7c8; font-size: 14px; line-height: 20px; animation: btFade calc(200ms * var(--k)) ease both calc(240ms * var(--k)); }
.bt-pct { font-size: clamp(28px, 3vw, 44px); line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; color: #a6a9ab; }

/* stacked pages: no columns of copy and media side by side */
@media (max-width: 1023px) {
  .bt-page.split { display: flex; }
  .bt-page.split .bt-main { display: flex; flex-direction: column; flex: 1; min-height: 0; width: min(100% - 48px, 1392px); height: auto; padding-top: 40px; }
  .bt-page.split .bt-copy { padding: 0; }
  .bt-page.split .bt-art { flex: 1; height: auto; margin-top: 40px; }
}
@media (max-width: 1180px) {
  .bt-page.home { display: flex; }
  .bt-page.home .bt-main { position: relative; inset: auto; width: 100%; flex: none; border: 0; border-bottom: 1.5px solid var(--line); }
  .bt-page.home .bt-copy { padding: 28px 28px 32px; }
  .bt-page.home .bt-art { display: none; }
  .bt-page.home .bt-cards { position: relative; inset: auto; width: 100%; flex: 1; padding: 20px 16px 0; grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .bt-page.home .bt-card:not(:first-child) { display: none; }
}
@media (max-width: 640px) {
  .bt-bar { display: none; }
  .bt-copy { padding-top: 28px; }
  .bt-eye { font-size: 15px; margin-bottom: 14px; }
  .bt-page:not(.home) .bt-art { width: calc(100% - 32px); }
  .bt-n { display: none; }
}