/* First frame, board tile and project example options. Comparison page only:
   nothing here is used by index.html. "Current", "Popup" and "None" are the live
   site; the other options are scoped by html[data-frame], html[data-tiles] and
   html[data-examples]. build.sh also deploys this page with its choices fixed
   in html[data-picks], without the pickers. */

/* Pickers, same as the old icon and artwork pickers */
.pickers {
  position: fixed; right: 16px; bottom: 16px; z-index: 45;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
html[data-picks] .pickers { display: none; }
.pick-row { display: flex; gap: 8px; }
.pickers.is-folded [data-frame-picker],
.pickers.is-folded [data-text-picker],
.pickers.is-folded [data-tiles-picker],
.pickers.is-folded [data-examples-picker],
.pickers.is-folded [data-work-picker],
.pickers.is-folded [data-captions-picker],
.pickers.is-folded [data-contact-picker] { display: none; }

[data-captions="glass"] .caption[data-caption="1"],
[data-captions="both"] .caption {
  padding: 30px 40px 32px;
  border: 1px solid rgba(236, 235, 229, .09);
  border-radius: 28px;
  background: rgba(11, 12, 11, .5);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.art-picker {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(19, 21, 18, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 500 12px/1 var(--mono); color: var(--ink-3);
}
.art-picker span { padding: 0 8px 0 10px; }
.art-picker button {
  min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font: inherit; cursor: pointer;
}
.art-picker button:hover { color: var(--ink); }
.art-picker button[aria-pressed="true"] { background: var(--bone); color: var(--ground); }
.art-picker button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Text options */
.hero-copy .display em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.ho-proof {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin: 22px auto 0; max-width: 660px; container-type: inline-size;
  font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-3);
}
.ho-proof b { font-weight: 500; color: var(--ink); }
/* The source goes on its own line when it does not fit; the figures keep one
   row, or two even rows in a narrow column, so none is left on its own */
.ho-figs { display: grid; grid-template-columns: repeat(4, auto); gap: inherit; justify-items: center; }
@container (max-width: 470px) { .ho-figs { grid-template-columns: repeat(2, auto); } }
/* Longer copy under the lede: smaller, so the first frame still holds it */
.ho-more { max-width: 560px; margin: 14px auto 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5; color: var(--ink-2); }
.ho-more p { margin: 0; }
.ho-more p + p { margin-top: 8px; }
/* Short screens keep the first paragraph, then none, so the hint stays in view.
   Split has the height to itself and keeps all three. */
@media (max-height: 740px) { html:not(.ho-split) .ho-more p + p { display: none; } }
@media (max-height: 620px) { html:not(.ho-split) .ho-more { display: none; } }
/* Words sit in clipping boxes so they can rise into place */
.hero-copy .w {
  display: inline-block; overflow: clip; vertical-align: top;
  padding: 0 .05em .14em; margin: 0 -.05em -.14em;
}
.hero-copy .w > span { display: inline-block; }

/* Frames: the icon is bigger and glows; script.js still runs the dolly */
html:not(.is-static)[data-frame="power"] .hero-copy,
html:not(.is-static)[data-frame="split"] .hero-copy { top: var(--ho-top) !important; }

.scene::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--icon) * 3.2); height: calc(var(--icon) * 3.2);
  margin: calc(var(--icon) * -1.6) 0 0 calc(var(--icon) * -1.6);
  translate: 0 var(--ho-iy, 0px);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(198, 242, 92, .15), rgba(198, 242, 92, .05) 45%, rgba(198, 242, 92, 0));
  opacity: var(--ho-glow, 0);
}

html.ho-split:not(.is-static) .hero-copy {
  left: var(--ho-left); width: min(620px, 42vw);
  translate: none; text-align: left;
}
html.ho-split .hero-copy .display { font-size: clamp(40px, 5vw, 80px); }
html.ho-split .hero-copy .lede { margin-left: 0; }
html.ho-split .ho-proof { justify-content: flex-start; margin-left: 0; }
html.ho-split .ho-more { margin-left: 0; }
html.ho-split .ho-figs { justify-items: start; }

