/* Site-wide subtle animations and transitions */
:root{
  --accent:#F97316;
  --card-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* Page entrance */
body{
  opacity:0;
  transform:translateY(6px);
  animation: siteFadeIn 480ms ease-out forwards;
}
@keyframes siteFadeIn{
  to{ opacity:1; transform:none; }
}

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide Up */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Scale In */
@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Slide In From Right */
@keyframes slideInRight {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Global animations */
.page-hero {
    animation: fadeIn 1s ease-out;
}

.page-hero h1 {
    animation: slideUp 1s ease-out;
    animation-fill-mode: both;
}

.page-hero p {
    animation: slideUp 1s ease-out 0.2s;
    animation-fill-mode: both;
}

.team-card {
    animation: scaleIn 0.6s ease-out;
    animation-fill-mode: both;
}

.team-card:nth-child(1) { animation-delay: 0.1s; }
.team-card:nth-child(2) { animation-delay: 0.2s; }
.team-card:nth-child(3) { animation-delay: 0.3s; }
.team-card:nth-child(4) { animation-delay: 0.4s; }

.cta {
    animation: fadeIn 1s ease-out;
}

#hero {
    animation: fadeIn 1s ease-out;
}

#hero h1 {
    animation: slideUp 1s ease-out 0.3s;
    animation-fill-mode: backwards;
}

#hero h2 {
    animation: slideUp 1s ease-out 0.5s;
    animation-fill-mode: backwards;
}

#hero .slogan {
    animation: slideUp 1s ease-out 0.7s;
    animation-fill-mode: backwards;
}

.value-card {
    animation: scaleIn 0.6s ease-out;
    animation-fill-mode: backwards;
}

/* Stagger value cards */
.value-card:nth-child(1) { animation-delay: 0.2s; }
.value-card:nth-child(2) { animation-delay: 0.4s; }
.value-card:nth-child(3) { animation-delay: 0.6s; }
.value-card:nth-child(4) { animation-delay: 0.8s; }

/* Buttons */
.btn, button, .join-btn {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover, button:hover, .join-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.12); }

/* Cards */
.team-card, .organ-card, .news-card, .value-card, .download-card {
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease, opacity .28s ease;
  will-change: transform, box-shadow;
}
.team-card:hover, .organ-card:hover, .news-card:hover, .value-card:hover, .download-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: var(--card-shadow);
}

/* Images inside cards */
.team-img, .news-img, .event-img, .lightbox-img { transition: transform .45s ease; }
.team-card:hover .team-img, .news-card:hover .news-img, .event-card:hover .event-img { transform: scale(1.04); }

/* Logo subtle pulse on idle */
.logo { transition: transform .35s ease, color .2s; }
.logo:hover { transform: scale(1.03); }

/* Navigation link underline */
nav a { position:relative; }
nav a::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%) scaleX(0); bottom:-6px; height:3px; width:60%; background:var(--accent); border-radius:3px; transition: transform .22s ease;
}
nav a:hover::after, nav a.active::after { transform: translateX(-50%) scaleX(1); }

/* Navigation animations */
nav a {
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #F97316;
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

/* Back to top */
.back-to-top { transition: transform .25s ease, opacity .3s ease; }
.back-to-top:hover { transform: translateY(-6px) scale(1.03); }

/* Accordion */
.accordion-header { transition: background .18s ease, transform .18s ease; }
.accordion-header:hover { transform: translateY(-3px); }

/* Utility fade-up for elements added dynamically */
.fade-up { opacity:0; transform: translateY(10px); animation: fadeUp .6s ease forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* Small helper to reduce initial animation on large pages */
html[data-reduced-animation='true'] body{ animation-duration:0s; }

/* End of animations */