/* src/styles/new-site-clipo-foundation.css */
/*
 * Clipo foundation carried into the independent site workspace.
 * This file contains design tokens and neutral utilities only. It does not
 * import Clipo page markup, layout rules, Rive scenes, or page-specific copy.
 */

@font-face {
  font-family: "PhonkSansHeavy";
  src:
    url("/uploads/fonts/Clipo/webFonts/PhonkSansHeavy/font.woff2") format("woff2"),
    url("/uploads/fonts/Clipo/webFonts/PhonkSansHeavy/font.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ronzino";
  src: url("/uploads/fonts/Ronzino-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ronzino";
  src: url("/uploads/fonts/Ronzino-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ronzino";
  src: url("/uploads/fonts/Ronzino-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Source palette from the Clipo landing design system. */
  --clipo-ink: hsla(0, 0%, 7.45%, 1);
  --clipo-ink-50: hsla(0, 0%, 7.45%, 0.5);
  --clipo-ink-20: hsla(0, 0%, 7.45%, 0.2);
  --clipo-muted: hsla(0, 0%, 52.16%, 1);
  --clipo-muted-20: hsla(0, 0%, 52.16%, 0.2);
  --clipo-paper: hsla(60, 5.88%, 96.67%, 1);
  --clipo-paper-50: hsla(60, 5.88%, 96.67%, 0.5);
  --clipo-blue: #2336f1;
  --clipo-blue-20: rgba(35, 54, 241, 0.2);
  --clipo-pink: #f7b7d4;
  --clipo-yellow: #fad84c;
  --clipo-line: #cacac9;
  --clipo-canvas: #e0e0df;

  /* Neutral aliases make the independent site easier to extend. */
  --ink: var(--clipo-ink);
  --muted: var(--clipo-muted);
  --paper: var(--clipo-paper);
  --brand-blue: var(--clipo-blue);
  --accent-pink: var(--clipo-pink);
  --accent-yellow: var(--clipo-yellow);
  --line: var(--clipo-line);
  --canvas: var(--clipo-canvas);

  --font-clipo-font-display: "Ronzino", Arial, Helvetica, sans-serif;
  --font-clipo-font-poster: "PhonkSansHeavy", Impact, "Arial Black", sans-serif;
  --font-clipo-font-body: Inter, system-ui, sans-serif;
  --font-display: var(--font-clipo-font-display);
  --font-poster: var(--font-clipo-font-poster);
  --font-body: var(--font-clipo-font-body);

  --clipo-text-caption: clamp(1.32rem, calc(0vw + 1.32rem), 1.32rem);
  --clipo-text-body: clamp(2rem, calc(0vw + 2rem), 2rem);
  --clipo-text-copy: clamp(3.04rem, calc(0vw + 3.04rem), 3.04rem);
  --clipo-text-headline: clamp(4.62rem, calc(0vw + 4.62rem), 4.62rem);
  --clipo-text-poster: clamp(7.02rem, calc(0vw + 7.02rem), 7.02rem);

  --clipo-space-2xs: clamp(0.47rem, calc(0vw + 0.47rem), 0.47rem);
  --clipo-space-xs: clamp(0.71rem, calc(0vw + 0.71rem), 0.71rem);
  --clipo-space-s: clamp(1.07rem, calc(0vw + 1.07rem), 1.07rem);
  --clipo-space-m: clamp(1.6rem, calc(0vw + 1.6rem), 1.6rem);
  --clipo-space-l: clamp(2.4rem, calc(0vw + 2.4rem), 2.4rem);
  --clipo-space-xl: clamp(3.6rem, calc(0vw + 3.6rem), 3.6rem);
  --clipo-space-2xl: clamp(5.4rem, calc(0vw + 5.4rem), 5.4rem);
  --clipo-space-3xl: clamp(8.1rem, calc(0vw + 8.1rem), 8.1rem);
  --clipo-space-4xl: clamp(12.15rem, calc(0vw + 12.15rem), 12.15rem);
  --clipo-space-5xl: clamp(18.23rem, calc(0vw + 18.23rem), 18.23rem);
  --clipo-space-6xl: clamp(27.34rem, calc(0vw + 27.34rem), 27.34rem);
}

html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Small, reusable hooks for new pages. */
.text-display {
  font-family: var(--font-display);
}

.text-poster {
  font-family: var(--font-poster);
  text-transform: uppercase;
}

.text-caption {
  font-size: var(--clipo-text-caption);
}

.text-body {
  font-size: var(--clipo-text-body);
}

.text-copy {
  font-size: var(--clipo-text-copy);
}

.text-headline {
  font-size: var(--clipo-text-headline);
}

.text-muted {
  color: var(--muted);
}

.bg-paper {
  background: var(--paper);
}

.bg-ink {
  background: var(--ink);
}

.bg-blue {
  background: var(--brand-blue);
}


/* src/styles/new-site-layout.css */
/* Fixed logical layouts. The responsive stage owns all viewport scaling. */

.new-site-layout {
  width: 1440px;
  min-height: 960px;
  overflow: hidden;
  background: var(--paper, #f7f7f6);
  color: var(--ink, #131313);
}

.new-site-hero {
  width: 1440px;
  min-height: 800px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 840px 468px;
  gap: 36px;
  align-items: end;
  padding: 48px;
}

.new-site-hero__copy {
  width: 840px;
  padding-bottom: 24px;
}

.new-site-kicker {
  margin: 0 0 16px;
  color: var(--muted, #858585);
  font-size: 21px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.new-site-hero__title {
  width: 840px;
  margin: 0;
  font-family: var(--font-clipo-font-poster);
  font-size: 156px;
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.new-site-hero__lede {
  width: 448px;
  margin: 36px 0 0;
  font-family: var(--font-clipo-font-display);
  font-size: 32px;
  line-height: 1.05;
}

.new-site-button {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  box-sizing: border-box;
  margin-top: 36px;
  padding: 0 26px;
  border: 1px solid var(--ink, #131313);
  border-radius: 999px;
  background: var(--ink, #131313);
  color: var(--paper, #f7f7f6);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.new-site-button:hover,
.new-site-button:focus-visible {
  background: var(--brand-blue, #2951e6);
  border-color: var(--brand-blue, #2951e6);
  color: var(--paper, #f7f7f6);
  transform: translateY(-2px);
}

.new-site-palette {
  width: 468px;
  min-height: 520px;
  display: grid;
  grid-template-columns: 228px 228px;
  gap: 12px;
  align-self: stretch;
}

.new-site-swatch {
  width: 228px;
  min-height: 254px;
  display: flex;
  align-items: end;
  box-sizing: border-box;
  padding: 17px;
  border: 1px solid var(--ink-20, hsla(0, 0%, 7.45%, 0.2));
  color: var(--ink, #131313);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.new-site-swatch--blue {
  background: var(--brand-blue, #2951e6);
  color: var(--paper, #f7f7f6);
}

.new-site-swatch--ink {
  background: var(--ink, #131313);
  color: var(--paper, #f7f7f6);
}

.new-site-swatch--pink {
  background: var(--accent-pink, #f7b7d4);
}

.new-site-swatch--yellow {
  background: var(--accent-yellow, #fad84c);
}

.new-site-details {
  width: 1440px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  box-sizing: border-box;
  padding: 0 48px 48px;
}

.new-site-detail {
  min-height: 160px;
  padding: 26px;
  border-top: 1px solid var(--line, #cacac9);
}

.new-site-detail__label {
  margin: 0 0 11px;
  color: var(--muted, #858585);
  font-size: 13px;
  text-transform: uppercase;
}

.new-site-detail__value {
  margin: 0;
  font-family: var(--font-clipo-font-display);
  font-size: 38px;
  line-height: 1;
}

.new-site-detail__value.text-poster {
  font-family: var(--font-clipo-font-poster);
}

:root[data-instatic-layout-id="tablet"] .new-site-layout {
  width: 768px;
  min-height: 900px;
}

:root[data-instatic-layout-id="tablet"] .new-site-hero {
  width: 768px;
  min-height: 700px;
  grid-template-columns: 440px 260px;
  gap: 20px;
  padding: 24px;
}

:root[data-instatic-layout-id="tablet"] .new-site-hero__copy {
  width: 440px;
  padding-bottom: 12px;
}

:root[data-instatic-layout-id="tablet"] .new-site-kicker {
  margin-bottom: 12px;
  font-size: 15px;
}

:root[data-instatic-layout-id="tablet"] .new-site-hero__title {
  width: 440px;
  font-size: 92px;
}

:root[data-instatic-layout-id="tablet"] .new-site-hero__lede {
  width: 360px;
  margin-top: 24px;
  font-size: 24px;
}

:root[data-instatic-layout-id="tablet"] .new-site-button {
  min-height: 48px;
  margin-top: 24px;
  padding: 0 20px;
  font-size: 14px;
}

:root[data-instatic-layout-id="tablet"] .new-site-palette {
  width: 260px;
  min-height: 420px;
  grid-template-columns: 126px 126px;
  gap: 8px;
}

:root[data-instatic-layout-id="tablet"] .new-site-swatch {
  width: 126px;
  min-height: 206px;
  padding: 10px;
  font-size: 11px;
}

:root[data-instatic-layout-id="tablet"] .new-site-details {
  width: 768px;
  gap: 10px;
  padding: 0 24px 24px;
}

:root[data-instatic-layout-id="tablet"] .new-site-detail {
  min-height: 150px;
  padding: 16px;
}

:root[data-instatic-layout-id="tablet"] .new-site-detail__value {
  font-size: 28px;
}

:root[data-instatic-layout-id="mobile"] .new-site-layout {
  width: 375px;
  min-height: 920px;
}

:root[data-instatic-layout-id="mobile"] .new-site-hero {
  width: 375px;
  min-height: 720px;
  display: block;
  padding: 16px;
}

:root[data-instatic-layout-id="mobile"] .new-site-hero__copy {
  width: 343px;
  padding-bottom: 28px;
}

:root[data-instatic-layout-id="mobile"] .new-site-kicker {
  margin-bottom: 10px;
  font-size: 12px;
}

:root[data-instatic-layout-id="mobile"] .new-site-hero__title {
  width: 343px;
  font-size: 64px;
}

:root[data-instatic-layout-id="mobile"] .new-site-hero__lede {
  width: 320px;
  margin-top: 20px;
  font-size: 22px;
}

:root[data-instatic-layout-id="mobile"] .new-site-button {
  min-height: 44px;
  margin-top: 20px;
  padding: 0 18px;
  font-size: 13px;
}

:root[data-instatic-layout-id="mobile"] .new-site-palette {
  width: 343px;
  min-height: 300px;
  grid-template-columns: 167px 167px;
  gap: 9px;
}

:root[data-instatic-layout-id="mobile"] .new-site-swatch {
  width: 167px;
  min-height: 145px;
  padding: 10px;
  font-size: 10px;
}

:root[data-instatic-layout-id="mobile"] .new-site-details {
  width: 375px;
  display: block;
  padding: 0 16px 16px;
}

:root[data-instatic-layout-id="mobile"] .new-site-detail {
  min-height: 112px;
  padding: 14px 0;
}

:root[data-instatic-layout-id="mobile"] .new-site-detail__value {
  font-size: 26px;
}


/* src/styles/figma-clipo-hero-height.css */
@media (max-height: 699px) {
  .clipo-hero {
    height: 1100px !important;
  }
}

@media (min-height: 700px) {
  .clipo-hero {
    height: var(--instatic-logical-viewport-height, 100vh) !important;
  }
}

html[style*="height: auto"] body[data-breakpoint-id] .clipo-hero {
  height: 1100px !important;
}


/* src/styles/figma-clipo-social-icons.css */
.clipo-hero__social img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  object-position: center;
}


/* src/styles/figma-clipo-workflow-video-three.css */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--clipo-blue, #2336f1) transparent;
}

html::-webkit-scrollbar {
  width: 4px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: var(--clipo-blue, #2336f1);
  border: 0;
}

html::-webkit-scrollbar-button {
  display: none;
}

.clipo-workflow {
  position: relative !important;
  width: 1728px !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  background: var(--clipo-paper, #f7f7f6);
  color: var(--clipo-ink, #131313);
}

.clipo-workflow-v2__intro {
  position: relative;
  width: 1728px;
  height: 960px;
}

.clipo-workflow-v2__headline {
  position: absolute;
  z-index: 1;
  margin: 0;
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 157px;
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -6.28px;
  text-align: right;
  text-transform: uppercase;
}

/*
 * Match the Hero's pre-paint preparation handshake. The source headings are
 * initially outside the mask in the HTML, so keep them hidden only until the
 * row animation has wrapped and translated every beat below the mask edge.
 * Visibility is released before the next paint; the actual reveal uses only
 * the mask + transform, never opacity.
 */
html.is-clipo-workflow-heading-pending .clipo-workflow-v2__headline {
  visibility: hidden !important;
}

.clipo-workflow-v2__headline--collecting {
  left: 16px !important;
  right: 16px !important;
  top: 200px;
  width: auto !important;
  box-sizing: border-box;
  padding-right: 0;
}

.clipo-workflow-v2__headline--creating {
  left: 603px !important;
  right: 16px !important;
  top: 464px;
  width: auto !important;
  box-sizing: border-box;
  padding-right: 0;
}

.clipo-workflow-v2__headline--its {
  left: 16px;
  top: 464px;
  width: 697px;
  color: var(--clipo-line, #cacac9);
  text-align: left;
}

.clipo-workflow-v2__heading-mask {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 720px;
  overflow: hidden;
  pointer-events: none;
}

.clipo-workflow-v2__heading-row {
  display: block;
  width: 100%;
  will-change: transform;
}

.clipo-workflow-v2__heading-word {
  display: inline-block;
  will-change: transform;
}

.clipo-workflow-v2__heading-mask .clipo-workflow-v2__headline {
  z-index: auto;
}

.clipo-workflow-v2__intro-copy.is-line-masked {
  text-indent: 0;
}

.clipo-workflow-v2__measure-word {
  display: inline;
}

.clipo-workflow-v2__reveal-line-mask,
.clipo-workflow-v2__reveal-line {
  display: block;
  width: 100%;
}

.clipo-workflow-v2__reveal-line {
  box-sizing: border-box;
  white-space: nowrap;
  will-change: clip-path;
}

@media not all {
  .clipo-workflow-v2__heading-row,
  .clipo-workflow-v2__heading-word,
  .clipo-workflow-v2__heading-mask .clipo-workflow-v2__headline {
    transform: none !important;
  }

  .clipo-workflow-v2__reveal-line {
    clip-path: none !important;
  }
}

.clipo-workflow-v2__intro-copy {
  position: absolute;
  left: 159px;
  top: 756px;
  width: 554px;
  margin: 0;
  color: var(--clipo-muted, #858585);
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  font-size: 31px;
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.93px;
  text-indent: 143px;
}

.clipo-workflow-v2__track {
  position: relative;
  width: 1728px;
  /* Two transition phases plus one viewport for the sticky scene itself. A
     negative margin made WebKit resolve the containing block shorter than the
     authored timeline, releasing the section while card three was entering. */
  height: calc(
    var(--instatic-logical-viewport-height, 100vh) +
    var(--instatic-logical-viewport-height, 100vh) +
    var(--instatic-logical-viewport-height, 100vh)
  );
  margin-bottom: 0;
}

.clipo-workflow-v2__scene {
  --workflow-image-width: 999px;
  --workflow-image-height: max(0px, calc(100% - 206px));
  position: sticky;
  z-index: 1;
  top: 0;
  width: 1728px;
  height: var(--instatic-logical-viewport-height, 100vh);
  overflow: hidden;
  isolation: isolate;
}

.clipo-workflow-v2__image {
  position: absolute;
  right: 16px;
  top: 16px;
  width: var(--workflow-image-width);
  height: var(--workflow-image-height);
  box-sizing: border-box;
  border: 1px solid var(--clipo-blue, #2336f1);
  background: var(--clipo-canvas, #e0e0df);
  transform-origin: top left;
  will-change: transform;
}

.clipo-workflow-v2__image-handle {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1px solid var(--clipo-paper, #f7f7f6);
  background: var(--clipo-blue, #2336f1);
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.clipo-workflow-v2__image-handle--top-left {
  left: -8px;
  top: -8px;
}

.clipo-workflow-v2__image-handle--top-right {
  right: -8px;
  top: -8px;
}

.clipo-workflow-v2__image-handle--bottom-right {
  right: -8px;
  bottom: -8px;
}

.clipo-workflow-v2__image-handle--bottom-left {
  left: -8px;
  bottom: -8px;
}

.clipo-workflow-v2__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.clipo-workflow-v2__rive-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}

.clipo-workflow-v2__image--one.is-clipo-workflow-rive-ready > .clipo-workflow-v2__rive-canvas {
  visibility: visible;
}

.clipo-workflow-v2__image--one.is-clipo-workflow-rive-ready > img {
  visibility: hidden;
}

.clipo-workflow-v2__image--two.is-clipo-workflow-rive-ready > .clipo-workflow-v2__rive-canvas {
  visibility: visible;
}

.clipo-workflow-v2__image--two.is-clipo-workflow-rive-ready > img {
  visibility: hidden;
}

.clipo-workflow-v2__image--one { z-index: 3; }
.clipo-workflow-v2__image--two { z-index: 2; transform: translate(var(--workflow-image-width), var(--workflow-image-height)) scale(0); }
.clipo-workflow-v2__image--three { z-index: 1; transform: translate(var(--workflow-image-width), var(--workflow-image-height)) scale(0); }

.clipo-workflow-v2__counter {
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: 20px;
  width: 697px;
  height: 110px;
  margin: 0;
  color: var(--clipo-ink, #131313);
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  font-weight: 500;
  perspective: 800px;
}

.clipo-workflow-v2__counter-current {
  width: auto;
  height: 84px;
  font-size: 91px;
  line-height: 0.92;
  letter-spacing: -3.64px;
}

.clipo-workflow-v2__counter-shell {
  display: inline-flex;
  align-items: flex-start;
}

.clipo-workflow-v2__counter-static {
  display: block;
  height: 84px;
}

.clipo-workflow-v2__counter-digit {
  --workflow-flip-depth: 84px;
  position: relative;
  display: block;
  width: 52px;
  height: 84px;
  overflow: hidden;
  perspective: 800px;
}

.clipo-workflow-v2__counter-total {
  margin-left: 6px;
  color: var(--clipo-muted, #858585);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.36px;
}

.clipo-workflow-v2__caption {
  position: absolute;
  z-index: 5;
  left: 729px;
  bottom: 16px;
  display: grid;
  width: 840px;
  height: 150px;
  grid-template-columns: 127px 412px 269px;
  column-gap: 16px;
  align-items: start;
  color: var(--clipo-ink, #131313);
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  perspective: 1000px;
}

.clipo-workflow-v2__caption p {
  margin: 0;
}

.clipo-workflow-v2__caption-index,
.clipo-workflow-v2__caption-copy {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.36px;
}

.clipo-workflow-v2__caption-index {
  --workflow-flip-depth: 22px;
  height: 22px;
}

.clipo-workflow-v2__caption-copy {
  --workflow-flip-depth: 44px;
  height: 44px;
}

.clipo-workflow-v2__caption-title {
  --workflow-flip-depth: 148px;
  height: 148px;
  font-size: 157px;
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -6.28px;
}

.clipo-workflow-v2__caption-index,
.clipo-workflow-v2__caption-title,
.clipo-workflow-v2__caption-copy,
.clipo-workflow-v2__counter-digit {
  display: block;
  position: relative;
  overflow: hidden;
  perspective: 1000px;
}

.clipo-workflow-flip__rotor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--workflow-flip-depth) / -2)) rotateX(0deg);
  will-change: transform;
}

.clipo-workflow-flip__face {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.clipo-workflow-flip__face--front {
  transform: rotateX(0deg) translateZ(calc(var(--workflow-flip-depth) / 2));
}

.clipo-workflow-flip__face--top {
  transform: rotateX(90deg) translateZ(calc(var(--workflow-flip-depth) / 2));
}

.clipo-workflow-flip__face--back {
  transform: rotateX(180deg) translateZ(calc(var(--workflow-flip-depth) / 2));
}

.clipo-workflow-flip__face--bottom {
  transform: rotateX(270deg) translateZ(calc(var(--workflow-flip-depth) / 2));
}

.clipo-workflow-flip__face--left,
.clipo-workflow-flip__face--right {
  left: auto;
  width: var(--workflow-flip-depth);
}

.clipo-workflow-flip__face--left {
  right: 100%;
  transform-origin: right center;
  transform: rotateY(-90deg);
}

.clipo-workflow-flip__face--right {
  left: 100%;
  right: auto;
  transform-origin: left center;
  transform: rotateY(90deg);
}

/* src/styles/figma-clipo-three-direct-section.css */
.clipo-three-direct__status {
  display: none;
}

.clipo-three-direct[data-three-state="ready"] .clipo-three-direct__status {
  display: none;
}

.clipo-three-direct[data-three-state="error"] .clipo-three-direct__status {
  max-width: 320px;
  text-align: center;
}

.clipo-three-direct__debug {
  display: none;
}


/* src/styles/figma-clipo-hero-typer.css */
[data-typer] {
  --typer-fg: var(--clipo-ink, #131313);
  --typer-bg: var(--clipo-paper, #f7f7f6);
  --typer-accent: var(--clipo-blue, #2951e6);
  --typer-accent-ink: var(--clipo-paper, #f7f7f6);
  --typer-radius: 0.05em;
  will-change: transform, opacity, filter;
}

[data-typer].hero-text,
[data-typer].hero-text-heading,
[data-typer].clipo-hero__title,
[data-typer].clipo-hero__step-number,
[data-typer].clipo-hero__vertical-arrow {
  white-space: nowrap !important;
}

.clipo-hero [data-typer] {
  --typer-accent: var(--clipo-yellow, #fad84c);
}

[data-typer][data-typer-type="initial"] {
  opacity: 0;
}

[data-clipo-elastic-reveal="initial"] {
  opacity: 0;
  will-change: transform, opacity, filter;
}

[data-typer] .word {
  white-space: pre;
}

[data-typer] .word.wordNoWrap {
  white-space: nowrap;
}

.clipo-copy-fade {
  opacity: 0;
  transition: opacity 900ms ease;
}

.clipo-copy-fade.is-visible {
  opacity: 1;
}

[data-text-reveal] {
  opacity: 1;
}

[data-text-reveal] .textRevealWord {
  display: inline;
  opacity: 1;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--text-reveal-word-index, 0) * 55ms);
  will-change: opacity;
}

[data-text-reveal][data-text-reveal-type="initial"] .textRevealWord {
  opacity: 0;
}

[data-hero-chrome] {
  opacity: 1;
}

[data-hero-chrome][data-hero-chrome-type="initial"] {
  opacity: 0;
  pointer-events: none;
}

[data-hero-chrome][data-hero-chrome-type="in"] {
  opacity: 1;
  transition: opacity 70ms steps(2, end);
  transition-delay: calc(var(--hero-chrome-index, 0) * 45ms);
}

[data-typer] .word .char {
  box-sizing: content-box;
  display: inline-block;
  color: var(--typer-fg);
  background: transparent;
  vertical-align: baseline;
  transition: none;
}

[data-typer] .word .char.charInit {
  color: transparent;
}

[data-typer] .word .char.charFill,
[data-typer] .word .char.charInverse {
  color: var(--typer-bg);
  background: var(--typer-fg);
}

[data-typer] .word .char.charFill {
  border-radius: var(--typer-radius);
}

[data-typer] .word .char.charFill:has(+ .charFill) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

[data-typer] .word .char.charFill + .charFill {
  border-radius: 0;
}

[data-typer] .word .char.charFill + .charFill:last-child,
[data-typer] .word .char.charFill + .charFill:has(+ :not(.charFill)) {
  border-radius: 0 var(--typer-radius) var(--typer-radius) 0;
}

[data-typer] .word .char.charAccent {
  color: var(--typer-accent);
  background: transparent;
}

[data-typer] .word .char.charAccentInverse {
  color: var(--typer-accent-ink);
  background: var(--typer-accent);
  border-radius: var(--typer-radius);
}

[data-typer] .word .char.charAccentInverse:has(+ .charAccentInverse) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

[data-typer] .word .char.charAccentInverse + .charAccentInverse {
  border-radius: 0;
}

[data-typer] .word .char.charAccentInverse + .charAccentInverse:last-child,
[data-typer]
  .word
  .char.charAccentInverse
  + .charAccentInverse:has(+ :not(.charAccentInverse)) {
  border-radius: 0 var(--typer-radius) var(--typer-radius) 0;
}

[data-typer] .word .char.charAccentFill {
  color: var(--typer-accent);
  background: var(--typer-accent);
}

[data-typer] .word .char.charBorder {
  position: relative;
  color: var(--typer-fg);
}

[data-typer] .word .char.charBorder::after {
  content: "";
  position: absolute;
  top: var(--typer-box-top, -0.1em);
  right: var(--typer-box-right, -0.025em);
  bottom: var(--typer-box-bottom, -0.055em);
  left: var(--typer-box-left, -0.025em);
  height: var(--typer-box-height, auto);
  box-sizing: border-box;
  border: var(--typer-border-width, 1px) solid var(--typer-border-color, var(--typer-accent));
  border-radius: var(--typer-radius);
  transform: translateY(var(--typer-box-translate-y, 0));
  pointer-events: none;
}

[data-typer] .word .char.charBorder:has(+ .charBorder)::after {
  border-right-color: transparent;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

[data-typer] .word .char.charBorder + .charBorder::after {
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 0;
}

[data-typer] .word .char.charBorder + .charBorder:last-child::after,
[data-typer] .word .char.charBorder + .charBorder:has(+ :not(.charBorder))::after {
  border-left-color: transparent;
  border-right-color: var(--typer-border-color, var(--typer-accent));
  border-radius: 0 var(--typer-radius) var(--typer-radius) 0;
}

/* OBJECT uses the same two-row masked slide as the loading letters. */
[data-clipo-object-flip] {
  pointer-events: auto !important;
  cursor: pointer;
}

[data-clipo-object-flip][data-typer] .word .char[data-clipo-object-flip-window] {
  --clipo-object-flip-window-height: 1.04em;
  --clipo-object-flip-gap: 0.2em;
  position: relative;
  height: var(--clipo-object-flip-window-height);
  padding-right: 0.06em;
  padding-left: 0.06em;
  margin-right: -0.06em;
  margin-left: -0.06em;
  margin-top: -0.1em;
  margin-bottom: -0.1em;
  overflow: hidden !important;
  clip-path: inset(0);
  contain: paint;
  color: inherit;
  background: transparent;
  vertical-align: baseline;
  isolation: isolate;
  pointer-events: auto !important;
}

[data-clipo-object-flip][data-typer]
  .word
  .char[data-clipo-object-flip-window].charInit {
  color: transparent;
}

[data-clipo-object-flip][data-typer] .clipo-object-flip__track {
  position: relative;
  display: block;
  width: 100%;
  height: calc(
    (var(--clipo-object-flip-window-height) * 2) + var(--clipo-object-flip-gap)
  );
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform;
  pointer-events: none;
}

[data-clipo-object-flip][data-typer] .clipo-object-flip__face {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--clipo-object-flip-window-height);
  line-height: 0.84;
  white-space: pre;
  pointer-events: none;
}

[data-clipo-object-flip][data-typer] .clipo-object-flip__face--text {
  position: relative;
  width: max-content;
  color: currentColor;
}

[data-clipo-object-flip][data-typer] .clipo-object-flip__face--asset {
  position: absolute;
  top: calc(var(--clipo-object-flip-window-height) + var(--clipo-object-flip-gap));
  left: 0;
  width: 100%;
  color: transparent;
}

[data-clipo-object-flip][data-typer] .clipo-object-flip__face--asset img {
  display: block;
  width: min(88%, 0.72em);
  height: min(88%, 0.72em);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Decorative SVG pool for every Phonk heading except the OBJECT social morph. */
[data-clipo-glyph-morph][data-typer] .word .char.charInverse {
  position: relative;
  isolation: isolate;
  color: transparent;
  background: transparent;
}

[data-clipo-glyph-morph][data-typer] .word .char.charInverse::before,
[data-clipo-glyph-morph][data-typer] .word .char.charInverse::after {
  content: "";
  position: absolute;
  top: var(--typer-box-top, -0.1em);
  right: var(--typer-box-right, -0.025em);
  bottom: var(--typer-box-bottom, -0.055em);
  left: var(--typer-box-left, -0.025em);
  box-sizing: border-box;
  pointer-events: none;
}

[data-clipo-glyph-morph][data-typer] .word .char.charInverse::before {
  z-index: -1;
  background: var(--typer-glyph-bg, var(--typer-accent));
  opacity: var(--typer-glyph-bg-opacity, 1);
}

[data-clipo-glyph-morph][data-typer] .word .char.charInverse::after {
  z-index: 1;
  background: var(--typer-glyph-svg) center / var(--typer-glyph-scale, 65%) auto no-repeat;
  opacity: var(--typer-glyph-opacity, 1);
}

@media not all {
  [data-typer][data-typer-type="initial"] {
    opacity: 1;
  }

  [data-typer] .word .char.charInit {
    color: var(--typer-fg);
  }

  [data-text-reveal][data-text-reveal-type="initial"] .textRevealWord {
    opacity: 1;
  }

  [data-hero-chrome][data-hero-chrome-type="initial"] {
    opacity: 1;
  }
}


/* src/styles/figma-clipo-stacked-panels.css */
.clipo-panel-stack {
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: 1728px;
  height: calc(
    var(--instatic-logical-viewport-height, 100vh) +
    var(--instatic-logical-viewport-height, 100vh) +
    var(--instatic-logical-viewport-height, 100vh)
  );
  background: #121212;
}

.clipo-panel-stack__panel {
  position: sticky;
  top: 0;
  width: 1728px;
  height: var(--instatic-logical-viewport-height, 100vh);
  min-height: var(--instatic-logical-viewport-height, 100vh);
  overflow: hidden;
  box-sizing: border-box;
}

.clipo-panel-stack__panel--canvas {
  z-index: 1;
  color: #f7f7f6;
  background: #121212;
}

.clipo-panel-stack__panel--collection {
  z-index: 2;
  color: #121212;
  background: #f7b7d4;
}

.clipo-panel-stack__label,
.clipo-panel-stack__heading,
.clipo-panel-stack__heading-line,
.clipo-panel-stack__copy {
  margin: 0;
}

.clipo-panel-stack__label,
.clipo-panel-stack__heading,
.clipo-panel-stack__copy {
  box-sizing: border-box;
  padding: 16px;
}

.clipo-panel-stack__label,
.clipo-panel-stack__heading {
  font-family: var(--font-clipo-font-poster, PhonkSansHeavy, Impact, sans-serif);
  font-size: 91px;
  font-weight: 400;
  line-height: 0.84;
  letter-spacing: -3.64px;
  text-transform: uppercase;
}

.clipo-panel-stack__label {
  position: absolute;
  top: 16px;
  left: 0;
  width: 856px;
  white-space: nowrap;
}

.clipo-panel-stack__heading {
  position: absolute;
  top: 16px;
  right: 0;
  width: 856px;
}

.clipo-panel-stack__heading-line {
  width: 100%;
}

.clipo-panel-stack__heading-line--left {
  text-align: left;
}

.clipo-panel-stack__heading-line--right {
  text-align: right;
}

.clipo-panel-stack__copy {
  position: absolute;
  top: 92px;
  left: 143px;
  width: 444px;
  color: #858585;
  font-family: var(--font-clipo-font-display, Ronzino, Arial, sans-serif);
  font-size: 31px;
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.93px;
  text-indent: 143px;
}

.clipo-panel-stack__panel--collection .clipo-panel-stack__copy {
  color: #6f5d66;
}

html[style*="height: auto"] body[data-breakpoint-id] .clipo-panel-stack__panel {
  position: relative;
}


@media not all {
  .clipo-panel-stack__panel {
    position: relative;
  }
}