/* ==========================================================================
   AHFC TROPHY ROOM (achievements page)
   --------------------------------------------------------------------------
   Custom trophy-room design. Resets are intentionally NOT included here -
   the site already provides them. Generic names from the original design
   are prefixed (tr-*) where they would collide with site styles
   (.container, .section-title, .hero-grid, .hero-inner).
   ========================================================================== */

/* =========================================================
   VARIABLES
========================================================= */

:root{

    --green:#19e879;
    --green-dark:#063a25;

    --gold:#e6ad32;
    --gold-light:#ffd978;

    --cream:#fff4d2;

    --dark:#030907;
    --dark2:#07120e;

    --muted:rgba(255,255,255,.56);
}


/* =========================================================
   PAGE
========================================================= */

.trophy-page{
    position:relative;
    min-height:100vh;
    overflow:hidden;
}


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

.trophy-hero{

    position:relative;

    min-height:
        720px;

    height:
        88vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 50% 70%,
            rgba(17,120,69,.19),
            transparent 35%
        ),

        radial-gradient(
            circle at 50% 10%,
            rgba(216,166,47,.08),
            transparent 32%
        ),

        #030907;
}


/* =========================================================
   HERO GRID
========================================================= */

.tr-hero-grid{

    position:absolute;

    inset:-30%;

    opacity:.12;

    transform:
        perspective(1000px)
        rotateX(62deg)
        rotateZ(-8deg)
        translateY(35%);

    background-image:

        linear-gradient(
            rgba(28,230,127,.45) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(28,230,127,.45) 1px,
            transparent 1px
        );

    background-size:
        75px 75px;
}


/* =========================================================
   GLOW
========================================================= */

.hero-glow{

    position:absolute;

    width:800px;
    height:800px;

    left:50%;
    top:45%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(224,172,48,.13),
            rgba(16,226,119,.07) 35%,
            transparent 70%
        );

    filter:blur(15px);
}


/* =========================================================
   ORBIT RINGS
========================================================= */

.orbit{

    position:absolute;

    left:50%;
    top:53%;

    transform:
        translate(-50%,-50%)
        rotateX(67deg);

    border:
        1px solid
        rgba(225,174,49,.12);

    border-radius:50%;

    pointer-events:none;
}

.orbit.one{
    width:500px;
    height:500px;
}

.orbit.two{
    width:760px;
    height:760px;
}

.orbit.three{
    width:1040px;
    height:1040px;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.tr-hero-inner{

    position:relative;

    z-index:5;

    width:
        min(1200px,92%);

    margin:auto;

    text-align:center;
}


/* =========================================================
   EYEBROW
========================================================= */

.trophy-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:
        10px 17px;

    border:
        1px solid
        rgba(226,175,49,.45);

    border-radius:50px;

    color:
        var(--gold-light);

    background:
        rgba(220,168,40,.06);

    font-size:10px;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

    box-shadow:
        0 0 35px
        rgba(225,172,47,.06);
}

.trophy-label span{
    font-size:12px;
}

.trophy-label i{
    font-size:12px;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.hero-title{

    margin-top:28px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            85px,
            13vw,
            190px
        );

    line-height:.75;

    font-weight:900;

    letter-spacing:-5px;

    text-transform:uppercase;
}

.hero-title .gold{

    display:block;

    background:
        linear-gradient(
            180deg,
            #fffbe9 0%,
            #ffe9a1 28%,
            #e7ac2f 70%,
            #9d6610 100%
        );

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

    color:transparent;

    filter:
        drop-shadow(
            0 12px 30px
            rgba(225,171,44,.13)
        );
}


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

.hero-description{

    max-width:650px;

    margin:
        28px auto 0;

    color:
        rgba(255,255,255,.58);

    font-size:15px;

    line-height:1.7;
}


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

.hero-stats{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:42px;

    flex-wrap:wrap;
}

.stat{

    min-width:150px;

    padding:
        18px 25px;

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

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

    backdrop-filter:
        blur(18px);

    border-radius:8px;

    text-align:left;

    transition:
        .35s ease;
}

.stat:hover{

    border-color:
        rgba(230,174,49,.4);

    transform:
        translateY(-5px);

    background:
        rgba(230,174,49,.055);
}

.stat-number{

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:32px;

    font-weight:900;

    color:#fff;
}

.stat-label{

    margin-top:3px;

    color:
        rgba(255,255,255,.42);

    font-size:8px;

    letter-spacing:2px;

    font-weight:800;

    text-transform:uppercase;
}


/* =========================================================
   SCROLL
========================================================= */

.hero-scroll{

    position:absolute;

    bottom:28px;

    left:50%;

    transform:
        translateX(-50%);

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:
        rgba(255,255,255,.35);

    font-size:8px;

    letter-spacing:3px;

    font-weight:800;
}

