/* =========================================================
   VAREA MOTION SYSTEM
   Site genelinde kullanılan animasyon / etkileşim katmanı.
   Mevcut style.css'i değiştirmez, üzerine eklenir.
   ========================================================= */

:root {
  --vm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --vm-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --vm-duration: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------
   1. Scroll reveal
   --------------------------------------------------------- */

[data-vm] {
  opacity: 0;
  transition: opacity var(--vm-duration) var(--vm-ease),
    transform var(--vm-duration) var(--vm-ease),
    filter var(--vm-duration) var(--vm-ease);
  transition-delay: var(--vm-delay, 0s);
  will-change: transform, opacity;
  filter: blur(6px);
}

[data-vm="up"] { transform: translateY(46px); }
[data-vm="down"] { transform: translateY(-36px); }
[data-vm="left"] { transform: translateX(-52px); }
[data-vm="right"] { transform: translateX(52px); }
[data-vm="scale"] { transform: scale(0.88); }
[data-vm="fade"] { transform: none; }

[data-vm].vm-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ---------------------------------------------------------
   2. 3D tilt kartlar
   --------------------------------------------------------- */

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

.vm-tilt-glow {
  position: relative;
  overflow: hidden;
}

.vm-tilt-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    circle at var(--vm-mx, 50%) var(--vm-my, 50%),
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0) 55%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.vm-tilt-glow.vm-glow-active::after {
  opacity: 1;
}

/* ---------------------------------------------------------
   3. Mıknatıs butonlar + ripple
   --------------------------------------------------------- */

.vm-magnetic {
  will-change: transform;
}

.vm-ripple-host {
  position: relative;
  overflow: hidden;
}

.vm-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  opacity: 0.7;
  pointer-events: none;
  animation: vmRippleAnim 0.7s var(--vm-ease-soft) forwards;
  z-index: 2;
}

@keyframes vmRippleAnim {
  to {
    transform: scale(3);
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   4. Scroll ilerleme çubuğu
   --------------------------------------------------------- */

.vm-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9997;
  background: linear-gradient(90deg, var(--clay, #b5785f), var(--brown, #66463b));
  box-shadow: 0 0 12px rgba(181, 120, 95, 0.6);
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ---------------------------------------------------------
   5. İmleç ışığı (yalnızca fare/masaüstü)
   --------------------------------------------------------- */

.vm-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(181, 120, 95, 0.22),
    rgba(181, 120, 95, 0) 68%
  );
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}

.vm-cursor-glow.vm-visible {
  opacity: 1;
}

/* ---------------------------------------------------------
   6. Sayfa geçiş perdesi
   --------------------------------------------------------- */

.vm-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: linear-gradient(160deg, #25211f 0%, #66463b 100%);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

.vm-overlay::before {
  content: "VAREA";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif, serif);
  letter-spacing: 0.3em;
  font-size: 13px;
  color: rgba(248, 244, 238, 0.75);
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}

.vm-overlay.vm-show-mark::before {
  opacity: 1;
}

.vm-overlay.vm-out {
  transform: scaleY(0);
  transform-origin: bottom;
}

/* ---------------------------------------------------------
   7. Parallax hero katmanı
   --------------------------------------------------------- */

.vm-parallax {
  transition: transform 0.2s var(--vm-ease-soft);
  will-change: transform;
}

/* ---------------------------------------------------------
   8. Hero şişe — interaktif 3D vitrin
   --------------------------------------------------------- */

.bottle-3d-wrap {
  position: absolute;
  z-index: 2;
  right: 29%;
  bottom: 42px;
  width: 263px;
  height: 421px;
  perspective: 1400px;
}

.bottle-3d-wrap .large-bottle {
  position: relative;
  right: auto;
  bottom: auto;
  transform-style: preserve-3d;
}

.bottle-3d-wrap.vm-bottle-idle {
  animation: vmBottleIdleRotate 9s ease-in-out infinite;
}

.bottle-3d-wrap:not(.vm-bottle-idle) {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes vmBottleIdleRotate {
  0%, 100% { transform: rotateY(-9deg) rotateX(2deg); }
  50% { transform: rotateY(9deg) rotateX(-1deg); }
}

/* Cam üzerinde kayan ışık huzmesi */
.bottle-body {
  position: relative;
  overflow: hidden;
}

.bottle-body::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 45%;
  height: 180%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(18deg);
  animation: vmBottleShine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes vmBottleShine {
  0% { left: -60%; }
  35%, 100% { left: 140%; }
}

/* Şişe etrafındaki parıltılar */
.vm-sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 230, 0.95), rgba(255, 244, 230, 0));
  opacity: 0;
  pointer-events: none;
  animation: vmSparkleTwinkle 3.2s ease-in-out infinite;
}

@keyframes vmSparkleTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---------------------------------------------------------
   10. Custom parfüm sayfası — form & önizleme efektleri
   --------------------------------------------------------- */

.note-btn.selected {
  animation: vmNotePop 0.4s var(--vm-ease-soft);
}

@keyframes vmNotePop {
  0% { transform: scale(0.85); }
  55% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.color-picker-btn {
  transition: transform 0.25s var(--vm-ease-soft), box-shadow 0.25s ease;
}

.color-picker-btn.vm-color-active {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--clay, #b5785f);
}

#roles-section {
  overflow: hidden;
}

#roles-section.vm-roles-in {
  animation: vmRolesReveal 0.55s var(--vm-ease);
}

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

.glass-bottle {
  animation: vmGlassFloat 4.5s ease-in-out infinite;
  transition: transform 0.3s var(--vm-ease-soft);
}

.glass-bottle::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -70%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(18deg);
  animation: vmBottleShine 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 4;
}

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

.liquid-mock {
  transition: background-color 0.6s ease;
}

.liquid-mock.vm-liquid-pulse {
  animation: vmLiquidPulse 0.7s ease;
}

@keyframes vmLiquidPulse {
  0% { filter: brightness(1); }
  40% { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

.summary-box span {
  display: inline-block;
  transition: transform 0.3s var(--vm-ease-soft), color 0.3s ease;
}

.summary-box.vm-summary-pulse span {
  animation: vmSummaryPop 0.4s var(--vm-ease-soft);
}

@keyframes vmSummaryPop {
  0% { transform: translateY(4px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 1; }
}

#submit-btn.vm-sent {
  animation: vmSentPulse 0.6s ease;
}

@keyframes vmSentPulse {
  0% { box-shadow: 0 0 0 0 rgba(181, 120, 95, 0.55); }
  100% { box-shadow: 0 0 0 18px rgba(181, 120, 95, 0); }
}

/* ---------------------------------------------------------
   11. Duyarlı ayarlar
   --------------------------------------------------------- */

@media (pointer: coarse) {
  .vm-cursor-glow {
    display: none;
  }
}

@media (max-width: 780px) {
  [data-vm="left"],
  [data-vm="right"] {
    transform: translateY(30px);
  }
}