/* ==========================================================================
   VAIO GAMING - animations.css
   Premium animations & micro-interactions
   ========================================================================== */

/* Reveal on scroll */
.vaio-reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--vaio-ease), transform .8s var(--vaio-ease); }
.vaio-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger children */
.vaio-stagger > * { opacity: 0; transform: translateY(20px); }
.vaio-stagger.is-visible > * { animation: vaioStaggerIn .6s var(--vaio-ease) forwards; }
.vaio-stagger.is-visible > *:nth-child(1) { animation-delay: .05s; }
.vaio-stagger.is-visible > *:nth-child(2) { animation-delay: .12s; }
.vaio-stagger.is-visible > *:nth-child(3) { animation-delay: .19s; }
.vaio-stagger.is-visible > *:nth-child(4) { animation-delay: .26s; }
.vaio-stagger.is-visible > *:nth-child(5) { animation-delay: .33s; }
.vaio-stagger.is-visible > *:nth-child(6) { animation-delay: .40s; }
.vaio-stagger.is-visible > *:nth-child(7) { animation-delay: .47s; }
.vaio-stagger.is-visible > *:nth-child(8) { animation-delay: .54s; }
@keyframes vaioStaggerIn { to { opacity: 1; transform: translateY(0); } }

/* Logo pulse */
/* Premium logo animation is defined in main.css to preserve the emblem layers. */

/* Hero character floating + glow oscillation */
.vaio-hero-art .vaio-hero-char { animation: vaioFloat 6s ease-in-out infinite, vaioCharGlow 5s ease-in-out infinite; }
@keyframes vaioCharGlow { 0%, 100% { filter: drop-shadow(0 30px 60px rgba(124,58,237,.5)); } 50% { filter: drop-shadow(0 30px 80px rgba(34,211,238,.6)); } }

/* Background particles */
.vaio-particles::before, .vaio-particles::after, .vaio-hero-bg-particles {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle, rgba(124,58,237,.6) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(34,211,238,.5) 1px, transparent 1.5px);
    background-size: 80px 80px, 140px 140px;
    background-position: 0 0, 40px 60px;
    opacity: .35;
    animation: vaioParticlesDrift 20s linear infinite;
}
.vaio-particles::after { animation-direction: reverse; animation-duration: 30s; opacity: .25; }
@keyframes vaioParticlesDrift { from { background-position: 0 0, 40px 60px; } to { background-position: 80px 80px, 180px 200px; } }

/* Character card particles */
.vaio-char-particles { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; }
.vaio-char-card:hover .vaio-char-particles { opacity: 1; }
.vaio-char-particles::before, .vaio-char-particles::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.5px);
    background-size: 24px 24px; opacity: .4;
    animation: vaioCharSpark 3s linear infinite;
}
.vaio-char-particles::after { background-size: 36px 36px; animation-duration: 5s; animation-direction: reverse; }
@keyframes vaioCharSpark { from { background-position: 0 0; transform: translateY(0); } to { background-position: 0 -48px; transform: translateY(-12px); } }

/* Glitch effect for 404 */
.vaio-glitch { position: relative; display: inline-block; }
.vaio-glitch::before, .vaio-glitch::after { content: attr(data-text); position: absolute; inset: 0; }
.vaio-glitch::before { color: var(--vaio-secondary); animation: vaioGlitch1 2.5s infinite linear alternate-reverse; mix-blend-mode: screen; }
.vaio-glitch::after { color: var(--vaio-pink); animation: vaioGlitch2 3s infinite linear alternate-reverse; mix-blend-mode: screen; }
@keyframes vaioGlitch1 { 0%, 100% { clip-path: inset(0 0 80% 0); transform: translate(0); } 50% { clip-path: inset(30% 0 50% 0); transform: translate(-4px, 2px); } }
@keyframes vaioGlitch2 { 0%, 100% { clip-path: inset(80% 0 0 0); transform: translate(0); } 50% { clip-path: inset(20% 0 70% 0); transform: translate(4px, -2px); } }

/* Magnetic button */
.vaio-btn-primary::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.25), transparent 50%);
    opacity: 0; transition: opacity .25s;
}
.vaio-btn-primary:hover::after { opacity: 1; }

/* Card tilt on hover (gentle 3D feel via CSS only) */
.vaio-product-card, .vaio-char-card, .vaio-cat-card { will-change: transform; }

/* Smooth horizontal scroll lines (cyber lines moving) */
.vaio-section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124,58,237,.5), transparent);
    transform: translateX(-100%);
    animation: vaioScanline 8s linear infinite;
    pointer-events: none;
}
.vaio-section:nth-child(even)::before { animation-delay: 2s; animation-duration: 12s; }
@keyframes vaioScanline { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } }

