/**
 * Tema mentorclub — orquestra o design system + shell da SPA.
 *
 * Design system: app/assets/css/design-system/
 * Visual: _designsystem/spa.html
 */

@import url("./design-system/tokens.css?v=1.2.2");
@import url("./design-system/base.css?v=1.2.2");
@import url("./design-system/components.css?v=1.2.2");
@import url("./design-system/utilities.css?v=1.2.2");

/**
 * Fundo atrás do #app — superfície clara + orbs suaves (SPA).
 */
.sdw-app-route-atmosphere,
.sdw-gradient-splash-bg {
  isolation: isolate;
  background: var(--sdw-loader-radial), var(--sdw-surface);
}

.sdw-app-route-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sdw-app-route-atmosphere::before,
.sdw-app-route-atmosphere::after {
  content: "";
  position: absolute;
  width: min(300px, 70vw);
  height: min(300px, 70vw);
  border-radius: 9999px;
  filter: blur(100px);
  pointer-events: none;
}

.sdw-app-route-atmosphere::before {
  top: -10%;
  right: -10%;
  background: var(--sdw-atmosphere-orb-a);
}

.sdw-app-route-atmosphere::after {
  bottom: -10%;
  left: -10%;
  background: var(--sdw-atmosphere-orb-b);
}

.sdw-gradient-splash-bg {
  position: relative;
}

#app {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
  background: transparent;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100dvh;
  max-height: 100svh;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#app.sdw-app-shell {
  overflow: hidden;
}

#sdw-app-top {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

/* Transições de rota — opacity só (GPU); tempos curtos */
#sdw-app-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

#sdw-app-stage::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#sdw-app-dock {
  flex: 0 0 auto;
}

#app.sdw-app-shell #sdw-app-stage nav.sdw-bottom-nav,
#app.sdw-app-shell #sdw-app-stage header.sdw-app-topbar-gradient {
  display: none !important;
}

#app::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

#sdw-app-stage.sdw-route-leave,
#sdw-app-stage.sdw-route-enter-start {
  will-change: opacity, transform;
  pointer-events: none;
}

#sdw-app-stage.sdw-route-leave {
  opacity: 0.5;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

#sdw-app-stage.sdw-route-swap {
  opacity: 0.5;
  transform: translate3d(0, 8px, 0);
  transition: none !important;
}

#sdw-app-stage.sdw-route-enter-start {
  opacity: 0.3;
  transform: translate3d(0, 14px, 0);
  transition: none !important;
}

#sdw-app-stage.sdw-route-enter-start.sdw-route-enter-run {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  #sdw-app-stage.sdw-route-leave,
  #sdw-app-stage.sdw-route-swap,
  #sdw-app-stage.sdw-route-enter-start,
  #sdw-app-stage.sdw-route-enter-start.sdw-route-enter-run {
    transition: none !important;
    opacity: 1;
    transform: none;
    will-change: auto;
    pointer-events: auto;
  }
}

/* Entrada em sequência: só rise (sem opacity 0) — evita 2ª piscada após o fade da rota */
@keyframes sdw-soft-rise {
  from {
    transform: translate3d(0, 14px, 0);
    opacity: 0.55;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes sdw-soft-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.sdw-soft-in {
  animation: sdw-soft-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--sdw-soft-delay, 0ms);
}

.sdw-soft-in--stagger > * {
  animation: sdw-soft-rise 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sdw-soft-in--stagger > *:nth-child(1) {
  animation-delay: 0ms;
}
.sdw-soft-in--stagger > *:nth-child(2) {
  animation-delay: 55ms;
}
.sdw-soft-in--stagger > *:nth-child(3) {
  animation-delay: 110ms;
}
.sdw-soft-in--stagger > *:nth-child(4) {
  animation-delay: 165ms;
}
.sdw-soft-in--stagger > *:nth-child(5) {
  animation-delay: 220ms;
}
.sdw-soft-in--stagger > *:nth-child(6) {
  animation-delay: 275ms;
}
.sdw-soft-in--stagger > *:nth-child(n + 7) {
  animation-delay: 320ms;
}

@keyframes sdw-soft-out {
  to {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
  }
}

.sdw-soft-out {
  animation: sdw-soft-out 0.22s ease-in both;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sdw-soft-in,
  .sdw-soft-in--stagger > *,
  .sdw-soft-out {
    animation: none !important;
  }
}

/* Dock: feedback suave (sem scale agressivo) */
#sdw-app-dock .sdw-dock-tab {
  transition: color 0.22s ease, opacity 0.22s ease, transform 0.18s ease;
}

#sdw-app-dock .sdw-dock-tab:active {
  transform: scale(0.96);
}

#sdw-app-dock .sdw-dock-tab .material-symbols-outlined {
  transition: font-variation-settings 0.22s ease, color 0.22s ease;
}

/* GSAP controla opacity/transform — evita conflito com CSS do drawer */
.sdw-motion-gsap .mp-diag-drawer__backdrop,
.sdw-motion-gsap .mp-diag-drawer__panel,
.sdw-motion-gsap .ep-drawer__backdrop,
.sdw-motion-gsap .ep-drawer__panel,
.sdw-photo-lb.sdw-motion-gsap,
.sdw-photo-lb.sdw-motion-gsap .sdw-photo-lb__img {
  transition: none !important;
}

#sdw-app-skeleton {
  display: none;
}

#sdw-app-skeleton:not([hidden]) {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  padding: calc(var(--sdw-topbar-height, 4.5rem) + 0.75rem) 1rem 6.5rem;
  background: color-mix(in srgb, var(--sdw-surface) 78%, transparent);
}

.sdw-app-skeleton__inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-width: 28rem;
  margin: 0 auto;
}

.sdw-skel {
  border-radius: 0.75rem;
  background: linear-gradient(
    90deg,
    var(--sdw-surface-container) 0%,
    var(--sdw-surface-container-high, var(--sdw-surface-container)) 45%,
    var(--sdw-surface-container) 100%
  );
  background-size: 200% 100%;
  animation: sdw-skel-shine 1.15s ease-in-out infinite;
}

.sdw-skel--line {
  height: 0.7rem;
}

.sdw-skel--w-40 {
  width: 40%;
}

.sdw-skel-card {
  height: 4.75rem;
  border-radius: 1rem;
  background: linear-gradient(
    90deg,
    var(--sdw-surface-container) 0%,
    var(--sdw-surface-container-high, var(--sdw-surface-container)) 45%,
    var(--sdw-surface-container) 100%
  );
  background-size: 200% 100%;
  animation: sdw-skel-shine 1.15s ease-in-out infinite;
}

@keyframes sdw-skel-shine {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .sdw-skel,
  .sdw-skel-card {
    animation: none;
  }
}

/* Loader */
#sdw-app-loader {
  position: fixed;
  inset: 0;
  z-index: var(--sdw-z-loader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--sdw-loader-radial), var(--sdw-loader-surface);
  color: var(--sdw-on-surface);
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}

#sdw-app-loader.hidden,
#sdw-app-loader[hidden] {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

#sdw-app-loader.sdw-app-loader--exit {
  opacity: 0;
  pointer-events: none;
}

#sdw-app-loader img {
  width: min(11rem, 48vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 32px rgba(71, 3, 122, 0.25));
}

#sdw-app-loader .sdw-app-loader-text {
  font-family: var(--sdw-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sdw-primary);
}

@media (prefers-reduced-motion: reduce) {
  #sdw-app-loader {
    transition: none;
  }
}