/* ==========================================================================
   BlueprintAi (#blueprint) — verbatim from
   docs/research/css/index.f9761eab.pretty.css (.video-base, .ai-dots,
   .blueprint-ai). Kept out of globals.css so the shared sheet stays owned
   by whoever built it; these selectors are unique to this section plus the
   shared `.video-base` / `.ai-dots` primitives.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .video-base
   -------------------------------------------------------------------------- */
.video-base { border-radius: inherit; position: relative; }

.video-base__video {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.video-base__control {
  z-index: 2;
  cursor: pointer;
  background: 0 0;
  justify-content: center;
  align-items: center;
  padding: 8px;
  display: flex;
  position: absolute;
  bottom: 0;
}
.video-base__control--left { left: 0; }
.video-base__control--right { right: 0; }
@media (width >= 744px) { .video-base__control { padding: 16px; } }

.video-base__button-svg {
  stroke: none;
  fill: none;
  background: #0000004d;
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.video-base__button-svg--light { background: #ffffff4d; }
.video-base__button-svg--has-blur { backdrop-filter: blur(25px); }


/* --------------------------------------------------------------------------
   .ai-dots
   -------------------------------------------------------------------------- */
.ai-dots {
  --defaultTransform: scale(1) translate(0%, 0%);
  --defaultTiming: 14s;
  aspect-ratio: 1;
  width: 22px;
  animation: 14s cubic-bezier(.645, .045, .355, 1) infinite rotateAnimation;
  position: relative;
}
.ai-dots--no-animation { animation: none; }
@media (prefers-reduced-motion: reduce) { .ai-dots { animation: none; } }

.ai-dots__dot {
  background: var(--primitive-black);
  transform-origin: 50%;
  border-radius: 100%;
  position: absolute;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-dots__dot { transition: background-color .2s cubic-bezier(.645, .045, .355, 1); }
}
.ai-dots__dot--large {
  width: 59.5%;
  height: 59.5%;
  animation: scaleAnimationLarge var(--defaultTiming) linear infinite;
  top: 4%;
  left: 0;
}
.ai-dots__dot--medium {
  width: 38.13%;
  height: 38.13%;
  animation: scaleAnimationMedium var(--defaultTiming) linear infinite;
  top: 40%;
  right: 0;
}
.ai-dots__dot--small {
  width: 24%;
  height: 24%;
  animation: scaleAnimationSmall var(--defaultTiming) linear infinite;
  bottom: 6%;
  left: 30%;
}
.ai-dots__dot--light { background: var(--primitive-white); }
.ai-dots__dot--no-animation { animation: none; }
@media (prefers-reduced-motion: reduce) { .ai-dots__dot { animation: none; } }

@keyframes rotateAnimation {
  0%   { transform: rotate(0); }
  22%  { transform: rotate(240deg); }
  44%  { transform: rotate(480deg); }
  66%  { transform: rotate(720deg); }
  to   { transform: rotate(720deg); }
}
@keyframes scaleAnimationLarge {
  0%   { transform: var(--defaultTransform); }
  11%  { transform: scale(.403) translate(-20%, -30%); }
  22%  { transform: scale(.403) translate(-20%, -30%); }
  33%  { transform: scale(.64) translate(40%, -45%); }
  44%  { transform: scale(.64) translate(40%, -45%); }
  55%  { transform: var(--defaultTransform); }
  to   { transform: var(--defaultTransform); }
}
@keyframes scaleAnimationMedium {
  0%   { transform: var(--defaultTransform); }
  11%  { transform: scale(1.56) translate(-10%, -33%); }
  22%  { transform: scale(1.56) translate(-10%, -33%); }
  33%  { transform: scale(.63) translate(10%, -85%); }
  44%  { transform: scale(.63) translate(10%, -85%); }
  55%  { transform: var(--defaultTransform); }
  to   { transform: var(--defaultTransform); }
}
@keyframes scaleAnimationSmall {
  0%   { transform: var(--defaultTransform); }
  11%  { transform: scale(1.59) translate(-45%, -30%); }
  22%  { transform: scale(1.59) translate(-45%, -30%); }
  33%  { transform: scale(2.48) translate(5%, -15%); }
  44%  { transform: scale(2.48) translate(5%, -15%); }
  55%  { transform: var(--defaultTransform); }
  to   { transform: var(--defaultTransform); }
}

/* --------------------------------------------------------------------------
   Missing from globals.css at time of writing — verbatim source rule.
   -------------------------------------------------------------------------- */
.text--footnote { font-size: 12px; line-height: 1.4; }
.text--footnote a {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
  background-position: 0 100%, 100% 100%;
  background-repeat: no-repeat;
  background-size: 51% 1px, 50% 1px;
}

/* --------------------------------------------------------------------------
   .blueprint-ai
   -------------------------------------------------------------------------- */
.blueprint-ai {
  z-index: 2;
  background-color: var(--primitive-black);
  width: 100%;
  /* Was 100svh, when a single film filled the section from behind. The films
     stand in the flow now, so the section is sized by what is in it — pinning
     it to the viewport would either crop the row or strand it in dead space. */
  padding: 96px var(--grid-gutter-width);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  display: flex;
  position: relative;
  overflow: hidden;
}
@media (width >= 744px)  { .blueprint-ai { padding: 120px var(--grid-gutter-width); } }
@media (width >= 1020px) { .blueprint-ai { gap: 40px; padding: 140px var(--grid-gutter-width); } }

.blueprint-ai__icon {
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  display: flex;
  position: relative;
}

.blueprint-ai__title {
  text-align: center;
  max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 9));
}
@media (width >= 744px)  { .blueprint-ai__title { max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7)); } }
@media (width >= 1020px) { .blueprint-ai__title { max-width: calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5)); } }
@media (width >= 1920px) { .blueprint-ai__title { max-width: calc((var(--grid-column-width) * 4) + (var(--grid-gutter-width) * 5)); } }