.scroll-line{

    width:1px;

    height:38px;

    background:
        linear-gradient(
            #dcae38,
            transparent
        );

    animation:
        scrollLine
        1.8s
        infinite;
}

@keyframes scrollLine{

    0%{
        transform:scaleY(0);
        transform-origin:top;
    }

    50%{
        transform:scaleY(1);
        transform-origin:top;
    }

    51%{
        transform-origin:bottom;
    }

    100%{
        transform:scaleY(0);
        transform-origin:bottom;
    }
}


/* =========================================================
   HONOURS SECTION
========================================================= */

.honours{

    position:relative;

    padding:
        120px 0 160px;

    background:
        linear-gradient(
            180deg,
            #050d09,
            #020605
        );
}


/* =========================================================
   SECTION CONTAINER
========================================================= */

.tr-container{

    width:
        min(1180px,92%);

    margin:auto;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.tr-section-heading{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:30px;

    margin-bottom:80px;
}

.tr-section-kicker{

    color:
        var(--gold);

    font-size:9px;

    letter-spacing:4px;

    font-weight:800;

    text-transform:uppercase;

    margin-bottom:12px;
}

.tr-section-title{

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            55px,
            7vw,
            95px
        );

    line-height:.85;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:-2px;
}

.tr-section-title span{

    color:
        rgba(255,255,255,.28);
}

.tr-section-title span.w{

    color:#fff;
}

.tr-section-description{

    max-width:340px;

    color:
        rgba(255,255,255,.43);

    font-size:12px;

    line-height:1.7;
}


/* =========================================================
   TROPHY FEATURE
========================================================= */

.trophy-feature{

    display:grid;

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

    min-height:480px;

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

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    overflow:hidden;

    border-radius:14px;

    position:relative;
}


/* =========================================================
   TROPHY VISUAL
========================================================= */

.trophy-visual{

    position:relative;

    min-height:480px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:

        radial-gradient(
            circle,
            rgba(218,165,40,.17),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #091711,
            #020705
        );
}


/* =========================================================
   GOLD FLOOR
========================================================= */

.trophy-floor{

    position:absolute;

    width:500px;
    height:180px;

    bottom:-90px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(226,172,44,.24),
            transparent 65%
        );

    filter:blur(15px);
}


/* =========================================================
   TROPHY IMAGE
========================================================= */

.trophy-image{

    position:relative;

    z-index:3;

    width:
        min(330px,70%);

    height:380px;

    object-fit:contain;

    filter:

        drop-shadow(
            0 35px 30px
            rgba(0,0,0,.55)
        )

        drop-shadow(
            0 0 35px
            rgba(229,174,48,.18)
        );

    transition:
        transform .7s
        cubic-bezier(.2,.8,.2,1);
}

.trophy-feature:hover
.trophy-image{

    transform:
        translateY(-12px)
        scale(1.04)
        rotate(-2deg);
}


/* =========================================================
   TROPHY CONTENT
========================================================= */