/* Skeleton loader for lazy images */
.vaio-skeleton { background: linear-gradient(90deg, var(--vaio-surface) 0%, var(--vaio-surface-2) 50%, var(--vaio-surface) 100%); background-size: 200% 100%; animation: vaioSkeleton 1.4s linear infinite; }
@keyframes vaioSkeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Bounce in for badges */
.vaio-badge { animation: vaioBadgeBounce .4s var(--vaio-ease); }
@keyframes vaioBadgeBounce { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Page loader (premium gaming-inspired) */
.vaio-page-loader { position: fixed; inset: 0; z-index: 999; background: var(--vaio-bg); display: grid; place-items: center; transition: opacity .5s, visibility .5s; }
.vaio-page-loader.is-hidden { opacity: 0; visibility: hidden; }
.vaio-page-loader .loader-art { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(124,58,237,.2); border-top-color: var(--vaio-secondary); border-right-color: var(--vaio-primary); animation: vaioSpin 1s linear infinite; box-shadow: 0 0 30px rgba(124,58,237,.5); }
@keyframes vaioSpin { to { transform: rotate(360deg); } }

/* Subtle button shimmer */
.vaio-btn-primary { background-size: 200% 100%; animation: vaioShimmer 4s ease infinite; }
@keyframes vaioShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   v1.3.0 — Cinematic Hover & Loading Effects (Products + News)
   ========================================================================== */

/* --- Product card: holographic sheen + neon border pulse + parallax glow --- */
.vaio-product-card { position: relative; isolation: isolate; transition: transform .5s var(--vaio-ease), box-shadow .5s var(--vaio-ease), border-color .35s; }
.vaio-product-card::before {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 48%, rgba(34,211,238,.25) 52%, transparent 70%);
    transform: translateX(-120%) skewX(-12deg); transition: transform .9s var(--vaio-ease); opacity: 0;
    mix-blend-mode: screen;
}
.vaio-product-card:hover::before { transform: translateX(120%) skewX(-12deg); opacity: 1; }
.vaio-product-card::after {
    content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--ang, 0deg), rgba(124,58,237,.0), rgba(124,58,237,.85), rgba(34,211,238,.85), rgba(236,72,153,.85), rgba(124,58,237,.0));
    opacity: 0; filter: blur(14px); transition: opacity .45s;
}
.vaio-product-card:hover::after { opacity: .85; animation: vaioRing 4s linear infinite; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes vaioRing { to { --ang: 360deg; } }

.vaio-product-card:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 28px 60px rgba(0,0,0,.55), 0 0 40px rgba(124,58,237,.45); }

/* Image cinematic zoom + tilt + subtle color grade */
.vaio-card-media { perspective: 1000px; }
.vaio-card-image { transition: transform .8s var(--vaio-ease), filter .6s; }
.vaio-product-card:hover .vaio-card-image { transform: scale(1.12) rotateX(2deg); filter: saturate(1.2) contrast(1.08); }
.vaio-card-media::after {
    content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(circle at 50% 110%, rgba(124,58,237,.45), transparent 55%);
    opacity: 0; transition: opacity .5s;
}
.vaio-product-card:hover .vaio-card-media::after { opacity: 1; }

/* Scanline sweep across image */
.vaio-card-media::before {
    content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; z-index: 3; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(34,211,238,.9), transparent);
    box-shadow: 0 0 14px rgba(34,211,238,.8);
    opacity: 0;
}
.vaio-product-card:hover .vaio-card-media::before { opacity: 1; animation: vaioScan 1.6s ease-in-out infinite; }
@keyframes vaioScan { 0% { transform: translateY(0); } 100% { transform: translateY(calc(100% + 4px)); } }

/* Title color shift, price pop */
.vaio-product-card .vaio-card-title { transition: color .3s, text-shadow .3s; }
.vaio-product-card:hover .vaio-card-title { color: #fff; text-shadow: 0 0 18px rgba(34,211,238,.55); }
.vaio-product-card .vaio-card-price .vaio-new { transition: transform .3s var(--vaio-ease); display: inline-block; }
.vaio-product-card:hover .vaio-card-price .vaio-new { transform: scale(1.08); }

/* Action buttons cascade in */
.vaio-product-card .vaio-card-actions .vaio-cardact { transform: translateY(-10px); opacity: 0; transition: transform .35s var(--vaio-ease), opacity .35s, background .2s; }
.vaio-product-card:hover .vaio-card-actions .vaio-cardact { opacity: 1; transform: translateY(0); }
.vaio-product-card:hover .vaio-card-actions .vaio-cardact:nth-child(1) { transition-delay: .05s; }
.vaio-product-card:hover .vaio-card-actions .vaio-cardact:nth-child(2) { transition-delay: .12s; }
.vaio-product-card:hover .vaio-card-actions .vaio-cardact:nth-child(3) { transition-delay: .19s; }
.vaio-cardact:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 8px 22px rgba(124,58,237,.55); }

