/**
 * Reusable components — Phase 2
 */

/* Logo */
.brand-logo {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--text-light);
}

/* Hero heading — editorial */
.heading-display--hero {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 7vw, 5rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0.03em;
}

/* Droplet / vertical falling dots — divider below heading */
.droplet-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: var(--space-lg);
}

.droplet-dot {
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.5);
    opacity: 0.4;
    animation: droplet-fall 2.5s var(--ease-in-out) infinite;
}

.droplet-dot:nth-child(1) { animation-delay: 0s; }
.droplet-dot:nth-child(2) { animation-delay: 0.2s; }
.droplet-dot:nth-child(3) { animation-delay: 0.4s; }
.droplet-dot:nth-child(4) { animation-delay: 0.6s; }
.droplet-dot:nth-child(5) { animation-delay: 0.8s; }

@keyframes droplet-fall {
    0%, 100% { transform: translateY(0); opacity: 0.35; }
    50% { transform: translateY(10px); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .droplet-dot {
        animation: none;
    }
}

/* Button / link arrow */
.btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 1px solid var(--line-soft);
    color: var(--text-light);
    transition: border-color var(--duration-normal) var(--ease-smooth),
                transform var(--duration-normal) var(--ease-smooth),
                background var(--duration-normal) var(--ease-smooth);
}

.btn-arrow:hover {
    border-color: var(--accent-gold);
}

.btn-arrow svg {
    width: 14px;
    height: 14px;
}

/* Language switcher */
.lang-switcher {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    justify-content: center;
}

.lang-switcher__btn {
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: var(--space-xs) 0;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: color var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth),
                opacity var(--duration-normal) var(--ease-smooth);
}

.lang-switcher__btn:hover {
    color: var(--text-light);
}

.lang-switcher__btn.is-active {
    color: var(--accent-ivory);
    border-bottom-color: var(--accent-gold);
    opacity: 1;
}

.lang-switcher__btn:not(.is-active) {
    opacity: 0.7;
}

[data-i18n].i18n-transitioning,
.footer__link.i18n-transitioning,
.footer__social-link.i18n-transitioning {
    transition: opacity 0.2s var(--ease-premium);
}