/* Shared sticky heading focus effect */

.home-page,
.plan-page,
.journey-cursor-page,
.university-page,
.revival-page,
.collaborate-page,
.supportus-page,
.join-page {
    --sticky-accent: #ffc21c;
    --sticky-accent-soft: rgba(255, 194, 28, 0.2);
    --sticky-accent-border: rgba(255, 194, 28, 0.38);
    --sticky-panel: rgba(5, 5, 4, 0.78);
    --sticky-panel-strong: rgba(18, 16, 11, 0.62);
    --sticky-text: #fffdf7;
    --sticky-muted: #ffd76a;
}

.network-page {
    --sticky-accent: #52ff85;
    --sticky-accent-soft: rgba(82, 255, 133, 0.17);
    --sticky-accent-border: rgba(82, 255, 133, 0.35);
    --sticky-panel: rgba(2, 6, 4, 0.8);
    --sticky-panel-strong: rgba(12, 26, 16, 0.66);
    --sticky-text: #f4f8f3;
    --sticky-muted: #52ff85;
}

.media-page {
    --sticky-accent: #ff4057;
    --sticky-accent-soft: rgba(255, 64, 87, 0.18);
    --sticky-accent-border: rgba(255, 64, 87, 0.36);
    --sticky-panel: rgba(3, 3, 4, 0.82);
    --sticky-panel-strong: rgba(24, 10, 14, 0.68);
    --sticky-text: #fffaf6;
    --sticky-muted: #ff4057;
}

@keyframes stickyHeadingFocus {
    0%,
    100% {
        background-position: -160% 0, 0 0, 0 0;
    }

    48% {
        background-position: 170% 0, 0 0, 0 0;
    }
}

