/*
====================================================
AC PERSONAL WEBSITE
Ing. Adrian Felix Chirita

Animation & Motion System
====================================================
*/

/* ==================================================
   MOTION VARIABLES
================================================== */

:root {
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-smooth: cubic-bezier(.16, 1, .3, 1);
    --ease-expo: cubic-bezier(.19, 1, .22, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ==================================================
   GLOBAL MOTION PREPARATION
================================================== */

.hero-pretitle,
.hero h1,
.hero h2,
.hero-text,
.hero-buttons,
.hero-image-wrapper,
.scroll-indicator {
    will-change: transform, opacity;
}

/* ==================================================
   PAGE LOADER
================================================== */

.loader {
    animation: loaderFadeOut 1s var(--ease-expo) 1.2s forwards;
}

.loader-content {
    animation: loaderContentOut .8s var(--ease-expo) .8s forwards;
}

.loader-line {
    transform-origin: left center;
    animation: loaderLine 1.2s var(--ease-expo) forwards;
}

@keyframes loaderLine {
    0% { transform: scaleX(0); opacity:0; }
    30% { opacity:1; }
    100% { transform: scaleX(1); opacity:1; }
}

@keyframes loaderContentOut {
    0% { transform: translateY(0); opacity:1; }
    100% { transform: translateY(-30px); opacity:0; }
}

@keyframes loaderFadeOut {
    0% { opacity:1; visibility:visible; }
    80% { opacity:1; }
    100% { opacity:0; visibility:hidden; pointer-events:none; }
}

/* ==================================================
   HEADER & LOGO (Aktualisierte Klassen)
================================================== */

.site-header {
    animation: navigationEnter 1.2s var(--ease-expo) 1.8s both;
}

@keyframes navigationEnter {
    0% { opacity:0; transform: translateY(-25px); }
    100% { opacity:1; transform: translateY(0); }
}

.site-logo {
    transition: transform .5s var(--ease-out);
}

.site-logo:hover {
    transform: translateY(-2px);
}

/* ==================================================
   DESKTOP MENU LINKS
================================================== */

.desktop-nav li {
    opacity:0;
    animation: menuItemEnter .8s var(--ease-expo) forwards;
}

.desktop-nav li:nth-child(1) { animation-delay: 1.9s; }
.desktop-nav li:nth-child(2) { animation-delay: 2s; }
.desktop-nav li:nth-child(3) { animation-delay: 2.1s; }
.desktop-nav li:nth-child(4) { animation-delay: 2.2s; }
.desktop-nav li:nth-child(5) { animation-delay: 2.3s; }
.desktop-nav li:nth-child(6) { animation-delay: 2.4s; }
.desktop-nav li:nth-child(7) { animation-delay: 2.5s; }

@keyframes menuItemEnter {
    0% { opacity:0; transform: translateY(-10px); }
    100% { opacity:1; transform: translateY(0); }
}

/* ==================================================
   HERO INTRODUCTION
================================================== */

.hero-pretitle {
    animation: heroPretitleEnter 1s var(--ease-expo) 1.5s both;
}

@keyframes heroPretitleEnter {
    0% { opacity:0; transform: translateY(25px); }
    100% { opacity:1; transform: translateY(0); }
}

.hero h1 {
    animation: heroTitleEnter 1.4s var(--ease-expo) 1.65s both;
}

@keyframes heroTitleEnter {
    0% { opacity:0; transform: translateY(40px); }
    100% { opacity:1; transform: translateY(0); }
}

.hero h2 {
    animation: heroSubtitleEnter 1.2s var(--ease-expo) 1.9s both;
}

@keyframes heroSubtitleEnter {
    0% { opacity:0; transform: translateY(30px); }
    100% { opacity:1; transform: translateY(0); }
}

.hero-text {
    animation: heroTextEnter 1.1s var(--ease-expo) 2.15s both;
}

@keyframes heroTextEnter {
    0% { opacity:0; transform: translateY(20px); }
    100% { opacity:1; transform: translateY(0); }
}

.hero-buttons {
    animation: heroButtonsEnter 1s var(--ease-expo) 2.35s both;
}

@keyframes heroButtonsEnter {
    0% { opacity:0; transform: translateY(20px); }
    100% { opacity:1; transform: translateY(0); }
}

/* ==================================================
   HERO IMAGE
================================================== */

.hero-image-wrapper {
    animation: heroImageEnter 1.5s var(--ease-expo) 1.5s both;
}

@keyframes heroImageEnter {
    0% { opacity:0; transform: translateY(40px) scale(.98); }
    100% { opacity:1; transform: translateY(0) scale(1); }
}

.hero-image-wrapper::before {
    transition: transform 1s var(--ease-expo), border-color .6s ease;
}

@media (hover:hover) {
    .hero-image-wrapper:hover::before {
        transform: translate(8px, 8px);
        border-color: rgba(125,167,255,.35);
    }
    .hero-image-wrapper:hover img {
        transform: scale(1.025);
    }
}

/* ==================================================
   BUTTON MOTION
================================================== */

.btn-primary,
.btn-secondary {
    position:relative;
    overflow:hidden;
    will-change: transform;
}

.btn-primary::before,
.btn-secondary::before {
    content:"";
    position:absolute;
    top:0;
    left:-110%;
    width:100%;
    height:100%;
    background: rgba(255,255,255,.15);
    transform: skewX(-20deg);
    transition: left .7s var(--ease-expo);
}

.btn-primary:hover::before,
.btn-secondary:hover::before {
    left:110%;
}

.btn-primary:active,
.btn-secondary:active {
    transform: scale(.97);
}

/* ==================================================
   SCROLL INDICATOR
================================================== */

.scroll-indicator {
    animation: scrollIndicatorEnter 1s var(--ease-expo) 2.7s both;
}

@keyframes scrollIndicatorEnter {
    0% { opacity:0; transform: translateY(20px); }
    100% { opacity:1; transform: translateY(0); }
}

.scroll-indicator span {
    position:relative;
    overflow:hidden;
}

.scroll-indicator span::after {
    content:"";
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:white;
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0% { left:-100%; }
    50% { left:0; }
    100% { left:100%; }
}

/* ==================================================
   BACKGROUND GRID MOTION (KORRIGIERT: KEIN SCALE MULTIPLIER MEHR)
================================================== */

.background-grid {
    animation: gridBreath 8s ease-in-out infinite alternate;
}

@keyframes gridBreath {
    0% { opacity:.35; }
    100% { opacity:.60; }
}

/* ==================================================
   GENERIC REVEAL SYSTEM
================================================== */

.reveal {
    opacity:1;
    transform: translateY(0);
}

.js-enabled .reveal {
    opacity:0;
    transform: translateY(30px);
    transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo);
}

.js-enabled .reveal.is-visible {
    opacity:1;
    transform: translateY(0);
}

.js-enabled .reveal-left {
    opacity:0;
    transform: translateX(-25px);
    transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo);
}

