/* ============================================
   V2Bot Landing - Jarvis Hologram Styles
   Version: 2.0
   ============================================ */

/* ============================================
   JARVIS CONTAINER
   ============================================ */
.jarvis-hologram {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease-out;
    will-change: transform;

    /* Custom property for rotation speed */
    --rotation-speed-multiplier: 1;
}

.jarvis-hologram svg {
    overflow: visible;
}

/* ============================================
   GLOW EFFECTS
   ============================================ */
.jarvis-hologram::before {
    content: '';
    position: absolute;
    inset: -50px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(212, 168, 83, 0.15) 0%,
        rgba(0, 212, 255, 0.1) 30%,
        transparent 70%
    );
    pointer-events: none;
    animation: jarvisAmbientGlow 4s ease-in-out infinite;
}

.jarvis-hologram::after {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 212, 255, 0.2) 0%,
        transparent 60%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.jarvis-hologram:hover::after {
    opacity: 1;
}

@keyframes jarvisAmbientGlow {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* ============================================
   PULSE ANIMATION
   ============================================ */
.jarvis-hologram.jarvis-pulse::before {
    animation: jarvisPulse 0.5s ease-out;
}

@keyframes jarvisPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

/* ============================================
   RING ANIMATIONS (when active)
   ============================================ */
/* Ring rotation is handled by GSAP with svgOrigin for proper centering */
/* CSS animation fallback only if GSAP not available */
.jarvis-hologram.jarvis-active.no-gsap #jarvis-outer-ring {
    animation: outerRingRotate calc(15s / var(--rotation-speed-multiplier)) linear infinite;
}

.jarvis-hologram.jarvis-active.no-gsap #jarvis-inner-ring {
    animation: innerRingRotate calc(20s / var(--rotation-speed-multiplier)) linear infinite;
}

@keyframes outerRingRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

/* ============================================
   NODE ANIMATIONS
   ============================================ */
.jarvis-hologram.jarvis-active .jarvis-node {
    animation: nodeGlow 2s ease-in-out infinite;
}

.jarvis-hologram.jarvis-active .jarvis-node--gold {
    animation-delay: 0s;
}

.jarvis-hologram.jarvis-active .jarvis-node--cyan {
    animation-delay: 0.5s;
}

.jarvis-hologram.jarvis-active .jarvis-node--orange {
    animation-delay: 1s;
}

@keyframes nodeGlow {
    0%, 100% {
        opacity: 0.7;
        r: 5;
    }
    50% {
        opacity: 1;
        r: 7;
    }
}

/* ============================================
   CIRCUIT FLOW ANIMATION
   ============================================ */
.jarvis-hologram.jarvis-active .jarvis-circuit-path {
    animation: circuitFlow 3s linear infinite;
}

@keyframes circuitFlow {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: -100;
    }
}

/* ============================================
   CORE TEXT GLOW
   ============================================ */
.jarvis-hologram.jarvis-active #jarvis-core-text {
    animation: coreTextGlow 3s ease-in-out infinite;
}

@keyframes coreTextGlow {
    0%, 100% {
        filter: url(#jarvis-glow-strong);
    }
    50% {
        filter: url(#jarvis-glow-strong) brightness(1.2);
    }
}

/* ============================================
   HIDDEN STATE (after scroll)
   ============================================ */
.jarvis-hologram.jarvis-hidden {
    pointer-events: none;
    visibility: hidden;
}

/* ============================================
   FALLBACK STYLES (no SVG)
   ============================================ */
.jarvis-hologram--fallback {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jarvis-fallback-outer {
    position: absolute;
    width: 90%;
    height: 90%;
    border: 4px solid var(--gold-primary);
    border-radius: 50%;
    box-shadow: 0 0 30px var(--gold-glow);
    animation: outerRingRotate 15s linear infinite;
}

.jarvis-fallback-inner {
    position: absolute;
    width: 70%;
    height: 70%;
    border: 3px solid var(--cyan-primary);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--cyan-glow);
    animation: innerRingRotate 20s linear infinite;
}

.jarvis-fallback-core {
    font-family: var(--font-heading);
    font-size: 80px;
    font-weight: 700;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px var(--gold-glow);
    z-index: 1;
}

/* ============================================
   ENTRY ANIMATION CSS FALLBACK
   ============================================ */
.jarvis-hologram.jarvis-entry #jarvis-outer-ring,
.jarvis-hologram.jarvis-entry #jarvis-inner-ring,
.jarvis-hologram.jarvis-entry #jarvis-core-text,
.jarvis-hologram.jarvis-entry #jarvis-circuit-lines,
.jarvis-hologram.jarvis-entry #jarvis-glow-nodes {
    transform-origin: 250px 250px;
    transform-box: view-box;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .jarvis-hologram {
        width: 380px !important;
        height: 380px !important;
    }
}

@media (max-width: 768px) {
    .jarvis-hologram {
        width: 280px !important;
        height: 280px !important;
    }

    .jarvis-hologram::before {
        inset: -30px;
    }

    .jarvis-fallback-core {
        font-size: 50px;
    }

    /* Simplify animations on mobile */
    .jarvis-hologram.jarvis-active #jarvis-outer-ring {
        animation-duration: 20s;
    }

    .jarvis-hologram.jarvis-active #jarvis-inner-ring {
        animation-duration: 25s;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .jarvis-hologram::before {
        animation: none;
    }

    .jarvis-hologram.jarvis-active #jarvis-outer-ring,
    .jarvis-hologram.jarvis-active #jarvis-inner-ring {
        animation: none;
    }

    .jarvis-hologram.jarvis-active .jarvis-node {
        animation: none;
    }

    .jarvis-hologram.jarvis-active .jarvis-circuit-path {
        animation: none;
    }
}

