/* synagen.us/templates - page chrome.
 * Base tokens mirror ./data-inventory/styles.css so the two public pages read as one site;
 * the brand layer (brand.css) is linked in the page. Arrival motion is a one-shot keyframe,
 * never a scroll reveal, so the whole gallery is visible and capturable without scrolling. */
:root {
  color-scheme: dark;
  --void: #0b0c17;
  --surface: #151827;
  --surface-raised: #1c2032;
  --ink: #f5f5fa;
  --muted: #a5abc0;
  --subtle: #747c98;
  --violet: #a855f7;
  --cyan: #59d5f7;
  --warm: #ef9062;
  --line: rgba(188, 195, 255, .16);
  --line-strong: rgba(188, 195, 255, .3);
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { user-select: none; -webkit-user-select: none; }
a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--void);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 900px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 54% 58% at 6% 0%, rgba(34, 130, 168, .22), transparent 70%),
    radial-gradient(ellipse 46% 58% at 96% 12%, rgba(88, 58, 160, .2), transparent 72%),
    linear-gradient(180deg, rgba(20, 34, 56, .22), transparent);
}
.ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.ambient-one { top: 780px; left: -240px; width: 450px; height: 620px; background: rgba(43, 139, 195, .1); }
.ambient-two { top: 1900px; right: 0; width: min(450px, 80vw); height: 620px; background: rgba(92, 58, 160, .1); }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 5px; }
.wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; line-height: 1.06; }

