/* =========================================================
   RELIANCE ANIMATION ACADEMY
   COMMON COURSE PAGE STYLES
   ---------------------------------------------------------
   Used by:
   - Master Program in Animation
   - Advanced Program in 2D Animation
   - VFX
   - Graphics & Digital Design
   - Video Editing
   - Game Design
========================================================= */


/* =========================================================
   COURSE PAGE BASE
========================================================= */

.master-page{
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(124,92,255,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 18%,
            rgba(0,212,255,.08),
            transparent 28%
        ),
        var(--bg);
}


/* =========================================================
   COURSE HERO
========================================================= */

.master-hero{
    padding:150px 0 80px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--line);
}

.master-hero::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    right:-220px;
    top:80px;
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,78,205,.12),
            transparent 68%
        );

    pointer-events:none;
}

.master-hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:65px;
    align-items:center;

    position:relative;
    z-index:2;
}

.master-hero-content{
    max-width:700px;
}


/* =========================================================
   HERO LABEL
========================================================= */

.master-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:8px 13px;

    border:1px solid rgba(124,92,255,.35);

    background:rgba(124,92,255,.08);

    border-radius:999px;

    color:#c4b9ff;

    font-size:12px;
    font-weight:700;

    letter-spacing:.12em;
    text-transform:uppercase;

    margin-bottom:20px;
}

.master-label::before{
    content:"";

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--primary2);

    box-shadow:
        0 0 12px var(--primary2);
}


/* =========================================================
   HERO TITLE
========================================================= */

.master-hero-content h1{
    font-size:clamp(42px,5.5vw,70px);

    line-height:1.02;

    letter-spacing:-.045em;

    margin-bottom:22px;
}

.master-hero-content h1 span{
    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary2),
            var(--accent)
        );

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.master-hero-description{
    max-width:650px;

    font-size:17px;

    line-height:1.8;

    color:var(--muted);

    margin-bottom:30px;
}


/* =========================================================
   HERO BUTTONS
========================================================= */

.master-hero-actions{
    display:flex;

    gap:12px;

    flex-wrap:wrap;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.master-hero-visual{
    position:relative;
}

.master-image-card{
    position:relative;

    min-height:500px;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.12);

    background:var(--card);

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);
}

.master-image-card::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.22),
            transparent 40%,
            rgba(0,212,255,.12)
        );

    z-index:1;

    pointer-events:none;
}

.master-image-card img{
    width:100%;
    height:500px;

    object-fit:cover;

    opacity:.88;

    display:block;
}


/* =========================================================
   FLOATING HERO CARD
========================================================= */

.master-floating-card{
    position:absolute;

    z-index:3;

    left:-25px;
    bottom:30px;

    padding:18px 20px;

    border:1px solid var(--line);

    border-radius:16px;

    background:rgba(10,14,27,.88);

    backdrop-filter:blur(16px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.4);
}

.master-floating-card strong{
    display:block;

    font-family:Outfit;

    font-size:25px;

    color:#fff;
}

.master-floating-card span{
    color:var(--muted);

    font-size:12px;
}


/* =========================================================
   HERO STATS
========================================================= */

.master-stats{
    margin-top:45px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;
}

.master-stat{
    padding:20px;

    border:1px solid var(--line);

    border-radius:16px;

    background:rgba(255,255,255,.025);

    transition:.3s ease;
}

.master-stat:hover{
    transform:translateY(-3px);

    border-color:
        rgba(124,92,255,.35);
}

