@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';

:root {
    --color-primary: #60a5fa;
    --color-secondary: #6366f1;
    --color-dark: #0f172a;
    --color-darker: #1e293b;
    --color-purple: #a855f7;
    --color-discord: #7289da;
    --color-steam: #00adee;
    --color-twitter: #1da1f2;
    --color-email: #ea4335;
}

/* Disable scrolling */
html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: fixed;
}

/* Base styles */
body {
    @apply min-h-screen bg-gradient-to-br from-dark to-darker flex justify-center items-center p-5 relative overflow-x-hidden;
}

/* Background effects */
.bg-effect-1 {
    @apply absolute w-[500px] h-[500px] bg-gradient-to-br from-primary to-secondary rounded-full blur-[80px] opacity-20 -top-[250px] -left-[250px] z-0;
}

.bg-effect-2 {
    @apply absolute w-[400px] h-[400px] bg-gradient-to-br from-green-500 to-primary rounded-full blur-[80px] opacity-20 -bottom-[200px] -right-[200px] z-0;
}

/* Container */
.container {
    @apply max-w-[600px] w-full p-10 bg-white/5 backdrop-blur-xl rounded-3xl border border-white/15 shadow-2xl relative z-10 transition-all duration-500;
}

/* Profile and Header */
.profile-logo {
    @apply w-[100px] h-[100px] mx-auto mb-6 bg-gradient-to-br from-primary to-purple-400 rounded-2xl flex items-center justify-center text-4xl font-bold text-white shadow-lg transition-all duration-300 cursor-default hover:-translate-y-1 hover:scale-102 hover:shadow-xl;
}

header {
    @apply text-center mb-10;
}

h1 {
    @apply text-white mb-4 text-4xl font-bold tracking-tight;
}

.bio {
    @apply text-white/70 mb-8 text-lg;
}

/* Links Grid */
.links {
    @apply grid gap-4;
}

.link-card {
    @apply bg-white/5 p-5 rounded-2xl text-white flex items-center transition-all duration-300 border border-white/5 backdrop-blur-lg hover:bg-white/10 hover:translate-x-1 hover:border-white/20 hover:shadow-lg cursor-pointer;
}

.link-card i {
    @apply text-2xl mr-5 w-8 text-center transition-transform duration-300 hover:scale-110;
}

.link-card span {
    @apply text-lg font-medium tracking-wide;
}

/* Social Icons Colors */
.discord i { @apply text-discord; }
.steam i { @apply text-steam; }
.twitter i { @apply text-twitter; }
.email i { @apply text-email; }

/* Contact Form Toggle */
#contact-toggle {
    display: none;
}

/* Content Main Transitions */
.content-main {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#contact-toggle:checked ~ .container {
    max-width: 550px;
}

#contact-toggle:checked ~ .container .content-main {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
    pointer-events: none;
}

/* Contact Form */
.contact-form {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.97) translateY(10px);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

#contact-toggle:checked ~ .container .contact-form {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: all;
}

/* Form Elements */
.form-header {
    @apply mb-8 flex justify-between items-center;
}

.form-header .profile-logo {
    @apply w-12 h-12 m-0 text-xl rounded-xl;
}

.back-btn {
    @apply bg-white/10 w-9 h-9 rounded-xl flex items-center justify-center text-white transition-all duration-300 hover:bg-white/20 hover:-translate-x-1;
}

.form-group {
    @apply mb-6 relative;
}

.form-group label {
    @apply block text-white/80 mb-2 text-sm font-medium;
}

.form-group input,
.form-group textarea {
    @apply w-full bg-white/5 border border-white/10 p-3 rounded-xl text-white text-base focus:outline-none focus:border-primary focus:ring-4 focus:ring-primary/10;
}

textarea {
    @apply min-h-[120px] resize-y;
}

/* Submit Button */
.submit-btn {
    @apply w-full bg-gradient-to-r from-primary to-secondary text-white py-4 px-7 rounded-xl text-base font-semibold cursor-pointer flex items-center justify-center gap-3 transition-all duration-300 mt-8 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-primary/40;
}

.submit-btn i {
    @apply text-lg;
}

/* Hover Effects */
.group:hover .w-10 {
    transform: scale(1.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Input Focus Effects */
input:focus, textarea:focus {
    transform: translateY(-1px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom Scrollbar for Textarea */
textarea::-webkit-scrollbar {
    width: 8px;
}

textarea::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}