/* XYSHIMA public homepage - 3D design experiment */

.xy-public-3d .hero {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 82% 26%,
      rgba(38, 202, 179, .20), transparent 48%),
    radial-gradient(ellipse at 18% 75%,
      rgba(78, 157, 220, .09), transparent 48%);
}

.xy-public-3d .hero-copy {
  position: relative;
  z-index: 2;
  animation: xyEnter .65s ease-out both;
}

.xy-public-3d .hero h1 span {
  background: linear-gradient(
    115deg, #08796b, #12a997, #0a637b
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xy-public-3d .xy-3d-preview {
  transform: perspective(1200px)
    rotateY(-6deg) rotateX(3deg);
  transform-style: preserve-3d;
  border: 1px solid rgba(48, 163, 145, .28);
  background:
    linear-gradient(145deg,
      rgba(255,255,255,.97),
      rgba(223,249,243,.94));
  box-shadow:
    0 38px 80px rgba(5, 76, 67, .18),
    0 10px 25px rgba(5, 76, 67, .08),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .5s cubic-bezier(.2,.8,.2,1),
    box-shadow .5s ease;
}

.xy-public-3d .xy-3d-preview:hover {
  transform: perspective(1200px)
    rotateY(-2deg) rotateX(1deg)
    translateY(-5px);
  box-shadow: 0 48px 95px rgba(5,76,67,.21);
}

.xy-public-3d .xy-3d-preview .focus-card {
  transform: translateZ(24px);
  box-shadow: 0 18px 30px rgba(4,48,43,.16);
}

.xy-public-3d .xy-3d-preview .preview-task {
  transition: transform .25s ease,
    box-shadow .25s ease;
}

.xy-public-3d .xy-3d-preview .preview-task:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(5,76,67,.10);
}

.xy-public-3d .xy-3d-badge {
  position: absolute;
  z-index: 3;
  padding: 11px 16px;
  border: 1px solid rgba(20,166,143,.20);
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 35px rgba(5,76,67,.16);
  color: #096b60;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  pointer-events: none;
  animation: xyFloat 6s ease-in-out infinite;
}

.xy-public-3d .xy-3d-badge-one {
  top: -19px;
  right: -17px;
}

.xy-public-3d .xy-3d-badge-two {
  bottom: 9%;
  left: -24px;
  animation-delay: -3s;
}

.xy-public-3d .hero-actions .button {
  transition: transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.xy-public-3d .hero-actions .button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(5,76,67,.15);
}

@keyframes xyFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes xyEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .xy-public-3d .xy-3d-preview,
  .xy-public-3d .xy-3d-preview:hover {
    transform: none;
  }

  .xy-public-3d .xy-3d-badge {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xy-public-3d .hero-copy,
  .xy-public-3d .xy-3d-badge {
    animation: none;
  }

  .xy-public-3d .xy-3d-preview,
  .xy-public-3d .xy-3d-preview:hover,
  .xy-public-3d .xy-3d-preview .focus-card,
  .xy-public-3d .xy-3d-preview .preview-task:hover,
  .xy-public-3d .hero-actions .button:hover {
    transform: none;
  }

  .xy-public-3d .xy-3d-preview,
  .xy-public-3d .xy-3d-preview .preview-task,
  .xy-public-3d .hero-actions .button {
    transition: none;
  }
}