/* hero */
#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

#hero .signature {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
  letter-spacing: 0.02em;
}

#hero h1 {
  margin-bottom: 0.2em;
}

#hero .tag-list {
  margin-bottom: 1.5rem;
}

#hero {
  padding-bottom: 0.75rem;
}

#hero .role-line {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 50ch;
  margin-bottom: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

#hero .role-line.revealed {
  opacity: 1;
}

#hero .scroll-hint {
  position: absolute;
  top: 1.75rem;
  right: var(--section-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s ease;
  z-index: 3;
}

#hero .scroll-hint svg {
  animation: scroll-hint-bob 1.6s ease-in-out infinite;
}

@keyframes scroll-hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* carousel */
#carousel {
  position: relative;
  z-index: 2;
  /* keeps the ball the agreed distance below role-line now that the label
     no longer sits between them */
  padding-top: 2.5rem;
}

/* Everything fades in on cue — except the ball strip, which is always at
   full opacity in its final place, so the ball itself rolls out from behind
   its wall rather than materialising with the rest of the block. */
#carousel > *:not(.ball-surface) {
  opacity: 0;
  transition: opacity 0.6s ease;
}

#carousel.revealed > *:not(.ball-surface) {
  opacity: 1;
}

/* The label now sits under the ball strip, so the space above it is the
   ball's own lane — doubled, without moving the ball itself. */
#carousel .section-label {
  margin-top: 1.6rem;
  margin-bottom: 0;
}

#carousel .ball-surface {
  height: 28px;
}

.carousel-featured {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid var(--border);
  background: #000;
  aspect-ratio: 16/9;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
}

/* filter cloud — roles are collected from the clips themselves */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
}

.tag-cloud button {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: none;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  padding: 0.3em 0.7em;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.tag-cloud button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tag-cloud button.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.tag-reset {
  line-height: 1;
  padding: 0.3em 0.6em !important;
}

.carousel-track .clip {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.carousel-track .clip.is-hidden {
  display: none;
}

.carousel-track .clip-media {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  border: 0.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* what was done on this clip — sits on the preview, like the flagship stills */
.clip-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.4em 0.6em;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-align: left;
}

/* ai process */
#ai-process {
  position: relative;
  z-index: 2;
  background: var(--surface);
  border-radius: 16px;
  max-width: 1000px;
}

#ai-process p {
  max-width: 70ch;
}

/* flagship */
#flagship {
  position: relative;
  z-index: 2;
}

#flagship .ball-surface {
  height: 180px;
}

/* one per tool in the section */
.tool-entry + .tool-entry {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 0.5px solid var(--border);
}

.tool-entry h2 .tool-link {
  margin-left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
}

.flagship-copy {
  display: grid;
  gap: 1rem;
  margin-bottom: 2rem;
}

.flagship-copy .short { font-size: 1.05rem; color: var(--text-primary); max-width: 65ch; }

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.demo-grid .clip {
  aspect-ratio: 16/9;
  border-radius: 8px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  position: relative;
}

.demo-grid .clip .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.7rem;
  padding: 0.4em 0.6em;
  background: rgba(0,0,0,0.55);
  color: #fff;
}

.engineering-stories {
  border-bottom: 0.5px solid var(--border);
  margin-top: 1rem;
}

/* blender / ae shared two-col */
.split-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 720px) {
  .split-block { grid-template-columns: 1fr; }
}

.media-placeholder {
  aspect-ratio: 4/3;
  border-radius: 8px;
  border: 0.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.coming-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  border: 0.5px dashed var(--border);
  border-radius: 4px;
  padding: 0.2em 0.6em;
  margin-left: 0.5em;
}

/* contact */
#contact {
  text-align: center;
  padding-bottom: 20rem;
}

#contact .contact-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}