/* Reveal-on-scroll text: letters fade and sharpen into view as the block scrolls up the viewport. */

.reveal-text__word {
    display: inline-block;
}

.reveal-text__char {
    display: inline-block;
    opacity: 0;
    filter: blur(6px);
    will-change: opacity, filter;
}

.hr svg:hover{

}

/* Puzzle images slide in from their aligned side and settle into place on scroll. */
.puzzlesBlock .item {
    transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .8s ease;
}

.puzzlesBlock .item.puzzles-hidden {
    opacity: 0;
}

/* image-block images fade in on scroll, opacity only, no movement. */
.img-reveal {
    transition: opacity .8s ease;
}

.img-reveal.img-hidden {
    opacity: 0;
}

/* Footer contact links: underline sweeps in from the left over 500ms on hover/focus. */
.footer-contact-link {
    position: relative;
    text-decoration: none;
    /*color: inherit;*/
}

.footer-contact-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.05em;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100%;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.footer-contact-link:hover::after,
.footer-contact-link:focus-visible::after {
    transform-origin: 0;
    transform: scaleX(1);
}

/* Menu contact rows: the clickable area covers label + value together, but
   only the value should get the underline — so the hover trigger listens on
   the whole row (.contact-row-link) while the underline itself stays scoped
   to the value element (.footer-contact-link) inside it. */
.contact-row-link:hover .footer-contact-link::after,
.contact-row-link:focus-visible .footer-contact-link::after {
    transform-origin: 0;
    transform: scaleX(1);
}

/* Footer icon buttons: a soft circle grows behind the icon and the icon itself
   does a small springy bounce+tilt. Icons are background-image SVGs, so we
   can't animate fill/stroke directly — this works around that. */
.footer-icon {
    position: relative;
    z-index: 1;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.footer-icon::before {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border-radius: 50%;
    background: var(--color-orange);
    opacity: 0;
    transform: scale(.4);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease, background-color .2s ease;
}

.footer-icon:hover,
.footer-icon:focus-visible {
    transform: scale(1.15) rotate(-8deg);
}

.footer-icon:hover::before,
.footer-icon:focus-visible::before {
    opacity: .14;
    transform: scale(1);
}

/* emailCopy feedback: contactActions.js toggles .is-copied for ~1.2s after a
   successful clipboard write — otherwise clicking it gives no visible result. */
.footer-icon[data-copy-value] {
    overflow: visible;
}

.footer-icon[data-copy-value]::after {
    content: "Copied!";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(6px);
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--color-dark-blue);
    color: var(--color-pink-white);
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.footer-icon[data-copy-value].is-copied {
    transform: scale(1.15) rotate(-8deg);
}

.footer-icon[data-copy-value].is-copied::before {
    opacity: .2;
    transform: scale(1);
    background: var(--color-dark-blue);
}

/* Menu icons: dark-blue backdrop instead of orange, same tone as "copied". */
.menu-container .footer-icon::before {
    background: var(--color-dark-blue);
}

.footer-icon[data-copy-value].is-copied::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}