/**
 * home.css — homepage-specific styles
 * ==========================================
 * Accreditation aside, social links, Bluesky flutter animation.
 *
 * Load order: page-specific CSS.
 */

/* ===== ASIDE (rotated attribution) ===== */
aside.side {
    background-color: #292b31;
    display: block;
    height: auto;
    padding: 0.25rem 0.66rem;;
    position: absolute;
    right: calc(-50vw + 1.25rem);
    top: -17rem;
    transform: rotate(-90deg);
    width: 100%;
}

.side p {
    align-items: center;
    color: #727786;
    display: flex;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    gap: 0.4em;
    text-transform: uppercase;
}

.side a {
    align-items: center;
    color: #5c6b94;
    display: inline-flex;
    text-decoration: none;
}

.side a:hover,
.side a:focus,
.side a:active {
    color: #4d5f8c;
}

/* Claude icon in aside — size to match text cap-height */
.side-icon {
    display: block;
    height: 1em;
    width: auto;
}

/* ===== SOCIAL LINKS LIST ===== */
ul.links {
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
    position: fixed;
    right: 20px;
}

ul.links li {
    display: block;
}

ul.links a {
    align-items: center;
    display: flex;
}

/* Icon sizing */
.links-icon {
    display: block;
    height: 2rem;
    width: 2rem;
}

/* ===== BLUESKY FLUTTER ANIMATION ===== */
/* Adapted from https://github.com/nicholasgasior/bluesky-flutterby (MIT) */
.bsky-flutter {
    color: #0085ff;
    display: block;
    height: 2rem;
    transition: transform 200ms;
    width: 2rem;
}

.bsky-flutter .left {
    transform-origin: center;
}

.bsky-flutter .right {
    transform: scale(-1, 1);
    transform-origin: center;
}

.bsky-flutter:hover,
.bsky-flutter:focus {
    transform: rotate(-5deg);
    transition: transform 500ms;
}

.bsky-flutter:hover .left,
.bsky-flutter:focus .left {
    animation: bsky-flutter 430ms ease-in-out;
    --flip: 1;
}

.bsky-flutter:hover .right,
.bsky-flutter:focus .right {
    animation: bsky-flutter 500ms ease-in-out;
    --flip: -1;
}

@keyframes bsky-flutter {
    10%  { transform: scale(calc(var(--flip) * 1), 0.9); }
    20%  { transform: scale(calc(var(--flip) * 0.5), 1); }
    40%  { transform: scale(calc(var(--flip) * 0.9), 0.95); }
    60%  { transform: scale(calc(var(--flip) * 0.3), 1); }
    80%  { transform: scale(calc(var(--flip) * 0.9), 0.95); }
    100% { transform: scale(calc(var(--flip) * 1), 1); }
}

@media (prefers-reduced-motion: reduce) {
    .bsky-flutter:hover .left,
    .bsky-flutter:focus .left,
    .bsky-flutter:hover .right,
    .bsky-flutter:focus .right {
        animation: none;
    }
}

/* ===== CLAUDE CREDIT ICON — anticlockwise dip then clockwise spin ===== */
@keyframes claude-spin {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-20deg); }
    100% { transform: rotate(360deg); }
}

.credit-claude:hover .side-icon,
.credit-claude:focus .side-icon {
    animation: claude-spin 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===== SOUNDCLOUD ICON — concentric orange ripples + inner glow ===== */
/* overflow:hidden + border-radius:50% clips all effects to the 32px circle */
.links-soundcloud {
    border-radius: 50%;
    height: 2rem;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.3s ease;
    width: 2rem;
}

.links-soundcloud:hover {
    box-shadow: inset 0 0 10px rgba(255, 119, 0, 0.45);
}

.links-soundcloud::before,
.links-soundcloud::after {
    border: 1.5px solid rgba(255, 119, 0, 0.8);
    border-radius: 50%;
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: scale(0.05);
}

.links-soundcloud:hover::before {
    animation: sc-ring 1.3s ease-out infinite;
}

.links-soundcloud:hover::after {
    animation: sc-ring 1.3s ease-out 0.45s infinite;
}

@keyframes sc-ring {
    0%   { opacity: 1; transform: scale(0.05); }
    65%  { opacity: 0.4; }
    100% { opacity: 0; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .credit-claude:hover .side-icon,
    .credit-claude:focus .side-icon {
        animation: none;
    }

    .links-soundcloud:hover::before,
    .links-soundcloud:hover::after {
        animation: none;
    }
}