.master-stat strong{
    display:block;

    font-family:Outfit;

    font-size:20px;

    margin-bottom:3px;

    background:
        linear-gradient(
            90deg,
            var(--primary2),
            #fff
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}

.master-stat span{
    color:var(--muted);

    font-size:12px;
}


/* =========================================================
   COURSE JUMP NAVIGATION
========================================================= */

.master-jump{
    position:sticky;

    top:78px;

    z-index:50;

    background:
        rgba(7,10,19,.88);

    backdrop-filter:blur(18px);

    border-bottom:
        1px solid var(--line);
}

.master-jump-inner{
    display:flex;

    justify-content:center;

    gap:35px;

    overflow-x:auto;

    scrollbar-width:none;
}

.master-jump-inner::-webkit-scrollbar{
    display:none;
}

.master-jump a{
    padding:18px 2px;

    color:#aab2c8;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    border-bottom:
        2px solid transparent;

    transition:.25s ease;
}

.master-jump a:hover{
    color:#fff;

    border-color:
        var(--primary);
}


/* =========================================================
   GENERAL COURSE SECTION HEAD
========================================================= */

.master-section-head{
    max-width:760px;

    margin-bottom:45px;
}

.master-section-head.center{
    text-align:center;

    margin-left:auto;

    margin-right:auto;
}

.master-section-head h2{
    margin-bottom:15px;
}

.master-section-head p{
    font-size:15px;

    line-height:1.8;
}


/* =========================================================
   OVERVIEW SECTION
========================================================= */

.master-overview{
    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:55px;

    align-items:center;
}

.master-overview-copy p{
    font-size:16px;

    line-height:1.85;

    color:var(--muted);

    margin-bottom:18px;
}


/* =========================================================
   OVERVIEW HIGHLIGHTS
========================================================= */

.overview-highlight{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px;

    margin-top:28px;
}

.overview-highlight-box{
    padding:20px;

    border:1px solid var(--line);

    border-radius:16px;

    background:
        rgba(255,255,255,.025);

    transition:.3s ease;
}

.overview-highlight-box:hover{
    transform:translateY(-4px);

    border-color:
        rgba(124,92,255,.35);

    background:
        rgba(124,92,255,.045);
}

.overview-highlight-box i{
    color:var(--primary2);

    font-size:20px;

    margin-bottom:12px;
}

.overview-highlight-box h4{
    font-size:17px;

    margin-bottom:5px;
}

.overview-highlight-box p{
    font-size:12px;

    margin:0;
}


/* =========================================================
   CURRICULUM
========================================================= */

.curriculum-wrap{
    max-width:950px;

    margin:0 auto;
}


/* =========================================================
   CURRICULUM ITEM
========================================================= */

.semester{
    border:1px solid var(--line);

    border-radius:18px;

    margin-bottom:14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );

    overflow:hidden;

    transition:.3s ease;
}

.semester:hover{
    border-color:
        rgba(124,92,255,.4);
}


/* =========================================================
   CURRICULUM HEADER
========================================================= */

.semester-header{
    width:100%;

    border:0;

    background:none;

    color:#fff;

    cursor:pointer;

    padding:23px 25px;

    display:flex;

    align-items:center;

    gap:20px;

    text-align:left;
}

.semester-header:focus{
    outline:none;
}


/* =========================================================
   CURRICULUM NUMBER
========================================================= */

.semester-number{
    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.18),
            rgba(0,212,255,.10)
        );

    border:
        1px solid rgba(124,92,255,.25);

    font-family:Outfit;

    font-weight:800;

    color:#c9c0ff;
}


/* =========================================================
   CURRICULUM TITLE
========================================================= */

.semester-title{
    flex:1;

    min-width:0;
}

.semester-title h3{
    font-size:20px;

    margin-bottom:4px;
}

.semester-title span{
    color:#7f8aa5;

    font-size:12px;
}


/* =========================================================
   CURRICULUM PLUS
========================================================= */

.semester-plus{
    width:38px;

    height:38px;

    border-radius:50%;

    border:
        1px solid var(--line);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary2);

    transition:.3s;

    flex-shrink:0;
}

.semester.open .semester-plus{
    transform:rotate(45deg);

    background:
        rgba(124,92,255,.12);

    border-color:
        rgba(124,92,255,.4);
}


/* =========================================================
   CURRICULUM CONTENT ANIMATION
========================================================= */

.semester-content{
    display:grid;

    grid-template-rows:0fr;

    transition:
        grid-template-rows .35s ease;
}

.semester.open .semester-content{
    grid-template-rows:1fr;
}

.semester-content-inner{
    overflow:hidden;
}


/* =========================================================
   CURRICULUM LIST
========================================================= */

