/* The reference's grid, moving type and exploded solid, using Poppy's existing palette. */
.hero--kinetic {
  --hero-grid: rgb(30 30 30 / 0.13);
}
.nav__menu-lang {
  display: none;
}
.nav__menu-actions {
  display: none;
}
.nav__login {
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
}
.nav__login--desktop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-weight: 500;
  transition: transform 0.2s;
}
.nav__login--desktop:hover {
  transform: translateY(-1px);
}
.nav.is-over-dark .nav__login--desktop {
  color: #fff;
}
.nav__login:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.nav__login--menu {
  display: none;
}
/* Scrolled navigation already blurs its backdrop; avoid nested blur repaint seams. */
.nav.is-scrolled :is(.lang, .lang__btn.is-active, .nav__login--desktop) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* One continuous desktop glass surface avoids seams in the negative-z
   pseudo-element's backdrop when animated content scrolls underneath. */
@media (min-width: 861px) {
  .nav.is-over-dark .nav__right .lang__btn {
    color: #fff;
  }
  .nav.is-over-dark .nav__right .lang__btn:is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, 0.18);
  }
  .nav {
    isolation: auto;
    background: transparent;
    -webkit-backdrop-filter: var(--nav-glass-filter);
    backdrop-filter: var(--nav-glass-filter);
    transition: background-color 0.2s ease;
  }
  .nav.is-scrolled {
    background: var(--nav-glass-bg);
  }
  .nav::before {
    display: none;
  }
  .nav :is(.lang, .lang__btn.is-active, .nav__login--desktop) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .nav__inner {
    gap: 20px;
    padding-inline: 24px;
  }
  .nav__links {
    gap: 20px;
  }
}
.hero--kinetic .hero__intro {
  padding: 64px 0 0;
  background: var(--brand-primary);
}
.hero--kinetic .hero__intro::after {
  display: none;
}
.hero--kinetic .hero__head {
  position: relative;
  isolation: isolate;
  max-width: none;
  height: min(780px, calc(100svh - 64px));
  min-height: 650px;
  padding: 0 40px;
  align-items: stretch;
  text-align: left;
  border-top: 1px solid var(--hero-grid);
  border-bottom: 1px solid var(--hero-grid);
  background-image:
    linear-gradient(to right, var(--hero-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hero-grid) 1px, transparent 1px);
  background-size:
    20% 100%,
    100% 25%;
  background-clip: padding-box;
}
.hero--kinetic .hero__head::before,
.hero--kinetic .hero__head::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--hero-sunset-yellow-soft);
  top: 26px;
  box-shadow: 0 174px 0 var(--hero-sunset-yellow-soft);
  pointer-events: none;
}
.hero--kinetic .hero__head::before {
  left: 24px;
}
.hero--kinetic .hero__head::after {
  right: 24px;
}
.hero--kinetic .hero__title {
  position: absolute;
  z-index: 5;
  left: 40px;
  right: 0;
  top: 47px;
  margin: 0;
  max-width: none;
  font-size: clamp(25px, 2.6vw, 38px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.03em;
}
html[lang="zh-CN"] .hero--kinetic .hero__title {
  line-height: 1.3;
}
.hero--kinetic .hero__title .grad {
  display: block;
  width: max-content;
  margin-top: 14px;
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(84px, 10.5vw, 174px);
  line-height: 1.12;
  letter-spacing: -0.055em;
  animation: hero-type-drift 14s ease-in-out infinite alternate;
}
html[lang="en"] .hero--kinetic .hero__title .grad {
  font-size: clamp(48px, 7.5vw, 174px);
}
.hero--kinetic .hero__title .hero__emphasis {
  font-weight: 800;
}
.hero--kinetic .hero__head > .announce {
  position: absolute;
  left: 40px;
  top: auto;
  bottom: 258px;
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  background: rgb(255 255 255 / 0.18);
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 0;
  box-shadow: none;
  padding: 5px 10px 5px 5px;
  z-index: 4;
}
.hero--kinetic .hero__head > .announce::before,
.hero--kinetic .hero__head > .announce::after {
  display: none;
}
.hero--kinetic .hero__lead {
  position: absolute;
  z-index: 4;
  left: 40px;
  bottom: 132px;
  width: 330px;
  max-width: 28%;
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  text-wrap: pretty;
}
.hero--kinetic .hero__lead-break {
  display: none;
}
.hero--kinetic .hero__actions {
  position: absolute;
  z-index: 4;
  left: 40px;
  bottom: 48px;
  margin: 0;
  gap: 8px;
  width: auto;
  flex-direction: row;
}
.hero--kinetic .hero__actions .btn {
  font-size: 13px;
  padding: 0 14px;
  border-radius: 3px;
  height: 40px;
  width: auto;
}
.hero--kinetic .hero__intro > .container:last-child {
  max-width: none;
  padding: 0 40px;
  position: relative;
  background: var(--hero-sunset-yellow-soft);
  border-bottom: 1px solid var(--hero-grid);
}
.hero--kinetic .example-tag {
  margin: 0;
  min-height: 64px;
}
.hero--kinetic .hero__intro + .container {
  padding-top: 40px;
}

/* Eight CSS solids separate around a branded core; no third-party rendering runtime. */
.hero-solid {
  --solid-size: 84px;
  --solid-half: 42px;
  position: absolute;
  z-index: 2;
  left: 58%;
  top: 55%;
  width: 420px;
  height: 460px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-solid__view {
  position: absolute;
  inset: 0;
  perspective: 1050px;
}
.hero-solid__assembly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(-28deg) rotateZ(-8deg);
  animation: hero-solid-turn-mobile 18s linear infinite;
}
.hero-solid__block,
.hero-solid__core {
  position: absolute;
  width: var(--solid-size);
  height: var(--solid-size);
  left: calc(var(--solid-half) * -1);
  top: calc(var(--solid-half) * -1);
  transform-style: preserve-3d;
}
.hero-solid__block {
  animation: hero-solid-expand 9s cubic-bezier(0.65, 0, 0.25, 1) infinite;
}
.hero-solid__face {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 8px;
  border: 1px solid rgb(30 30 30 / 0.1);
  backface-visibility: hidden;
  background: var(--bg);
}
.hero-solid__face--front {
  transform: translateZ(var(--solid-half));
  background: linear-gradient(135deg, var(--bg), var(--soft));
}
.hero-solid__face--back {
  transform: rotateY(180deg) translateZ(var(--solid-half));
  background: var(--soft);
}
.hero-solid__face--right {
  transform: rotateY(90deg) translateZ(var(--solid-half));
  background: linear-gradient(
    90deg,
    var(--soft),
    color-mix(in srgb, var(--bg) 80%, var(--text-primary))
  );
}
.hero-solid__face--left {
  transform: rotateY(-90deg) translateZ(var(--solid-half));
  background: color-mix(in srgb, var(--bg) 85%, var(--text-primary));
}
.hero-solid__face--top {
  transform: rotateX(90deg) translateZ(var(--solid-half));
}
.hero-solid__face--bottom {
  transform: rotateX(-90deg) translateZ(var(--solid-half));
  background: color-mix(in srgb, var(--bg) 72%, var(--text-primary));
}
.hero-solid__core > .hero-solid__face {
  background: var(--bg);
  border-color: var(--brand-primary);
  border-radius: 6px;
}
.hero-solid__core > .hero-solid__face--back {
  display: grid;
  place-items: center;
}
.hero-core__wordmark {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 22px;
  font-style: normal;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.hero-solid__core > img {
  position: absolute;
  width: 64px;
  height: 60px;
  object-fit: contain;
  left: 10px;
  top: 12px;
  transform: translateZ(43px);
  backface-visibility: hidden;
}
.hero-solid__shadow {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 240px;
  height: 36px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgb(10 10 11 / 0.22), transparent 70%);
  filter: blur(12px);
  animation: hero-shadow-breathe 9s ease-in-out infinite;
}
.hero-stamp {
  position: absolute;
  right: 40px;
  bottom: 48px;
  width: 174px;
  height: 174px;
  border: 1px solid var(--hero-grid);
  background: var(--ink);
  display: grid;
  place-items: center;
}
.hero-stamp__orbit {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: 30%;
  animation: hero-stamp-turn 16s linear infinite;
}
.hero-stamp img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  animation: hero-stamp-turn 16s linear infinite reverse;
}
.hero-stamp > i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-color: var(--bg);
  border-style: solid;
  opacity: 0.55;
}
.hero-stamp > i:nth-of-type(1) {
  top: 10px;
  left: 10px;
  border-width: 1px 0 0 1px;
}
.hero-stamp > i:nth-of-type(2) {
  top: 10px;
  right: 10px;
  border-width: 1px 1px 0 0;
}
.hero-stamp > i:nth-of-type(3) {
  bottom: 10px;
  left: 10px;
  border-width: 0 0 1px 1px;
}
.hero-stamp > i:nth-of-type(4) {
  bottom: 10px;
  right: 10px;
  border-width: 0 1px 1px 0;
}
@keyframes hero-type-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-9%);
  }
}
@keyframes hero-solid-turn {
  from {
    transform: rotateX(-18deg) rotateY(-28deg) rotateZ(-8deg);
  }
  to {
    transform: rotateX(-18deg) rotateY(332deg) rotateZ(-8deg);
  }
}
@keyframes hero-solid-expand {
  0%,
  12%,
  90%,
  100% {
    transform: translate3d(
      calc(var(--x) * 44px),
      calc(var(--y) * 44px),
      calc(var(--z) * 44px)
    );
  }
  40%,
  64% {
    transform: translate3d(
      calc(var(--x) * 112px),
      calc(var(--y) * 128px),
      calc(var(--z) * 112px)
    );
  }
}
@keyframes hero-solid-expand-mobile {
  0%,
  12%,
  90%,
  100% {
    transform: translate3d(
      calc(var(--x) * 44px),
      calc(var(--y) * 44px),
      calc(var(--z) * 44px)
    );
  }
  40%,
  64% {
    transform: translate3d(
      calc(var(--x) * 82px),
      calc(var(--y) * 82px),
      calc(var(--z) * 82px)
    );
  }
}
/* Continuous 18s turn: slow near each exposed logo, faster while closed.
   Sample a smooth periodic curve; never hold identical rotation keyframes. */
