/**
 * V1 Profile ↔ Showcase impact transition
 * Fixed single viewport; panels absolutely stacked and animated independently.
 */

.v1-impact-flash {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse 80% 60% at 50% 42%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.08) 42%,
      transparent 72%
    );
}

.v1-impact-flash.is-active {
  animation: v1-impact-flash-pulse var(--v1-transition-duration, 480ms) linear forwards;
  will-change: opacity;
}

@keyframes v1-impact-flash-pulse {
  0%,
  12% {
    opacity: 0;
  }

  16% {
    opacity: var(--v1-flash-peak, 0.18);
  }

  24%,
  100% {
    opacity: 0;
  }
}

/* ── Fixed one-screen viewport slot ── */
body[data-profile-layout="v1"] .v1-transition-viewport {
  position: relative;
  width: var(--v1-stack-width);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin-inline: auto;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
}

body[data-profile-layout="v1"] .v1-transition-stage,
body[data-profile-layout="v1"] .v1-section-track {
  position: relative;
  width: 100%;
  height: 100%;
}

body[data-profile-layout="v1"] .v1-profile-panel,
body[data-profile-layout="v1"] .v1-showcase-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
}

body[data-profile-layout="v1"] .v1-showcase-panel {
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  margin-top: -26px;
}

/* Settled positions — profile visible, showcase below clip */
body[data-profile-layout="v1"] .v1-transition-viewport[data-v1-section="profile"]:not(.is-transitioning) .v1-profile-panel {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

body[data-profile-layout="v1"] .v1-transition-viewport[data-v1-section="profile"]:not(.is-transitioning) .v1-showcase-panel {
  transform: translate3d(0, 100%, 0);
  pointer-events: none;
}

/* Settled positions — showcase visible, profile above clip */
body[data-profile-layout="v1"] .v1-transition-viewport[data-v1-section="showcase"]:not(.is-transitioning) .v1-profile-panel {
  transform: translate3d(0, -100%, 0);
  pointer-events: none;
}

body[data-profile-layout="v1"] .v1-transition-viewport[data-v1-section="showcase"]:not(.is-transitioning) .v1-showcase-panel {
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning .v1-profile-panel,
body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning .v1-showcase-panel {
  pointer-events: none;
}

body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning {
  pointer-events: none;
}

/* Impact shake on composited stage */
body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning .v1-transition-stage {
  animation: v1-impact-shake var(--v1-shake-duration, 180ms) linear var(--v1-shake-delay, 70ms) forwards;
}

@keyframes v1-impact-shake {
  0%,
  14% {
    transform: translate3d(0, 0, 0) scale(0.99);
  }

  18% {
    transform: translate3d(0, 2px, 0) scale(1);
  }

  28% {
    transform: translate3d(-3px, -2px, 0) scale(1);
  }

  38% {
    transform: translate3d(2px, 1px, 0) scale(1);
  }

  48%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Panel travel — independent transforms inside clipped viewport */
body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning.to-showcase .v1-profile-panel {
  animation: v1-panel-out-up var(--v1-transition-duration, 480ms)
    cubic-bezier(0.22, 0.85, 0.24, 1) forwards;
}

body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning.to-showcase .v1-showcase-panel {
  animation: v1-panel-in-up var(--v1-transition-duration, 480ms)
    cubic-bezier(0.22, 0.85, 0.24, 1) forwards;
}

body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning.to-profile .v1-profile-panel {
  animation: v1-panel-in-down var(--v1-transition-duration, 480ms)
    cubic-bezier(0.22, 0.85, 0.24, 1) forwards;
}

body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning.to-profile .v1-showcase-panel {
  animation: v1-panel-out-down var(--v1-transition-duration, 480ms)
    cubic-bezier(0.22, 0.85, 0.24, 1) forwards;
}

@keyframes v1-panel-out-up {
  0%,
  14% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes v1-panel-in-up {
  0%,
  14% {
    transform: translate3d(0, 100%, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes v1-panel-out-down {
  0%,
  14% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes v1-panel-in-down {
  0%,
  14% {
    transform: translate3d(0, -100%, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Showcase nav — pill under socials */
body[data-profile-layout="v1"] .v1-profile-composition .showcase-nav[hidden] {
  display: none !important;
}

body[data-profile-layout="v1"] .v1-profile-composition .showcase-nav {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-r), 0.32);
  background: rgba(10, 10, 14, 0.48);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

body[data-profile-layout="v1"] .v1-profile-composition .showcase-nav__label {
  order: 1;
  letter-spacing: 0.16em;
}

body[data-profile-layout="v1"] .v1-profile-composition .showcase-nav__chevron {
  order: 2;
  font-size: 0.85rem;
}

body[data-profile-layout="v1"] .v1-profile-composition .showcase-nav:hover,
body[data-profile-layout="v1"] .v1-profile-composition .showcase-nav:focus-visible {
  transform: translateY(1px);
  border-color: rgba(var(--accent-r), 0.5);
  background: rgba(14, 14, 18, 0.62);
}

/* Nav stays in profile composition layout — parent panel clip handles visibility */
body[data-profile-layout="v1"] .profile-card-stack[data-active="showcase"] .v1-profile-composition .showcase-nav {
  visibility: visible;
  opacity: 1;
  height: auto;
  margin-top: 10px;
  padding: 10px 20px;
  overflow: visible;
  border: 1px solid rgba(var(--accent-r), 0.32);
}

body[data-profile-layout="v1"] .profile-card-stack > .showcase-nav {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning .v1-transition-stage,
  body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning .v1-profile-panel,
  body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning .v1-showcase-panel,
  .v1-impact-flash.is-active {
    animation: none !important;
  }

  body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning.to-showcase .v1-profile-panel {
    transform: translate3d(0, -100%, 0);
  }

  body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning.to-showcase .v1-showcase-panel {
    transform: translate3d(0, 0, 0);
  }

  body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning.to-profile .v1-profile-panel {
    transform: translate3d(0, 0, 0);
  }

  body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning.to-profile .v1-showcase-panel {
    transform: translate3d(0, 100%, 0);
  }
}

@media (max-width: 600px) {
  body[data-profile-layout="v1"] .v1-transition-viewport.is-transitioning .v1-transition-stage {
    --v1-shake-duration: 150ms;
    animation-name: v1-impact-shake-mobile;
  }

  .v1-impact-flash.is-active {
    --v1-flash-peak: 0.12;
  }
}

@keyframes v1-impact-shake-mobile {
  0%,
  14% {
    transform: translate3d(0, 0, 0) scale(0.995);
  }

  18% {
    transform: translate3d(0, 1px, 0) scale(1);
  }

  28% {
    transform: translate3d(-2px, -1px, 0) scale(1);
  }

  38% {
    transform: translate3d(1px, 1px, 0) scale(1);
  }

  48%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}