/* PrintWise slider hareketi — transform ve opacity. Eski data-ani-effect kurallarına dokunmaz. */

.awp-motion-host {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.awp-motion-phase,
.awp-motion-tabs,
.awp-motion-transport {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.awp-motion-phase button,
.awp-motion-tabs button,
.awp-motion-transport button {
  border: none;
  border-radius: 3px;
  background: #eef2ff;
  color: #312e81;
  font-size: 11px;
  font-weight: 650;
  padding: 5px 8px;
  cursor: pointer;
}

.awp-motion-phase button.is-active,
.awp-motion-tabs button.is-active,
.awp-motion-transport button.is-active {
  background: #4f46e5;
  color: #fff;
}

.awp-motion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.awp-motion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  padding: 6px 4px;
  cursor: pointer;
  color: #0f172a;
}

.awp-motion-card.is-active {
  border-color: #4f46e5;
  box-shadow: inset 0 0 0 1px #4f46e5;
}

.awp-motion-demo {
  width: 100%;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  color: #1e1b4b;
  background: #f8fafc;
  border-radius: 3px;
}

.awp-motion-demo > span {
  display: inline-block;
  animation-duration: 1.4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.awp-motion-demo--fade > span { animation-name: awp-motion-fade; }
.awp-motion-demo--rise > span { animation-name: awp-motion-rise; }
.awp-motion-demo--mask > span { animation-name: awp-motion-mask; }
.awp-motion-demo--words > span { animation-name: awp-motion-rise; animation-delay: calc(var(--i, 0) * 0.12s); margin: 0 1px; }
.awp-motion-demo--reveal > span { animation-name: awp-motion-reveal; }
.awp-motion-demo--tilt > span { animation-name: awp-motion-tilt; }
.awp-motion-demo--ken > span { animation-name: awp-motion-ken; }
.awp-motion-demo--slide > span { animation-name: awp-motion-slide-x; }
.awp-motion-demo--split > span { animation-name: awp-motion-split; }
.awp-motion-demo--curtain > span { animation-name: awp-motion-curtain; }

.awp-motion-card-label {
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.awp-motion-controls label,
.awp-motion-timeline-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #475569;
  margin-bottom: 2px;
}

.awp-motion-controls {
  display: grid;
  gap: 6px;
}

.awp-motion-warning {
  font-size: 11px;
  color: #9a3412;
  background: #fff7ed;
  border-radius: 3px;
  padding: 6px 8px;
}

.awp-motion-timeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.awp-motion-track {
  position: relative;
  height: 18px;
  background: #f1f5f9;
  border-radius: 3px;
  cursor: ew-resize;
}

.awp-motion-bar {
  position: absolute;
  top: 2px;
  height: 14px;
  min-width: 18px;
  border-radius: 3px;
  background: #4f46e5;
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes awp-motion-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes awp-motion-rise {
  from { opacity: 0; transform: translate3d(var(--awp-motion-x, 0px), var(--awp-motion-y, 28px), 0); }
  to { opacity: 1; transform: none; }
}

@keyframes awp-motion-mask {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes awp-motion-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes awp-motion-tilt {
  from { opacity: 0; transform: perspective(600px) rotateX(8deg) translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes awp-motion-ken {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(var(--awp-ken-scale, 1.08)) translate3d(-1.5%, -1%, 0); }
}

@keyframes awp-motion-pan {
  from { transform: scale(1.04) translate3d(-2%, 0, 0); }
  to { transform: scale(1.08) translate3d(2%, -1%, 0); }
}

@keyframes awp-motion-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -6px, 0); }
}

@keyframes awp-motion-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes awp-motion-rise-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(0, -18px, 0); }
}

@keyframes awp-motion-slide-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translate3d(24px, 0, 0); }
}

