/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --pokemon-blue: #3B4CCA;
  --pokemon-yellow: #FFDE00;
  --pokemon-red: #FF0000;
  --pokemon-light-blue: #65A7DB;
  --dark-bg-card: rgba(34, 36, 54, 0.9); /* Slightly more opaque for better readability */
  --dark-bg-card-hover: rgba(44, 46, 68, 1);
  --light-text: #F0F0F5;
  --streamer-pink: #F56FAD;
  --streamer-teal: #4ECDC4;
  --border-color: rgba(101, 167, 219, 0.3); /* Slightly stronger border */
  --border-color-hover: var(--streamer-pink);
  --glow-color-teal: rgba(78, 205, 196, 0.5);
  --glow-color-pink: rgba(245, 111, 173, 0.5);

  --twitch-color: #9146FF;
  --twitter-color-icon: #ffffff;
  --twitter-bg-color: #000000;
  --instagram-gradient: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  --tiktok-color-icon: #ffffff;
  --tiktok-bg-color: #000000;
  --discord-color: #5865F2;
  --youtube-color: #FF0000;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--light-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    /* Add a subtle texture/pattern to the gradient background for more depth */
    background:
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 30%),
        radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 30%),
        linear-gradient(30deg, #09e29a, #b41d82, #09e4ad, #f8005f);
	background-size: 300px 300px, 300px 300px, 450% 450%;
	animation: gradientBG 15s ease infinite, subtlePattern 20s linear infinite alternate;
}

@keyframes gradientBG {
	0% { background-position: 0% 50%, 0% 50%, 0% 50%; }
	50% { background-position: 100% 50%, 100% 50%, 100% 50%; }
	100% { background-position: 0% 50%, 0% 50%, 0% 50%; }
}
@keyframes subtlePattern {
    from { background-position: 0% 0%, 0% 0%, center center; }
    to { background-position: 100% 100%, 100% 100%, center center; }
}


.pokeball-decoration {
  position: fixed;
  width: 450px; /* Slightly larger for more presence */
  height: 450px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.025) 0%, rgba(255, 0, 0, 0.025) 46%,
            rgba(0, 0, 0, 0.035) 48%, rgba(0, 0, 0, 0.035) 52%,
            rgba(255, 255, 255, 0.025) 54%, rgba(255, 255, 255, 0.025) 100%);
  z-index: -1;
  opacity: 0.6; /* Slightly less opaque if pattern is added to body */
  filter: blur(2px); /* Soften the edges */
}

.pokeball-1 { top: -120px; right: -120px; transform: rotate(20deg); }
.pokeball-2 { bottom: -150px; left: -150px; transform: rotate(-25deg); }

.page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 2rem 1rem; /* Top/bottom padding for content */
    padding-bottom: 0; /* Remove bottom padding as footer handles it */
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Entrance Animations */
.animate-pop-in {
    animation: popIn 0.7s cubic-bezier(0.68, -0.6, 0.27, 1.65) 0.2s forwards; /* Adjusted timing */
    opacity: 0;
    transform: scale(0.7);
}
@keyframes popIn {
    to { opacity: 1; transform: scale(1); }
}

.animate-slide-in {
    animation: slideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Smoother ease */
    opacity: 0;
    transform: translateY(25px);
    animation-delay: calc(var(--animation-order) * 0.06s + 0.5s); /* Slightly adjusted stagger */
}
@keyframes slideIn {
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-in forwards;
    opacity: 0;
    animation-delay: 1.2s; /* Delay footer animation more */
}
@keyframes fadeIn {
    to { opacity: 1; }
}


.profile-header {
    text-align: center;
    margin-bottom: 3rem; /* More space below header */
    padding: 2rem 1.5rem; /* More padding inside header */
    background-color: var(--dark-bg-card);
    border-radius: 28px; /* Even rounder */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4), 0 0 25px var(--glow-color-teal); /* Added subtle teal glow */
    border: 1px solid var(--border-color);
    max-width: 600px;
    width: 100%;
    position: relative; /* For pseudo-elements */
}
/* Add a subtle top highlight to profile header */
.profile-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--streamer-teal), transparent);
    opacity: 0.7;
    border-radius: 2px;
}