.semester-list{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:0 25px;

    padding:
        0 25px 25px 93px;

    margin:0;
}

.semester-list li{
    list-style:none;

    padding:10px 0;

    color:#c9d0df;

    font-size:14px;

    border-bottom:
        1px solid rgba(255,255,255,.06);
}

.semester-list li::before{
    content:"";

    display:inline-block;

    width:6px;

    height:6px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );

    margin-right:10px;

    vertical-align:middle;
}


/* =========================================================
   CAREER SECTION
========================================================= */

.career-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.career-card{
    padding:28px 25px;

    border:1px solid var(--line);

    border-radius:20px;

    background:var(--card);

    position:relative;

    overflow:hidden;

    transition:.35s ease;
}

.career-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary2),
            var(--accent)
        );

    opacity:0;

    transition:.3s;
}

.career-card:hover{
    transform:translateY(-7px);

    border-color:
        rgba(124,92,255,.4);

    box-shadow:
        0 20px 50px rgba(0,0,0,.3);
}

.career-card:hover::before{
    opacity:1;
}


/* =========================================================
   CAREER ICON
========================================================= */

.career-icon{
    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:14px;

    margin-bottom:20px;

    color:#fff;

    font-size:21px;

    background:
        linear-gradient(
            135deg,
            rgba(124,92,255,.18),
            rgba(255,78,205,.13)
        );

    border:
        1px solid rgba(124,92,255,.25);
}

.career-card h3{
    font-size:19px;

    margin-bottom:10px;
}

.career-card p{
    font-size:13px;

    line-height:1.7;
}


/* =========================================================
   SOFTWARE SECTION
========================================================= */

.software-section{
    background:
        rgba(255,255,255,.018);

    border-top:
        1px solid var(--line);

    border-bottom:
        1px solid var(--line);
}

.software-grid{
    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

    max-width:950px;

    margin:auto;
}


/* =========================================================
   SOFTWARE PILLS
========================================================= */

.software-pill{
    padding:12px 17px;

    border:1px solid var(--line);

    border-radius:999px;

    background:
        rgba(255,255,255,.035);

    color:#dfe4f2;

    font-size:13px;

    transition:.25s ease;
}

.software-pill:hover{
    transform:translateY(-3px);

    border-color:
        rgba(124,92,255,.5);

    background:
        rgba(124,92,255,.10);

    color:#fff;
}


/* =========================================================
   HIGHLIGHTS SECTION
========================================================= */

.highlight-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:18px;
}

.highlight-card{
    padding:30px 26px;

    border:1px solid var(--line);

    border-radius:20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.015)
        );

    transition:.3s ease;
}

.highlight-card:hover{
    transform:translateY(-6px);

    border-color:
        rgba(0,212,255,.35);
}


/* =========================================================
   HIGHLIGHT ICON
========================================================= */

.highlight-icon{
    font-size:26px;

    margin-bottom:18px;

    color:var(--primary2);
}

.highlight-card h3{
    font-size:19px;

    margin-bottom:10px;
}

.highlight-card p{
    font-size:13px;

    line-height:1.7;
}


/* =========================================================
   FINAL CTA
========================================================= */

.master-final-cta{
    position:relative;

    overflow:hidden;

    border:
        1px solid rgba(124,92,255,.25);

    border-radius:28px;

    padding:60px 45px;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(124,92,255,.18),
            transparent 55%
        ),
        rgba(255,255,255,.025);
}

.master-final-cta::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    top:-180px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        rgba(0,212,255,.08);

    filter:blur(50px);

    pointer-events:none;
}

.master-final-cta h2{
    margin-bottom:12px;

    position:relative;
    z-index:1;
}

.master-final-cta p{
    max-width:650px;

    margin:
        0 auto 25px;

    position:relative;
    z-index:1;
}

.master-final-cta .btn{
    position:relative;
    z-index:1;
}


/* =========================================================
   COURSE PAGE IMAGE HELPERS
========================================================= */

.master-image-card img{
    transition:
        transform .6s ease;
}

.master-image-card:hover img{
    transform:scale(1.03);
}


