/* ==========================================================================
   AI THEME GENERATION — hero A/B variants
   Page: ai-theme-generation/index.html (V1), ai-theme-generation/v2.html (V2)
   Sections below the hero come from the home partials (base.css / main.css).
   ========================================================================== */

/* ==========================================================================
   HERO V1 — prompt box + animated store generation mockup
   State lives on .ai-hero__visual: data-theme (0-2) picks the example store,
   data-phase (fade|scan|done|scroll) runs its timeline (see the page script).
   ========================================================================== */

@property --ai-hero-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.ai-hero {
  --ai-hero-surface: var(--js-color-carbon-adapt);
  --ai-hero-screen: var(--js-color-carbon-black);
  --ai-hero-skeleton: var(--color-main-op1);

  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: var(--color-background);
  padding: calc(var(--header-height-desktop) + clamp(32px, 5vw, 72px)) clamp(20px, 4vw, 48px) clamp(56px, 7vw, 96px);
}

.ai-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(40px, 6.5vw, 110px);
}

/* Copy column ---------------------------------------------------------- */

.ai-hero__copy {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.ai-hero__title {
  margin: 0;
  max-width: 620px;
  color: var(--color-main);
  text-wrap: balance;
}

.ai-hero__prompt {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-top: clamp(24px, 3vw, 36px);
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  background: var(--ai-hero-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(0, 0, 0, 0.21), 0 40px 80px -24px rgba(0, 0, 0, 0.36);
}

/* The gradient must be declared on the element that animates --ai-hero-angle:
   a custom property holding var(--ai-hero-angle) on a parent resolves there,
   frozen at 0deg. */
.ai-hero__prompt-glow,
.ai-hero__prompt-border {
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  background: conic-gradient(
    from var(--ai-hero-angle),
    rgba(var(--js-color-green-rgb), 0) 0deg,
    var(--color-accent) 90deg,
    var(--js-color-light-sea-green) 170deg,
    var(--js-color-dark-cyan) 240deg,
    rgba(var(--js-color-green-rgb), 0) 320deg
  );
  animation: ai-hero-spin 4s linear infinite;
  pointer-events: none;
}

.ai-hero__prompt-glow {
  z-index: -1;
  filter: blur(14px);
  opacity: 0.25;
}

.ai-hero__prompt-border {
  padding: 1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.ai-hero__textarea {
  width: 100%;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-main);
  font-family: var(--font-secondary);
  font-size: 17px;
  line-height: 1.55;
}

.ai-hero__textarea::placeholder {
  color: var(--color-main-op5);
}

/* The textarea has no outline of its own: the whole box shows keyboard focus. */
.ai-hero__prompt:has(.ai-hero__textarea:focus-visible) {
  outline: 1px solid var(--color-main-op4);
  outline-offset: 4px;
}

.ai-hero__prompt-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ai-hero__count {
  font-family: var(--font-secondary);
  font-size: 12.5px;
  color: var(--color-main-op5);
  padding-top: 2px;
}

.ai-hero__use-prompt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--js-color-green-rgb), 0.55);
  background: rgba(var(--js-color-green-rgb), 0.1);
  color: var(--color-main);
  font-family: var(--font-secondary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, border-color 0.2s ease;
}

.ai-hero__use-prompt span {
  color: var(--color-accent);
}

/* Shown while the empty box is hovered, when it has keyboard focus, and on
   touch screens (no hover) for as long as the box is empty. */
