/* Home page: the research cards carry the same live drawings as the Research page (research-scenes.js), and the
   paper, timeline and "Beyond the lab" entries answer the pointer. Everything here moves on hover only. */
.project-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* research cards: a dark drawing across the top, bleeding to the card's edges */
.design--horizon .horizon-research-card { overflow: hidden; }
.design--horizon .horizon-research-card .project-thumb { align-self: stretch; margin: -34px -30px 28px; }
@media (max-width: 860px) { .design--horizon .horizon-research-card .project-thumb { margin: -28px -22px 24px; } }
@media (max-width: 640px) { .design--horizon .horizon-research-card .project-thumb { margin: -28px -28px 22px; } }
/* each drawing says how to play with it, in a caption line between the drawing and the title */
.horizon-research-card .project-thumb[data-hint] { overflow: visible; margin-bottom: 52px; }
.horizon-research-card .project-thumb[data-hint]::before { content: attr(data-hint); position: absolute; left: 30px; right: 30px; top: calc(100% + 14px);
  padding-left: 16px; color: var(--label, #33414f); font-size: 13px; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  background: radial-gradient(circle at 4px 50%, var(--beam-violet, #8f62ff) 3px, transparent 3.6px); transition: color .3s; }
.horizon-research-card:hover .project-thumb[data-hint]::before { color: var(--accent); }
@media (max-width: 860px) { .horizon-research-card .project-thumb[data-hint]::before { left: 22px; right: 22px; } .horizon-research-card .project-thumb[data-hint] { margin-bottom: 46px; } }
@media (max-width: 640px) { .horizon-research-card .project-thumb[data-hint]::before { left: 28px; right: 28px; } }
@media (hover: none) { .horizon-research-card .project-thumb[data-hint]::before { content: attr(data-hint-touch); } }
.horizon-research-card .project-thumb.is-live { cursor: crosshair; }

/* "Beyond the lab": a small glyph for each entry */
.design--horizon .horizon-outside-grid article { position: relative; }
.design--horizon .horizon-outside-grid h3 { padding-right: 56px; }
.outside-glyph { position: absolute; top: 26px; right: 0; width: 40px; height: 40px; }
.outside-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.glyph-ring, .glyph-blades path { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.glyph-aperture .glyph-ring, .glyph-aperture .glyph-blades path { stroke: url(#glyph-beam-a); }
.glyph-blades { transform-origin: 20px 20px; transform-box: view-box; }
.glyph-light { fill: #8f62ff; opacity: 0; transform-origin: 20px 20px; transform-box: view-box; }
.glyph-bars rect { fill: url(#glyph-beam-b); transform-origin: 50% 100%; transform-box: fill-box; }
.outside-glyph svg > :not(defs) { opacity: .7; }

@media (prefers-reduced-motion: no-preference) {
  /* paper and timeline rows: a beam runs along the top edge, the date takes the beam colours, the text leans in */
  .horizon-paper, .horizon-timeline article { position: relative; }
  .horizon-paper::after, .horizon-timeline article::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
    background: var(--beam); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
  .horizon-paper:hover::after, .horizon-timeline article:hover::after { transform: none; }
  .horizon-timeline article > div, .horizon-paper-copy { transition: transform .6s var(--ease-out); }
  .horizon-timeline article:hover > div, .horizon-paper:hover .horizon-paper-copy { transform: translateX(8px); }
  .horizon-timeline .horizon-date, .horizon-paper-meta p { transition: color .3s; }
  .horizon-timeline article:hover .horizon-date, .horizon-paper:hover .horizon-paper-meta p {
    color: transparent; background: var(--beam); -webkit-background-clip: text; background-clip: text; }

  /* "Beyond the lab": the line above each entry lights up, the aperture turns open, the equaliser plays */
  .design--horizon .horizon-outside-grid article::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
    background: var(--beam); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
  .design--horizon .horizon-outside-grid article:hover::after { transform: none; }
  .outside-glyph svg > :not(defs) { transition: opacity .3s; }
  .horizon-outside-grid article:hover .outside-glyph svg > :not(defs) { opacity: 1; }
  .glyph-blades { transition: transform 1.1s var(--ease-out); }
  .horizon-outside-grid article:hover .glyph-blades { transform: rotate(60deg) scale(.92); }
  .glyph-light { transition: opacity .6s, transform 1.1s var(--ease-out); transform: scale(.3); }
  .horizon-outside-grid article:hover .glyph-light { opacity: .22; transform: scale(1); }
  .horizon-outside-grid article:hover .glyph-bars rect { animation: glyph-eq .9s ease-in-out calc(var(--i) * -.23s) infinite alternate; }
  @keyframes glyph-eq { 0% { transform: scaleY(.35); } 50% { transform: scaleY(1.1); } 100% { transform: scaleY(.6); } }
}
@media (max-width: 640px) { .outside-glyph { top: 24px; width: 34px; height: 34px; } }

/* hero: the landscape photographs as a faint backdrop that rises toward the bottom edge, like a horizon,
   with a veil behind the text; a quiet caption names the photograph and links to the gallery */
.design--horizon .horizon-intro.has-backdrop { position: relative; isolation: isolate; padding: 96px 0 150px; }
.hero-backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; opacity: .42;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .12), rgba(0, 0, 0, .5) 45%, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .12), rgba(0, 0, 0, .5) 45%, #000 78%, transparent); }
.hero-backdrop picture, .hero-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-backdrop img { object-fit: cover; object-position: 50% 62%; opacity: 0; }
.hero-backdrop img.is-on { opacity: 1; }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 58% 62% at 50% 42%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 74%); }
.hero-lens { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap;
  padding: 6px 14px 6px 28px; border-radius: 999px; background: rgba(255, 255, 255, .72) radial-gradient(circle at 15px 50%, var(--beam-violet, #8f62ff) 3px, transparent 3.6px) no-repeat;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font-size: 14px; text-decoration: none; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 18px rgba(15, 30, 45, .08); }
.horizon-intro.has-backdrop .button-secondary { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-lens-label { color: var(--label, #33414f); font-weight: 600; }
.hero-lens:hover { color: var(--accent); }
@media (max-width: 640px) { .design--horizon .horizon-intro.has-backdrop { padding: 48px 0 104px; } .hero-lens { bottom: 18px; font-size: 13px; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-backdrop img { transition: opacity 2.6s ease; }
  .hero-backdrop img.is-on { animation: hero-drift 14s ease-out both; }
  @keyframes hero-drift { from { transform: scale(1.07); } to { transform: scale(1); } }
}