.profile-avatar {
    width: 130px; /* Slightly larger */
    height: 130px;
    border-radius: 50%;
    border: 5px solid var(--streamer-teal);
    box-shadow: 0 0 25px var(--glow-color-teal), 0 0 10px var(--streamer-pink) inset; /* Inner pink glow */
    margin: 0 auto 1.2rem;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; /* Bouncier transition */
}
.profile-avatar:hover {
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 0 35px var(--glow-color-teal), 0 0 15px var(--streamer-pink) inset, 0 5px 15px rgba(0,0,0,0.2);
}

.profile-name {
    font-size: 2.4rem; /* Larger name */
    font-weight: 800; /* Bolder */
    color: var(--pokemon-yellow);
    margin-bottom: 0.6rem;
    text-shadow: 0 3px 7px rgba(0,0,0,0.35), 0 0 10px var(--pokemon-yellow);
}

.profile-bio {
    font-size: 1.05rem;
    color: var(--light-text);
    opacity: 0.95;
    line-height: 1.65;
    margin-bottom: 1.2rem;
}

.profile-contact {
    font-size: 0.95rem;
    color: var(--light-text);
    opacity: 0.85;
}
.email-link {
    color: var(--streamer-teal);
    text-decoration: none;
    font-weight: 600; /* Bolder email link */
    transition: color 0.2s ease, text-shadow 0.2s ease;
    position: relative;
}
.email-link:hover {
    color: var(--streamer-pink);
    text-shadow: 0 0 5px var(--streamer-pink);
}
/* Underline effect for email link */
.email-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    display: block;
    margin-top: 2px;
    right: 0;
    background: var(--streamer-pink);
    transition: width 0.3s ease;
}
.email-link:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.links-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3rem; /* More bottom margin before footer */
}

@media (min-width: 640px) {
    .links-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.35rem;
    }
}

.link-card {
    display: flex;
    align-items: center;
    background: var(--dark-bg-card);
    color: var(--light-text);
    padding: 1.2rem 1.45rem;
    text-decoration: none;
    font-size: 1.05rem; /* Slightly larger link text */
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
/* Add a subtle border highlight on hover */
.link-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px; /* stroke width */
    background: linear-gradient(135deg, var(--streamer-teal), var(--streamer-pink));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Important for interaction */
}
.link-card:hover::before {
    opacity: 1;
}


.link-card:hover {
    transform: translateY(-6px) scale(1.04);
    background-color: var(--dark-bg-card-hover);
    /* border-color: var(--border-color-hover); // Handled by ::before */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 25px var(--glow-color-pink);
}
.link-card:active {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25), 0 0 15px var(--glow-color-pink);
}

