/* Movimiento de papelería: tinta, un sello, y pausas.
   Sin motion-ready el contenido queda visible. */

:root {
  --nubia-fast: 200ms;
  --nubia-base: 380ms;
  --nubia-enter: 680ms;
  --nubia-ease: cubic-bezier(.22, 1, .36, 1);
  --nubia-ink: #24312b;
  --nubia-wax: #40564b;
  --nubia-paper: #f3efe4;
}

.nubia-ink {
  color: var(--nubia-ink);
}

.nubia-mark {
  display: inline-block;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.4rem;
  vertical-align: -0.28rem;
}

.nubia-ink path,
.nubia-ink circle,
.nubia-ink rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nubia-ink__wax {
  fill: var(--nubia-wax);
  stroke: none;
}

html.motion-ready .hero__copy .cta-row {
  animation: nubia-cta-in var(--nubia-base) 200ms var(--nubia-ease) both;
}

@media (min-width: 981px) {
  html.motion-ready .real-phone {
    animation: nubia-phone-in var(--nubia-enter) var(--nubia-ease) both;
  }

  html.motion-ready .real-phone__bezel {
    animation: nubia-phone-settle linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 85%;
  }
}

@supports (animation-timeline: view()) {
  @media (min-width: 981px) {
    html.motion-ready .hero-scene img {
      animation: nubia-hero-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }

  html.motion-ready .nubia-mark path,
  html.motion-ready .nubia-mark circle,
  html.motion-ready .nubia-mark rect {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: nubia-ink-draw 1.05s var(--nubia-ease) both;
    animation-timeline: view();
    animation-range: entry 10% cover 46%;
  }

  html.motion-ready .catalog-rail__card {
    animation: nubia-card-focus linear both;
    animation-timeline: view(inline);
    animation-range: cover 15% cover 85%;
  }

  @media (min-width: 900px) {
    html.motion-ready .seating__venue {
      position: relative;
      overflow: hidden;
    }

    html.motion-ready .seating__venue img {
      animation: nubia-photo-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    html.motion-ready .seating__venue::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--nubia-paper);
      transform-origin: top center;
      pointer-events: none;
      animation: nubia-curtain var(--nubia-enter) var(--nubia-ease) both;
      animation-timeline: view();
      animation-range: entry 0% cover 38%;
    }

    html.motion-ready .seating__screen,
    html.motion-ready .guest-preview__board {
      animation: nubia-screen-in var(--nubia-enter) var(--nubia-ease) both;
      animation-timeline: view();
      animation-range: entry 16% cover 50%;
    }

    html.motion-ready .seating__copy {
      animation: nubia-soft-in var(--nubia-base) var(--nubia-ease) both;
      animation-timeline: view();
      animation-range: entry 30% cover 58%;
    }
  }
}

@supports not (animation-timeline: view()) {
  html.motion-ready .nubia-mark path,
  html.motion-ready .nubia-mark circle,
  html.motion-ready .nubia-mark rect {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.05s var(--nubia-ease);
  }

  html.motion-ready .nubia-mark.is-drawn path,
  html.motion-ready .nubia-mark.is-drawn circle,
  html.motion-ready .nubia-mark.is-drawn rect {
    stroke-dashoffset: 0;
  }
}

.catalog-rail {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 8%;
  cursor: auto;
  touch-action: pan-x pan-y;
  user-select: auto;
  -webkit-user-select: auto;
  scrollbar-width: none;
}

.catalog-rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.catalog-rail__track {
  transform: none;
}

@keyframes nubia-catalog-wheel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.catalog-rail.is-wheel {
  overflow: hidden;
  scroll-snap-type: none;
  cursor: default;
  touch-action: pan-y;
}

.catalog-rail.is-wheel .catalog-rail__track {
  animation: nubia-catalog-wheel 70s linear infinite;
}

.catalog-rail.is-wheel:hover .catalog-rail__track,
.catalog-rail.is-wheel:focus-within .catalog-rail__track {
  animation-play-state: paused;
}

html.motion-ready .catalog-rail.is-wheel .catalog-rail__card {
  animation: none;
}

.catalog-rail__card {
  scroll-snap-align: center;
}

.catalog-rail a:focus-visible,
.studio-sampler button:focus-visible,
.studio-sampler a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.studio-sampler__choice-list button,
.studio-sampler__faces button,
.studio-sampler__swatches button {
  transition:
    background-color var(--nubia-fast) var(--nubia-ease),
    color var(--nubia-fast) var(--nubia-ease),
    border-color var(--nubia-fast) var(--nubia-ease),
    box-shadow var(--nubia-fast) var(--nubia-ease);
}

.studio-sampler__frame iframe {
  transition: opacity 280ms var(--nubia-ease);
}

.studio-sampler__frame.is-switching iframe {
  opacity: 0.55;
}

@keyframes nubia-ink-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes nubia-wax-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nubia-cta-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes nubia-phone-in {
  from { transform: perspective(900px) translateY(28px) rotateX(3deg); }
  to { transform: none; }
}

@keyframes nubia-phone-settle {
  from { transform: translateY(10px); }
  to { transform: none; }
}

@keyframes nubia-hero-drift {
  from { transform: scale(1.035) translateY(-1.2%); }
  to { transform: scale(1.035) translateY(1.2%); }
}

@keyframes nubia-photo-drift {
  from { transform: scale(1.03) translateY(-1.5%); }
  to { transform: scale(1.03) translateY(1.5%); }
}

@keyframes nubia-curtain {
  from { transform: scaleY(1); }
  to { transform: scaleY(0); }
}

@keyframes nubia-screen-in {
  from { transform: perspective(900px) translateY(48px) rotateX(2.5deg); }
  to { transform: none; }
}

@keyframes nubia-soft-in {
  from { opacity: 0.72; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@keyframes nubia-card-focus {
  0%, 100% { opacity: 0.84; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

@media (max-width: 980px) {
  html.motion-ready .real-phone,
  html.motion-ready .real-phone__bezel,
  html.motion-ready .hero-scene img,
  html.motion-ready .seating__venue img,
  html.motion-ready .seating__venue::after,
  html.motion-ready .seating__screen,
  html.motion-ready .guest-preview__board,
  html.motion-ready .seating__copy {
    animation: none;
    transform: none;
  }

  html.motion-ready .seating__visual,
  html.motion-ready .guest-preview__board {
    animation: nubia-soft-in var(--nubia-base) var(--nubia-ease) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .catalog-rail__card,
  .seating__screen,
  .guest-preview__board,
  .real-phone,
  .hero-scene img {
    transform: none;
  }
}