.ai-hero.is-frozen:not(.has-prompt) .ai-hero__use-prompt,
.ai-hero:not(.has-prompt) .ai-hero__use-prompt:focus-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media (hover: none) {
  .ai-hero:not(.has-prompt) .ai-hero__use-prompt {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

.ai-hero__use-prompt:is(:hover, :focus-visible) {
  background: rgba(var(--js-color-green-rgb), 0.22);
  border-color: var(--color-accent);
}

.ai-hero__generate {
  margin-left: auto;
  white-space: nowrap;
}

.ai-hero__generate:disabled {
  opacity: 0.8;
  pointer-events: none;
}

.ai-hero__trust {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  font-family: var(--font-secondary);
  font-size: 14px;
  color: var(--color-main-op6);
}

.ai-hero__trust svg {
  flex: none;
  color: var(--color-accent);
}

/* Mockup column -------------------------------------------------------- */

/* Decorative animation: no text selection or image dragging. */
.ai-hero__visual {
  position: relative;
  flex: 1.15 1 500px;
  min-width: 0;
  margin: 26px 0 34px;
  -webkit-user-select: none;
  user-select: none;
}

.ai-hero__visual img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.ai-hero__browser {
  overflow: hidden;
  border-radius: 14px;
  background: var(--ai-hero-screen);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 30px 70px -10px rgba(0, 0, 0, 0.54);
}

.ai-hero__browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 25px;
  padding: 0 12px;
  border-bottom: 1px solid var(--color-main-op05);
}

.ai-hero__dots {
  display: flex;
  gap: 4px;
  width: 29px;
}

.ai-hero__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-main-op2);
}

.ai-hero__url {
  flex: 1;
  min-width: 0;
  max-width: fit-content;
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--color-main-op6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: var(--color-background-op9);
  border-radius: 16px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1px solid var(--color-main-op2);
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The next address fades in while the pill resizes (width set by the script). */
.ai-hero__url > span:not([hidden]) {
  animation: ai-hero-url-in 0.5s ease both;
}

@keyframes ai-hero-url-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ai-hero__screen {
  position: relative;
  aspect-ratio: 1440 / 880;
  overflow: hidden;
}

/* Empty store wireframe shown before each screenshot is revealed. */
.ai-hero__skeleton {
  position: absolute;
  inset: 0;
  background: var(--color-background);
}

.ai-hero__sk {
  position: absolute;
  border-radius: 4px;
  background: var(--ai-hero-skeleton);
}

.ai-hero__sk--topbar  { left: 0; right: 0; top: 0; height: 5.5%; border-radius: 0; background: var(--color-main-op05); }
.ai-hero__sk--logo    { left: 4%; top: 9%; width: 17%; height: 5%; }
.ai-hero__sk--search  { left: 35%; top: 9.5%; width: 30%; height: 4%; }
.ai-hero__sk--cart    { right: 4%; top: 10%; width: 9%; height: 3%; }
.ai-hero__sk--nav     { left: 0; right: 0; top: 17.5%; height: 5%; border-radius: 0; background: var(--color-main-op05); }
.ai-hero__sk--menu    { left: 32%; top: 19%; width: 36%; height: 2%; }
.ai-hero__sk--banner  { left: 0; right: 0; top: 24.5%; height: 69%; border-radius: 0; background: var(--color-main-op05); }
.ai-hero__sk--eyebrow { left: 2.5%; top: 40%; width: 28%; height: 3%; }
.ai-hero__sk--line1   { left: 2.5%; top: 47%; width: 44%; height: 6.5%; }
.ai-hero__sk--line2   { left: 2.5%; top: 56%; width: 40%; height: 6.5%; }
.ai-hero__sk--cta     { left: 2.5%; top: 67%; width: 15%; height: 5%; border-radius: 999px; }

.ai-hero__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  /* The outgoing screenshot keeps its scrolled position while it fades out,
     and only snaps back to the top once it is invisible. */
  transition: opacity 0.4s ease, object-position 0s linear 0.4s;
}

