/* Basic Reset & Font */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #e0e0e0; min-height: 100vh; line-height: 1.6; overflow: hidden; position: relative;
    background: radial-gradient(ellipse at center, #3a2a54 0%, #1a1a1e 65%, #050505 100%); background-color: #050505;
}

/* --- Overlay Shape Layer 1: Orange/Brownish --- */
body::before {
    content: ''; position: fixed; top: -20%; left: -20%; width: 100%; height: 100%; z-index: -90;
    background: radial-gradient(ellipse at center, rgba(210, 110, 60, 0.45) 0%, rgba(210, 110, 60, 0) 65%);
    transform: rotate(-15deg) scale(1.2); opacity: 0;
    animation: fadeInShapes 1.5s 0.1s ease-out forwards, breatheShape1 12s ease-in-out infinite 1.6s; will-change: opacity, transform, filter;
}

/* --- Overlay Shape Layer 2: Purple/Indigo --- */
body::after {
    content: ''; position: fixed; bottom: -25%; right: -25%; width: 110%; height: 110%; z-index: -80;
    background: radial-gradient(ellipse at center, rgba(90, 60, 150, 0.55) 0%, rgba(90, 60, 150, 0) 70%);
    transform: rotate(20deg) scale(1.1); opacity: 0;
    animation: fadeInShapes 1.5s 0.1s ease-out forwards, breatheShape2 14s ease-in-out infinite 1.7s; will-change: opacity, transform, filter;
}

/* --- Film Grain Noise Layer --- */
#noise-overlay {
    content: ""; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
    background-size: 200px 200px; opacity: 0.08; z-index: -5; pointer-events: none;
    animation: noiseAnim 0.4s steps(1) infinite;
}
@keyframes noiseAnim { 0% { transform: translate(0, 0); } 25% { transform: translate(-3px, 3px); } 50% { transform: translate(3px, -3px); } 75% { transform: translate(-3px, -3px); } 100% { transform: translate(3px, 3px); } }

/* --- Floating Emoji Container & Styles --- */
#emoji-rain-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -50; overflow: hidden; }
.floating-emoji { position: absolute; bottom: -80px; opacity: 0; will-change: transform, opacity; animation: floatUp linear infinite; height: auto; }
@keyframes floatUp { 0% { transform: translateY(0) scale(var(--emoji-scale, 1)) rotate(0deg); opacity: 0; } 15%, 85% { opacity: 0.9; } 100% { transform: translateY(-110vh) scale(var(--emoji-scale, 1)) rotate(var(--emoji-rotate, 15deg)); opacity: 0; } }

/* --- Keyframes for Shape Fade-In & Breathing/Hue Rotation --- */
@keyframes fadeInShapes { from { opacity: 0; } to { opacity: 0.8; } }
@keyframes breatheShape1 { 0%, 100% { transform: rotate(-15deg) scale(1.2) translate(0, 0); opacity: 0.7; filter: hue-rotate(0deg); } 50% { transform: rotate(-10deg) scale(1.25) translate(2%, -3%); opacity: 0.8; filter: hue-rotate(15deg); } }
@keyframes breatheShape2 { 0%, 100% { transform: rotate(20deg) scale(1.1) translate(0, 0); opacity: 0.75; filter: hue-rotate(0deg); } 50% { transform: rotate(25deg) scale(1.18) translate(-2%, 2%); opacity: 0.85; filter: hue-rotate(-10deg); } }

/* --- Gradient Animation Definitions (for text) --- */
:root {
  /* Define the gradient sequence ONCE, repeating start color at end */
  --gradient-anim: linear-gradient(90deg,
    #f72585, /* Pink */
    #ff8c00, /* Orange */
    #4361ee, /* Blue */
    #7209b7, /* Purple */
    #ff4040, /* Red */
    #f72585  /* Pink (Start color repeated) */
  );
}

/* Animate background-position for scrolling */
@keyframes gradientScroll {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; } /* Scroll exactly the width of the defined gradient */
}

