:root {
  --onestich-morph-gold: #8b5613;
}

.onestich-home-hero-morph-wrap {
  overflow: visible;
}

.onestich-home-hero-morph {
  position: relative;
  width: min(980px, 94vw);
  aspect-ratio: 2.24 / 1;
  margin-inline: auto;
  display: block;
  overflow: visible;
  isolation: isolate;
  perspective: 900px;
}

.onestich-home-hero-morph::before,
.onestich-home-hero-morph::after {
  content: "";
  position: absolute;
  inset: 13% 7%;
  pointer-events: none;
  z-index: 0;
}

.onestich-home-hero-morph::before {
  background: radial-gradient(circle at 50% 50%, rgba(188, 143, 87, .24), transparent 64%);
  filter: blur(28px);
  transform: scale(.92);
  animation: onestichHomeMorphGlow 12s ease-in-out infinite;
}

.onestich-home-hero-morph::after {
  border: 1px solid rgba(92, 66, 38, .14);
  opacity: .28;
  clip-path: inset(0 18% 0 18%);
  animation: onestichHomeMorphFrame 12s ease-in-out infinite;
}

.onestich-home-hero-morph__liquid {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 68%;
  height: 48%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 50%, rgba(92, 66, 38, .18), transparent 48%),
    radial-gradient(circle at 62% 48%, rgba(217, 176, 140, .28), transparent 42%);
  filter: blur(22px);
  opacity: .12;
  transform: translate(-50%, -50%) scaleX(.76);
  animation: onestichHomeLiquidMorph 3s cubic-bezier(.65, 0, .22, 1) infinite;
}

.onestich-home-hero-morph__item {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 86%;
  max-width: 86%;
  max-height: 88%;
  object-fit: contain;
  opacity: 0;
  transform-origin: center center;
  transform: translate(-50%, -50%) translateY(16px) rotateX(10deg) rotateZ(-2deg) scaleX(.72) scaleY(1.18);
  filter: blur(22px) contrast(.82);
  mix-blend-mode: normal;
  animation: onestichHomeLogoMorph 12s cubic-bezier(.72, 0, .18, 1) infinite;
  will-change: opacity, transform, filter, clip-path;
}

.onestich-home-hero-morph__item--1 {
  animation-delay: 0s;
}

.onestich-home-hero-morph__item--2 {
  animation-delay: 3s;
}

.onestich-home-hero-morph__item--3 {
  animation-delay: 6s;
}

.onestich-home-hero-morph__item--4 {
  animation-delay: 9s;
}

.onestich-home-hero-morph__wordmark {
  width: 86% !important;
  max-width: 86% !important;
  height: 78%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(10px, 1.8vw, 20px);
  color: #080604;
  text-align: center;
}

.onestich-home-hero-morph__wordmark-main {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(56px, 7.4vw, 112px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: 0;
  white-space: nowrap;
}

.onestich-home-hero-morph__wordmark-sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--onestich-morph-gold);
  font-size: clamp(20px, 2.95vw, 46px);
  font-weight: 500;
  letter-spacing: clamp(9px, 1.65vw, 26px);
  line-height: 1;
  padding-left: clamp(9px, 1.65vw, 26px);
  white-space: nowrap;
}

.onestich-home-hero-morph__shine {
  position: absolute;
  z-index: 3;
  inset: 16% -32%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .72) 49%, transparent 68%);
  mix-blend-mode: soft-light;
  transform: translateX(-54%) skewX(-18deg);
  animation: onestichHomeMorphShine 3s cubic-bezier(.65, 0, .25, 1) infinite;
}

@keyframes onestichHomeLogoMorph {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(18px) rotateX(16deg) rotateZ(-2.5deg) scaleX(.62) scaleY(1.24);
    filter: blur(24px) contrast(.78) saturate(.82);
    clip-path: inset(0 46% 0 46% round 48%);
  }

  4% {
    opacity: .82;
    transform: translate(-50%, -50%) translateY(4px) rotateX(4deg) rotateZ(1deg) scaleX(1.16) scaleY(.86);
    filter: blur(9px) contrast(.96);
    clip-path: inset(0 13% 0 13% round 22%);
  }

  8%,
  19% {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) rotateX(0) rotateZ(0) scaleX(1) scaleY(1);
    filter: blur(0);
    clip-path: inset(0 0 0 0);
  }

  23% {
    opacity: .78;
    transform: translate(-50%, -50%) translateY(-8px) rotateX(-5deg) rotateZ(1.8deg) scaleX(1.2) scaleY(.82);
    filter: blur(10px) contrast(.9);
    clip-path: inset(0 10% 0 10% round 18%);
  }

  28%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-18px) rotateX(-16deg) rotateZ(3deg) scaleX(.56) scaleY(1.28);
    filter: blur(26px) contrast(.78) saturate(.75);
    clip-path: inset(0 50% 0 50% round 50%);
  }
}

@keyframes onestichHomeLiquidMorph {
  0% {
    opacity: .06;
    transform: translate(-62%, -50%) scaleX(.52) scaleY(1.22) rotate(-4deg);
  }

  27% {
    opacity: .24;
    transform: translate(-50%, -50%) scaleX(1.18) scaleY(.78) rotate(2deg);
  }

  54% {
    opacity: .08;
    transform: translate(-38%, -50%) scaleX(.56) scaleY(1.16) rotate(5deg);
  }

  100% {
    opacity: .06;
    transform: translate(-62%, -50%) scaleX(.52) scaleY(1.22) rotate(-4deg);
  }
}