.site-header { min-height: 92px; display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; z-index: 2; }
.wordmark { display: inline-flex; align-items: center; gap: 13px; font-weight: 650; letter-spacing: -.035em; white-space: nowrap; }
.wordmark small { display: block; color: var(--subtle); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
.mark { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid rgba(133, 142, 255, .5); border-radius: 10px; font-size: 17px; font-weight: 800; font-style: italic; background: linear-gradient(145deg, rgba(167, 85, 247, .23), rgba(74, 139, 255, .17)); box-shadow: 0 0 22px rgba(113, 79, 231, .18), inset 0 1px rgba(255, 255, 255, .17); }
nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); color: #c8cbe0; font-size: 13px; }
nav a:not(.nav-contact) { transition: color .3s var(--ease); }
nav a:hover { color: #fff; }
.nav-contact { padding: 10px 17px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .025); transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.nav-contact:hover { background: rgba(125, 120, 255, .13); border-color: rgba(178, 164, 255, .55); transform: translateY(-2px); }
.nav-contact span { margin-left: 10px; color: var(--cyan); }

.eyebrow { margin: 0 0 18px; color: #b9a8ee; font-size: 11px; font-weight: 750; letter-spacing: .19em; line-height: 1.5; }
.live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: 2px; border-radius: 50%; background: #65e4c3; box-shadow: 0 0 11px rgba(101, 228, 195, .9); }
.eyebrow-divider { margin-inline: 11px; color: #696680; }

.hero { padding-top: clamp(60px, 9vw, 118px); padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
h1 { max-width: 760px; font-size: clamp(44px, 5.6vw, 84px); font-weight: 560; margin-bottom: 24px; }
h1 span { background: linear-gradient(96deg, #eee9ff 4%, #a9b1ff 43%, #79daf7 93%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { max-width: 560px; color: #b8bbd0; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 11px 21px; border-radius: 12px; font-size: 13px; font-weight: 700; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
.button:hover { transform: translateY(-3px); }
.button.primary { background: linear-gradient(135deg, rgba(105, 226, 246, .92), rgba(150, 138, 255, .92)); color: #05121a; box-shadow: 0 16px 44px rgba(94, 200, 246, .22); }
.button.secondary { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .03); color: #dfe3f4; }
.button.secondary:hover { border-color: rgba(178, 164, 255, .55); }

/* Decorative caustic bands: layered screen-blended gradients, masked into a soft pool of light. */
.hero-art { position: relative; }
.caustic-art { position: relative; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(ellipse at 50% 108%, rgba(16, 86, 116, .85), rgba(6, 14, 26, .95) 58%, #05070d 78%); box-shadow: 0 40px 120px rgba(3, 8, 18, .7), inset 0 0 80px rgba(90, 200, 240, .08); }
.caustic-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 66% 62% at 50% 48%, transparent 40%, rgba(5, 7, 13, .82) 100%); }
.caustic-art i { position: absolute; inset: -22%; display: block; mix-blend-mode: screen; }
/* Two offset rings of thin ripple lines, blurred just enough to fuse into a light web. */
.caustic-art i:nth-child(1) { background: repeating-radial-gradient(circle at 32% 44%, rgba(150, 242, 255, .34) 0 2px, rgba(150, 242, 255, 0) 2px 24px); filter: blur(2.5px); animation: caustic-drift-a 19s var(--ease) infinite; }
.caustic-art i:nth-child(2) { background: repeating-radial-gradient(circle at 70% 60%, rgba(176, 150, 255, .3) 0 2px, rgba(176, 150, 255, 0) 2px 33px); filter: blur(3px); animation: caustic-drift-b 25s var(--ease) infinite; }
/* Pool-floor hot spots: the bright cells the refracted light lands in. */
.caustic-art i:nth-child(3) { background: radial-gradient(ellipse 22% 16% at 36% 58%, rgba(190, 255, 250, .5), transparent 70%), radial-gradient(ellipse 18% 13% at 62% 38%, rgba(210, 200, 255, .42), transparent 70%), radial-gradient(ellipse 26% 12% at 52% 76%, rgba(239, 170, 120, .22), transparent 72%); filter: blur(7px); animation: caustic-pulse 11s var(--ease) infinite; }
@keyframes caustic-pulse { 0%, 100% { opacity: .78; transform: scale(1) translate3d(0, 0, 0); } 50% { opacity: 1; transform: scale(1.06) translate3d(1%, -1%, 0); } }
@keyframes caustic-drift-a { 0%, 100% { transform: translate3d(-2%, 1%, 0) rotate(0deg) scale(1.05); } 50% { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.14); } }
@keyframes caustic-drift-b { 0%, 100% { transform: translate3d(2%, -1%, 0) rotate(2deg) scale(1.1); } 50% { transform: translate3d(-3%, 2%, 0) rotate(-3deg) scale(1.02); } }
.art-note { margin: 12px 0 0; color: var(--subtle); font-size: 11px; letter-spacing: .06em; text-align: right; }

.section { padding-block: clamp(46px, 6vw, 86px); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 3vw, 56px); align-items: end; margin-bottom: 34px; }
.section-heading h2 { font-size: clamp(30px, 3.6vw, 50px); font-weight: 560; margin: 0; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }

.featured-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.panel { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(28, 32, 50, .72), rgba(17, 19, 31, .72)); box-shadow: 0 22px 60px rgba(4, 8, 18, .42), inset 0 1px rgba(255, 255, 255, .04); backdrop-filter: blur(10px); }
.panel h3 { font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #cfd4ea; margin-bottom: 16px; }
.panel p { color: var(--muted); font-size: 14.5px; }
.capability-list, .verify-list, .tag-row { list-style: none; margin: 0; padding: 0; }
.capability-list li, .verify-list li { position: relative; padding-left: 20px; margin-bottom: 13px; color: #cdd2e6; font-size: 14.5px; line-height: 1.6; }
.capability-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(140deg, var(--cyan), var(--violet)); box-shadow: 0 0 10px rgba(89, 213, 247, .5); }
.verify-list li { padding-left: 0; }
.verify-value { display: block; margin-bottom: 2px; font-family: "JetBrains Mono", monospace; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: #8ff0d6; }
.meter { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
.tag { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: #c3c9e0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag-row li { padding: 4px 10px; border-radius: 8px; background: rgba(120, 140, 220, .1); color: #b9c0dd; font-size: 11.5px; }
.tag-native { border-color: rgba(105, 226, 246, .45); color: #9ae8fb; }
.tag-webgl { border-color: rgba(239, 144, 98, .38); color: #f5c3a6; }
.limits p { margin-bottom: 18px; }
.fineprint { color: var(--subtle) !important; font-size: 12px !important; margin: 14px 0 0; }

.library-status { color: var(--subtle); font-size: 13px; margin-bottom: 18px; }
.template-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.template-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(24, 27, 43, .68), rgba(15, 17, 28, .68)); transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.template-card:hover { transform: translateY(-4px); border-color: rgba(178, 164, 255, .42); box-shadow: 0 26px 60px rgba(4, 8, 18, .5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-index { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--subtle); }
.card-group { margin: 0; color: var(--subtle); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.card-title { margin: 2px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.03em; }
.card-summary { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.card-link { margin-top: auto; padding-top: 6px; color: #9ae8fb; font-size: 13px; font-weight: 650; }
.card-link span { margin-left: 8px; }
.card-link:hover { color: #d8fbff; }
.preview-link { color: #9ae8fb; font-size: 13px; font-weight: 650; }
.preview-link span { margin-left: 8px; }

.closing-panel { text-align: left; }
.closing-panel h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 14px; }
.site-footer { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding-block: 40px 64px; color: var(--subtle); font-size: 12.5px; border-top: 1px solid rgba(188, 195, 255, .1); }
.site-footer a { color: #b9c0dd; }
.site-footer a:hover { color: #fff; }

/* Arrival: one-shot, backwards-filled so the hover lift keeps working afterwards. */
@keyframes card-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.panel { animation: card-arrive .6s var(--ease) backwards; }
.featured-grid > .panel:nth-child(2) { animation-delay: 80ms; }
.featured-grid > .panel:nth-child(3) { animation-delay: 160ms; }
.template-card { animation: card-arrive .55s var(--ease) backwards; animation-delay: calc(var(--fx-i, 0) * 55ms); }

@media (max-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-art { order: -1; }
  .section-heading { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .site-header { min-height: 76px; }
  nav a:not(.nav-contact) { display: none; }
  .wordmark small { font-size: 9px; letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caustic-art i { animation: none; }
  .panel, .template-card { animation: none; }
  .template-card, .button, .nav-contact { transition: none; }
}