/* ═══════════════════════════════════════════════════════════
   İbrahim Yeşil — Animations
   Apple-tarzı scroll, parallax, text reveal, particles
   ═══════════════════════════════════════════════════════════ */

/* ─── Scroll Reveal Animasyonları ────────────────────────── */
/* JS Intersection Observer tarafından tetiklenir */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
}

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

/* Farklı yönlerden */
.reveal--left {
    transform: translateX(-60px);
}
.reveal--left.revealed {
    transform: translateX(0);
}

.reveal--right {
    transform: translateX(60px);
}
.reveal--right.revealed {
    transform: translateX(0);
}

.reveal--scale {
    transform: scale(0.9);
}
.reveal--scale.revealed {
    transform: scale(1);
}

.reveal--rotate {
    transform: perspective(600px) rotateX(10deg) translateY(40px);
}
.reveal--rotate.revealed {
    transform: perspective(600px) rotateX(0) translateY(0);
}

/* Stagger — çocuk elemanlar sırayla görünür */
.stagger-children > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

.stagger-children.revealed > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children.revealed > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children.revealed > *:nth-child(8) { transition-delay: 560ms; }
.stagger-children.revealed > *:nth-child(9) { transition-delay: 640ms; }
.stagger-children.revealed > *:nth-child(10) { transition-delay: 720ms; }

.stagger-children.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Hero Animasyonları ─────────────────────────────────── */

/* Hero fade in */
@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__title {
    animation: heroFadeIn 1s var(--ease-out) 0.2s both;
}

.hero__subtitle {
    animation: heroFadeIn 1s var(--ease-out) 0.4s both;
}

.hero__description {
    animation: heroFadeIn 1s var(--ease-out) 0.6s both;
}

.hero__cta {
    animation: heroFadeIn 1s var(--ease-out) 0.8s both;
}

.hero__image-wrapper {
    animation: heroFadeIn 1.2s var(--ease-out) 0.3s both;
}

/* Profil fotoğrafı glow pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 30px var(--color-accent-glow),
                    0 0 60px rgba(41, 151, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 50px var(--color-accent-glow),
                    0 0 100px rgba(41, 151, 255, 0.15);
    }
}

.hero__avatar {
    animation: glowPulse 4s ease-in-out infinite;
}

/* Scroll indicator bounce */
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.hero__scroll-indicator {
    animation: scrollBounce 2s ease-in-out infinite;
}

/* ─── Text Reveal (Karakter karakter) ────────────────────── */
.text-reveal {
    overflow: hidden;
}

.text-reveal .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.4s var(--ease-out),
                transform 0.4s var(--ease-out);
}

.text-reveal.revealed .char {
    opacity: 1;
    transform: translateY(0);
}

/* ─── Typewriter Efekti ──────────────────────────────────── */
.typewriter {
    border-right: 2px solid var(--color-accent);
    white-space: nowrap;
    overflow: hidden;
    animation: typewriterBlink 0.8s step-end infinite;
}

@keyframes typewriterBlink {
    50% { border-color: transparent; }
}

/* ─── Floating / Levitate ────────────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.float {
    animation: float 3s ease-in-out infinite;
}

.float--slow {
    animation-duration: 5s;
}

.float--fast {
    animation-duration: 2s;
}

/* ─── Parallax Katmanları ────────────────────────────────── */
.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-layer {
    will-change: transform;
}

/* ─── Gradient Orb (Arka plan) ───────────────────────────── */
@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(50px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(30px, 40px) scale(1.05); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-40px, 30px) scale(1.05); }
    50% { transform: translate(30px, -20px) scale(0.9); }
    75% { transform: translate(-20px, -40px) scale(1.1); }
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    will-change: transform;
}

.gradient-orb--1 {
    width: 500px;
    height: 500px;
    background: rgba(41, 151, 255, 0.12);
    animation: orbFloat1 15s ease-in-out infinite;
}

.gradient-orb--2 {
    width: 400px;
    height: 400px;
    background: rgba(109, 213, 237, 0.08);
    animation: orbFloat2 18s ease-in-out infinite;
}

.gradient-orb--3 {
    width: 300px;
    height: 300px;
    background: rgba(130, 87, 229, 0.08);
    animation: orbFloat1 20s ease-in-out infinite reverse;
}

/* ─── Counter Animation ──────────────────────────────────── */
.counter {
    font-variant-numeric: tabular-nums;
}

/* ─── Magnetic Button ────────────────────────────────────── */
.magnetic {
    transition: transform var(--duration-fast) var(--ease-out);
}

/* ─── Card Tilt Effect ───────────────────────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform var(--duration-fast) var(--ease-out);
}

.tilt-card__shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                rgba(255,255,255,0.06), transparent 50%);
}

/* ─── Page Transitions ───────────────────────────────────── */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.page-enter {
    animation: pageEnter var(--duration-slow) var(--ease-out) both;
}

.page-exit {
    animation: pageExit var(--duration-normal) var(--ease-out) both;
}

/* ─── Gallery Hover ──────────────────────────────────────── */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.gallery-item img {
    transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item__overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 65%);
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-out);
    display: flex;
    align-items: flex-end;
    padding: var(--space-6);
    pointer-events: none;
}

.gallery-item:hover .gallery-item__overlay {
    opacity: 1;
}

.gallery-item__title {
    color: #fff;
    font-weight: var(--weight-semibold);
    transform: translateY(10px);
    transition: transform var(--duration-normal) var(--ease-out);
}

.gallery-item:hover .gallery-item__title {
    transform: translateY(0);
}

/* ─── Line Draw ──────────────────────────────────────────── */
@keyframes lineDraw {
    from { stroke-dashoffset: var(--line-length, 1000); }
    to { stroke-dashoffset: 0; }
}

.line-draw {
    stroke-dasharray: var(--line-length, 1000);
    stroke-dashoffset: var(--line-length, 1000);
}

.line-draw.revealed {
    animation: lineDraw 2s var(--ease-out) forwards;
}

/* ─── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .reveal,
    .stagger-children > * {
        opacity: 1;
        transform: none;
    }
    
    .parallax-layer {
        transform: none !important;
    }
}

/* ─── Particle Canvas ────────────────────────────────────── */
#particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}