.gradient-text {
    display: inline-block;
    background-image: var(--gradient-anim);
    /* --- Change Here: Background Size --- */
    /* Make the background gradient wider than the element */
    /* 200% means the defined gradient is twice the width */
    /* Larger values (e.g., 300%, 400%) make the visible colors wider */
    background-size: 300% auto;
    /* --- End Change --- */
    background-clip: text;
    -webkit-background-clip: text;
    color: rgba(255, 255, 255, 0.01); /* Slightly opaque */
    /* Use background-position animation */
    /* --- Change Here: Animation Speed --- */
    animation: gradientScroll 15s linear infinite; /* Adjust duration (e.g., 15s) */
    /* --- End Change --- */
}


/* --- Wrapper for Main Content --- */
.main-content-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; position: relative; z-index: 1; padding: 20px; }

/* --- Large Panda Styling --- */
#panda-hero {
    width: 220px; height: 220px; margin-bottom: -50px; z-index: 2; position: relative; display: block; filter: drop-shadow(0px 10px 18px rgba(0,0,0,0.55));
    transform: scale(0); opacity: 0; animation: balloonIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s forwards; will-change: transform, opacity;
}
@keyframes balloonIn { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* --- Main Content Container --- */
.container {
    max-width: 600px; width: 100%; text-align: center; padding: 40px; padding-top: 80px; background-color: rgba(35, 35, 40, 0.8); border-radius: 18px; border: 1px solid rgba(100, 100, 100, 0.2); box-shadow: 0 12px 45px rgba(0, 0, 0, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; z-index: 1;
}

/* --- Header --- */
header h1 {
    font-size: 2.8em; font-weight: 700; margin-bottom: 0.2em; color: #ffffff; letter-spacing: -1px; display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8));
}
.heading-icon { width: 1em; height: 1em; vertical-align: middle; flex-shrink: 0; }
.rocket-icon { margin-right: 0.25em; }
.fire-icon { margin-left: 0.25em; }
.tagline {
    font-size: 1.1em; color: #cccccc; margin-bottom: 2.5em; font-weight: 400;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.6);
}

/* --- Button Grid --- */
.button-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 2.5em; }
@media (min-width: 500px) { .button-grid { grid-template-columns: 1fr 1fr; } .youtube-button { grid-column: 1 / -1; } }

/* --- Base Button Styles --- */
.button { display: flex; align-items: center; justify-content: center; background-color: rgba(65, 65, 70, 0.85); color: #f0f0f0; text-decoration: none; padding: 14px 18px; border-radius: 10px; font-size: 1em; font-weight: 600; text-align: center; border: 1px solid rgba(110, 110, 110, 0.3); transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.3); position: relative; overflow: hidden; }
.button-icon { height: 1.6em; width: 1.6em; margin-right: 10px; flex-shrink: 0; transition: transform 0.3s ease; }
/* Hover for NON-YouTube buttons */
.button:not(.youtube-button):hover { background-color: rgba(95, 95, 100, 0.95); transform: translateY(-6px) scale(1.06); box-shadow: 0 12px 25px rgba(50, 50, 50, 0.5); border-color: rgba(130, 130, 130, 0.45); }
.button:not(.youtube-button):hover .button-icon { transform: scale(1.15) rotate(-8deg); }

/* --- YouTube Button Specific Styles --- */
.youtube-button { background: #000; border: 1px solid #333; color: white; padding: 16px 20px; }
.youtube-button:hover { background: #181818; border-color: #555; transform: translateY(-6px) scale(1.06); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5); }
/* YouTube Icon Style */
.youtube-button .youtube-icon { height: 1.4em; width: calc(1.4em * 1.42); margin-right: 10px; animation: none; }
/* YouTube Text Style */
.youtube-button .button-text { color: white; }

/* --- Footer --- */
footer { margin-top: 30px; font-size: 0.9em; color: #a0a0a0; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); }