/* ==========================================================================
   Cinematic Elementor Widgets — Global Shared CSS
   Version: 1.0.0
   ========================================================================== */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
  --cev-accent:       #00d4ff;
  --cev-accent-2:     #7b2fff;
  --cev-dark:         #0a0a14;
  --cev-dark-2:       #141420;
  --cev-text:         #ffffff;
  --cev-text-muted:   rgba(255, 255, 255, 0.5);
  --cev-transition:   cubic-bezier(0.19, 1, 0.22, 1);
  --cev-gpu:          translateZ(0);
}

/* ── Fullscreen Mode ─────────────────────────────────────────────────────── */
.cev-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  /* Override Elementor section max-width constraints */
  max-width: none !important;
}

/* Fullscreen — when inside Elementor container, escape it */
.elementor-section .cev-fullscreen,
.e-con .cev-fullscreen,
.e-con-inner .cev-fullscreen {
  position: fixed !important;
  width: 100vw !important;
  height: 100vh !important;
  left: 0 !important;
  top: 0 !important;
}

/* ── Base Widget Shell ───────────────────────────────────────────────────── */
.cev-widget {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  transform: var(--cev-gpu); /* promote to GPU layer */
}

/* Layout Types */
.cev-widget[data-cev*='"widget"'] {
  display: block;
}

/* ── GPU Acceleration Utility ────────────────────────────────────────────── */
.cev-animated,
.cev-animated * {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ── Keyframe Animations ─────────────────────────────────────────────────── */
@keyframes cev-float {
  from { transform: translateY(0px); }
  to   { transform: translateY(-20px); }
}

@keyframes cev-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cev-fade-in-scale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes cev-pulse-ring {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes cev-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes cev-spin-reverse {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes cev-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes cev-scan-line {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes cev-glitch-1 {
  0%  { clip-path: inset(20% 0 30% 0); transform: translate(-4px, 0); }
  25% { clip-path: inset(60% 0 10% 0); transform: translate(4px, 0); }
  50% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 0); }
  75% { clip-path: inset(40% 0 20% 0); transform: translate(2px, 0); }
  100%{ clip-path: inset(0);           transform: translate(0); }
}

@keyframes cev-typewriter-cursor {
  from { border-right-color: var(--cev-accent); }
  to   { border-right-color: transparent; }
}

@keyframes cev-scroll-wheel {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(8px); }
}

/* ── Device Visibility Utilities ─────────────────────────────────────────── */
@media (min-width: 1025px) {
  .cev-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .cev-hide-tablet  { display: none !important; }
}
@media (max-width: 767px) {
  .cev-hide-mobile  { display: none !important; }
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cev-animated,
  .cev-animated * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    will-change: auto !important;
  }
}

/* ── Editor Badge (Scroll Controller visible hint) ───────────────────────── */
.elementor-editor-active .cev-controller-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px dashed rgba(0, 212, 255, 0.4);
  border-radius: 6px;
  color: rgba(0, 212, 255, 0.8);
  font-size: 12px;
  letter-spacing: 1px;
  text-align: center;
  min-height: 80px;
}

.elementor-editor-active .cev-controller-badge code {
  background: rgba(0, 212, 255, 0.15);
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  margin-left: 6px;
}

.elementor-editor-active .cev-controller-badge em {
  margin-top: 6px;
  opacity: 0.6;
  font-style: normal;
}