@keyframes awp-motion-slide-x {
  from { transform: translate3d(-40%, 0, 0); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes awp-motion-split {
  from { clip-path: inset(50% 0 50% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes awp-motion-curtain {
  from { clip-path: inset(0 50% 0 50%); }
  to { clip-path: inset(0 0 0 0); }
}

.awp-showcase-slide.active [data-awp-enter="cinematicRise"],
.awp-studio-element.is-awp-motion-play[data-awp-enter="cinematicRise"],
.awp-showcase-slide.active [data-awp-enter="fadeIn"],
.awp-studio-element.is-awp-motion-play[data-awp-enter="fadeIn"] {
  animation-name: awp-motion-fade;
}

.awp-showcase-slide.active [data-awp-enter="cinematicRise"],
.awp-studio-element.is-awp-motion-play[data-awp-enter="cinematicRise"] {
  animation-name: awp-motion-rise;
}

.awp-showcase-slide.active [data-awp-enter="maskReveal"],
.awp-studio-element.is-awp-motion-play[data-awp-enter="maskReveal"] {
  animation-name: awp-motion-mask;
}

.awp-showcase-slide.active [data-awp-enter="imageReveal"],
.awp-studio-element.is-awp-motion-play[data-awp-enter="imageReveal"] {
  animation-name: awp-motion-reveal;
}

.awp-showcase-slide.active [data-awp-enter="curtain"],
.awp-studio-element.is-awp-motion-play[data-awp-enter="curtain"] {
  animation-name: awp-motion-curtain;
}

.awp-showcase-slide.active [data-awp-enter="tilt3d"],
.awp-studio-element.is-awp-motion-play[data-awp-enter="tilt3d"] {
  animation-name: awp-motion-tilt;
}

.awp-showcase-slide.active [data-awp-enter],
.awp-studio-element.is-awp-motion-play[data-awp-enter] {
  animation-duration: var(--awp-motion-dur, 0.8s);
  animation-delay: var(--awp-motion-delay, 0s);
  animation-timing-function: var(--awp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: both;
  animation-iteration-count: var(--awp-motion-repeat, 1);
}

.awp-motion-piece {
  display: inline-block;
  animation-name: awp-motion-rise;
  animation-duration: var(--awp-motion-dur, 0.7s);
  animation-delay: calc(var(--awp-motion-delay, 0s) + (var(--i, 0) * var(--awp-motion-stagger, 0.06s)));
  animation-timing-function: var(--awp-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: both;
}

.awp-motion-piece.is-kinetic {
  animation-name: awp-motion-tilt;
}

.awp-showcase-slide.active [data-awp-idle="float"],
.awp-studio-element.is-awp-motion-play [data-awp-idle="float"] {
  animation: awp-motion-float var(--awp-idle-dur, 2.8s) ease-in-out alternate infinite;
}

.awp-showcase-slide.active [data-awp-bg="kenBurns"],
.awp-studio-background-image[data-awp-bg="kenBurns"] {
  animation: awp-motion-ken var(--awp-bg-dur, 12s) ease-out both;
  transform-origin: center center;
}

.awp-showcase-slide.active [data-awp-bg="panZoom"],
.awp-studio-background-image[data-awp-bg="panZoom"] {
  animation: awp-motion-pan var(--awp-bg-dur, 14s) ease-in-out alternate infinite;
}

.awp-showcase-slide.is-leaving [data-awp-exit="fadeOut"] { animation: awp-motion-fade-out var(--awp-exit-dur, 0.35s) ease both; }
.awp-showcase-slide.is-leaving [data-awp-exit="riseOut"] { animation: awp-motion-rise-out var(--awp-exit-dur, 0.35s) ease both; }
.awp-showcase-slide.is-leaving [data-awp-exit="slideOut"] { animation: awp-motion-slide-out var(--awp-exit-dur, 0.35s) ease both; }

.awp-showcase-slider[data-awp-transition="split"] .awp-showcase-slide {
  opacity: 1;
  visibility: hidden;
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.6s ease, visibility 0.6s ease;
}

.awp-showcase-slider[data-awp-transition="curtain"] .awp-showcase-slide {
  opacity: 1;
  visibility: hidden;
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.6s ease, visibility 0.6s ease;
}

.awp-showcase-slider[data-awp-transition="split"] .awp-showcase-slide.active,
.awp-showcase-slider[data-awp-transition="curtain"] .awp-showcase-slide.active,
.awp-showcase-slider[data-awp-transition="split"] .awp-showcase-slide.is-leaving,
.awp-showcase-slider[data-awp-transition="curtain"] .awp-showcase-slide.is-leaving {
  visibility: visible;
}

.awp-showcase-slider[data-awp-transition="split"] .awp-showcase-slide.active,
.awp-showcase-slider[data-awp-transition="curtain"] .awp-showcase-slide.active {
  clip-path: inset(0 0 0 0);
  z-index: 2;
}

[data-awp-hover="lift"]:hover {
  translate: 0 -4px;
}

[data-awp-interact~="mouse"] {
  translate: calc(var(--awp-px, 0) * var(--awp-parallax, 10px)) calc(var(--awp-py, 0) * var(--awp-parallax, 6px));
}

[data-awp-interact~="scroll"] {
  translate: 0 calc(var(--awp-sy, 0) * var(--awp-parallax, 8px));
}

.awp-showcase-slider.is-awp-paused .awp-showcase-element,
.awp-showcase-slider.is-awp-paused [data-awp-bg],
.awp-studio-canvas-area.is-awp-motion-paused .awp-studio-element,
.awp-studio-canvas-area.is-awp-motion-paused .awp-motion-piece {
  animation-play-state: paused !important;
}

.awp-showcase-motion-pause {
  display: none !important;
}

@media (max-width: 782px) {
  [data-awp-enter="tilt3d"] { animation-name: awp-motion-fade !important; }
  [data-awp-interact~="mouse"],
  [data-awp-interact~="scroll"] { translate: none !important; }
  [data-awp-bg="kenBurns"],
  [data-awp-bg="panZoom"] { animation-duration: 0.01ms !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-awp-enter],
  [data-awp-idle],
  [data-awp-exit],
  [data-awp-bg],
  .awp-motion-piece,
  .awp-motion-demo > span {
    animation: none !important;
    clip-path: none !important;
    translate: none !important;
    opacity: var(--awp-element-opacity, 1) !important;
    transform: none !important;
  }

  .awp-showcase-slider[data-awp-transition="split"] .awp-showcase-slide,
  .awp-showcase-slider[data-awp-transition="curtain"] .awp-showcase-slide {
    clip-path: none !important;
    transition: none !important;
  }
}