/* Power on: the icon fades up, the lights come on inside, the LED blinks,
   then the words rise. Fill is backwards only, so nothing stays applied. */
.ho-intro .scene { animation: ho-fade .8s ease-out backwards; }
.ho-intro .bezel { animation: ho-lights .9s .2s ease-out backwards; }
.ho-intro .tube { animation: ho-lights 1.1s .35s ease-out backwards; }
.ho-intro .icon-face::after { animation: ho-boot 1s .5s linear backwards, led 2.8s 1.6s ease-in-out infinite; }
.ho-intro .hero-copy .eyebrow { animation: ho-up .7s .3s cubic-bezier(.2, .8, .2, 1) backwards; }
.ho-intro .hero-copy .w > span {
  animation: ho-rise .9s cubic-bezier(.2, .8, .2, 1) backwards;
  animation-delay: calc(.45s + var(--i) * 60ms);
}
.ho-intro .hero-copy .lede { animation: ho-up .8s .9s cubic-bezier(.2, .8, .2, 1) backwards; }
.ho-intro .hero-copy .ho-more { animation: ho-up .8s 1s cubic-bezier(.2, .8, .2, 1) backwards; }
.ho-intro .hero-copy .ho-proof { animation: ho-up .8s 1.05s cubic-bezier(.2, .8, .2, 1) backwards; }
.ho-intro .hero-copy .hint { animation: ho-up .8s 1.3s cubic-bezier(.2, .8, .2, 1) backwards; }

/* Board tiles. Preview keeps the tagline and first paragraph of a project and
   links to the full entry; Jump goes straight to it. Either way the entry flashes. */
html[data-tiles="preview"] .peek .project-line + p ~ p { display: none; }
.ho-read {
  margin-top: 20px; min-height: 36px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .04em; cursor: pointer;
}
.ho-read:hover { border-color: var(--ink-3); }
.ho-read:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
#work .project:focus, #record .role:focus { outline: none; }
/* A second tag list sits on its own row under the stack: Warroom's providers,
   ClarifyThis's features */
.tags + .tags { margin-top: 8px; }
#work .project.ho-flash { animation: ho-flash-card 2.4s ease-out; }
#record .role.ho-flash { border-radius: 4px; animation: ho-flash-row 2.4s ease-out; }

/* Examples. The tags share a row with the Button pill, which sits bottom right;
   Strip adds a row of thumbnails. Both open the lightbox. */
.ho-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 18px; }
.ho-foot .tags:first-child { margin: 0; }
.ho-ex-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  min-height: 34px; padding: 0 6px 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .04em; cursor: pointer;
  transition: border-color .2s;
}
.ho-ex-btn span {
  display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: rgba(241, 239, 232, .08); color: var(--ink-2);
}
.ho-ex-btn:hover { border-color: var(--ink-3); }
.ho-work-note { max-width: 520px; margin: 20px 0 0; color: var(--ink-2); font-size: clamp(15px, 1.3vw, 18px); text-wrap: pretty; }

/* Contact terminal: the share card's terminal, tilted and floating to the
   right of the contact block. Below 1100px it drops under the contact line. */