.js-enabled .reveal-left.is-visible {
    opacity:1;
    transform: translateX(0);
}

.js-enabled .reveal-right {
    opacity:0;
    transform: translateX(25px);
    transition: opacity 1s var(--ease-expo), transform 1s var(--ease-expo);
}

.js-enabled .reveal-right.is-visible {
    opacity:1;
    transform: translateX(0);
}

.js-enabled .reveal-scale {
    opacity:0;
    transform: scale(.96);
    transition: opacity 1s var(--ease-expo), transform 1.2s var(--ease-expo);
}

.js-enabled .reveal-scale.is-visible {
    opacity:1;
    transform: scale(1);
}

/* ==================================================
   FOCUS & REDUCED MOTION
================================================== */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
    .loader,
    .loader-content,
    .loader-line,
    .site-header,
    .desktop-nav li,
    .hero-pretitle,
    .hero h1,
    .hero h2,
    .hero-text,
    .hero-buttons,
    .hero-image-wrapper,
    .scroll-indicator,
    .background-grid,
    .scroll-indicator span::after {
        animation: none !important;
    }

    .js-enabled .reveal,
    .js-enabled .reveal-left,
    .js-enabled .reveal-right,
    .js-enabled .reveal-scale {
        opacity:1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width:600px) {
    .btn-primary::before,
    .btn-secondary::before {
        display:none;
    }
}