/* Active screenshot: hidden above the scan line, revealed top-down, then scrolled. */
:is(
  .ai-hero__visual[data-theme="0"] [data-shot="0"],
  .ai-hero__visual[data-theme="1"] [data-shot="1"],
  .ai-hero__visual[data-theme="2"] [data-shot="2"]
) {
  z-index: 1;
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition: clip-path 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

:is(
  .ai-hero__visual[data-theme="0"][data-phase="fade"] [data-shot="0"],
  .ai-hero__visual[data-theme="1"][data-phase="fade"] [data-shot="1"],
  .ai-hero__visual[data-theme="2"][data-phase="fade"] [data-shot="2"]
) {
  clip-path: inset(0 0 100% 0);
  transition: none;
}

:is(
  .ai-hero__visual[data-theme="0"][data-phase="scroll"] [data-shot="0"],
  .ai-hero__visual[data-theme="1"][data-phase="scroll"] [data-shot="1"],
  .ai-hero__visual[data-theme="2"][data-phase="scroll"] [data-shot="2"]
) {
  object-position: center bottom;
  transition: object-position 2.2s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Scan line: grows with the reveal, fades out once done. */
.ai-hero__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.ai-hero__scan::before,
.ai-hero__scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.ai-hero__scan::before {
  height: 90px;
  background: linear-gradient(to bottom, rgba(var(--js-color-green-rgb), 0), rgba(var(--js-color-green-rgb), 0.18));
}

.ai-hero__scan::after {
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 14px 2px rgba(var(--js-color-green-rgb), 0.8);
}

.ai-hero__visual[data-phase="fade"] .ai-hero__scan {
  height: 0;
  opacity: 1;
  transition: none;
}

.ai-hero__visual[data-phase="scan"] .ai-hero__scan {
  height: 100%;
  opacity: 1;
  transition: height 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Sparks: --x/--y position, --s size, --t duration, --d delay (inline). */
.ai-hero__spark {
  position: absolute;
  left: var(--x);
  bottom: -6px;
  font-size: var(--s);
  line-height: 1;
  color: var(--js-color-white);
  text-shadow: 0 0 6px rgba(var(--js-color-green-rgb), 0.9);
  opacity: 0;
  animation: ai-hero-spark var(--t) ease-out var(--d) infinite;
}

.ai-hero__spark::before {
  content: "✦";
}

.ai-hero__spark--accent {
  color: var(--color-accent);
}

.ai-hero__spark--dark {
  color: var(--js-color-green-dark);
}

/* Sparks riding both edges of the scan line, outside the browser frame. */
.ai-hero__track {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 8;
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.ai-hero__visual[data-phase="fade"] .ai-hero__track {
  top: 24px;
  opacity: 1;
  transition: none;
}

.ai-hero__visual[data-phase="scan"] .ai-hero__track {
  top: 100%;
  opacity: 1;
  transition: top 3.8s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.ai-hero__track .ai-hero__spark {
  bottom: auto;
  top: var(--y);
  text-shadow: 0 0 8px rgba(var(--js-color-green-rgb), 0.9);
}

.ai-hero__spark--left {
  left: var(--x);
  animation-name: ai-hero-spark-left;
}

.ai-hero__spark--right {
  left: auto;
  right: var(--x);
  animation-name: ai-hero-spark-right;
}

/* Floating result cards: pop in one after another once the store is "done". */
.ai-hero__card {
  position: absolute;
  z-index: 7;
  background: var(--ai-hero-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ai-hero__visual:is([data-phase="done"], [data-phase="scroll"]) .ai-hero__card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--delay, 0s);
}

.ai-hero__card--palette {
  top: -22px;
  right: -18px;
  width: 190px;
  padding: 9px;
  border-radius: 14px;
}

.ai-hero__card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 7px;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-main-op7);
}

.ai-hero__card-label span {
  color: var(--js-color-green-dark);
}

.ai-hero__swatches {
  display: flex;
  gap: 4px;
}

.ai-hero__swatches span {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.ai-hero__card--product {
  --delay: 0.35s;
  left: -30px;
  bottom: -34px;
  width: 132px;
  padding: 7px;
  border-radius: 14px;
}

.ai-hero__product-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 9px;
  background: var(--js-color-bright-snow) center / cover no-repeat;
}

.ai-hero__product-img--top {
  background-position: center top;
}

.ai-hero__caption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 2px;
  font-family: var(--font-secondary);
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--color-main);
  text-align: left;
}

.ai-hero__caption-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-button-main-text);
  font-size: 8px;
}

