/* experience: odyssey helmet */
.odyssey {
    --od-purple: #b657d1;
    --od-bronze: #c9a66b;
    display: flex;
    align-items: center;
    gap: clamp(18px, 5vw, 56px);
    padding: 18px 0 8px 30px;
    color: white;
}
.od-helm {
    position: relative;
    flex: 0 0 clamp(104px, 20%, 140px);
}
.od-me {
    display: block;
    -webkit-mask-image: linear-gradient(#000 92%, transparent);
    mask-image: linear-gradient(#000 92%, transparent);
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: "Geist", sans-serif;
}
.od-me .ln {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.od-me .hoodie-tx { font-size: 10.5px; font-weight: 700; fill: #f3e7d8; }
.od-eyes {
    transform-box: fill-box;
    transform-origin: center;
    animation: od-blink 5s infinite;
}
.od-trim {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.od-bob {
    animation: od-bob 4.5s ease-in-out infinite;
}
.od-crest {
    transform-box: view-box;
    transform-origin: 585px 64px;
    animation: od-sway 4.5s ease-in-out infinite;
}
.od-glint {
    animation: od-glint 4.5s ease-in-out infinite;
}
.od-shadow {
    width: 60%;
    height: 8px;
    margin: 6px auto 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(201, 166, 107, 0.35), transparent);
    animation: od-shadow 3.2s ease-in-out infinite;
}
.od-text {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    padding: 18px 22px 22px;
    border: 1px solid rgba(182, 87, 209, 0.3);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    opacity: 0;
    animation: appear2 2s ease forwards;
}
.od-meander {
    height: 10px;
    width: 100%;
    margin: 14px 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 9.500H20M12 9.500V1.500H4V6.500H8V4.500' fill='none' stroke='%23c9a66b' stroke-width='1.200' stroke-opacity='.7'/%3E%3C/svg%3E") repeat-x left center / 20px 10px;
}
.od-book {
    font-family: "Cinzel", serif;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--od-bronze);
}
.od-book span {
    margin: 0 4px;
    opacity: 0.6;
}
.od-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}
.od-role {
    margin: 0;
    font-family: "Cinzel", serif;
    font-weight: 700;
    font-size: clamp(20px, 3.4vw, 28px);
    line-height: 1.2;
}
.od-company {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--od-bronze);
    padding: 4px 8px;
    border-radius: 8px;
    background: #f4f1ff;
}
.od-company img {
    display: block;
    height: 22px;
    width: auto;
}
.od-desc {
    margin: 0;
    max-width: 520px;
    font-size: 14px;
    line-height: 1.6;
    color: darkgrey;
}
@keyframes od-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes od-sway {
    0%, 100% { transform: rotate(-0.8deg); }
    50% { transform: rotate(1deg) scaleY(1.015); }
}
@keyframes od-blink {
    0%, 94%, 100% { transform: scaleY(1); }
    97% { transform: scaleY(0.1); }
}
@keyframes od-glint {
    0%, 50% { transform: translateX(520px); }
    80%, 100% { transform: translateX(680px); }
}
@keyframes od-shadow {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(0.82); opacity: 0.6; }
}
@media (max-width: 600px) {
    .odyssey {
        padding-left: 5px;
        gap: 14px;
    }
    .od-desc {
        font-size: 13px;
    }
    .od-text {
        padding: 14px 14px 20px;
    }
    .od-head {
        gap: 10px;
    }
}
/* very narrow phones: the logo sits above the title so a long word like "Software" never gets clipped */
@media (max-width: 380px) {
    .od-head {
        flex-wrap: wrap;
        gap: 8px;
    }
    .od-role {
        font-size: 19px;
        overflow-wrap: anywhere;
    }
}
@media (prefers-reduced-motion: reduce) {
    .od-bob, .od-crest, .od-eyes, .od-glint, .od-shadow {
        animation: none;
    }
}