/* Add-to-cart cinematic click */
.vaio-product-card .button, .vaio-product-card .vaio-add-cart { position: relative; overflow: hidden; }
.vaio-product-card .button::after, .vaio-product-card .vaio-add-cart::after {
    content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 60%);
    opacity: 0; transform: scale(.2); transition: transform .6s, opacity .6s;
}
.vaio-product-card .button:active::after, .vaio-product-card .vaio-add-cart:active::after { opacity: 1; transform: scale(2.4); transition: 0s; }

/* Loading skeleton refined (image area) */
.vaio-card-image.is-loading, .vaio-news-thumb.is-loading { position: relative; overflow: hidden; background: var(--vaio-surface-2); }
.vaio-card-image.is-loading::after, .vaio-news-thumb.is-loading::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(124,58,237,.18) 45%, rgba(34,211,238,.22) 55%, transparent 70%);
    background-size: 220% 100%; animation: vaioSkelSweep 1.4s linear infinite;
}
@keyframes vaioSkelSweep { 0% { background-position: 220% 0; } 100% { background-position: -220% 0; } }
.vaio-card-image img, .vaio-news-thumb img { opacity: 0; transition: opacity .6s var(--vaio-ease), transform .8s var(--vaio-ease); }
.vaio-card-image img.is-loaded, .vaio-news-thumb img.is-loaded { opacity: 1; }

/* --- News cards: cinematic hover --- */
.vaio-news-item { position: relative; overflow: hidden; border-radius: 14px; transition: transform .45s var(--vaio-ease), background .35s, box-shadow .45s; }
.vaio-news-item::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(120deg, transparent 35%, rgba(34,211,238,.18) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .9s var(--vaio-ease);
}
.vaio-news-item:hover::before { transform: translateX(120%); }
.vaio-news-item:hover { transform: translateY(-4px); background: rgba(124,58,237,.06); box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 24px rgba(34,211,238,.25); }
.vaio-news-thumb { position: relative; overflow: hidden; border-radius: 12px; }
.vaio-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--vaio-ease), filter .6s; }
.vaio-news-item:hover .vaio-news-thumb img { transform: scale(1.14) rotate(.5deg); filter: saturate(1.25) contrast(1.1); }
.vaio-news-thumb::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 40%, rgba(11,16,32,.85));
    opacity: .6; transition: opacity .4s;
}
.vaio-news-item:hover .vaio-news-thumb::after { opacity: .85; }
.vaio-news-thumb::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
    border-radius: 50%; background: rgba(11,16,32,.7) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2322d3ee'><path d='M8 5v14l11-7z'/></svg>") center/22px no-repeat;
    border: 1px solid rgba(34,211,238,.6); box-shadow: 0 0 24px rgba(34,211,238,.6);
    opacity: 0; transform: scale(.6); transition: opacity .35s, transform .45s var(--vaio-ease); z-index: 2;
}
.vaio-news-item:hover .vaio-news-thumb::before { opacity: 1; transform: scale(1); }
.vaio-news-meta h4, .vaio-news-meta .vaio-news-title { transition: color .3s, transform .3s; }
.vaio-news-item:hover .vaio-news-meta h4, .vaio-news-item:hover .vaio-news-meta .vaio-news-title { color: #fff; transform: translateX(3px); }
body.lang-ar .vaio-news-item:hover .vaio-news-meta h4 { transform: translateX(-3px); }

/* Cinematic "loading" overlay for cards during AJAX (e.g. add-to-cart) */
.vaio-product-card.is-busy, .vaio-news-item.is-busy { pointer-events: none; }
.vaio-product-card.is-busy::after, .vaio-news-item.is-busy::after {
    content: ''; position: absolute; inset: 0; z-index: 5; border-radius: inherit;
    background: rgba(7,11,24,.55) center / 44px 44px no-repeat
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><circle cx='22' cy='22' r='18' fill='none' stroke='%237c3aed' stroke-width='3' stroke-dasharray='28 56' stroke-linecap='round'><animateTransform attributeName='transform' type='rotate' from='0 22 22' to='360 22 22' dur='1s' repeatCount='indefinite'/></circle></svg>");
    opacity: 1; backdrop-filter: blur(4px);
}

/* Reduce motion safety */
@media (prefers-reduced-motion: reduce) {
    .vaio-product-card::before, .vaio-product-card::after, .vaio-card-media::before, .vaio-news-item::before { display: none !important; }
}