/* =========================================================
   REVEAL ANIMATION
   Works with the JS already present in your website.
========================================================= */

.reveal{
    opacity:0;

    transform:
        translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.reveal.show{
    opacity:1;

    transform:
        translateY(0);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .reveal{
        opacity:1;

        transform:none;

        transition:none;
    }

    .career-card,
    .highlight-card,
    .software-pill,
    .master-stat,
    .overview-highlight-box,
    .master-image-card img{
        transition:none;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media(max-width:900px){

    .master-hero{
        padding-top:130px;
    }

    .master-hero-grid{
        grid-template-columns:1fr;

        gap:45px;
    }

    .master-hero-content{
        max-width:none;
    }

    .master-image-card,
    .master-image-card img{
        height:430px;

        min-height:430px;
    }

    .master-floating-card{
        left:20px;
    }

    .master-overview{
        grid-template-columns:1fr;
    }

    .career-grid,
    .highlight-grid{
        grid-template-columns:
            repeat(2,1fr);
    }

    .master-jump{
        top:68px;
    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:760px){

    .master-hero{
        padding:
            115px 0 65px;
    }

    .master-hero-grid{
        gap:35px;
    }

    .master-hero-content h1{
        font-size:
            clamp(
                39px,
                11vw,
                58px
            );
    }

    .master-hero-description{
        font-size:15px;
    }

    .master-stats{
        grid-template-columns:1fr;

        gap:10px;
    }

    .master-stat{
        padding:16px;
    }

    .master-stat strong{
        font-size:25px;
    }

    .master-image-card,
    .master-image-card img{
        height:360px;

        min-height:360px;
    }

    .master-floating-card{
        left:15px;

        bottom:15px;
    }

    .master-jump-inner{
        justify-content:flex-start;

        gap:25px;
    }

    .master-jump a{
        font-size:12px;

        padding:14px 0;
    }

    .overview-highlight{
        grid-template-columns:1fr;
    }

    .semester-header{
        padding:18px 15px;

        gap:12px;
    }

    .semester-number{
        width:42px;

        height:42px;

        font-size:13px;
    }

    .semester-title h3{
        font-size:16px;
    }

    .semester-title span{
        font-size:10px;
    }

    .semester-plus{
        width:34px;

        height:34px;
    }

    .semester-list{
        grid-template-columns:1fr;

        padding:
            0 18px 20px 18px;
    }

    .semester-list li{
        font-size:13px;
    }

    .career-grid,
    .highlight-grid{
        grid-template-columns:1fr;
    }

    .master-final-cta{
        padding:
            40px 22px;

        border-radius:22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:480px){

    .master-hero{
        padding-top:105px;
    }

    .master-label{
        font-size:10px;

        padding:7px 11px;
    }

    .master-hero-actions{
        flex-direction:column;
    }

    .master-hero-actions .btn{
        width:100%;

        justify-content:center;
    }

    .master-image-card,
    .master-image-card img{
        height:300px;

        min-height:300px;
    }

    .master-floating-card{
        padding:13px 15px;
    }

    .master-floating-card strong{
        font-size:21px;
    }

    .master-floating-card span{
        font-size:10px;
    }

    .master-section-head{
        margin-bottom:30px;
    }

    .master-section-head h2{
        font-size:
            clamp(28px,8vw,38px);
    }

    .master-section-head p{
        font-size:14px;
    }

    .master-overview-copy p{
        font-size:14px;

        line-height:1.8;
    }

    .overview-highlight-box{
        padding:17px;
    }

    .career-card{
        padding:24px 20px;
    }

    .highlight-card{
        padding:25px 21px;
    }

    .master-final-cta h2{
        font-size:28px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:360px){

    .master-hero-content h1{
        font-size:36px;
    }

    .master-label{
        letter-spacing:.08em;
    }

    .semester-header{
        padding:15px 12px;
    }

    .semester-number{
        width:38px;

        height:38px;
    }

    .semester-title h3{
        font-size:14px;
    }

    .semester-plus{
        width:30px;

        height:30px;
    }

}