/* Typography card: font pairing of the store being generated. The inner
   specimen (.ai-typo__*) is shared with the V2 carousel. */
.ai-hero__card--typo {
  --delay: 0.7s;
  right: -22px;
  bottom: -30px;
  width: 270px;
  padding: 13px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--color-background-op9);
}

.ai-hero__card--typo .ai-typo__head {
  margin-bottom: 7px;
}

/* Status pill under the browser while generating. */
.ai-hero__status-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -21px;
  z-index: 6;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.ai-hero__status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ai-hero-surface);
  border: 1px solid var(--color-main-op1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  font-family: var(--font-secondary);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-main);
  white-space: nowrap;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.ai-hero__visual:is([data-phase="done"], [data-phase="scroll"]) .ai-hero__status {
  opacity: 0;
  transform: translateY(6px);
}

.ai-hero__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: ai-hero-blink 1.1s ease-in-out infinite;
}

.ai-hero__status-text {
  display: inline-block;
  overflow: hidden;
  text-align: left;
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Keyframes ------------------------------------------------------------- */

@keyframes ai-hero-spin {
  to { --ai-hero-angle: 360deg; }
}

@keyframes ai-hero-blink {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 1; }
}

@keyframes ai-hero-spark {
  0% { opacity: 0; transform: translateY(4px) scale(0.3) rotate(0deg); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-38px) scale(1) rotate(90deg); }
}

@keyframes ai-hero-spark-left {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-30px, -22px) scale(1.1) rotate(-90deg); }
}

@keyframes ai-hero-spark-right {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(30px, -22px) scale(1.1) rotate(90deg); }
}

/* Responsive ------------------------------------------------------------ */

