/* 23G — Arka plan döngüsü + imleç + scroll (göz yormayan yoğunluk) */

:root {
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-glow: rgba(78, 207, 143, 0.28);
  --motion-gold: rgba(212, 168, 83, 0.2);
}

/* --- Sürekli arka plan döngüsü --- */
.motion-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.motion-aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 55% 45% at 20% 30%, rgba(60, 140, 80, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(100, 180, 220, 0.08), transparent 50%),
    radial-gradient(ellipse 40% 35% at 50% 80%, rgba(45, 100, 55, 0.1), transparent 60%);
  animation: motion-aurora-drift 42s ease-in-out infinite alternate;
}

@keyframes motion-aurora-drift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.75; }
  50% { transform: translate(2%, -1.5%) scale(1.03); opacity: 0.9; }
  100% { transform: translate(-1.5%, 2%) scale(1.01); opacity: 0.8; }
}

.motion-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.22;
  will-change: transform;
}

.motion-orb--1 {
  width: min(36vw, 320px);
  height: min(36vw, 320px);
  top: 8%;
  left: -6%;
  background: radial-gradient(circle, rgba(78, 207, 143, 0.35), transparent 70%);
  animation: motion-orb-float-1 28s ease-in-out infinite;
}

.motion-orb--2 {
  width: min(28vw, 240px);
  height: min(28vw, 240px);
  bottom: 12%;
  right: -4%;
  background: radial-gradient(circle, rgba(45, 120, 160, 0.3), transparent 70%);
  animation: motion-orb-float-2 34s ease-in-out infinite;
}

.motion-orb--3 {
  width: min(22vw, 180px);
  height: min(22vw, 180px);
  top: 45%;
  left: 42%;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.18), transparent 70%);
  animation: motion-orb-float-3 22s ease-in-out infinite;
}

@keyframes motion-orb-float-1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(4vw, 3vh); }
}

@keyframes motion-orb-float-2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3vw, -2vh); }
}

@keyframes motion-orb-float-3 {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(calc(-50% + 2vw), calc(-50% - 2vh)); }
}

#motion-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.42;
}

.motion-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 30%, rgba(6, 14, 20, 0.35) 100%);
  pointer-events: none;
}

.motion-scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.04) 3px,
    rgba(255, 255, 255, 0.04) 4px
  );
  animation: motion-scan-drift 12s linear infinite;
}

@keyframes motion-scan-drift {
  0% { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

/* Parallax — hafif */
body.motion-parallax .app-bg-layer {
  transform: translate(
    calc((var(--mx, 0.5) - 0.5) * 14px),
    calc((var(--my, 0.5) - 0.5) * 10px)
  );
  transition: transform 0.35s ease-out;
}

/* İmleç — küçük takip dairesi */
.motion-cursor-glow {
  position: fixed;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, var(--motion-glow) 0%, transparent 68%);
  opacity: 0.35;
  mix-blend-mode: screen;
  transition: opacity 0.25s ease;
}

.motion-cursor-ring {
  position: fixed;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  border: 1.5px solid rgba(120, 220, 170, 0.55);
  box-shadow: 0 0 10px rgba(78, 207, 143, 0.2);
  transition: transform 0.12s ease, border-color 0.2s ease;
}

body.motion-pointer-down .motion-cursor-ring {
  transform: scale(0.88);
  border-color: rgba(212, 168, 83, 0.65);
}

.motion-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: calc(var(--scroll-p, 0) * 100%);
  background: linear-gradient(90deg, rgba(78, 207, 143, 0.5), rgba(212, 168, 83, 0.35));
  z-index: 10000;
  pointer-events: none;
  opacity: 0.65;
}

/* Sayfa geçişi */
.spa-view.motion-view-enter {
  animation: motion-view-in 0.5s var(--motion-ease-out) forwards;
}

@keyframes motion-view-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--motion-ease-out), transform 0.6s var(--motion-ease-out);
}

[data-reveal].motion-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="left"] { transform: translateX(-16px); }
[data-reveal="left"].motion-revealed { transform: translateX(0); }

[data-reveal-delay="1"] { transition-delay: 0.05s; }
[data-reveal-delay="2"] { transition-delay: 0.1s; }
[data-reveal-delay="3"] { transition-delay: 0.15s; }
[data-reveal-delay="4"] { transition-delay: 0.2s; }

.hero__inner[data-hero-stagger] > *,
.hero__inner[data-hero-stagger] .hero__copy > * {
  opacity: 0;
  transform: translateY(16px);
  animation: motion-hero-in 0.65s var(--motion-ease-out) forwards;
}

.hero__inner[data-hero-stagger] .hero__copy > *:nth-child(1) { animation-delay: 0.04s; }
.hero__inner[data-hero-stagger] .hero__copy > *:nth-child(2) { animation-delay: 0.1s; }
.hero__inner[data-hero-stagger] .hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
.hero__inner[data-hero-stagger] .hero__copy > *:nth-child(4) { animation-delay: 0.22s; }
.hero__inner[data-hero-stagger] .hero__copy > *:nth-child(5) { animation-delay: 0.28s; }
.hero__inner[data-hero-stagger] .hero__copy > *:nth-child(6) { animation-delay: 0.34s; }
.hero__inner[data-hero-stagger] .hero__copy > *:nth-child(7) { animation-delay: 0.4s; }
.hero__inner[data-hero-stagger] > .hero__visual { animation-delay: 0.18s; }

@keyframes motion-hero-in {
  to { opacity: 1; transform: translateY(0); }
}

.feature-card,
.metric-card,
.store-grid .store-card {
  transition: transform 0.28s var(--motion-ease-out), box-shadow 0.28s ease;
}

