/* Home page. Shared styles are in base.css. */

/* ---------- hero ---------- */

/* Lopsided on purpose: the words take the left, the clock is the full right edge of the screen and sits low. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  padding: clamp(24px, 6vh, 72px) var(--gutter) clamp(56px, 10vh, 112px) var(--edge);
}
.hero-text { display: grid; gap: 28px; align-content: center; }
.hero .title { font-size: clamp(2.6rem, 5.7vw, 5.3rem); font-weight: 250; line-height: 1.16; letter-spacing: 0; }
.title .ln { display: block; white-space: nowrap; }
.lede { max-width: 39rem; font-size: clamp(1.16rem, 1.6vw, 1.48rem); line-height: 1.45; }

/* "decoded." scrambles through pitch classes and settles, letter by letter. */
.decode .ch { position: relative; display: inline-block; text-align: center; }
.decode .ch.s { color: var(--blue); opacity: 0.85; }
.decode .ch.next::before {
  content: '';
  position: absolute;
  left: -0.03em;
  top: 0.16em;
  bottom: 0.14em;
  width: 0.04em;
  background: var(--blue);
}
.decode .ch.d { text-align: left; animation: settle 0.8s var(--ease); }
@keyframes settle {
  from { color: var(--blue); filter: blur(7px); opacity: 0.4; transform: translateY(-0.08em) scale(1.12); }
  to { filter: none; opacity: 1; transform: none; }
}

.open { display: flex; align-items: flex-end; gap: 20px; margin-top: 18px; max-width: 30rem; }
.open .field { flex: 1; min-width: 0; }
.open input { font-size: 1.75rem; }
.js-ghost input::placeholder { color: transparent; }
.ghost {
  position: absolute;
  left: 0;
  top: 4px;
  display: flex;
  align-items: center;
  color: #7f889a;
  font: var(--w-display) 1.75rem/1.2 var(--font);
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: pre;
}
.ghost[hidden] { display: none; }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: var(--blue); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.open .btn { padding: 11px 18px; gap: 10px; white-space: nowrap; }
.btn .arrow { width: 16px; height: 16px; transition: transform 0.5s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

.hero-clock { display: grid; gap: 12px; justify-items: center; }
.hero-clock .clock { width: min(100%, 440px); }
.read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; justify-content: center; min-height: 3.6rem; }
.read span { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: var(--w-display); letter-spacing: var(--track); line-height: 1.2; }
.read .accent { color: var(--blue); letter-spacing: 0.01em; }

@media (min-width: 901px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) min(38vw, 780px);
    align-items: center;
    min-height: min(calc(100vh - var(--head-h)), 860px);
    gap: 4vw;
  }
  .hero { padding-right: 0; }
  .hero-text { margin-bottom: 18vh; }
  .hero-clock { align-self: end; justify-items: stretch; margin-bottom: -2vh; }
  .hero-clock .clock { width: 100%; }
}

/* ---------- the three pages ---------- */

.tools { padding: clamp(24px, 4vh, 48px) 0; }
.tools ul { list-style: none; margin: 0 auto; }
.tools li + li { border-top: 1px solid var(--line); }
.tools a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'text go' 'vis vis';
  align-items: center;
  gap: 24px 32px;
  padding: clamp(28px, 5vh, 52px) 0;
  text-decoration: none;
}
.tools h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; }
.t-text { grid-area: text; display: grid; gap: 10px; }
.t-text p { max-width: 36rem; }
.go { grid-area: go; width: 34px; height: 34px; transition: transform 0.5s var(--ease), color 0.3s; }
.tools a:hover .go { transform: translateX(10px); color: var(--blue); }
.tools a:hover h2 { color: var(--blue); }
.tools h2 { transition: color 0.3s; }
.vis { grid-area: vis; }
.vis svg { display: block; width: 100%; height: auto; overflow: visible; }

@media (min-width: 901px) {
  .tools a {
    grid-template-columns: repeat(12, minmax(0, 1fr)) auto;
    grid-template-areas: 'text text text text text text . vis vis vis vis go';
  }
  .t-text { grid-column: 1 / 7; }
  .vis { grid-column: 8 / 12; justify-self: end; width: 100%; }
  .vis-clock { max-width: 150px; }
  .vis-bars { max-width: 340px; }
}

/* drawings */
.vis .ring { fill: none; stroke: var(--line-strong); stroke-width: 3; }
.vis .poly { fill: var(--blue-fill); stroke: var(--blue); stroke-width: 5; stroke-linejoin: round; }
.vis .ghost { fill: none; stroke: var(--muted); stroke-width: 4; stroke-linejoin: round; stroke-dasharray: 2 10; stroke-linecap: round; }
.vis .dot { fill: var(--text); }
.vis .d { fill: var(--muted); transform-box: fill-box; transform-origin: center; transform: scale(0.35); transition: transform 0.5s var(--spring), fill 0.4s; }
.vis .d.on { fill: var(--text); transform: none; }
.vis .flip {
  stroke: var(--yellow);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0;
  transform-origin: 50% 50%;
  transform-box: view-box;
  transition: opacity 0.4s, transform 0.7s var(--ease);
}
.vis .flip.on { opacity: 0.8; }

.vis-bars { max-width: 340px; }
/* Below the words the drawings stay small; only the clock needs holding back, as it is a full circle. */
@media (max-width: 900px) {
  .vis-clock { width: 112px; }
}
.vis .bar rect {
  fill: var(--blue);
  opacity: 0.9;
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.9s var(--ease) calc(var(--i) * 55ms);
}
li.in .vis .bar rect { transform: none; }
.vis .bar text { fill: var(--text); font-size: 12px; font-weight: var(--w-label); text-anchor: middle; }
.vis .bar .cnt { opacity: 0; transition: opacity 0.3s; }
.vis .bar .card { fill: var(--muted); }
.tools a:hover .vis .bar rect, .tools a:focus-visible .vis .bar rect { animation: wave 1.3s ease-in-out calc(var(--i) * 45ms) 1 both; }
.tools a:hover .vis .bar .cnt, .tools a:focus-visible .vis .bar .cnt { opacity: 1; transition-delay: calc(var(--i) * 40ms); animation: wave-count 1.3s ease-in-out calc(var(--i) * 45ms) 1 both; }
@keyframes wave-count {
  0%, 100% { transform: none; }
  40% { transform: translateY(calc(var(--h) * 0.6px)); }
}
@keyframes wave {
  0%, 100% { transform: none; }
  40% { transform: scaleY(0.4); fill: var(--yellow); }
}

.vis-lattice { max-width: 340px; }
.vis .c { fill: var(--muted); opacity: 0.55; transition: fill 0.5s calc(var(--r) * 70ms), opacity 0.5s calc(var(--r) * 70ms); }
.vis .c.sel { fill: var(--text); opacity: 1; }
.vis .lit .c.above { fill: var(--yellow); opacity: 0.95; }
.vis .lit .c.below { fill: var(--blue); opacity: 0.95; }

.foot { padding-top: 28px; padding-bottom: 36px; }

@media (max-width: 640px) {
  .open { flex-direction: column; align-items: stretch; }
  .open .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tools a:hover .vis .bar rect, .tools a:focus-visible .vis .bar rect,
  .tools a:hover .vis .bar .cnt, .tools a:focus-visible .vis .bar .cnt { animation: none; }
}