/* ========================================================
   ABOUT PAGE — Page-specific CSS
   fasterpen/assets/css/about.css
   ======================================================== */

/* Manufacturing / blueprint section background */
.blueprint-grid {
    background-color: #0a1128;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* SVG stroke draw animation (manufacturing highlight) */
.draw-stroke {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.draw-stroke.active {
    animation: fasterpen-draw-line 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.3s;
}

@keyframes fasterpen-draw-line {
    to { stroke-dashoffset: 0; }
}

/* Glass panel cards (manufacturing section) */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* Tech corner brackets (manufacturing cards) */
.tech-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: rgba(255, 255, 255, 0.3);
    border-style: solid;
}

/* Global Reach — pin pulse animation */
.pin-pulse {
    animation: fasterpen-pulse-ring 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes fasterpen-pulse-ring {
    0%   { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(3);   opacity: 0; }
}

/* Global Reach — animated route paths */
.route-path {
    stroke-dasharray: 4 4;
    animation: fasterpen-dash-move 30s linear infinite;
}

.route-path-solid {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.active .route-path-solid {
    stroke-dashoffset: 0;
}

@keyframes fasterpen-dash-move {
    to { stroke-dashoffset: -1000; }
}

/* Dot background (reach map card) */
.bg-dots {
    background-image: radial-gradient(rgba(6, 81, 237, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ----------------------------------------------------------------
   Global Reach — Bird above map
   Tune all bird sizing/position here ONLY (CSS custom properties)
   ---------------------------------------------------------------- */
.about-reach-map-stage {
    --about-reach-bird-width-min:    4.5rem;
    --about-reach-bird-width-pref:   22vw;
    --about-reach-bird-width-max:    10.5rem;
    --about-reach-bird-max-width-pct: 42%;
    --about-reach-bird-overlap-min:  2rem;
    --about-reach-bird-overlap-pref: 5.5vw;
    --about-reach-bird-overlap-max:  3.75rem;
    --about-reach-bird-tilt:    10deg;
    --about-reach-bird-nudge-x: 0;
    --about-reach-bird-nudge-y: -40px;
}

.about-reach-bird {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 30;
    width: clamp(
        var(--about-reach-bird-width-min),
        var(--about-reach-bird-width-pref),
        var(--about-reach-bird-width-max)
    );
    max-width: var(--about-reach-bird-max-width-pct);
    height: auto;
    object-fit: contain;
    pointer-events: none;
    margin-bottom: calc(-1 * clamp(
        var(--about-reach-bird-overlap-min),
        var(--about-reach-bird-overlap-pref),
        var(--about-reach-bird-overlap-max)
    ));
    transform: translate3d(
        var(--about-reach-bird-nudge-x),
        var(--about-reach-bird-nudge-y),
        0
    ) rotate(var(--about-reach-bird-tilt));
    transform-origin: 50% 100%;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.12));
}

/* Hide bird on small screens for cleaner map layout */
@media (max-width: 767px) {
    .about-reach-bird { display: none; }
}