/*
Theme Name: Y2K Creator Kit Styles
Description: Pure CSS module & layout rules for Y2K Creator Kit. Consumes Template Core 10 Standard Semantic Tokens.
Version: 1.0.0
*/

/* ==========================================================================
   1. Base Module & Container Layouts
   ========================================================================== */

.tc-card-box {
    background: var(--tc-color-surface, #ffffff);
    color: var(--tc-color-text, #000000);
    border-radius: var(--tc-radius, 16px);
    box-shadow: var(--tc-shadow, none);
    border: 1px solid var(--tc-color-border, transparent);
    padding: 40px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tc-hero-box {
    background: var(--tc-color-surface, #ffffff);
    color: var(--tc-color-text, #000000);
    border-radius: var(--tc-radius, 16px);
    box-shadow: var(--tc-shadow, none);
    border: 1px solid var(--tc-color-border, transparent);
    padding: 80px 40px;
}

.tc-section-padding {
    padding-top: 50px;
    padding-bottom: 50px;
}

.tc-button-radius a.wp-element-button, 
.tc-button-radius .wp-block-button__link,
.wp-block-button.tc-button-radius a {
    border-radius: var(--tc-radius, 8px);
    font-family: var(--tc-font-display, inherit);
    transition: transform 0.2s ease, filter 0.2s ease;
}

.tc-button-radius a.wp-element-button:hover,
.tc-button-radius .wp-block-button__link:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* ==========================================================================
   2. Module 1: Creator Stats Reach Counter
   ========================================================================== */

.tc-module-stats {
    width: 100%;
}

.tc-module-stats-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 25px;
}

.tc-stat-item {
    flex: 1;
    min-width: 180px;
}

.tc-stat-number {
    color: var(--tc-color-accent, #ff007f);
    margin: 0;
    font-size: 2.8rem;
    font-weight: 800;
    font-family: var(--tc-font-display, inherit);
    line-height: 1.1;
}

.tc-stat-label {
    margin: 8px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tc-color-text, #000000);
    font-family: var(--tc-font-body, inherit);
    opacity: 0.85;
}

/* ==========================================================================
   3. Module 2: Creator Profile Bio Card
   ========================================================================== */

.tc-module-profile {
    width: 100%;
}

.tc-profile-flex {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-wrap: wrap;
}

.tc-profile-avatar {
    max-width: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tc-profile-avatar img,
.tc-profile-avatar svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}

.tc-profile-content {
    flex: 1;
    min-width: 220px;
}

.tc-profile-heading {
    margin: 0 0 10px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tc-color-accent, #ff007f);
    font-family: var(--tc-font-display, inherit);
}

.tc-profile-bio {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--tc-color-text, #000000);
    font-family: var(--tc-font-body, inherit);
}

/* ==========================================================================
   4. Module 3: Media Kit Download Widget
   ========================================================================== */

.tc-module-media-kit {
    width: 100%;
}

.tc-media-kit-box {
    text-align: center;
}

.tc-media-kit-heading {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tc-color-text, #000000);
    font-family: var(--tc-font-display, inherit);
}

.tc-media-kit-desc {
    margin: 0 0 25px;
    font-size: 1.05rem;
    color: var(--tc-color-text, #000000);
    font-family: var(--tc-font-body, inherit);
    opacity: 0.9;
}

.tc-media-kit-btn {
    background: var(--tc-color-accent, #ff007f) !important;
    color: var(--tc-color-surface, #ffffff) !important;
    border-radius: var(--tc-radius, 8px) !important;
    padding: 14px 28px !important;
    text-decoration: none !important;
    display: inline-block !important;
    font-weight: 700 !important;
    font-family: var(--tc-font-display, inherit) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ==========================================================================
   5. Dynamic Universe Asset & Badge Graphics (Scoped)
   ========================================================================== */

.tc-universe-asset,
.tc-module-asset-block {
    display: inline-block;
    vertical-align: middle;
    height: auto;
}

.tc-universe-asset img,
.tc-module-asset-block img,
.tc-module img,
.tc-card-box img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   6. Responsive Breakpoints
   ========================================================================== */

@media (max-width: 768px) {
    .tc-hero-box {
        padding: 40px 20px;
    }
    .tc-card-box {
        padding: 25px 20px;
    }
    .tc-module-stats-grid {
        flex-direction: column;
        gap: 20px;
    }
    .tc-stat-number {
        font-size: 2.2rem;
    }
    .tc-profile-flex {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================================
   Piece-by-Piece Style Preservation Scoped Variables
   ========================================================================== */

.tc-preserve-kit-y2k-creator {
    --tc-color-bg: #fff0f5 !important;
    --tc-color-surface: #ffffff !important;
    --tc-color-accent: #ff007f !important;
    --tc-color-secondary: #ff66b2 !important;
    --tc-color-text: #2b0017 !important;
    --tc-color-border: #ffd1dc !important;
    --tc-radius: 24px !important;
    --tc-shadow: 0 15px 35px rgba(255, 0, 127, 0.2) !important;
    --tc-font-display: "Comic Sans MS", "Bubblegum Sans", cursive, sans-serif !important;
    --tc-font-body: "Comic Sans MS", sans-serif !important;
}

/* ==========================================================================
   Y2K Creator Kit Custom Animation Keyframes
   ========================================================================== */

/* 1. Y2K Bubbly Bounce */
[data-tc-anim="y2k-bubbly-bounce"] {
    animation: y2kBubblyBounce 2.5s ease-in-out infinite !important;
    opacity: 1 !important;
}

@keyframes y2kBubblyBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-12px) scale(1.04); }
}

/* 2. Y2K Cyber Glitch */
[data-tc-anim="y2k-cyber-glitch"] {
    animation: y2kCyberGlitch 0.4s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
    opacity: 1 !important;
}

@keyframes y2kCyberGlitch {
    0% { transform: translate(0); }
    20% { transform: translate(-3px, 3px); }
    40% { transform: translate(-3px, -3px); }
    60% { transform: translate(3px, 3px); }
    80% { transform: translate(3px, -3px); }
    100% { transform: translate(0); }
}

/* 3. Y2K Chrome Metallic Shimmer */
[data-tc-anim="y2k-chrome-shimmer"] {
    animation: y2kChromeShimmer 3s ease-in-out infinite !important;
    opacity: 1 !important;
}

@keyframes y2kChromeShimmer {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(0, 240, 255, 0.4)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.9)); transform: scale(1.02); }
}

/* ==========================================================================
   Y2K Creator Kit Custom Treatment Presets
   ========================================================================== */

/* 1. Y2K Custom Borders */
[data-tc-box-border="y2k-chrome-bevel"],
.editor-styles-wrapper [data-tc-box-border="y2k-chrome-bevel"] {
    border: 3px solid #e2e8f0 !important;
    outline: 2px solid #00f0ff !important;
    outline-offset: 2px;
}

/* 2. Y2K Custom Glows */
[data-tc-box-glow="y2k-cyber-glitch-glow"],
.editor-styles-wrapper [data-tc-box-glow="y2k-cyber-glitch-glow"] {
    box-shadow: 0 0 10px #00ff66, 0 0 25px #00e5ff !important;
}

[data-tc-text-glow="y2k-pink-aura"],
.editor-styles-wrapper [data-tc-text-glow="y2k-pink-aura"],
.editor-styles-wrapper [data-tc-text-glow="y2k-pink-aura"] h1,
.editor-styles-wrapper [data-tc-text-glow="y2k-pink-aura"] h2,
.editor-styles-wrapper [data-tc-text-glow="y2k-pink-aura"] p {
    text-shadow: 0 0 10px #ff007f, 0 0 25px #ff66b2, 0 0 40px #ff007f !important;
    box-shadow: none !important;
}

/* 3. Y2K Custom Shadows */
[data-tc-box-shadow="y2k-arcade-3d"],
.editor-styles-wrapper [data-tc-box-shadow="y2k-arcade-3d"] {
    box-shadow: 5px 5px 0px #ff0055, 10px 10px 0px #ffcc00 !important;
}