/* ═══════════════════════════════════════════════════════════ STIMORA — Motion & Micro-interaction Enhancement Layer Additive only. Does not modify landing.css. All animations respect prefers-reduced-motion. ═══════════════════════════════════════════════════════════ */ /* ── Scroll-reveal base (fixed 2026-04-24) ───────────────────────── CRITICAL FIX: previously, `.reveal { opacity: 0 }` applied the moment JS added the class. If IntersectionObserver callback was delayed (cache race, slow paint, back/forward cache rehydrate), sections stayed invisible — the user saw "BÖLÜM 01 arada kafayı yiyor" (content randomly missing). New strategy: hide ONLY when has .js-motion class, set by motion.js as the FIRST thing (before IntersectionObserver). If JS fails or hasn't run yet, content is visible by default (graceful degradation). IntersectionObserver still adds .in-view for the intended fade-up animation. */ .reveal { transition: opacity 0.8s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1); will-change: opacity, transform; } html.js-motion .reveal:not(.in-view) { opacity: 0; transform: translateY(24px); } .reveal.in-view { opacity: 1; transform: translateY(0); } .reveal-stagger > * { transition: opacity 0.7s cubic-bezier(0.2, 0.9, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1); } html.js-motion .reveal-stagger:not(.in-view) > * { opacity: 0; transform: translateY(20px); } .reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); } .reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); } .reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); } .reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); } .reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); } .reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); } .reveal-stagger.in-view > *:nth-child(n+7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); } /* ── Hero — gentle rise animation (fixed 2026-04-24) ── Was using `backwards` fill-mode which keeps elements at opacity:0 during any animation delay. In combination with a stale browser paint or reduced-motion mismatch, hero text could stay invisible indefinitely → giant black space. Fix: use `both` fill-mode so final state (opacity:1) is explicitly held, and set fallback opacity:1 on targets so even if animation misfires, text shows. */ .hero-title, .hero-visual, .hero-badge, .hero-subtitle, .hero-cta { opacity: 1; /* fallback — never stay invisible */ animation: heroRise 1s cubic-bezier(0.2, 0.9, 0.3, 1) both; } .hero-badge { animation-delay: 0s; } .hero-title { animation-delay: 0.1s; } .hero-subtitle { animation-delay: 0.2s; } .hero-cta { animation-delay: 0.3s; } .hero-visual { animation-delay: 0.4s; } @keyframes heroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ── Gentle float on static hero visuals ── */ .hero-visual img, .hero-screenshots img { animation: floatGentle 6s ease-in-out infinite; will-change: transform; } .hero-screenshots img:nth-child(2) { animation-delay: -2s; } .hero-screenshots img:nth-child(3) { animation-delay: -4s; } @keyframes floatGentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ── Modality cards — enhanced hover ── */ .modality-card, .mod-card, .feat-card, .modality-block { transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.35s ease, box-shadow 0.4s ease, background 0.35s ease !important; position: relative; } .modality-card:hover, .mod-card:hover, .feat-card:hover, .modality-block:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0, 255, 136, 0.08), 0 4px 20px rgba(0, 0, 0, 0.4); } /* Accent line under cards on hover */ .modality-card::after, .mod-card::after, .feat-card::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent, #00ff88), transparent); transform: translateX(-50%); transition: width 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); } .modality-card:hover::after, .mod-card:hover::after, .feat-card:hover::after { width: 70%; } /* ── Stats counters — subtle highlight on reveal ── */ .evidence-num, .stat-num, .ev-num { display: inline-block; transition: color 0.4s ease, text-shadow 0.4s ease; } .reveal.in-view .evidence-num, .reveal.in-view .stat-num, .reveal.in-view .ev-num { text-shadow: 0 0 24px rgba(0, 255, 136, 0.3); } /* ── Section headers — underline grow on reveal ── */ .section-label { position: relative; padding-bottom: 4px; } .section-label::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--accent, #00ff88); transition: width 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) 0.2s; } .reveal.in-view .section-label::after { width: 40px; } /* ── Buttons — smoother hover + subtle shimmer ── */ .btn-primary, .btn-secondary, .cta-btn { position: relative; overflow: hidden; } .btn-primary::before, .btn-secondary::before, .cta-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: translateX(-100%); transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1); pointer-events: none; } .btn-primary:hover::before, .btn-secondary:hover::before, .cta-btn:hover::before { transform: translateX(100%); } /* ── Nav links — underline grow ── */ header nav a:not(.nav-cta):not(.btn-primary) { position: relative; } header nav a:not(.nav-cta):not(.btn-primary)::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--accent, #00ff88); transition: width 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); } header nav a:not(.nav-cta):not(.btn-primary):hover::after { width: 100%; } /* ── Smooth scroll ── */ html { scroll-behavior: smooth; } /* ── Image hover zoom (for modality screenshots) ── */ .modality-visual img, .mod-screenshot img { transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1), filter 0.4s ease; will-change: transform; } .modality-visual:hover img, .mod-screenshot:hover img { transform: scale(1.02); filter: brightness(1.05); } /* ── Accessibility ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; } }