.feature-card:hover,
.metric-card:hover,
.store-grid .store-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.app-header,
.dash-topbar {
  transition: box-shadow 0.3s ease;
}

body.motion-scrolled .app-header,
body.motion-scrolled .dash-topbar {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* --- Ziyaretçi ana sayfa (premium, ~2 sürüm önce) --- */
body.motion-home-active .motion-aurora {
  opacity: 1;
}

body.motion-home-active .motion-orb {
  opacity: 0.34;
}

body.motion-home-active #motion-canvas {
  opacity: 0.52;
}

body.motion-dashboard-active .motion-orb {
  opacity: 0.14;
}

body.motion-dashboard-active #motion-canvas {
  opacity: 0.28;
}

body.motion-intro .hero--tobacco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(120, 255, 190, 0.12) 50%, transparent 60%);
  animation: motion-hero-shine 1.3s ease-out forwards;
  pointer-events: none;
}

@keyframes motion-hero-shine {
  0% { transform: translateX(-100%); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

#view-home .irrigation-block--link {
  transition: transform 0.35s var(--motion-ease-out), box-shadow 0.35s ease;
}

#view-home .irrigation-block--link:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.motion-tilt-target {
  transform-style: preserve-3d;
  will-change: transform;
}

.motion-tilt.motion-tilt-target {
  transition: transform 0.12s ease-out;
  transform: perspective(900px) rotateY(var(--motion-tilt-x, 0deg)) rotateX(var(--motion-tilt-y, 0deg));
}

/* Ana sayfa kartları — imleç takibi */
#view-home .feature-card.motion-home-card-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translate(0, 0);
}

#view-home .feature-card.motion-home-card-tilt.motion-tilt {
  transition: transform 0.07s ease-out, box-shadow 0.25s ease;
  transform: perspective(1000px)
    rotateY(var(--motion-tilt-x, 0deg))
    rotateX(var(--motion-tilt-y, 0deg))
    translate(var(--motion-tilt-tx, 0px), var(--motion-tilt-ty, 0px));
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(78, 207, 143, 0.2);
}

#view-home .feature-card.motion-home-card-tilt.motion-tilt::before {
  opacity: 1 !important;
  transform: scale(1) !important;
}

#view-home .feature-card.motion-home-card-tilt .img-wrap {
  overflow: hidden;
}

#view-home .feature-card.motion-home-card-tilt .img-wrap img {
  transition: transform 0.12s ease-out;
}

#view-home .feature-card.motion-home-card-tilt.motion-tilt .img-wrap img {
  transform: scale(1.08) translate(
    calc((var(--motion-tilt-mx, 50%) - 50%) * 0.04),
    calc((var(--motion-tilt-my, 50%) - 50%) * 0.04)
  );
}

/* Parallax hero — tarla derinliği */
body.motion-home-active .hero--tobacco {
  background-attachment: scroll;
}

body.motion-parallax.motion-home-active .hero--tobacco .hero__bg {
  background-position: calc(50% + (var(--mx, 0.5) - 0.5) * 20px) calc(50% + (var(--my, 0.5) - 0.5) * 12px);
  transition: background-position 0.4s ease-out;
}

.section-title[data-reveal].motion-revealed {
  text-shadow: 0 0 24px rgba(78, 207, 143, 0.15);
}

.motion-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(120, 255, 190, 0.35);
  transform: scale(0);
  animation: motion-ripple-out 0.65s ease-out forwards;
  pointer-events: none;
}

@keyframes motion-ripple-out {
  to {
    transform: scale(2.2);
    opacity: 0;
  }
}

[data-reveal="scale"] {
  transform: scale(0.94);
}

[data-reveal="scale"].motion-revealed {
  transform: scale(1);
}

body.motion-touch-ui .motion-cursor-glow,
body.motion-touch-ui .motion-cursor-ring {
  display: none !important;
}

@media (pointer: coarse) and (hover: none) {
  .motion-cursor-glow,
  .motion-cursor-ring {
    display: none !important;
  }
}

body.motion-parallax:not(.motion-touch-ui) .motion-hills {
  transform: translate(
    calc((var(--mx, 0.5) - 0.5) * 14px),
    calc((var(--my, 0.5) - 0.5) * 5px)
  );
  transition: transform 0.35s ease-out;
}

body.motion-parallax:not(.motion-touch-ui) .motion-aurora {
  transform: translate(
    calc((var(--mx, 0.5) - 0.5) * 10px),
    calc((var(--my, 0.5) - 0.5) * 8px)
  );
  transition: transform 0.35s ease-out;
}

body.motion-touch-ui.motion-parallax .app-bg-layer {
  transform: translate(
    calc((var(--mx, 0.5) - 0.5) * 22px),
    calc((var(--my, 0.5) - 0.5) * 16px)
  );
  transition: transform 0.18s ease-out;
}

body.motion-touch-ui .motion-hills {
  transform: translate(
    calc((var(--mx, 0.5) - 0.5) * 18px),
    calc((var(--my, 0.5) - 0.5) * 6px)
  );
  transition: transform 0.18s ease-out;
}

body.motion-touch-ui .motion-aurora {
  transform: translate(
    calc((var(--mx, 0.5) - 0.5) * 12px),
    calc((var(--my, 0.5) - 0.5) * 10px)
  );
  transition: transform 0.25s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .motion-aurora,
  .motion-orb,
  .motion-scanlines,
  #motion-canvas,
  .motion-cursor-glow,
  .motion-cursor-ring {
    animation: none !important;
    display: none !important;
  }

  [data-reveal],
  .hero__inner[data-hero-stagger] > *,
  .spa-view.motion-view-enter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  body.motion-parallax .app-bg-layer {
    transform: none !important;
  }
}