/* Stacked layout: copy centered above the mockup. */
@media (max-width: 1119px) {
  .ai-hero__copy {
    align-items: center;
    text-align: center;
  }

  .ai-hero__trust {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .ai-hero {
    padding-top: calc(var(--header-height-mobile) + 32px);
  }

  .ai-hero__card--palette {
    right: 10px;
    width: 150px;
  }

  .ai-hero__card--product {
    left: 10px;
    bottom: -30px;
    width: 214px;
    padding: 6px 10px 6px 6px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ai-hero__product-img {
    flex: none;
    width: 60px;
    aspect-ratio: 1;
    border-radius: 8px;
  }

  .ai-hero__caption {
    flex: 1;
    min-width: 0;
    padding: 0;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 8px;
  }

  .ai-hero__card--typo {
    display: none;
  }
}

@media (max-width: 575px) {
  .ai-hero__prompt {
    padding: 16px 16px 14px;
  }

  .ai-hero__textarea {
    font-size: 16px;
  }

  .ai-hero__generate {
    width: 100%;
  }

  /* Wrapped trust line: keep the shield inline with the first line. */
  .ai-hero__trust {
    display: block;
    text-align: center;
  }

  .ai-hero__trust svg {
    display: inline;
    margin-right: 6px;
    vertical-align: -2px;
  }
}

/* Pause the decorative loops when nobody can see them: the whole hero once
   it is scrolled away (.is-offscreen, set by the page script), the sparks
   outside the scan (their containers are faded out) and the status dot
   once the pill is hidden. */
.ai-hero.is-offscreen :is(.ai-hero__prompt-glow, .ai-hero__prompt-border, .ai-hero__spark, .ai-hero__status-dot),
.ai-hero__visual:is([data-phase="done"], [data-phase="scroll"]) :is(.ai-hero__spark, .ai-hero__status-dot) {
  animation-play-state: paused;
}

/* Static end state: no typing, no scan, cards already shown. */
@media (prefers-reduced-motion: reduce) {
  .ai-hero__prompt-glow,
  .ai-hero__prompt-border,
  .ai-hero__status-dot,
  .ai-hero__spark {
    animation: none;
  }

  .ai-hero__visual * {
    transition: none !important;
  }

  .ai-hero__url > span {
    animation: none;
  }
}

/* ==========================================================================
   HERO V2 — centered prompt box + carousel of generated stores
   Reuses the V1 prompt box (.ai-hero__prompt…) with its own surface. The
   carousel state is set by the page script: --ai-scale (stage fits its
   width), --ai-gap (so the neighbours peek in), --ai-offset per slide and
   .is-compact (< 760px).
   ========================================================================== */

.ai-hero--v2 {
  padding-bottom: clamp(32px, 4vw, 56px);
}

.ai-hero--v2 .ai-hero__inner {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}

.ai-hero--v2 .ai-hero__copy {
  flex: none;
  width: 100%;
  align-items: center;
  text-align: center;
}

.ai-hero--v2 .ai-hero__title {
  max-width: 1000px;
}

.ai-hero--v2 .ai-hero__trust {
  justify-content: center;
}

.ai-hero--v2 .ai-hero__prompt {
  max-width: 720px;
  margin-top: 30px;
  padding: 22px 22px 18px;
  gap: 14px;
  border-radius: 16px;
  border-color: var(--color-main-op2);
  background:
    radial-gradient(120% 150% at 50% 120%, rgba(var(--js-color-green-rgb), 0.22) 0%, rgba(var(--js-color-green-rgb), 0.06) 45%, var(--color-main-op05) 100%),
    var(--color-background);
  box-shadow: 0 22px 60px rgba(var(--js-color-green-rgb), 0.14);
}

.ai-hero--v2 :is(.ai-hero__prompt-glow, .ai-hero__prompt-border) {
  border-radius: 17px;
}

.ai-hero--v2 .ai-hero__prompt-glow {
  filter: blur(12px);
  opacity: 0.45;
}

/* Carousel ------------------------------------------------------------- */

/* Full-bleed so the neighbour slides peek in from the viewport edges
   (.ai-hero clips the horizontal overflow). */
.ai-carousel {
  /* Slide widths and the inactive scale are also read by the script. */
  --ai-slide-w-full: 989px;
  --ai-slide-w-compact: 527px;
  --ai-neighbour-scale: 0.86;
  --ai-scale: 1;
  --ai-slide-w: var(--ai-slide-w-full);
  --ai-gap: 120px;
  --ai-stage-h: 492px;
  --ai-track-top: 0px;

  position: relative;
  width: 100vw;
  margin: 40px calc(50% - 50vw) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  -webkit-user-select: none;
  user-select: none;
}

/* --ai-gap is recomputed by the script so the neighbours peek in. */
.ai-carousel.is-compact {
  --ai-slide-w: var(--ai-slide-w-compact);
  --ai-stage-h: 580px;
  --ai-track-top: 34px;
}

.ai-carousel img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.ai-carousel__stage {
  position: relative;
  width: 100%;
  height: calc(var(--ai-stage-h) * var(--ai-scale) + 16px);
  overflow: hidden;
}

.ai-carousel__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 55% at 50% 50%, rgba(var(--js-color-green-rgb), 0.14) 0%, rgba(var(--js-color-green-rgb), 0) 70%);
  pointer-events: none;
}

.ai-carousel__scaler {
  position: absolute;
  inset: 0;
  transform: scale(var(--ai-scale));
  transform-origin: top center;
}

/* Circular track: every slide sits at --ai-offset steps from the active one
   (-2…3, set by the script), so a blurred neighbour always peeks on both sides. */
.ai-carousel__track {
  position: absolute;
  top: var(--ai-track-top);
  left: 50%;
}

.ai-carousel__slide {
  --ai-offset: 0;

  position: absolute;
  top: 0;
  left: calc(var(--ai-slide-w) / -2);
  width: var(--ai-slide-w);
  display: grid;
  grid-template-columns: 210px 527px 210px;
  gap: 21px;
  align-items: start;
  text-align: left;
  opacity: 0.4;
  filter: blur(4px);
  transform: translateX(calc(var(--ai-offset) * (var(--ai-slide-w) + var(--ai-gap)))) scale(var(--ai-neighbour-scale));
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.9s ease, filter 0.9s ease;
}