@keyframes onestichHomeMorphShine {
  0% {
    opacity: 0;
    transform: translateX(-54%) skewX(-18deg);
  }

  24% {
    opacity: .55;
  }

  58%,
  100% {
    opacity: 0;
    transform: translateX(56%) skewX(-18deg);
  }
}

@keyframes onestichHomeMorphGlow {
  0%,
  100% {
    opacity: .55;
    transform: scale(.9);
  }

  50% {
    opacity: .95;
    transform: scale(1.04);
  }
}

@keyframes onestichHomeMorphFrame {
  0%,
  100% {
    opacity: .18;
    clip-path: inset(0 32% 0 32%);
  }

  50% {
    opacity: .34;
    clip-path: inset(0 12% 0 12%);
  }
}

@media (max-width: 760px) {
  .onestich-home-hero-morph {
    width: min(88vw, 390px);
    max-width: calc(100vw - 42px);
    aspect-ratio: 2.28 / 1;
  }

  .onestich-home-hero-morph__item {
    width: 76%;
    max-width: 76%;
    max-height: 82%;
  }

  .onestich-home-hero-morph__wordmark-main {
    font-size: clamp(28px, 8.5vw, 42px);
  }

  .onestich-home-hero-morph__wordmark-sub {
    font-size: clamp(12px, 3.3vw, 17px);
    letter-spacing: clamp(4px, 1.35vw, 7px);
    padding-left: clamp(4px, 1.35vw, 7px);
  }
}

/* 20260630 v12: make the homepage morph logo the clear first-view eyecatcher. */
.onestich-home-hero-morph-wrap {
  max-width: min(1320px, 100%) !important;
}

.onestich-home-hero-morph {
  width: min(1280px, 98vw) !important;
  max-width: calc(100vw - 24px) !important;
  aspect-ratio: 2.02 / 1 !important;
}

.onestich-home-hero-morph__item,
.onestich-home-hero-morph__wordmark {
  width: 98% !important;
  max-width: 98% !important;
  max-height: 98% !important;
}

.onestich-home-hero-morph__wordmark {
  width: 68% !important;
  max-width: 68% !important;
}

.onestich-home-hero-morph__wordmark-main {
  font-size: clamp(54px, 6.8vw, 98px) !important;
}

.onestich-home-hero-morph__wordmark-sub {
  font-size: clamp(20px, 2.65vw, 38px) !important;
}

@media (max-width: 760px) {
  .onestich-home-hero-morph-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  .onestich-home-hero-morph {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    aspect-ratio: 1.52 / 1 !important;
  }

  .onestich-home-hero-morph__item,
  .onestich-home-hero-morph__wordmark {
    width: 99% !important;
    max-width: 99% !important;
    max-height: 99% !important;
  }

  .onestich-home-hero-morph__wordmark {
    width: 66% !important;
    max-width: 66% !important;
  }

  .onestich-home-hero-morph__wordmark-main {
    font-size: clamp(30px, 8.7vw, 42px) !important;
  }

  .onestich-home-hero-morph__wordmark-sub {
    font-size: clamp(10px, 3vw, 14px) !important;
    letter-spacing: clamp(3px, 1vw, 5px) !important;
    padding-left: clamp(3px, 1vw, 5px) !important;
  }
}

@media (max-width: 390px) {
  .onestich-home-hero-morph {
    width: calc(100vw - 6px) !important;
    max-width: calc(100vw - 6px) !important;
  }
}

/* 20260630 v15: larger homepage morph mark with a bright cloud behind the logos. */
.onestich-home-hero-morph {
  width: min(1380px, 99vw) !important;
  max-width: calc(100vw - 10px) !important;
  aspect-ratio: 1.86 / 1 !important;
}

.onestich-home-hero-morph::before {
  inset: 3% 1% !important;
  border-radius: 48% !important;
  background:
    radial-gradient(ellipse at 50% 51%,
      rgba(255, 255, 255, .98) 0%,
      rgba(255, 253, 249, .94) 32%,
      rgba(249, 240, 226, .76) 56%,
      rgba(255, 255, 255, 0) 76%) !important;
  filter: blur(10px) !important;
  opacity: .96 !important;
  transform: scale(1) !important;
  box-shadow:
    0 22px 80px rgba(255, 255, 255, .5),
    0 12px 50px rgba(84, 53, 26, .16) !important;
}

.onestich-home-hero-morph::after {
  inset: 8% 5% !important;
  border-color: rgba(139, 86, 19, .18) !important;
  border-radius: 46% !important;
  clip-path: none !important;
  opacity: .35 !important;
}

.onestich-home-hero-morph__item,
.onestich-home-hero-morph__wordmark {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.onestich-home-hero-morph__wordmark {
  width: 70% !important;
  max-width: 70% !important;
}

@media (max-width: 760px) {
  .onestich-home-hero-morph {
    width: calc(100vw - 4px) !important;
    max-width: calc(100vw - 4px) !important;
    aspect-ratio: 1.38 / 1 !important;
  }

  .onestich-home-hero-morph::before {
    inset: 2% 0 !important;
    filter: blur(8px) !important;
  }

  .onestich-home-hero-morph__item,
  .onestich-home-hero-morph__wordmark {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .onestich-home-hero-morph__wordmark {
    width: 69% !important;
    max-width: 69% !important;
  }
}