/* ============================================
   LAYERED VERSION (Video + SVG overlays)
   ============================================ */
.jarvis-hologram--layered {
    position: relative;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layer 1: Video base */
.jarvis-video-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
    /* Glow effect */
    filter: drop-shadow(0 0 20px rgba(212, 168, 83, 0.5))
            drop-shadow(0 0 40px rgba(0, 212, 255, 0.3));
}

/* Layer 2: SVG rings overlay */
.jarvis-rings-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Rotating rings animation */
.jarvis-overlay-ring {
    transform-origin: 250px 250px;
    animation: overlayRingRotate 20s linear infinite;
}

.jarvis-overlay-ring--reverse {
    animation: overlayRingRotateReverse 25s linear infinite;
}

@keyframes overlayRingRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* Glow nodes pulse */
.jarvis-overlay-node {
    animation: nodeGlowPulse 2s ease-in-out infinite;
}

.jarvis-overlay-node:nth-child(odd) {
    animation-delay: 0.5s;
}

@keyframes nodeGlowPulse {
    0%, 100% { opacity: 0.6; r: 4; }
    50% { opacity: 1; r: 6; }
}

/* ============================================
   MULTI-LAYER VERSION (Rotating Bezel)
   ============================================ */
.jarvis-multilayer {
    position: relative;
    width: 500px;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layer 1: Rotating bezel/ring (cream bg version) */
.jarvis-layer-bezel {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    animation: bezelRotate 30s linear infinite;
    /* Glow effect on the ring */
    filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.4))
            drop-shadow(0 0 20px rgba(212, 168, 83, 0.2));
}

.jarvis-layer-bezel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes bezelRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Layer 3: Static V2Bot text */
.jarvis-layer-text {
    position: absolute;
    width: 60%;
    height: 60%;
    z-index: 3;
    /* Glow effect */
    filter: drop-shadow(0 0 15px rgba(212, 168, 83, 0.5))
            drop-shadow(0 0 30px rgba(0, 212, 255, 0.3));
}

.jarvis-layer-text img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Ambient glow behind everything */
.jarvis-multilayer::before {
    content: '';
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(212, 168, 83, 0.15) 0%,
        rgba(0, 212, 255, 0.1) 40%,
        transparent 70%
    );
    z-index: 0;
    animation: ambientPulse 4s ease-in-out infinite;
}

@keyframes ambientPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* Hover effect - speed up rotation */
.jarvis-multilayer:hover .jarvis-layer-bezel {
    animation-duration: 15s;
}

/* Responsive */
@media (max-width: 1024px) {
    .jarvis-multilayer {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 768px) {
    .jarvis-multilayer {
        width: 300px;
        height: 300px;
    }

    .jarvis-layer-bezel {
        animation-duration: 40s;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .jarvis-layer-bezel {
        animation: none;
    }

    .jarvis-multilayer::before {
        animation: none;
    }
}

/* ============================================
   VIDEO VERSION (legacy)
   ============================================ */
.jarvis-hologram--video {
    position: relative;
    width: 340px;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible; /* Allow bezel to overflow */
}

.jarvis-video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(212, 168, 83, 0.25))
            drop-shadow(0 0 12px rgba(0, 212, 255, 0.15));
    z-index: 2;
}

/* Bezel layer - behind video, rotating clockwise */
/* Bezel ratio: 807/685 = 1.178 = 117.8% of container */
.jarvis-bezel {
    position: absolute;
    width: 117.8%;
    height: 117.8%;
    max-width: none; /* Override global img max-width: 100% */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 1;
    animation: bezelRotateClockwise 60s linear infinite;
    filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.3));
}

@keyframes bezelRotateClockwise {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Ears layer - on top of video, static */
.jarvis-ears {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 3;
    pointer-events: none;
}

/* Glow ring around video - minimal and soft */
.jarvis-hologram--video::before {
    content: '';
    position: absolute;
    inset: 30px;  /* much smaller area */
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(212, 168, 83, 0.08),
        rgba(0, 212, 255, 0.08),
        rgba(212, 168, 83, 0.08)
    );
    filter: blur(12px);  /* soft edges */
    animation: jarvisVideoGlow 8s linear infinite;
    z-index: -1;
}

/* Circular clip - makes corners truly transparent (on video only, not ears) */
.jarvis-video {
    clip-path: circle(50% at center);
    -webkit-clip-path: circle(50% at center);
}

@keyframes jarvisVideoGlow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive video */
@media (max-width: 1024px) {
    .jarvis-hologram--video {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 768px) {
    .jarvis-hologram--video {
        width: 220px;
        height: 220px;
    }
}