.ai-carousel__slide.is-active {
  opacity: 1;
  filter: none;
  transform: translateX(0) scale(1);
}

/* The slide that wraps around jumps off-screen without animating. */
.ai-carousel__slide.is-jumping {
  transition: none;
}

/* Side columns line up with the product photo: the left one ends at its
   bottom, the right one's palette + typography card match its 230px. */
.ai-carousel__left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  height: 376px;
}

/* Side panels tuck in behind the screenshot (toward the center, 90%) on
   inactive slides and slide out to their place once the slide is active.
   On leaving they tuck back in without the delay. Compact turns the columns
   into display: contents, which ignores transforms. */
.ai-carousel__left,
.ai-carousel__right {
  transition: transform 0.45s cubic-bezier(0.4, 0, 1, 1);
}

.ai-carousel__left {
  transform: translateX(64px) scale(0.9);
  transform-origin: right center;
}

.ai-carousel__right {
  transform: translateX(-64px) scale(0.9);
  transform-origin: left center;
}

.ai-carousel__slide.is-active :is(.ai-carousel__left, .ai-carousel__right) {
  transform: none;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}

.ai-carousel__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 146px;
}

.ai-carousel__right-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 230px;
}

/* Light "AI action" chips on both sides of the screenshot. */
.ai-carousel__chip {
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 12px;
  border-radius: 12px;
  background: var(--js-color-bright-snow);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--js-color-carbon-black);
  text-wrap: balance;
}

.ai-carousel__chip-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-button-main-text);
  font-size: 13px;
}

.ai-carousel__product {
  display: flex;
  align-items: flex-end;
  flex: none;
  height: 230px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--js-color-green-rgb), 0.5);
  background: var(--js-color-carbon-black) center / cover no-repeat;
}

.ai-carousel__product span {
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--color-background-op8);
  color: var(--color-main);
  font-family: var(--font-secondary);
  font-size: 12px;
  line-height: 1.35;
}

/* Above both side columns so its shadow falls evenly on the left and
   right panels (the compact overlays sit above it with z-index 2-3). */
.ai-carousel__browser {
  position: relative;
  z-index: 1;
  width: 527px;
  max-height: 490px;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--color-main-op1);
  background: var(--js-color-carbon-adapt);
  box-shadow: 0 34px 94px rgba(0, 0, 0, 0.6);
}

.ai-carousel__browser-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 25px;
  padding: 0 14px;
  background: var(--color-main-op05);
}

.ai-carousel__bar-dots {
  flex: none;
  display: flex;
  gap: 5px;
  width: 34px;
}

.ai-carousel__bar-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-main-op3);
}

/* Store address pill, same style as the V1 mockup (.ai-hero__url). */
.ai-carousel__url {
  flex: 1;
  min-width: 0;
  max-width: fit-content;
  margin: 0 auto;
  padding: 0 16px;
  border-radius: 16px;
  border-bottom: 1px solid var(--color-main-op2);
  background-color: var(--color-background-op9);
  text-align: center;
  font-family: var(--font-secondary);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--color-main-op6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-carousel__browser img {
  display: block;
  width: 100%;
  height: auto;
}

.ai-carousel__palette {
  flex: none;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background: var(--js-color-bright-snow);
  border: 2px solid rgba(var(--js-color-green-rgb), 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.ai-carousel__palette span {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 6px;
}

/* Typography card: font pairing specimen of each generated store. The
   families are set inline per slide and loaded (subset) by the page. The
   specimen rows (.ai-typo__*) are shared with the V1 mockup card. */
.ai-carousel__typo {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--color-background-op9);
  border: 1px solid var(--color-main-op2);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

.ai-typo__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 2px;
  font-family: var(--font-secondary);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-main-op7);
}

.ai-typo__head span {
  color: var(--js-color-green-dark);
}

.ai-typo__pair {
  display: flex;
  justify-content: center;
}

.ai-typo__pair span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-main-op2);
  font-family: var(--font-main);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-main-op7);
}