.trophy-content{

    padding:
        65px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.trophy-date{

    display:inline-flex;

    width:max-content;

    padding:
        7px 12px;

    border-radius:30px;

    background:
        rgba(113,66,170,.18);

    color:
        #b68aff;

    font-size:9px;

    letter-spacing:2px;

    font-weight:800;

    text-transform:uppercase;
}

.trophy-name{

    margin-top:20px;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(
            35px,
            4vw,
            62px
        );

    line-height:1;

    font-weight:700;
}

.trophy-winning{

    margin-top:13px;

    color:
        var(--gold);

    font-size:10px;

    letter-spacing:3px;

    font-weight:900;

    text-transform:uppercase;
}


/* =========================================================
   DETAILS
========================================================= */

.trophy-details{

    display:grid;

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

    gap:30px;

    margin-top:40px;

    padding-top:25px;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}

.detail-label{

    color:
        rgba(255,255,255,.32);

    font-size:8px;

    letter-spacing:2px;

    font-weight:800;

    text-transform:uppercase;
}

.detail-value{

    margin-top:6px;

    font-size:11px;

    line-height:1.5;

    font-weight:700;

    color:
        rgba(255,255,255,.83);
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline{

    margin-top:100px;

    position:relative;
}

.timeline-line{

    position:absolute;

    top:0;
    bottom:0;

    left:50%;

    width:1px;

    background:
        linear-gradient(
            transparent,
            rgba(225,173,46,.5) 10%,
            rgba(225,173,46,.15) 90%,
            transparent
        );

    transform:
        translateX(-50%);
}


/* =========================================================
   TIMELINE ITEM
========================================================= */

.timeline-item{

    width:50%;

    padding:
        0 65px 90px;

    position:relative;
}

.timeline-item:nth-child(even){

    margin-left:50%;
}


/* =========================================================
   DOT
========================================================= */

.timeline-dot{

    position:absolute;

    top:8px;

    width:13px;
    height:13px;

    border-radius:50%;

    background:
        var(--gold);

    box-shadow:
        0 0 0 7px
        rgba(226,173,44,.08),

        0 0 25px
        rgba(226,173,44,.5);
}

.timeline-item:nth-child(odd)
.timeline-dot{

    right:-7px;
}

.timeline-item:nth-child(even)
.timeline-dot{

    left:-7px;
}


/* =========================================================
   TIMELINE CARD
========================================================= */

.timeline-card{

    position:relative;

    padding:28px 100px 28px 28px;

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

    border-radius:10px;

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

    transition:
        .4s ease;
}

.timeline-card:hover{

    transform:
        translateY(-7px);

    border-color:
        rgba(226,173,44,.35);

    background:
        rgba(226,173,44,.035);
}

.timeline-year{

    color:
        var(--gold);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:35px;

    font-weight:900;
}

.timeline-title{

    margin-top:5px;

    font-family:
        "Playfair Display",
        serif;

    font-size:25px;

    font-weight:700;
}

.timeline-result{

    margin-top:10px;

    color:
        rgba(255,255,255,.42);

    font-size:10px;

    line-height:1.6;
}


/* =========================================================
   TIMELINE THUMB
========================================================= */

.timeline-thumb{

    position:absolute;

    top:24px;
    right:24px;

    width:56px;
    height:56px;

    object-fit:contain;

    filter:
        drop-shadow(
            0 8px 14px
            rgba(0,0,0,.5)
        )

        drop-shadow(
            0 0 12px
            rgba(229,174,48,.25)
        );

    transition:
        transform .4s ease;
}

.timeline-card:hover
.timeline-thumb{

    transform:
        translateY(-4px)
        scale(1.06);
}


/* =========================================================
   DECORATIVE NUMBER
========================================================= */

.huge-number{

    position:absolute;

    right:30px;

    bottom:-15px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:130px;

    line-height:1;

    font-weight:900;

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

    pointer-events:none;
}


/* =========================================================
   FOOTER CTA
========================================================= */

.trophy-cta{

    position:relative;

    padding:
        110px 20px;

    text-align:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(18,144,80,.16),
            transparent 55%
        );
}

.cta-label{

    color:
        var(--green);

    font-size:9px;

    letter-spacing:4px;

    font-weight:800;
}

.cta-title{

    margin-top:15px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            55px,
            8vw,
            105px
        );

    font-weight:900;

    line-height:.85;

    text-transform:uppercase;
}

.cta-title span{

    color:
        var(--green);
}

.cta-title span.w{

    color:#fff;
}

.cta-text{

    max-width:460px;

    margin:
        22px auto 0;

    color:
        rgba(255,255,255,.42);

    font-size:12px;

    line-height:1.7;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:850px){

    .trophy-hero{

        min-height:
            720px;

        height:auto;

        padding:
            140px 0 100px;
    }

    .hero-title{

        letter-spacing:-3px;
    }

    .hero-stats{

        gap:7px;
    }

    .stat{

        min-width:
            135px;

        padding:
            14px 17px;
    }

    .tr-section-heading{

        display:block;
    }

    .tr-section-description{

        margin-top:20px;
    }

    .trophy-feature{

        grid-template-columns:1fr;
    }

    .trophy-visual{

        min-height:390px;
    }

    .trophy-content{

        padding:40px;
    }

    .timeline-item{

        width:100%;

        margin-left:0 !important;

        padding:
            0 0 55px 45px;
    }

    .timeline-line{

        left:5px;
    }

    .timeline-item:nth-child(odd)
    .timeline-dot,
    .timeline-item:nth-child(even)
    .timeline-dot{

        left:-1px;

        right:auto;
    }
}


@media(max-width:520px){

    .trophy-hero{

        padding:
            125px 0 85px;
    }

    .hero-title{

        font-size:
            82px;

        letter-spacing:-2px;
    }

    .hero-description{

        font-size:12px;
    }

    .hero-stats{

        display:grid;

        grid-template-columns:
            1fr 1fr;
    }

    .stat{

        min-width:0;
    }

    .tr-section-title{

        font-size:62px;
    }

    .trophy-content{

        padding:30px 24px;
    }

    .trophy-details{

        gap:15px;
    }

    .trophy-name{

        font-size:38px;
    }

    .timeline-card{

        padding:22px;
    }

}


/* =========================================================
   SCROLL REVEAL (JS adds .tr-in via IntersectionObserver;
   content stays visible if JS/IO is unavailable)
========================================================= */

.tr-reveal{
    opacity:0;
    transform:translateY(46px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.tr-reveal.tr-in{
    opacity:1;
    transform:none;
}


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

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;
    }
}