/* DLAU Website - Custom CSS */

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0d8fe8;
    border-radius: 4px;
}

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 4px;
    z-index: 60;
    padding: 8px 16px;
    background-color: #0d8fe8;
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
}
.skip-to-content:focus {
    top: 4px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f5f5f5;
}
::-webkit-scrollbar-thumb {
    background: #bfdbfe;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #93c5fd;
}

/* ===== HERO SECTION STYLES ===== */

/* Hero gradient with animated shift */
.hero-gradient {
    background: linear-gradient(135deg, #04273d 0%, #0a3a5c 25%, #0c4a6e 50%, #064e76 75%, #042e4a 100%);
    background-size: 400% 400%;
    animation: heroGradientShift 15s ease infinite;
}

@keyframes heroGradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Glowing orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}
.hero-orb-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(13, 143, 240, 0.25) 0%, transparent 70%);
    top: -15%; right: -10%;
    animation: orbFloat1 20s ease-in-out infinite;
}
.hero-orb-2 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
    bottom: -10%; left: 20%;
    animation: orbFloat2 25s ease-in-out infinite;
}
.hero-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(99, 179, 237, 0.15) 0%, transparent 70%);
    top: 40%; left: 50%;
    animation: orbFloat3 18s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-60px, 40px) scale(1.1); }
    66% { transform: translate(30px, -30px) scale(0.95); }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, -30px) scale(1.05); }
    66% { transform: translate(-40px, 20px) scale(0.9); }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, 40px) scale(1.15); }
}

/* Glass cards (floating icons) */
.hero-glass-card {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hero title gradient text */
.hero-gradient-text {
    background: linear-gradient(135deg, #7dd3fc, #93c5fd, #7dd3fc);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientTextShift 4s ease-in-out infinite;
}
@keyframes gradientTextShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Hero CTA button with glow */
.hero-btn-primary {
    background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%);
    color: #075985;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.3), 0 4px 15px rgba(0, 0, 0, 0.1);
}
.hero-btn-primary:hover {
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.5), 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Hero entrance animations */
@keyframes heroSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== GENERAL ANIMATIONS ===== */

@keyframes grid-move {
    from { background-position: 0 0; }
    to { background-position: 80px 80px; }
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(25px, -30px) scale(1.2); opacity: 0.6; }
    50% { transform: translate(-20px, 20px) scale(0.9); opacity: 0.4; }
    75% { transform: translate(30px, 10px) scale(1.1); opacity: 0.5; }
}

@keyframes line-move {
    0% { transform: translateX(-100%) rotate(30deg); opacity: 0; }
    50% { opacity: 0.3; }
    100% { transform: translateX(200vw) rotate(30deg); opacity: 0; }
}

@keyframes pulse-ring {
    0%, 100% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.15); opacity: 0.25; }
}

@keyframes data-stream {
    0% { transform: translateY(-100%); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes hex-pulse {
    0%, 100% { opacity: 0.1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.3; transform: scale(1.1) rotate(180deg); }
}

@keyframes scan-line {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

@keyframes float-3d {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg); }
    25% { transform: translate3d(10px, -15px, 20px) rotateX(5deg) rotateY(5deg); }
    50% { transform: translate3d(-10px, 10px, -15px) rotateX(-3deg) rotateY(-5deg); }
    75% { transform: translate3d(15px, 5px, 10px) rotateX(3deg) rotateY(3deg); }
}

@keyframes pulse-3d {
    0%, 100% { transform: perspective(800px) translateZ(0px) scale(1); opacity: 0.4; }
    50% { transform: perspective(800px) translateZ(50px) scale(1.15); opacity: 0.7; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes countUp {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

/* Animation utility classes */
.animate-grid-move { animation: grid-move 30s linear infinite; }
.animate-float { animation: float 15s ease-in-out infinite; }
.animate-line-move { animation: line-move 15s linear infinite; }
.animate-pulse-ring { animation: pulse-ring 8s ease-in-out infinite; }
.animate-data-stream { animation: data-stream 4s linear infinite; }
.animate-hex-pulse { animation: hex-pulse 6s ease-in-out infinite; }
.animate-scan-line { animation: scan-line 8s linear infinite; }
.animate-float-3d { animation: float-3d 12s ease-in-out infinite; }
.animate-pulse-3d { animation: pulse-3d 4s ease-in-out infinite; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-gradient { animation: none; }
    .hero-orb { animation: none; }
    .hero-glass-card { animation: none; }
    .hero-gradient-text { animation: none; }
    .hero-btn-primary { transition: none; }
    .animate-float-3d { animation: none; }
    .animate-grid-move { animation: none; }
    .scroll-animate { opacity: 1; transform: none; transition: none; }
    [style*="animation:"] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Scroll animation classes - initially hidden */
.scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Flip card for industries */
.flip-card {
    perspective: 1000px;
    height: 280px;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0.75rem;
    overflow: hidden;
}
.flip-card-back {
    transform: rotateY(180deg);
}

/* Stats counter animation */
.stat-number {
    font-variant-numeric: tabular-nums;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #0d8fe8, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* NIS2 Hero gradient */
.nis2-gradient {
    background: linear-gradient(135deg, #0d8fe8 0%, #0369a1 50%, #0c3d66 100%);
}

/* Card hover effects */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Process step connector line */
.process-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -2rem;
    width: 4rem;
    height: 2px;
    background: linear-gradient(90deg, #0d8fe8, transparent);
}
.process-connector:last-child::after {
    display: none;
}

/* Mobile menu transition */
#mobile-menu {
    transition: opacity 0.3s ease;
}