/* ── Art direction — 3D & atmospheric effects ── */

.art-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body {
  position: relative;
}

body > header,
body > section,
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

.nav {
  z-index: 100;
}

.grain,
.cursor-glow {
  z-index: 9998;
}

.grain {
  z-index: 9999;
}

.art-aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 45% 35% at 20% 30%, rgba(110, 231, 255, 0.09), transparent 55%),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(167, 139, 250, 0.07), transparent 50%),
    radial-gradient(ellipse 50% 40% at 60% 80%, rgba(45, 90, 160, 0.08), transparent 55%);
  filter: blur(40px);
  animation: aurora-drift 18s ease-in-out infinite alternate;
  opacity: 0.85;
}

@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.06); }
}

/* ── Hero art ── */
.hero__beam {
  position: absolute;
  top: -10%;
  width: 1px;
  height: 120%;
  background: linear-gradient(to bottom, transparent, rgba(110, 231, 255, 0.35), transparent);
  opacity: 0.4;
  filter: blur(0.5px);
  animation: beam-pulse 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.hero__beam--1 { left: 18%; animation-delay: 0s; }
.hero__beam--2 { left: 42%; opacity: 0.25; animation-delay: -2s; }
.hero__beam--3 { right: 22%; animation-delay: -4s; }

@keyframes beam-pulse {
  0%, 100% { opacity: 0.15; transform: scaleY(0.85); }
  50% { opacity: 0.45; transform: scaleY(1); }
}

.hero__shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  perspective: 900px;
}

.art-shape {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* Floating ring */
.art-shape--ring {
  width: 280px;
  height: 280px;
  top: 12%;
  right: 8%;
  border-radius: 50%;
  border: 1px solid rgba(110, 231, 255, 0.15);
  box-shadow:
    inset 0 0 60px rgba(45, 90, 160, 0.15),
    0 0 80px rgba(110, 231, 255, 0.06);
  animation: ring-float 14s ease-in-out infinite;
}

.art-shape--ring::before {
  content: '';
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed rgba(110, 231, 255, 0.12);
  animation: ring-spin 24s linear infinite;
}

.art-shape--ring::after {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.08);
}

@keyframes ring-float {
  0%, 100% { transform: translateY(0) rotateX(65deg) rotateZ(0deg); }
  50% { transform: translateY(-20px) rotateX(65deg) rotateZ(12deg); }
}

@keyframes ring-spin {
  to { transform: rotateZ(360deg); }
}

/* 3D wireframe cube */
.art-cube-scene {
  position: absolute;
  bottom: 18%;
  left: 6%;
  width: 90px;
  height: 90px;
  perspective: 400px;
  animation: cube-float 12s ease-in-out infinite;
}

.art-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-rotate 20s linear infinite;
}

.art-cube__face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(110, 231, 255, 0.25);
  background: rgba(45, 90, 160, 0.06);
  backdrop-filter: blur(2px);
}

.art-cube__face--front  { transform: translateZ(45px); }
.art-cube__face--back   { transform: rotateY(180deg) translateZ(45px); }
.art-cube__face--right  { transform: rotateY(90deg) translateZ(45px); }
.art-cube__face--left   { transform: rotateY(-90deg) translateZ(45px); }
.art-cube__face--top    { transform: rotateX(90deg) translateZ(45px); }
.art-cube__face--bottom { transform: rotateX(-90deg) translateZ(45px); }

@keyframes cube-rotate {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to { transform: rotateX(-18deg) rotateY(360deg); }
}

@keyframes cube-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Prism shard */
.art-shape--prism {
  width: 120px;
  height: 160px;
  bottom: 25%;
  right: 4%;
  background: linear-gradient(135deg, rgba(110, 231, 255, 0.12), rgba(167, 139, 250, 0.08), transparent);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  border: none;
  filter: blur(0.3px);
  animation: prism-float 10s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes prism-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.5; }
  50% { transform: translateY(-24px) rotate(4deg); opacity: 0.85; }
}

/* Hero title shimmer line */
.hero__title-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 0;
  left: -20px;
  background: radial-gradient(circle, rgba(110, 231, 255, 0.12), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  z-index: -1;
}

.hero__content {
  position: relative;
}

/* Showcase holographic edge */
.showcase-card__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(110, 231, 255, 0.4),
    transparent 30%,
    transparent 70%,
    rgba(167, 139, 250, 0.3)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
  z-index: 4;
}

.showcase-card:hover .showcase-card__frame::after,
.showcase-card.is-active .showcase-card__frame::after {
  opacity: 1;
}

/* Editorial holographic frame */
.work-item--editorial .work-item__frame {
  position: relative;
}

.work-item--editorial .work-item__frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--frame-angle, 0deg),
    rgba(110, 231, 255, 0.5),
    rgba(45, 90, 160, 0.1),
    rgba(167, 139, 250, 0.4),
    rgba(110, 231, 255, 0.5)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
  z-index: 5;
  animation: frame-rotate 4s linear infinite;
  animation-play-state: paused;
}

.work-item--editorial:hover .work-item__frame::before {
  opacity: 1;
  animation-play-state: running;
}

@property --frame-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes frame-rotate {
  to { --frame-angle: 360deg; }
}

/* Section atmosphere orbs */
.section-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.works .section-orb--1 {
  width: 400px;
  height: 400px;
  top: -10%;
  right: -5%;
  background: rgba(45, 90, 160, 0.12);
}

.services .section-orb--1 {
  width: 500px;
  height: 500px;
  bottom: -15%;
  left: -10%;
  background: rgba(167, 139, 250, 0.08);
}

.contact .section-orb--1 {
  width: 350px;
  height: 350px;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(110, 231, 255, 0.08);
}

.works,
.services,
.contact {
  position: relative;
  overflow: hidden;
}

.works > *:not(.section-orb),
.services__inner,
.contact__inner {
  position: relative;
  z-index: 1;
}

/* Service card 3D ready */
.service-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.35s var(--ease), border-color 0.35s;
}

.service-card__tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--tilt-x, 50%) var(--tilt-y, 50%),
    rgba(110, 231, 255, 0.12),
    transparent 55%
  );
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 0;
}

.service-card:hover .service-card__tilt-shine {
  opacity: 1;
}

/* Train card art border */
.train-card {
  transform-style: preserve-3d;
}

.train-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(110, 231, 255, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.35s;
}

.train-card:hover::after {
  opacity: 1;
}

/* Page inner art */
.page-inner .page-hero__bg::before {
  content: '';
  position: absolute;
  top: 20%;
  right: 10%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1px solid rgba(110, 231, 255, 0.1);
  animation: ring-float 16s ease-in-out infinite;
  opacity: 0.5;
}

/* Footer glow handled in .footer__glow */

/* Cursor glow enhanced */
.cursor-glow {
  width: 500px;
  height: 500px;
  background:
    radial-gradient(circle, rgba(110, 231, 255, 0.08) 0%, rgba(45, 90, 160, 0.05) 35%, transparent 70%);
  mix-blend-mode: screen;
}

@media (max-width: 1024px) {
  .art-shape--ring,
  .art-cube-scene,
  .art-shape--prism,
  .hero__beam {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-aurora,
  .art-shape,
  .art-cube,
  .hero__beam,
  .work-item--editorial .work-item__frame::before {
    animation: none !important;
  }

  .work-item--editorial:hover .work-item__frame::before {
    opacity: 0.5;
    animation: none;
  }
}