/* ========================================================
   CONTACT PAGE — Page-specific CSS
   fasterpen/assets/css/contact.css
   ======================================================== */

/* ---- Hero Router (split-screen image states) ---- */
.router-img {
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.router-img.active-img {
    filter: grayscale(0%) opacity(100%);
    transform: scale(1.02);
}

.router-img.inactive-img {
    filter: grayscale(100%) opacity(30%);
    transform: scale(0.95);
}

.split-btn:hover .inactive-img {
    filter: grayscale(50%) opacity(70%);
    transform: scale(0.98);
}

/* ---- Slide-up content overlay ---- */
.content-overlay {
    border-top-left-radius: 3rem;
    border-top-right-radius: 3rem;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.06);
    scroll-margin-top: 50px;
}

@media (max-width: 768px) {
    .content-overlay {
        border-top-left-radius: 2rem;
        border-top-right-radius: 2rem;
    }
}

/* Bouncing scroll arrow */
.bounce-arrow {
    animation: fp-bounce 2s infinite;
}

@keyframes fp-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40%  { transform: translateY(10px); }
    60%  { transform: translateY(5px); }
}

/* ---- Background marker draw (contact section) ---- */
.bg-marker-draw {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-active .bg-marker-draw {
    stroke-dashoffset: 0;
}

/* ---- Premium glass card (form wrapper + map) ---- */
.premium-glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                border 0.5s ease;
    position: relative;
    overflow: hidden;
}

.premium-glass-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(6, 81, 237, 0.08);
    border: 1px solid rgba(255, 255, 255, 1);
}

/* Radial shimmer on hover */
.premium-glass-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.9),
        transparent 40%
    );
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.premium-glass-card:hover::before {
    opacity: 1;
}

/* ---- Multi-step form ---- */
.step-content {
    display: none;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.4s ease;
}

.step-content.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

/* Step indicators */
.step-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.step-indicator.inactive {
    background-color: #f1f5f9;
    color: #9ca3af;
    border: 1px solid #e2e8f0;
}

.step-indicator.active {
    background-color: #ffffff;
    color: #0651ed;
    border: 2px solid #0651ed;
    box-shadow: 0 0 10px rgba(6, 81, 237, 0.2);
}

.step-indicator.complete {
    background-color: #0651ed;
    color: #ffffff;
    border: 2px solid #0651ed;
}

/* Step connector bar */
.step-connector {
    flex-grow: 1;
    height: 3px;
    background-color: #f1f5f9;
    margin: 0 8px;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.step-connector-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #0651ed;
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Radio cards (inquiry type) ---- */
.radio-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

.radio-card-inner {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.radio-card:hover .radio-card-inner {
    border-color: #cbd5e1;
    background: rgba(255, 255, 255, 0.8);
}

.radio-card input:checked + .radio-card-inner {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(6, 81, 237, 0.08);
}

.radio-card input:checked + .radio-card-inner .radio-dot {
    border-color: #0651ed;
}

.radio-card input:checked + .radio-card-inner .radio-dot::after {
    background-color: #0651ed;
    transform: scale(1);
}

.radio-dot {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

.radio-dot::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: transparent;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ---- Whiteboard-style inputs ---- */
.whiteboard-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    color: #111827;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    padding: 0.75rem 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    border-radius: 0;
}

.whiteboard-input:hover { border-color: #cbd5e1; }

.whiteboard-input:focus {
    outline: none;
    border-color: #0651ed;
}

/* Floating label */
.floating-label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.whiteboard-input:focus ~ .floating-label,
.whiteboard-input:not(:placeholder-shown) ~ .floating-label {
    top: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0651ed;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- Magnetic submit button ---- */
.magnetic-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1),
                box-shadow 0.3s ease;
    will-change: transform;
}

.magnetic-btn::before {
    content: '';
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    transform: translate(-50%, -50%) scale(0);
    width: 200%;
    padding-bottom: 200%;
    border-radius: 50%;
    background-color: #19274e;
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: -1;
}

.magnetic-btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

.magnetic-btn:hover {
    box-shadow: 0 15px 30px rgba(6, 81, 237, 0.2);
}

/* ---- Google Map embed ---- */
.custom-map {
    filter: grayscale(100%) contrast(110%) opacity(0.85);
    transition: filter 0.5s ease;
}

.custom-map:hover {
    filter: grayscale(30%) contrast(100%) opacity(1);
}

/* ---- Contact section pigeon overlay ---- */
#contact-section {
    --contact-pigeon-width-min: 11rem;
    --contact-pigeon-width-pref: 22%;
    --contact-pigeon-width-max: 16rem;
    --contact-pigeon-right: 0rem;
    --contact-pigeon-bottom: 0rem;
    --contact-pigeon-rotate: 0deg;
}

.contact-section-pigeon {
    position: absolute;
    right: var(--contact-pigeon-right);
    bottom: var(--contact-pigeon-bottom);
    width: clamp(
        var(--contact-pigeon-width-min),
        var(--contact-pigeon-width-pref),
        var(--contact-pigeon-width-max)
    );
    height: auto;
    z-index: 15;
    pointer-events: none;
    user-select: none;
    transform: rotate(var(--contact-pigeon-rotate));
}

.contact-section-pigeon.active {
    animation: fp-pigeon-float 3.8s ease-in-out infinite;
}

@keyframes fp-pigeon-float {
    0%   { transform: translateY(0) rotate(var(--contact-pigeon-rotate)); }
    50%  { transform: translateY(-10px) rotate(calc(var(--contact-pigeon-rotate) - 1deg)); }
    100% { transform: translateY(0) rotate(var(--contact-pigeon-rotate)); }
}

@media (max-width: 767px) {
    .contact-section-pigeon { display: none; }
}

/* ---- Career accordion cards ---- */
.job-card {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Blue highlighter top-sweep on active */
.job-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: #0651ed;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.job-card.active {
    border-color: #cbd5e1;
    box-shadow: 0 15px 40px rgba(6, 81, 237, 0.08);
    transform: translateY(-4px);
}

.job-card.active::before {
    transform: scaleX(1);
}

/* Fluid height expansion */
.job-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.4s ease,
                padding 0.4s ease;
}

.job-card.active .job-content {
    max-height: 800px;
    opacity: 1;
    padding-bottom: 2rem;
}

/* Plus → X icon rotation */
.job-icon {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.3s ease;
}

.job-card.active .job-icon {
    transform: rotate(45deg);
    color: #0651ed;
}

/* Requirements checkmark list */
.req-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
}

.req-list li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: #0651ed;
    font-weight: 800;
    font-size: 1rem;
}

/* ---- Career side image ---- */
.career-side-image {
    max-height: 85vh;
    width: auto;
    object-fit: contain;
    margin-top: 0;
    transform: translateX(40px);
}