/* ── Flag Button Component ──
   Used on homepage (animated) and inner pages (static).
   On .home-page the flap animation is enabled via .flag-btn--animated.
   The flag sits on a vertical pole, attached at the pole's top.
   --peak-left / --peak-top are set inline to position each flag.
*/

.flag-btn {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* translate so the bottom of the pole sits at the peak */
    transform: translate(-50%, -100%);
    left: var(--peak-left);
    top: var(--peak-top);
    cursor: pointer;
    z-index: 10;
}

/* Pole */
.flag-pole {
    display: block;
    width: 3px;
    height: 36px;
    background: #000;
    margin-left: 1px; /* optical alignment */
    flex-shrink: 0;
}

/* Flag label — pixel font, black bg, white text */
.flag-label {
    display: inline-block;
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(6px, 1vw, 9px);
    color: #fff;
    background: #000;
    padding: 6px 10px;
    white-space: nowrap;
    /* pixel-crisp border */
    image-rendering: pixelated;
    /* slight skew mimics a flag catching wind */
    transform-origin: left center;
}

/* Flap animation — only on home page */
.home-page .flag-btn .flag-label {
    animation: flag-flap 3s ease-in-out infinite;
}

.home-page .flag-about    .flag-label { animation-delay: 0s; }
.home-page .flag-case-studies .flag-label { animation-delay: 0.6s; }
.home-page .flag-contact  .flag-label { animation-delay: 1.2s; }

/* Gentle flap: the right edge rises and falls slightly */
@keyframes flag-flap {
    0%   { transform: skewY(0deg)   scaleY(1);    }
    20%  { transform: skewY(-1.5deg) scaleY(0.97); }
    50%  { transform: skewY(0.5deg) scaleY(1.01); }
    80%  { transform: skewY(-1deg)  scaleY(0.98); }
    100% { transform: skewY(0deg)   scaleY(1);    }
}

/* Hover state */
.flag-btn:hover .flag-label {
    background: #333;
}

.flag-btn:focus-visible {
    outline: 3px solid #000;
    outline-offset: 4px;
}