/* ===============================
   BASE.CSS — shared across pages
   Path: /assets/css/base.css
   =============================== */

html, body { min-height: 100%; }
html { background: none !important; }

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

/* Local Inter (variable) */
@font-face{
    font-family: "Inter";
    src: url("../fonts/InterVariable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face{
    font-family: "Inter";
    src: url("../fonts/InterVariable-Italic.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root{
    --text: #E0E0E0;
    --gold1: #D4AF37;
    --gold2: #F4E5B8;
    --gold3: #C9A961;
    --orange: #FF8C00;
}

body {
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: transparent;
}

/* Shared gradients */
.gold-gradient{
    background: linear-gradient(135deg, var(--gold1) 0%, var(--gold2) 50%, var(--gold3) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Shared divider */
.divider{
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

/* Shared button */
.btn-secondary{
    border: 1px solid var(--orange);
    color: var(--orange);
    background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn-secondary:hover{
    background: rgba(212,175,55,0.1);
    transform: translateY(-2px);
}

/* LinkedIn silver hover */
.linkedin-silver{
    background: linear-gradient(
            135deg,
            #cfcfcf 0%,
            #b5b5b5 35%,
            #eeeeee 50%,
            #a9a9a9 70%,
            #d6d6d6 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.linkedin-silver:hover{
    transform: translateY(-2px);
    opacity: 0.85;
}

/* Touch devices: prevent hover lift weirdness */
@media (hover: none) and (pointer: coarse){
    .btn-secondary:hover{ transform: none; }
}

.animate-fade-in {
    animation: fadeIn 0.9s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===============================
   Shared panels + form fields
   =============================== */

.panel{
    border: 1px solid rgba(212, 175, 55, 0.2);
    background: rgba(10, 10, 10, 0.65);
    backdrop-filter: blur(10px);
    transition: none; /* no hover lift/shadow */
}

.field{
    border: 1px solid rgba(212, 175, 55, 0.25);
    background: rgba(5, 5, 5, 0.35);
    color: var(--text);
    outline: none;
}

.field:focus{
    border-color: rgba(255, 140, 0, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.12);
}

.card{
    border: 1px solid rgba(212,175,55,0.14);
    background: rgba(12,12,12,0.55);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.card:hover{
    transform: translateY(-4px);
    border-color: rgba(212,175,55,0.35);
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* Touch devices: avoid hover-jump */
@media (hover:none) and (pointer:coarse){
    .card:hover{ transform:none; box-shadow:none; }
    .card:active{
        transform: translateY(-2px);
        border-color: rgba(212,175,55,0.30);
        box-shadow: 0 10px 30px rgba(0,0,0,0.30);
    }
}