/* =============================================
   gamelicensor.pro - Retro Professional Styles
   ============================================= */

/* Palette:
   Terracotta Warm: #C47A5A
   Cream Ivory:     #FAF3E6
   Vintage Teal:    #3A8A7A
   Seal Gold:       #C4A444
   Espresso Brown:  #3A2A1E
   Retro Coral:     #D4706A
   Faded Sage:      #7A8A6E
*/

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 400;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.75;
    color: #3A2A1E;
    background-color: #C47A5A;
    overflow-x: hidden;
}

/* =============================================
   Hero Section
   ============================================= */

.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #C47A5A;
    padding: 60px 20px;
    position: relative;
}

.badge-container {
    position: relative;
    margin-bottom: 60px;
}

#badge-svg {
    display: block;
}

/* Badge ring drawing animation via stroke-dashoffset */
.badge-ring {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.ring-outer {
    animation: drawRing 300ms ease-out 500ms forwards;
}

.ring-middle {
    animation: drawRing 300ms ease-out 700ms forwards;
}

.ring-inner {
    animation: drawRing 300ms ease-out 900ms forwards;
}

@keyframes drawRing {
    to {
        stroke-dashoffset: 0;
    }
}

/* Badge text appears after rings */
.badge-text {
    font-family: 'Courier Prime', monospace;
    opacity: 0;
    animation: fadeIn 400ms ease-out 1400ms forwards;
}

/* Badge icon appears after text */
.badge-icon {
    opacity: 0;
    transform-origin: center;
    animation: badgeIconIn 300ms ease-out 1400ms forwards;
}

@keyframes badgeIconIn {
    0% {
        opacity: 0;
        transform: translate(160px, 160px) scale(0);
    }
    100% {
        opacity: 1;
        transform: translate(160px, 160px) scale(1);
    }
}

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

/* Hero credentials stagger in */
.hero-credentials {
    opacity: 0;
    animation: fadeIn 400ms ease-out 2000ms forwards;
}

.credential-list {
    list-style: none;
    text-align: center;
}

.hero-credentials .credential-item {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.3vw, 17px);
    color: #FAF3E6;
    padding: 8px 0;
    opacity: 0;
    transform: translateY(20px);
    animation: staggerIn 400ms ease-out forwards;
}

.hero-credentials .credential-item:nth-child(1) { animation-delay: 2000ms; }
.hero-credentials .credential-item:nth-child(2) { animation-delay: 2150ms; }
.hero-credentials .credential-item:nth-child(3) { animation-delay: 2300ms; }
.hero-credentials .credential-item:nth-child(4) { animation-delay: 2450ms; }
.hero-credentials .credential-item:nth-child(5) { animation-delay: 2600ms; }
.hero-credentials .credential-item:nth-child(6) { animation-delay: 2750ms; }

@keyframes staggerIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================
   Retro Rule Dividers
   ============================================= */

.retro-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
}

.rule-line {
    display: block;
    width: 0;
    height: 1px;
    background-color: #C4A444;
    transition: width 800ms ease-out;
}

.retro-rule.is-visible .rule-line {
    width: 120px;
}

.rule-ornament {
    font-size: 18px;
    color: #C4A444;
    opacity: 0;
    transition: opacity 400ms ease-out 600ms;
}

.retro-rule.is-visible .rule-ornament {
    opacity: 1;
}

/* =============================================
   Content Sections
   ============================================= */

.content-section {
    max-width: 720px;
    margin: 0 auto;
    padding: 60px 24px;
    background-color: #FAF3E6;
    position: relative;
}

.content-section:nth-of-type(odd) {
    background-color: #FAF3E6;
}

.content-section:nth-of-type(even) {
    background-color: #FAF3E6;
}

/* Full-width wrapper for alternating backgrounds */
#expertise,
#services,
#process,
#credentials,
#philosophy {
    max-width: 100%;
    padding-left: calc((100% - 720px) / 2 + 24px);
    padding-right: calc((100% - 720px) / 2 + 24px);
}

@media (max-width: 768px) {
    #expertise,
    #services,
    #process,
    #credentials,
    #philosophy {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.section-heading {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(28px, 5vw, 64px);
    line-height: 1.1;
    margin-bottom: 32px;
    color: #3A2A1E;
    text-align: center;
}

.weight-light {
    font-weight: 200;
}

.weight-heavy {
    font-weight: 800;
}

.section-body {
    max-width: 720px;
    margin: 0 auto;
}

.section-body p {
    margin-bottom: 24px;
    color: #3A2A1E;
}

/* =============================================
   Tropical Fish Accents
   ============================================= */