.ho-term { display: none; margin-top: 48px; }
[data-contact="float"] .ho-term,
[data-contact="typed"] .ho-term { display: block; }
.ho-term-card {
  width: min(380px, 100%); margin-left: auto;
  border: 1px solid var(--line); border-radius: 20px; background: var(--ground-2);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 120px -40px rgba(198, 242, 92, .25), inset 0 1px 0 rgba(255, 255, 255, .04);
  rotate: -1.5deg;
  animation: ho-float 7s ease-in-out infinite;
}
.ho-term-bar { display: flex; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.ho-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b2e2a; }
.ho-term pre { margin: 0; padding: 22px 24px 26px; font: 400 18px/1.75 var(--mono); color: var(--ink-2); white-space: pre-wrap; }
.ho-p { color: var(--signal); }
.ho-c { color: var(--ink); }
.ho-cursor { display: inline-block; width: 10px; height: 20px; vertical-align: -4px; background: var(--signal); animation: ho-blink 1.1s steps(1) infinite; }
.ho-cursor[hidden] { display: none; }
.ho-cursor[data-term-typing] { animation: none; }
@media (min-width: 1100px) {
  .contact { position: relative; }
  .ho-term { position: absolute; right: 0; bottom: calc(clamp(80px, 10vw, 140px) + 40px); width: 360px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ho-term-card, .ho-cursor { animation: none; }
}
.ho-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.ho-strip button {
  aspect-ratio: 16 / 10; padding: 0; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: 10px; background: #0e100e;
  transition: border-color .2s;
}
.ho-strip img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.ho-strip button:hover { border-color: var(--ink-3); }
.ho-strip button:hover img { transform: scale(1.04); }
html:not([data-examples="button"]) .ho-ex-btn,
html:not([data-examples="strip"]) .ho-strip { display: none; }

html:has(.ho-shots[open]) { overflow: hidden; }
.ho-shots {
  width: min(1180px, 100vw - 32px, (100dvh - 150px) * 1.6); max-width: none; max-height: none;
  padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px;
  color: var(--ink); background: var(--ground-2);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9);
}
.ho-shots[open] { animation: peek-in .34s cubic-bezier(.2, .7, .2, 1); }
.ho-shots::backdrop { background: rgba(6, 7, 6, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ho-shots[open]::backdrop { animation: peek-fade .34s ease; }
.ho-shots-fig { position: relative; margin: 0; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); background: #0e100e; }
.ho-shots-fig img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ho-shots-close { position: absolute; top: 12px; right: 12px; }
.ho-shots-foot { display: flex; align-items: center; gap: 12px 24px; padding: 14px 16px 14px 22px; }
.ho-shots-cap { flex: 1; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ho-shots-cap b { margin-right: 4px; font-weight: 500; color: var(--ink); }
.ho-shots-nav { display: flex; align-items: center; gap: 6px; }
.ho-shots-nav .peek-count { margin: 0 6px; }

@keyframes ho-flash-card { from, 35% { border-color: rgba(198, 242, 92, .6); box-shadow: 0 0 0 4px rgba(198, 242, 92, .1); } }
@keyframes ho-flash-row { from, 35% { background-color: rgba(198, 242, 92, .07); box-shadow: 0 0 0 14px rgba(198, 242, 92, .07); } }
@keyframes ho-fade { from { opacity: 0; } }
@keyframes ho-lights { from { filter: brightness(.15); } }
@keyframes ho-boot { 0%, 20%, 45% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } }
@keyframes ho-rise { from { translate: 0 105%; } }
@keyframes ho-up { from { opacity: 0; translate: 0 12px; } }
@keyframes ho-float { 50% { translate: 0 -10px; } }
@keyframes ho-blink { 50% { opacity: 0; } }

@media (max-width: 760px) {
  .pickers { left: 8px; right: 8px; bottom: 8px; align-items: stretch; }
  .pickers.is-folded { left: auto; }
  .pick-row { gap: 6px; }
  .pick-row [data-frame-picker] { flex: 1; }
  .art-picker { justify-content: space-between; overflow-x: auto; }
  .art-picker span { display: none; }
  .art-picker button { flex: 1 0 auto; padding: 0 3px; }
  .pick-fold button { padding: 0 10px; }
  .ho-proof { gap: 6px 14px; font-size: 11px; }
  [data-captions="glass"] .caption[data-caption="1"],
  [data-captions="both"] .caption { padding: 22px 20px 24px; border-radius: 22px; }
  .ho-strip { gap: 8px; }
  .ho-shots { width: calc(100vw - 16px); border-radius: 16px; }
  .ho-shots-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 14px 12px 16px; }
  .ho-shots-nav { justify-content: flex-end; }
}