@media (min-width: 821px) {
    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading),
    .plan-page :is(.plan-sticky-head, .front-header),
    .journey-cursor-page :is(.takweyat-heading, .preparation-heading, .follow-heading),
    .university-page :is(.university-sticky-head, .why-layout > .university-section-head, .gate-layout > .university-section-head, .front-training-layout > .university-section-head),
    .revival-page .revival-sticky-heading,
    .network-page .network-sticky-heading,
    .media-page .media-sticky-heading,
    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) {
        z-index: 12;
        padding: clamp(18px, 2vw, 26px) clamp(18px, 2.4vw, 30px);
        border: 1px solid var(--sticky-accent-border);
        border-left: 4px solid var(--sticky-accent);
        border-radius: 6px;
        color: var(--sticky-text);
        background:
            radial-gradient(circle at 0 0, var(--sticky-accent-soft), transparent 48%),
            linear-gradient(135deg, var(--sticky-panel), var(--sticky-panel-strong));
        box-shadow:
            0 22px 60px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        overflow: hidden;
        isolation: isolate;
        transition:
            transform 220ms ease,
            border-color 220ms ease,
            box-shadow 220ms ease;
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading):hover,
    .plan-page :is(.plan-sticky-head, .front-header):hover,
    .journey-cursor-page :is(.takweyat-heading, .preparation-heading, .follow-heading):hover,
    .university-page :is(.university-sticky-head, .why-layout > .university-section-head, .gate-layout > .university-section-head, .front-training-layout > .university-section-head):hover,
    .revival-page .revival-sticky-heading:hover,
    .network-page .network-sticky-heading:hover,
    .media-page .media-sticky-heading:hover,
    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading):hover {
        transform: translateX(6px);
        border-color: var(--sticky-accent);
        box-shadow:
            0 28px 72px rgba(0, 0, 0, 0.36),
            0 0 32px var(--sticky-accent-soft),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading) h2,
    .plan-page :is(.plan-sticky-head, .front-header) h2,
    .journey-cursor-page :is(.takweyat-heading, .preparation-heading, .follow-heading) h2,
    .university-page :is(.university-sticky-head, .why-layout > .university-section-head, .gate-layout > .university-section-head, .front-training-layout > .university-section-head) h2,
    .revival-page .revival-sticky-heading h2,
    .network-page .network-sticky-heading h2,
    .media-page .media-sticky-heading h2,
    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) h2 {
        color: var(--sticky-text) !important;
        text-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading) h2 :is(em, span),
    .plan-page :is(.plan-sticky-head, .front-header) h2 :is(em, span),
    .journey-cursor-page :is(.takweyat-heading, .preparation-heading, .follow-heading) h2 :is(em, span),
    .university-page :is(.university-sticky-head, .why-layout > .university-section-head, .gate-layout > .university-section-head, .front-training-layout > .university-section-head) h2 :is(em, span),
    .revival-page .revival-sticky-heading h2 :is(em, span),
    .network-page .network-sticky-heading h2 :is(em, span),
    .media-page .media-sticky-heading h2 :is(em, span),
    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) h2 :is(em, span) {
        color: var(--sticky-accent) !important;
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading) :is(.home-index, .home-eyebrow),
    .plan-page :is(.plan-sticky-head, .front-header) :is(.plan-index, .plan-eyebrow),
    .journey-cursor-page :is(.takweyat-heading, .preparation-heading, .follow-heading) :is(.page-label, .journey-index, .journey-eyebrow),
    .university-page :is(.university-sticky-head, .why-layout > .university-section-head, .gate-layout > .university-section-head, .front-training-layout > .university-section-head) :is(.university-index, .university-eyebrow, .university-kicker),
    .revival-page .revival-sticky-heading :is(.revival-index, .revival-eyebrow),
    .network-page .network-sticky-heading :is(.network-index, .network-eyebrow),
    .media-page .media-sticky-heading :is(.media-index, .media-eyebrow),
    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) :is(.collab-index, .collab-eyebrow) {
        color: var(--sticky-muted) !important;
        border-color: currentColor;
    }

    .journey-cursor-page :is(.follow-heading, .preparation-heading) p {
        color: rgba(255, 253, 247, 0.72);
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading) {
        position: sticky !important;
        top: 118px !important;
        align-self: start;
        max-width: min(100%, 560px);
        padding: 16px 18px 18px 22px;
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading) :is(.home-index, .home-eyebrow) {
        position: static !important;
        display: block;
        width: max-content;
        margin: 0 0 12px;
        padding: 0 0 7px;
        border-top: 0;
        border-bottom: 1px solid currentColor;
        font-size: 11px;
        line-height: 1.1;
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading) .home-eyebrow {
        border-bottom: 0;
        margin-bottom: 10px;
        padding-bottom: 0;
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading) h2 {
        font-size: clamp(38px, 4.4vw, 68px) !important;
        line-height: 0.9;
    }

    .home-page .home-front-heading h2 {
        font-size: clamp(38px, 4.55vw, 72px) !important;
    }

    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading) h2 em {
        font-size: 0.62em;
    }

    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) {
        max-width: min(100%, 540px);
        padding: 16px 18px 18px 22px;
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 0 16px;
    }

    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) :is(.collab-index, .collab-eyebrow) {
        font-size: 11px;
        line-height: 1.1;
    }

    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) .collab-eyebrow {
        margin-bottom: 12px;
    }

    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) h2 {
        max-width: 100%;
        font-size: clamp(34px, 3.6vw, 54px) !important;
        line-height: 0.94;
        overflow-wrap: anywhere;
    }

    .collaborate-page :is(.front-detail-heading, .proposal-heading, .together-heading) h2 {
        font-size: clamp(32px, 3.25vw, 50px) !important;
    }

    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) h2 em {
        font-size: 0.62em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-page :is(.home-sticky-heading, .home-university .home-heading, .home-front-heading),
    .plan-page :is(.plan-sticky-head, .front-header),
    .journey-cursor-page :is(.takweyat-heading, .preparation-heading, .follow-heading),
    .university-page :is(.university-sticky-head, .why-layout > .university-section-head, .gate-layout > .university-section-head, .front-training-layout > .university-section-head),
    .revival-page .revival-sticky-heading,
    .network-page .network-sticky-heading,
    .media-page .media-sticky-heading,
    .collaborate-page :is(.serve-layout .collab-heading, .front-detail-heading, .proposal-heading, .together-heading) {
        animation: none;
        transition: none;
    }
}