.fish-accent {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    opacity: 0;
    transform: scale(0);
    transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fish-accent.is-visible {
    opacity: 1;
    transform: scale(1);
}

.fish-accent-1 {
    justify-content: flex-end;
    padding-right: 15%;
}

.fish-accent-2 {
    justify-content: flex-start;
    padding-left: 15%;
}

.fish-accent-3 {
    justify-content: flex-end;
    padding-right: 20%;
}

.fish-accent-4 {
    justify-content: flex-start;
    padding-left: 20%;
}

.fish-svg {
    display: block;
}

/* =============================================
   Stagger-revealed Lists
   ============================================= */

.stagger-list .credential-item,
.stagger-list .process-step,
.stagger-list .cert-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.stagger-list.is-visible .credential-item,
.stagger-list.is-visible .process-step,
.stagger-list.is-visible .cert-item {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays applied via JS inline style or nth-child */
.stagger-list.is-visible .credential-item:nth-child(1),
.stagger-list.is-visible .process-step:nth-child(1),
.stagger-list.is-visible .cert-item:nth-child(1) { transition-delay: 0ms; }

.stagger-list.is-visible .credential-item:nth-child(2),
.stagger-list.is-visible .process-step:nth-child(2),
.stagger-list.is-visible .cert-item:nth-child(2) { transition-delay: 150ms; }

.stagger-list.is-visible .credential-item:nth-child(3),
.stagger-list.is-visible .process-step:nth-child(3),
.stagger-list.is-visible .cert-item:nth-child(3) { transition-delay: 300ms; }

.stagger-list.is-visible .credential-item:nth-child(4),
.stagger-list.is-visible .process-step:nth-child(4),
.stagger-list.is-visible .cert-item:nth-child(4) { transition-delay: 450ms; }

.stagger-list.is-visible .credential-item:nth-child(5),
.stagger-list.is-visible .process-step:nth-child(5),
.stagger-list.is-visible .cert-item:nth-child(5) { transition-delay: 600ms; }

.stagger-list.is-visible .credential-item:nth-child(6),
.stagger-list.is-visible .process-step:nth-child(6),
.stagger-list.is-visible .cert-item:nth-child(6) { transition-delay: 750ms; }

/* Services list in content sections */
.content-section .credential-list {
    text-align: left;
    max-width: 720px;
    margin: 0 auto;
}

.content-section .credential-item {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.3vw, 17px);
    color: #3A2A1E;
    padding: 10px 0;
    border-bottom: 1px solid rgba(58, 42, 30, 0.15);
}

.content-section .credential-item:last-child {
    border-bottom: none;
}

/* =============================================
   Process Steps
   ============================================= */

.process-steps {
    margin-top: 32px;
}

.process-step {
    display: flex;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(58, 42, 30, 0.12);
    align-items: flex-start;
}

.process-step:last-child {
    border-bottom: none;
}

.step-number {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 40px);
    color: #C4A444;
    line-height: 1;
    min-width: 56px;
}

.step-content h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    color: #3A2A1E;
    margin-bottom: 8px;
}

.step-content p {
    font-size: clamp(14px, 1.3vw, 16px);
    line-height: 1.65;
    color: #3A2A1E;
    margin-bottom: 0;
}

/* =============================================
   Certification Grid
   ============================================= */

.cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

@media (max-width: 600px) {
    .cert-grid {
        grid-template-columns: 1fr;
    }
}

.cert-item {
    background-color: rgba(196, 164, 68, 0.08);
    border: 1px solid rgba(196, 164, 68, 0.25);
    border-radius: 8px;
    padding: 20px 24px;
}

.cert-code {
    display: block;
    font-family: 'Courier Prime', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #3A8A7A;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.cert-label {
    display: block;
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #3A2A1E;
}

/* =============================================
   Minimal Illustrations (stroke draw)
   ============================================= */

.illustration {
    display: flex;
    justify-content: center;
    padding: 40px 0 0;
}

.illustration-svg {
    display: block;
}

.draw-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    transition: stroke-dashoffset 800ms ease-out;
}

.illustration.is-visible .draw-path {
    stroke-dashoffset: 0;
}

/* =============================================
   Philosophy / Blockquote
   ============================================= */

.philosophy-quote {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(20px, 3vw, 32px);
    line-height: 1.5;
    color: #3A8A7A;
    border-left: 4px solid #C4A444;
    padding-left: 28px;
    margin-bottom: 32px;
    font-style: italic;
}

/* =============================================
   Footer
   ============================================= */

.footer {
    background-color: #3A2A1E;
    padding: 60px 24px;
    text-align: center;
}

.footer-badge {
    margin-bottom: 20px;
}

.footer-badge svg {
    display: inline-block;
}

.footer-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #FAF3E6;
    margin-bottom: 8px;
}

.footer-sub {
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #7A8A6E;
}

/* =============================================
   Badge sticky behavior on scroll
   ============================================= */

.badge-container.is-sticky {
    position: fixed;
    top: -50vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
    transition: opacity 300ms ease-out;
}

.badge-container.is-fading {
    opacity: 0.1;
}

/* =============================================
   Responsive adjustments
   ============================================= */

@media (max-width: 480px) {
    .hero {
        padding: 40px 16px;
    }

    #badge-svg {
        width: 240px;
        height: 240px;
    }

    .badge-container {
        margin-bottom: 40px;
    }

    .process-step {
        flex-direction: column;
        gap: 12px;
    }

    .step-number {
        min-width: auto;
    }

    .retro-rule {
        padding: 24px 16px;
    }

    .retro-rule.is-visible .rule-line {
        width: 60px;
    }
}