.ai-typo__title {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--color-main);
}

.ai-typo__body {
  font-size: 10.5px;
  line-height: 1.45;
  text-align: center;
  text-wrap: pretty;
  color: var(--color-main-op7);
}

.ai-carousel__arrow {
  position: absolute;
  z-index: 6;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--color-main-op3);
  background: var(--color-background-op5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--color-main);
  font-size: 17px;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ai-carousel__arrow:is(:hover, :focus-visible) {
  background: var(--color-main-op1);
  border-color: var(--color-main-op4);
}

/* Arrows hug the active slide: half its scaled width + arrow + 28px gap. */
.ai-carousel__arrow--prev {
  left: max(12px, calc(50% - var(--ai-slide-w) * var(--ai-scale) / 2 - 76px));
}

.ai-carousel__arrow--next {
  right: max(12px, calc(50% - var(--ai-slide-w) * var(--ai-scale) / 2 - 76px));
}

.ai-carousel__dots {
  display: flex;
  gap: 9px;
}

.ai-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: var(--color-main-op3);
  cursor: pointer;
  transition: all 0.4s ease;
}

.ai-carousel__dot[aria-current="true"] {
  width: 30px;
  background: var(--color-accent);
}

/* Compact (< 760px stage, set by the script): screenshot only, with the
   palette and the product photo floating over its corners. */
.ai-carousel.is-compact .ai-carousel__slide {
  display: block;
  height: 490px;
}

.ai-carousel.is-compact :is(.ai-carousel__left, .ai-carousel__right, .ai-carousel__right-top) {
  display: contents;
}

.ai-carousel.is-compact :is(.ai-carousel__chip, .ai-typo__head) {
  display: none;
}

.ai-carousel.is-compact .ai-carousel__typo {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: -30px;
  width: 200px;
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--color-background-op9);
}

.ai-carousel.is-compact .ai-carousel__product {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: -30px;
  width: 170px;
  height: 170px;
  margin-top: 0;
  padding: 8px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
  zoom: 1.2;
}

/* Compact counterpart of the side-panel motion: each overlay grows from
   90% around its own center once the slide is active. */
.ai-carousel.is-compact :is(.ai-carousel__product, .ai-carousel__palette, .ai-carousel__typo) {
  transform: scale(0.9);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 1, 1);
}

.ai-carousel.is-compact .ai-carousel__slide.is-active :is(.ai-carousel__product, .ai-carousel__palette, .ai-carousel__typo) {
  transform: none;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}

.ai-carousel.is-compact .ai-carousel__product span {
  font-size: 11px;
}

.ai-carousel.is-compact .ai-carousel__palette {
  position: absolute;
  z-index: 2;
  top: -22px;
  right: 16px;
  width: 150px;
  gap: 3px;
  padding: 5px;
  border-radius: 10px;
  zoom: 1.4;
}

.ai-carousel.is-compact .ai-carousel__palette span {
  height: auto;
  aspect-ratio: 1;
  border-radius: 4px;
}

.ai-carousel.is-compact .ai-carousel__arrow {
  width: 36px;
  height: 36px;
  font-size: 14px;
}

.ai-carousel.is-compact .ai-carousel__arrow--prev {
  left: 6px;
}

.ai-carousel.is-compact .ai-carousel__arrow--next {
  right: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .ai-carousel__slide,
  .ai-carousel__dot {
    transition: none;
  }

  .ai-carousel .ai-carousel__slide :is(.ai-carousel__left, .ai-carousel__right),
  .ai-carousel.is-compact .ai-carousel__slide :is(.ai-carousel__product, .ai-carousel__palette, .ai-carousel__typo) {
    transform: none;
    transition: none;
  }
}