.link-card::after { /* Shimmer effect */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 80%);
  transform: translateX(-100%);
  z-index: 1;
  border-radius: 20px;
  pointer-events: none;
}
.link-card:hover::after { animation: shimmer 1.8s infinite 0.2s; } /* Delayed shimmer */
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.link-icon {
    font-size: 1.7rem;
    margin-right: 1.2rem;
    width: 35px;
    text-align: center;
    color: var(--streamer-teal);
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.link-card:hover .link-icon {
    transform: scale(1.15) rotate(-5deg); /* More dynamic icon hover */
    filter: drop-shadow(0 0 5px currentColor); /* Glow effect for icon itself */
}

.link-text { flex-grow: 1; text-align: left; z-index: 2; }

.link-arrow {
    font-size: 1.05rem;
    margin-left: 0.9rem;
    color: rgba(255, 255, 255, 0.65);
    transition: transform 0.25s ease, color 0.25s ease;
    z-index: 2;
}
.link-card:hover .link-arrow {
    transform: translateX(5px) rotate(-10deg) scale(1.1);
    color: var(--streamer-pink);
}

/* Specific icon colors - maintained */
.link-card.twitch .link-icon { color: var(--twitch-color); }
.link-card.twitter .link-icon { color: var(--twitter-color-icon); }
.link-card.instagram .link-icon {
    background: var(--instagram-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; text-fill-color: transparent;
}
.link-card.tiktok .link-icon { color: var(--tiktok-color-icon); }
.link-card.discord .link-icon { color: var(--discord-color); }
.link-card.youtube .link-icon { color: var(--youtube-color); }
.link-card.raid-stats .link-icon { color: var(--pokemon-yellow); }
.link-card.campfire .link-icon { color: #FF6F00; }
.link-card.donations .link-icon { color: var(--streamer-pink); }
.link-card.wishlist .link-icon { color: #0073bb; }
.link-card.throne .link-icon { color: #D4AF37; }
.link-card.calendar .link-icon { color: var(--pokemon-light-blue); }

/* Full-Width Footer Styling */
.page-footer {
    width: 100%; /* Full width */
    /* max-width: none; Remove max-width constraint */
    margin-top: auto;
    padding: 2rem 1rem; /* Vertical padding, horizontal padding handled by .footer-content */
    background-color: rgba(10, 12, 28, 0.85); /* Darker, distinct footer background */
    /* border-radius: 0; Remove rounded corners */
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4); /* Stronger top shadow */
    border-top: 2px solid var(--streamer-teal); /* Teal top border as accent */
    text-align: center;
    position: relative; /* For potential pseudo-elements */
    backdrop-filter: blur(5px); /* Frosted glass effect */
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* Increased gap */
    max-width: 700px; /* Content within footer can still be constrained */
    margin: 0 auto; /* Center the content */
}

.footer-social-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 1.2rem;
    margin-bottom: 0.8rem;
}

.social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease, filter 0.3s ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}

.social-icon-link:hover {
    transform: translateY(-5px) scale(1.15) rotate(5deg); /* More playful hover */
    box-shadow: 0 6px 15px rgba(0,0,0,0.35);
    filter: brightness(1.2); /* Make icon slightly brighter */
}
.social-icon-link:active {
    transform: translateY(-2px) scale(1.1);
}

.social-icon-link.twitch-bg { background-color: var(--twitch-color); }
.social-icon-link.twitter-bg { background-color: var(--twitter-bg-color); }
.social-icon-link.instagram-bg { background: var(--instagram-gradient); }
.social-icon-link.tiktok-bg { background-color: var(--tiktok-bg-color); }
.social-icon-link.youtube-bg { background-color: var(--youtube-color); }


.copyright-text {
    font-size: 0.9rem;
    color: var(--light-text);
    opacity: 0.75;
    margin: 0;
}

.footer-credit {
    font-size: 0.85rem;
    color: var(--light-text);
    opacity: 0.65;
    margin: 0;
}
.footer-credit .fa-heart { margin: 0 3px; animation: pulseHeart 1.5s infinite ease-in-out; }
.footer-credit .fa-mug-hot { margin: 0 3px; animation: steamMug 2s infinite linear alternate; }

@keyframes pulseHeart {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); color: var(--streamer-pink); }
}
@keyframes steamMug {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.05); opacity: 0.8; }
    100% { transform: translateY(0) scale(1); opacity: 1;}
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .profile-header { margin-bottom: 2.5rem; padding: 1.5rem; }
    .profile-avatar { width: 110px; height: 110px; }
    .profile-name { font-size: 2rem; }

    .links-grid { max-width: 90%; gap: 1.2rem; }
    .link-card { padding: 1.1rem 1.25rem; font-size: 1rem; border-radius: 18px;}
    .link-icon { font-size: 1.5rem; margin-right: 1rem; }

    .page-footer { padding: 1.5rem 1rem; } /* Adjust footer padding */
    .social-icon-link { width: 44px; height: 44px; font-size: 1.3rem; }
}

@media (max-width: 480px) {
    .page-container { padding-top: 1.5rem; }
    .profile-header { padding: 1.2rem; border-radius: 24px; }
    .profile-avatar { width: 90px; height: 90px; border-width: 4px; }
    .profile-name { font-size: 1.8rem; }

    .links-grid { grid-template-columns: 1fr; max-width: 95%; gap: 1rem; }
    .link-card { border-radius: 16px; }

    .page-footer { border-top-width: 2px; }
    .footer-social-links { gap: 1rem; }
}