@keyframes hero-solid-turn-mobile {
  0% {
    transform: rotateX(-11.953deg) rotateY(-96.891deg) rotateZ(-8deg);
  }
  2% {
    transform: rotateX(-11.953deg) rotateY(-83.109deg) rotateZ(-8deg);
  }
  4% {
    transform: rotateX(-11.579deg) rotateY(-69.533deg) rotateZ(-8deg);
  }
  6% {
    transform: rotateX(-10.854deg) rotateY(-56.564deg) rotateZ(-8deg);
  }
  8% {
    transform: rotateX(-9.825deg) rotateY(-44.566deg) rotateZ(-8deg);
  }
  10% {
    transform: rotateX(-8.555deg) rotateY(-33.839deg) rotateZ(-8deg);
  }
  12% {
    transform: rotateX(-7.124deg) rotateY(-24.605deg) rotateZ(-8deg);
  }
  14% {
    transform: rotateX(-5.623deg) rotateY(-16.991deg) rotateZ(-8deg);
  }
  16% {
    transform: rotateX(-4.146deg) rotateY(-11.025deg) rotateZ(-8deg);
  }
  18% {
    transform: rotateX(-2.785deg) rotateY(-6.627deg) rotateZ(-8deg);
  }
  20% {
    transform: rotateX(-1.626deg) rotateY(-3.623deg) rotateZ(-8deg);
  }
  22% {
    transform: rotateX(-0.742deg) rotateY(-1.749deg) rotateZ(-8deg);
  }
  24% {
    transform: rotateX(-0.189deg) rotateY(-0.669deg) rotateZ(-8deg);
  }
  26% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(-8deg);
  }
  28% {
    transform: rotateX(-0.189deg) rotateY(0.669deg) rotateZ(-8deg);
  }
  30% {
    transform: rotateX(-0.742deg) rotateY(1.749deg) rotateZ(-8deg);
  }
  32% {
    transform: rotateX(-1.626deg) rotateY(3.623deg) rotateZ(-8deg);
  }
  34% {
    transform: rotateX(-2.785deg) rotateY(6.627deg) rotateZ(-8deg);
  }
  36% {
    transform: rotateX(-4.146deg) rotateY(11.025deg) rotateZ(-8deg);
  }
  38% {
    transform: rotateX(-5.623deg) rotateY(16.991deg) rotateZ(-8deg);
  }
  40% {
    transform: rotateX(-7.124deg) rotateY(24.605deg) rotateZ(-8deg);
  }
  42% {
    transform: rotateX(-8.555deg) rotateY(33.839deg) rotateZ(-8deg);
  }
  44% {
    transform: rotateX(-9.825deg) rotateY(44.566deg) rotateZ(-8deg);
  }
  46% {
    transform: rotateX(-10.854deg) rotateY(56.564deg) rotateZ(-8deg);
  }
  48% {
    transform: rotateX(-11.579deg) rotateY(69.533deg) rotateZ(-8deg);
  }
  50% {
    transform: rotateX(-11.953deg) rotateY(83.109deg) rotateZ(-8deg);
  }
  52% {
    transform: rotateX(-11.953deg) rotateY(96.891deg) rotateZ(-8deg);
  }
  54% {
    transform: rotateX(-11.579deg) rotateY(110.467deg) rotateZ(-8deg);
  }
  56% {
    transform: rotateX(-10.854deg) rotateY(123.436deg) rotateZ(-8deg);
  }
  58% {
    transform: rotateX(-9.825deg) rotateY(135.434deg) rotateZ(-8deg);
  }
  60% {
    transform: rotateX(-8.555deg) rotateY(146.161deg) rotateZ(-8deg);
  }
  62% {
    transform: rotateX(-7.124deg) rotateY(155.395deg) rotateZ(-8deg);
  }
  64% {
    transform: rotateX(-5.623deg) rotateY(163.009deg) rotateZ(-8deg);
  }
  66% {
    transform: rotateX(-4.146deg) rotateY(168.975deg) rotateZ(-8deg);
  }
  68% {
    transform: rotateX(-2.785deg) rotateY(173.373deg) rotateZ(-8deg);
  }
  70% {
    transform: rotateX(-1.626deg) rotateY(176.377deg) rotateZ(-8deg);
  }
  72% {
    transform: rotateX(-0.742deg) rotateY(178.251deg) rotateZ(-8deg);
  }
  74% {
    transform: rotateX(-0.189deg) rotateY(179.331deg) rotateZ(-8deg);
  }
  76% {
    transform: rotateX(0deg) rotateY(180deg) rotateZ(-8deg);
  }
  78% {
    transform: rotateX(-0.189deg) rotateY(180.669deg) rotateZ(-8deg);
  }
  80% {
    transform: rotateX(-0.742deg) rotateY(181.749deg) rotateZ(-8deg);
  }
  82% {
    transform: rotateX(-1.626deg) rotateY(183.623deg) rotateZ(-8deg);
  }
  84% {
    transform: rotateX(-2.785deg) rotateY(186.627deg) rotateZ(-8deg);
  }
  86% {
    transform: rotateX(-4.146deg) rotateY(191.025deg) rotateZ(-8deg);
  }
  88% {
    transform: rotateX(-5.623deg) rotateY(196.991deg) rotateZ(-8deg);
  }
  90% {
    transform: rotateX(-7.124deg) rotateY(204.605deg) rotateZ(-8deg);
  }
  92% {
    transform: rotateX(-8.555deg) rotateY(213.839deg) rotateZ(-8deg);
  }
  94% {
    transform: rotateX(-9.825deg) rotateY(224.566deg) rotateZ(-8deg);
  }
  96% {
    transform: rotateX(-10.854deg) rotateY(236.564deg) rotateZ(-8deg);
  }
  98% {
    transform: rotateX(-11.579deg) rotateY(249.533deg) rotateZ(-8deg);
  }
  100% {
    transform: rotateX(-11.953deg) rotateY(263.109deg) rotateZ(-8deg);
  }
}
@keyframes hero-shadow-breathe {
  0%,
  12%,
  90%,
  100% {
    opacity: 0.8;
    transform: translateX(-50%) scale(0.8);
  }
  40%,
  64% {
    opacity: 0.45;
    transform: translateX(-50%) scale(1.3);
  }
}
@keyframes hero-stamp-turn {
  to {
    transform: rotate(360deg);
  }
}
.hero--kinetic.is-motion-paused *,
.hero--kinetic.is-motion-paused *::before {
  animation-play-state: paused !important;
}
@media (min-width: 1800px) {
  .hero--kinetic .hero__head {
    height: 820px;
  }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero--kinetic .hero__head {
    padding-inline: 28px;
  }
  .hero--kinetic .hero__title,
  .hero--kinetic .hero__lead,
  .hero--kinetic .hero__actions,
  .hero--kinetic .hero__head > .announce {
    left: 28px;
  }
  .hero--kinetic .hero__lead {
    max-width: 31%;
    bottom: 148px;
  }
  .hero--kinetic .hero__head > .announce {
    bottom: 330px;
    max-width: 30%;
  }
  .hero-solid {
    left: 57%;
    transform: translate(-50%, -50%) scale(0.85);
  }
  .hero-stamp {
    right: 28px;
    width: 126px;
    height: 126px;
  }
}
@media (max-width: 760px) {
  .hero--kinetic .hero__head {
    min-height: 0;
    height: auto;
    padding: 40px 24px 24px;
    display: flex;
    gap: 0;
    background-size:
      50% 100%,
      100% 184px;
  }
  .hero--kinetic .hero__title {
    position: relative;
    inset: auto;
    font-size: 25px;
  }
  .hero--kinetic .hero__title .grad {
    margin-top: 10px;
    font-size: clamp(44px, 9.7vw, 74px);
    letter-spacing: -0.04em;
    animation: none;
    width: auto;
  }
  .hero-solid {
    top: clamp(284px, calc(245px + 10vw), 308px);
    left: 50%;
    transform: translate(-50%, -50%) scale(0.75);
  }
  .hero-solid__assembly {
    animation-name: hero-solid-turn-mobile;
  }
  .hero-solid__block {
    animation-name: hero-solid-expand-mobile;
  }
  .hero--kinetic .hero__head > .announce {
    position: relative;
    inset: auto;
    align-self: flex-start;
    margin-top: 248px;
    font-size: 12px;
    max-width: none;
  }
  .hero--kinetic .hero__lead {
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
    margin-top: 22px;
  }
  .hero--kinetic .hero__actions {
    position: relative;
    inset: auto;
    margin-top: 28px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .hero-stamp {
    display: none;
  }
  .hero--kinetic .hero__intro > .container:last-child {
    padding-inline: 24px;
  }
  .hero--kinetic .example-tag {
    min-height: 48px;
    font-size: 12px;
    line-height: 18px;
  }
  html[lang="en"] .hero--kinetic .hero__title .grad {
    font-size: clamp(42px, 9vw, 65px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero--kinetic *,
  .hero--kinetic *::before {
    animation: none !important;
  }
  .hero-solid__block {
    transform: translate3d(
      calc(var(--x) * 74px),
      calc(var(--y) * 82px),
      calc(var(--z) * 74px)
    );
  }
}

/* This file belongs exclusively to homepage-reveal-demo.html. */
.hero--reveal,
.hero--reveal .hero__intro {
  background: var(--soft);
}
.hero--reveal {
  padding-bottom: 56px;
}
.hero--reveal .hero__title .grad {
  animation: none;
  transform: none;
}
.hero--reveal .hero__head {
  --hero-grid: rgb(30 30 30 / 0.11);
  border-top: 0;
}
.hero--reveal .hero__head::before,
.hero--reveal .hero__head::after {
  background: var(--brand-primary);
  box-shadow: 0 238px 0 var(--brand-primary);
}
.hero--reveal .hero__head > .announce {
  background: var(--bg);
  border-color: var(--line);
}
.hero--reveal .hero__head > .announce .announce__tag {
  background: var(--brand-primary);
  color: var(--bg);
}
.hero--reveal .hero__hours {
  background: var(--brand-primary);
  color: var(--bg);
}
.hero--reveal .hero__intro > .container:last-child {
  background: var(--bg);
}
.hero--reveal .hero__intro + .container {
  padding-top: 48px;
}
.hero--reveal .promo {
  border-radius: 6px;
}
.hero--reveal .promo__controls {
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .hero--reveal .promo__controls {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }
  .hero--reveal .promo:is(:hover, :focus-within) .promo__controls {
    opacity: 1;
    pointer-events: auto;
  }
}
.hero--reveal .promo__btn {
  opacity: 1;
}
.hero--reveal .promo__pause,
.hero--reveal .promo__btn.is-playing .promo__play {
  display: none;
}
.hero--reveal .promo__btn.is-playing .promo__pause {
  display: block;
}
@media (max-width: 560px) {
  .hero--reveal .promo__icon {
    width: 16px;
    height: 16px;
  }
}
.hero--reveal .promo__video:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: -4px;
}
.opening-wipe {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}
.opening-wipe > i {
  position: relative;
  display: block;
  background: var(--brand-primary);
  height: 100%;
  margin-inline: -1px;
  transform: translateY(-112%);
  will-change: transform;
}
/* Two short rectilinear trails soften the moving step without turning it into a fade. */
.opening-wipe > i::before,
.opening-wipe > i::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background: var(--brand-primary);
}
.opening-wipe > i::before {
  height: 5vh;
  top: calc(100% - 1px);
  opacity: 0.34;
}
.opening-wipe > i::after {
  height: 3vh;
  top: calc(105% - 1px);
  opacity: 0.13;
}
.reveal-opening .opening-wipe {
  visibility: visible;
}
.reveal-opening .opening-wipe > i {
  animation: orange-column-withdraw 0.98s cubic-bezier(0.72, 0.01, 0.2, 1) both;
  animation-delay: calc((11 - var(--column)) * 0.022s + var(--stagger));
}
@keyframes orange-column-withdraw {
  0% {
    transform: translateY(0);
  }
  18% {
    transform: translateY(-3%);
  }
  100% {
    transform: translateY(-112%);
  }
}
@media (max-width: 1100px) {
  .hero--reveal .hero__head > .announce {
    bottom: 321px;
  }
}
@media (max-width: 860px) {
  .nav__right > .lang {
    display: none;
  }
  .nav__login--desktop {
    display: none;
  }
  .nav__menu-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 14px;
  }
  .nav__links .nav__login--menu {
    display: inline-flex;
    width: auto;
    padding: 0 16px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text-primary);
    font-size: 14px;
  }
  .nav__right .nav__cta {
    display: inline-flex;
    height: 36px;
    padding-inline: 12px;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
  }
  .nav__links .nav__menu-cta {
    display: none;
  }
  .nav__links .nav__menu-lang {
    display: inline-flex;
    margin: 0;
    background: #fff;
    border-color: var(--line);
  }
}
@media (max-width: 760px) {
  .hero--reveal {
    padding-bottom: 24px;
  }
  .hero--reveal .hero__head::before,
  .hero--reveal .hero__head::after {
    box-shadow: 0 126px 0 var(--brand-primary);
  }
  .nav__inner {
    gap: 12px;
    padding-inline: 20px;
  }
  .nav__right {
    gap: 8px;
  }
  .hero--reveal .hero__head > .announce {
    bottom: auto;
  }
  .hero--reveal .hero__intro + .container {
    padding-top: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .opening-wipe {
    display: none !important;
  }
  .reveal-opening .hero--reveal * {
    animation-play-state: running;
  }
}

/* Orange modules: front faces use the exact existing brand token. */
.hero--reveal .hero-solid__block > .hero-solid__face {
  background: var(--brand-primary);
  border-color: rgb(30 30 30 / 0.12);
}
.hero--reveal .hero-solid__block > .hero-solid__face--right {
  background: color-mix(in srgb, var(--brand-primary) 84%, var(--ink));
}
.hero--reveal .hero-solid__block > .hero-solid__face--left {
  background: color-mix(in srgb, var(--brand-primary) 92%, var(--ink));
}
.hero--reveal .hero-solid__block > .hero-solid__face--top {
  background: color-mix(in srgb, var(--brand-primary) 90%, var(--bg));
}
.hero--reveal .hero-solid__block > .hero-solid__face--bottom {
  background: color-mix(in srgb, var(--brand-primary) 76%, var(--ink));
}

.hero--reveal .hero__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  width: max-content;
  left: auto;
  right: 40px;
  gap: 12px;
  justify-content: flex-end;
}
.hero--reveal .hero__actions .btn {
  width: 100%;
  height: 52px;
  padding-inline: 24px;
  font-size: 16px;
  line-height: 24px;
  border-radius: var(--radius-300);
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero--reveal .hero__actions {
    left: auto;
    right: 28px;
  }
}
@media (max-width: 760px) {
  .hero--reveal .hero__actions {
    grid-template-columns: 1fr;
    left: auto;
    right: auto;
    width: 100%;
    justify-content: flex-end;
  }
  .hero--reveal .hero__actions .btn {
    min-width: 180px;
  }
  .hero--reveal .hero__actions .btn--dark {
    order: -1;
  }
}

.hero--reveal .hero__lead {
  width: calc(40% - 40px - 16px);
  max-width: none;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero--reveal .hero__lead {
    width: calc(40% - 28px - 16px);
  }
}
@media (max-width: 760px) {
  .hero--reveal .hero__lead {
    width: auto;
    max-width: none;
  }
}