/* Full-bleed learning landscape; the content grid never constrains the background. */
.hero-section--learning {
    background: #f8f7f3;
    /* Decorative overflow must not become a scroll container when the control receives focus. */
    overflow: clip;
    isolation: isolate;
}

.hero-section--learning::before,
.hero-section--learning::after {
    content: none;
}

.hero-section--learning .hero-content,
.hero-section--learning .hero-visual {
    min-width: 0;
}

.hero-section--learning .hero-search input {
    min-width: 0;
}

.hero-section--learning .hero-visual-inner {
    max-width: 640px;
    aspect-ratio: 640 / 620;
    isolation: isolate;
}

.hero-learning-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
    user-select: none;
}

.hero-learning-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .8;
    animation: academy-panorama-drift 24s ease-in-out infinite;
}

.hero-learning-wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .7) 23%, rgba(255, 255, 255, .65) 43%, rgba(255, 255, 255, .1) 73%),
        linear-gradient(0deg, rgba(255, 255, 255, .4), transparent 22%);
}

.hero-section--learning .hero-float-card {
    z-index: 1;
    inset: auto;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #fff;
    box-shadow: 0 12px 32px -12px rgba(51, 76, 128, .23);
    min-width: 0;
    white-space: normal;
    text-align: left;
    animation: academy-card-drift 9s ease-in-out infinite;
}

.hero-section--learning .hero-float-card--progress {
    top: 7%;
    left: 0;
    width: 196px;
    border-top: 2px solid #c9dcff;
}

.hero-section--learning .hero-float-card--streak {
    /* Keep the connected paths visible beneath the cards. */
    top: -6%;
    right: -2%;
    width: 160px;
    border-top: 2px solid #ffe0c7;
    animation-delay: -3s;
}

.hero-section--learning .hero-float-card--lesson {
    bottom: 1%;
    left: 1%;
    width: 215px;
    border-top: 2px solid #e9dcfa;
    animation-delay: -6s;
}

.hero-section--learning .hero-float-card--level {
    bottom: 7%;
    right: 0;
    width: 140px;
    border-top: 2px solid #c7eee2;
    animation-delay: -4s;
}

@keyframes academy-panorama-drift {
    0%, 100% { transform: scale(1.025) translate3d(-.3%, 0, 0); }
    50% { transform: scale(1.025) translate3d(.3%, -.3%, 0); }
}

@keyframes academy-card-drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.hero-motion-control {
    position: absolute;
    right: 0;
    bottom: -32px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid #dce4f1;
    border-radius: 999px;
    color: #52617c;
    background: rgba(255, 255, 255, .85);
    font-size: 11px;
    cursor: pointer;
}

.hero-motion-toggle {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.hero-motion-control:has(:focus-visible) {
    outline: 2px solid var(--focus-blue);
    outline-offset: 3px;
}

.hero-motion-control svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero-motion-control .hero-motion-play,
.hero-motion-control:has(:checked) .hero-motion-pause { display: none; }
.hero-motion-control:has(:checked) .hero-motion-play { display: block; }

.hero-section--learning:has(.hero-motion-toggle:checked) .hero-learning-art,
.hero-section--learning:has(.hero-motion-toggle:checked) .hero-float-card {
    animation-play-state: paused;
}

@media (max-width: 1200px) and (min-width: 1025px) {
    .hero-section--learning .hero-container { gap: 32px; }
    .hero-section--learning .hero-float-card { padding: 12px; }
    .hero-section--learning .hero-float-card--progress { width: 178px; top: 0; }
    .hero-section--learning .hero-float-card--streak { width: 136px; right: -3%; }
    .hero-section--learning .hero-float-card--lesson { bottom: -7%; width: 200px; }
    .hero-section--learning .hero-float-card--level { width: 120px; bottom: -2%; }
    .hero-section--learning .hero-motion-control { bottom: -65px; }
}

@media (max-width: 1024px) {
    .hero-section--learning { padding-bottom: 90px; }
    .hero-section--learning .hero-visual-inner { max-width: 580px; }
    .hero-section--learning .hero-search { margin-inline: auto; }
    .hero-section--learning .hero-motion-control { right: max(0px, calc((100% - 580px) / 2)); }
    .hero-learning-art { object-position: 78% center; }
    .hero-learning-wash {
        background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .2) 74%, rgba(255, 255, 255, .3));
    }
}

@media (max-width: 640px) {
    /* The portrait artwork keeps the guide, learner, and destination in one composition. */
    .hero-learning-art { object-position: center bottom; }
    .hero-section--learning { padding: 120px 24px 70px; }
    .hero-section--learning .hero-container { gap: 32px; }
    .hero-section--learning .hero-visual { padding-bottom: 80px; }
    .hero-section--learning .hero-visual-inner { max-width: 400px; }
    .hero-section--learning .hero-float-card { padding: 10px; border-radius: 16px; }
    .hero-section--learning .hero-float-card--progress { width: 174px; top: 0; left: 0; }
    .hero-section--learning .hero-float-card--streak { display: none; }
    .hero-section--learning .hero-float-card--lesson { width: 194px; bottom: -65px; left: 0; }
    .hero-section--learning .hero-float-card--level { width: 106px; right: -8px; bottom: -37px; }
    .hero-section--learning .hero-motion-control { bottom: -18px; right: 0; }
}

@media (max-width: 360px) {
    .hero-section--learning .hero-float-card--level { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section--learning *,
    .hero-section--learning::before,
    .hero-section--learning::after {
        animation: none !important;
    }

    .hero-section--learning .hero-content,
    .hero-section--learning .hero-visual { opacity: 1; transform: none; }
    .hero-section--learning .hero-motion-control { display: none; }
}