.blueprint-ai__disclaimer { color: var(--color-gray-500); text-align: center; }
@media (width >= 1020px) { .blueprint-ai__disclaimer { display: none; } }

.blueprint-ai__blueprint-cta-wrap { display: inline-block; position: relative; }
.blueprint-ai__blueprint-cta-wrap:hover .blueprint-ai__blueprint-cta-laser { opacity: 0; }
.blueprint-ai__blueprint-cta { position: relative; }

@property --laser-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.blueprint-ai__blueprint-cta-laser {
  background-image: conic-gradient(from var(--laser-angle), #fff0 80%, #fff 100%);
  z-index: -1;
  border-radius: 4px;
  transition: opacity .3s cubic-bezier(.645, .045, .355, 1);
  animation: 8s linear infinite laser-spin;
  position: absolute;
  inset: 0;
}
.blueprint-ai__blueprint-cta-laser::before {
  content: "";
  background-color: var(--primitive-black);
  z-index: 0;
  border-radius: 3px;
  position: absolute;
  inset: 2px;
}
@keyframes laser-spin { to { --laser-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .blueprint-ai__blueprint-cta-laser { display: none; } }

@media (width >= 1020px) { .blueprint-ai__cta-mobile { display: none; } }

.blueprint-ai__cta-desktop { display: none; }
@media (width >= 1020px) { .blueprint-ai__cta-desktop { display: block; } }

/* ---------- the films, three across ----------
   These stand in the flow now rather than behind it, so the section is sized
   by its contents instead of the viewport — see the height overrides above.

   Three 9:16 frames across a 375px phone would be 88px wide, which is a
   thumbnail, not a film. Below 744px the row scrolls instead: each reel is
   62vw so the second is visibly cut off at the edge, which is what tells you
   the row moves. Still three side by side, just not all at once. */
.blueprint-ai__reels {
  display: flex;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.blueprint-ai__reels::-webkit-scrollbar { display: none; }

.blueprint-ai__reel {
  flex: 0 0 62vw;
  scroll-snap-align: center;
  margin: 0;
}

@media (width >= 744px) {
  .blueprint-ai__reels {
    gap: 16px;
    justify-content: center;
    overflow-x: visible;
    max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7));
  }
  .blueprint-ai__reel { flex: 1 1 0; max-width: 260px; }
}
@media (width >= 1020px) {
  .blueprint-ai__reels { gap: 20px; }
  .blueprint-ai__reel { max-width: 280px; }
}

.blueprint-ai__reel-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  /* The encodes are 608x1080 — a hair off 9:16 — so `cover` trims a sliver
     rather than letterboxing the frame. */
  object-fit: cover;
  background-color: #111;
  border-radius: 12px;
}

.blueprint-ai__reel-label {
  color: var(--color-gray-500);
  text-align: center;
  margin: 8px 0 0;
}

/* NB: the source ships this rule under `.blueprint-ai__background-video__video-controls`
   while the markup emits `blueprint-ai__video-controls`, so it never applies on the
   live page. Reproduced under the class the markup actually uses would change the
   rendering, so it is left inert here (the control falls back to
   `.video-base__control--right`: bottom 0 / right 0). */