/* ==========================================================================
   THEEDITINGCANVAS — ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

/* Floating Badge Animation */
@keyframes float-badge {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(2deg);
  }
}

/* Status Dot Pulse */
@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 8px #4ade80;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
    box-shadow: 0 0 16px #4ade80;
  }
}

/* Ambient Radial Glow Pulse */
@keyframes glow-pulse {
  0%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(1.08);
  }
}

/* Subtle Film Grain Noise (CSS only) */
.tc-noise-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Scroll Reveal Utility Classes */
.tc-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.tc-reveal.tc-reveal-left {
  transform: translateX(-40px);
}

.tc-reveal.tc-reveal-right {
  transform: translateX(40px);
}

.tc-reveal.tc-reveal-scale {
  transform: scale(0.92);
}

.tc-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger delays */
.tc-delay-1 { transition-delay: 0.1s; }
.tc-delay-2 { transition-delay: 0.2s; }
.tc-delay-3 { transition-delay: 0.3s; }
.tc-delay-4 { transition-delay: 0.4s; }
.tc-delay-5 { transition-delay: 0.5s; }
.tc-delay-6 { transition-delay: 0.6s; }

/* --------------------------------------------------------------------------
   CINEMATIC 3D THEME TOGGLE SWITCH, IRIS REVEAL & EXPOSURE BLOOM
   -------------------------------------------------------------------------- */
.tc-theme-toggle {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(18, 20, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
  outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  z-index: 10;
}

.tc-theme-toggle::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(222, 184, 135, 0.4);
  box-shadow: 0 0 14px rgba(222, 184, 135, 0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tc-theme-toggle:hover {
  transform: scale(1.1) translateY(-1px);
  border-color: #deb887;
  box-shadow: 0 0 20px rgba(222, 184, 135, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.tc-theme-toggle:hover::before {
  opacity: 1;
}

.tc-theme-coin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tc-theme-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 50%;
}

.tc-face-moon {
  color: #c77dff;
  filter: drop-shadow(0 0 10px rgba(199, 125, 255, 0.85));
  transform: rotateY(0deg);
}

.tc-face-sun {
  color: #f59e0b;
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.95));
  transform: rotateY(180deg);
}

.tc-face-sun svg {
  animation: tc-sun-rays-spin 14s linear infinite;
}

@keyframes tc-sun-rays-spin {
  to { transform: rotate(360deg); }
}

[data-theme="light"] .tc-theme-coin {
  transform: rotateY(180deg);
}

[data-theme="light"] .tc-theme-toggle {
  background: #ffffff;
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .tc-theme-toggle:hover {
  box-shadow: 0 6px 26px rgba(245, 158, 11, 0.55);
}

/* 3D Mechanical Shutter Spring Dial Animation */
.tc-theme-toggle.animating {
  animation: tc-shutter-click 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes tc-shutter-click {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(0.82) translateZ(-25px) rotate(-15deg);
  }
  60% {
    transform: scale(1.22) translateZ(35px) rotate(15deg);
  }
  100% {
    transform: scale(1) translateZ(0) rotate(0deg);
  }
}

/* Dynamic 3D Sparks & Embers */
.tc-theme-spark {
  position: fixed;
  pointer-events: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  z-index: 999999;
  animation: tc-spark-fly 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tc-spark-fly {
  0% {
    transform: translate3d(0, 0, 0) scale(2);
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--tx), var(--ty), 0) scale(0);
    opacity: 0;
  }
}

/* Cinematic Exposure Bloom Flash */
.tc-cinema-bloom {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999998;
  mix-blend-mode: screen;
  animation: tc-bloom-pulse 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tc-bloom-pulse {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  35% {
    opacity: 0.95;
    transform: scale(1.02);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

/* Expanding Aperture Shockwave Ring */
.tc-aperture-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999997;
  transform: translate(-50%, -50%);
  animation: tc-aperture-expand 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes tc-aperture-expand {
  0% {
    width: 0px;
    height: 0px;
    opacity: 1;
    border: 3px solid #ffffff;
    box-shadow: 0 0 35px #ffffff, inset 0 0 25px #c77dff;
  }
  100% {
    width: 320vmax;
    height: 320vmax;
    opacity: 0;
    border: 1px solid rgba(255, 255, 255, 0);
    box-shadow: 0 0 80px rgba(199, 125, 255, 0);
  }
}

/* Native View Transition Circular Iris Expansion */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 99999;
  animation: tc-cinema-iris-open 0.68s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes tc-cinema-iris-open {
  from {
    clip-path: circle(0px at var(--click-x, 90vw) var(--click-y, 40px));
  }
  to {
    clip-path: circle(150vmax at var(--click-x, 90vw) var(--click-y, 40px));
  }
}


/* Accessible Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .tc-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .tc-floating-badge {
    animation: none !important;
  }
}