/* =========================================================
OLIVER RIDLEY
PORTFOLIO PAGE
RED / CRIMSON EDITION

SECTION 1 — PORTFOLIO HERO
SECTION 2 — ON STAGE
========================================================= */

/* =========================================================
PORTFOLIO COLOUR SYSTEM
========================================================= */

:root {

 

--portfolio-red: #ff3b3b;
--page-accent: #ff3b3b;
--portfolio-red-dark: #8f1010;

--portfolio-burgundy: #4d0808;

--portfolio-glow:
    rgba(255, 59, 59, 0.35);

--portfolio-glow-soft:
    rgba(255, 59, 59, 0.15);

--portfolio-white: #ffffff;

--portfolio-grey: #b8b8b8;

--portfolio-dark:
    #050505;
 


}

/* =========================================================
GLOBAL PORTFOLIO BACKGROUND
========================================================= */

body {

 

background:
    radial-gradient(
        circle at 50% 10%,
        rgba(120, 0, 0, 0.16),
        transparent 10%
    ),
    #050505;
 


}

/* =========================================================
SECTION 1
PORTFOLIO HERO
========================================================= */

.portfolio-hero {

 

min-height:
    calc(100vh - 90px);

position: relative;

display: flex;

align-items: center;

justify-content: center;

text-align: center;

padding:
    120px 30px
    140px;

overflow: hidden;
 


}

/* =========================================================
HERO RED ATMOSPHERE
========================================================= */

.portfolio-hero-glow {

 

position: absolute;

width: 750px;

height: 750px;

left: 50%;

top: 45%;

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

background:
    radial-gradient(
        circle,
        rgba(255, 35, 35, 0.28)
        0%,
        rgba(150, 0, 0, 0.16)
        35%,
        transparent
        70%
    );

filter:
    blur(35px);

pointer-events: none;

animation:
    portfolioGlow 7s ease-in-out infinite;
 


}

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

.portfolio-hero-content {

 

position: relative;

z-index: 2;

max-width: 1100px;

margin: 0 auto;
 


}

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

.portfolio-eyebrow {

 

margin: 0 0 20px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.1rem;

font-weight:
    600;

letter-spacing:
    5px;

text-transform:
    uppercase;
 


}

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

.portfolio-title {

 

margin: 0;

color:
    var(--portfolio-white);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    clamp(
        4rem,
        11vw,
        9.5rem
    );

font-weight:
    500;

letter-spacing:
    8px;

line-height:
    0.9;

text-shadow:
    0 0 30px
    rgba(255, 45, 45, 0.12);
 


}

/* =========================================================
TITLE LINE
========================================================= */

.portfolio-title-line {

 

width:
    90px;

height:
    2px;

margin:
    35px auto 28px;

background:
    var(--portfolio-red);

box-shadow:
    0 0 18px
    var(--portfolio-red);
 


}

/* =========================================================
TAGLINE
========================================================= */

.portfolio-tagline {

 

margin:
    0 0 20px;

color:
    var(--portfolio-white);

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        1.8rem,
        3vw,
        2.8rem
    );

font-weight:
    500;

letter-spacing:
    2px;
 


}

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

.portfolio-intro {

 

max-width:
    650px;

margin:
    0 auto;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.3rem;

font-weight:
    300;

line-height:
    1.9;
 


}

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

.portfolio-scroll {

 

display:
    inline-flex;

flex-direction:
    column;

align-items:
    center;

gap:
    12px;

margin-top:
    60px;

color:
    var(--portfolio-grey);

text-decoration:
    none;

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.65rem;

font-weight:
    500;

letter-spacing:
    3px;

transition:
    0.35s ease;
 


}

.portfolio-scroll i {

 

color:
    var(--portfolio-red);

font-size:
    1rem;

animation:
    scrollArrow 2s ease-in-out infinite;
 


}

.portfolio-scroll:hover {

 

color:
    var(--portfolio-red);

transform:
    translateY(4px);
 


}

/* =========================================================
SECTION 2
ON STAGE
========================================================= */

.on-stage-section {

 

position: relative;

max-width:
    1450px;

margin:
    0 auto;

padding:
    130px 40px
    160px;
 


}

/* =========================================================
ON STAGE HEADING
========================================================= */

.on-stage-heading {

 

max-width:
    800px;

margin:
    0 auto 75px;

text-align:
    center;
 


}

.on-stage-heading h2 {

 

margin:
    0 0 25px;

color:
    var(--portfolio-white);

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        4rem,
        8vw,
        7rem
    );

font-weight:
    500;

line-height:
    0.9;
 


}

.on-stage-heading p:last-child {

 

max-width:
    650px;

margin:
    0 auto;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    300;

line-height:
    1.8;
 


}

/* =========================================================
PRODUCTION GRID
========================================================= */

.production-grid {

 

display:
    grid;

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

gap:
    45px;
 


}

/* =========================================================
PRODUCTION CARD
========================================================= */

.production-card {

 

position:
    relative;

overflow:
    hidden;

background:
    rgba(15, 15, 15, 0.75);

border:
    1px solid
    rgba(255, 255, 255, 0.10);

border-radius:
    24px;

backdrop-filter:
    blur(18px);

transition:
    transform 0.5s ease,
    border-color 0.5s ease,
    box-shadow 0.5s ease;
 


}

/* =========================================================
CARD HOVER
========================================================= */

.production-card:hover {

 

transform:
    translateY(-10px);

border-color:
    rgba(255, 59, 59, 0.75);

box-shadow:
    0 25px 70px
    rgba(0, 0, 0, 0.55),

    0 0 35px
    rgba(255, 40, 40, 0.12);
 


}

/* =========================================================
PRODUCTION IMAGE
========================================================= */

.production-image {

 

position:
    relative;

height:
    620px;

overflow:
    hidden;
 


}

.production-image img {

 

width:
    100%;

height:
    100%;

display:
    block;

object-fit:
    cover;

transition:
    transform 0.8s ease;
 


}

.production-card:hover
.production-image img {

 

transform:
    scale(1.07);
 


}

/* =========================================================
IMAGE OVERLAY
========================================================= */

.production-overlay {

 

position:
    absolute;

inset:
    0;

background:
    linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92),
        rgba(100, 0, 0, 0.10)
    );

opacity:
    0.55;

transition:
    opacity 0.5s ease;
 


}

.production-card:hover
.production-overlay {

 

opacity:
    0.9;

background:
    linear-gradient(
        to top,
        rgba(25, 0, 0, 0.95),
        rgba(160, 0, 0, 0.25)
    );
 


}

/* =========================================================
HOVER CONTENT
========================================================= */

.production-hover-content {

 

position:
    absolute;

inset:
    0;

display:
    flex;

align-items:
    center;

justify-content:
    center;

opacity:
    0;

transition:
    opacity 0.5s ease;
 


}

.production-card:hover
.production-hover-content {

 

opacity:
    1;
 


}

/* =========================================================
VIEW PRODUCTION
========================================================= */

.production-view {

 

display:
    inline-flex;

align-items:
    center;

gap:
    12px;

padding:
    14px 22px;

color:
    white;

border:
    1px solid
    rgba(255, 59, 59, 0.8);

border-radius:
    999px;

background:
    rgba(0, 0, 0, 0.45);

backdrop-filter:
    blur(12px);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.7rem;

font-weight:
    600;

letter-spacing:
    2px;

text-transform:
    uppercase;

box-shadow:
    0 0 25px
    rgba(255, 45, 45, 0.2);
 


}

.production-view i {

 

color:
    var(--portfolio-red);

transition:
    transform 0.3s ease;
 


}

.production-card:hover
.production-view i {

 

transform:
    translateX(5px);
 


}

/* =========================================================
PRODUCTION CONTENT
========================================================= */

.production-content {

 

padding:
    32px 35px 38px;
 


}

.production-year {

 

margin-bottom:
    10px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.7rem;

font-weight:
    600;

letter-spacing:
    3px;
 


}

.production-content h3 {

 

margin:
    0 0 16px;

color:
    var(--portfolio-white);

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        2.2rem,
        4vw,
        3rem
    );

font-weight:
    500;

line-height:
    1;
 


}

.production-role {

 

margin:
    0 0 8px;

color:
    var(--portfolio-white);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.27rem;

font-weight:
    500;
 


}

.production-venue {

 

margin:
    0;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    300;
 


}

/* =========================================================
ANIMATIONS
========================================================= */

@keyframes portfolioGlow {

 

0%,
100% {

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

    opacity:
        0.75;
}

50% {

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

    opacity:
        1;
}
 


}

@keyframes scrollArrow {

 

0%,
100% {

    transform:
        translateY(0);

    opacity:
        0.6;
}

50% {

    transform:
        translateY(7px);

    opacity:
        1;
}
 


}

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

@media (max-width: 1000px) {

 

.portfolio-hero {

    padding:
        100px 25px
        120px;
}


.production-grid {

    grid-template-columns:
        1fr;
}


.production-image {

    height:
        520px;
}
 


}

@media (max-width: 700px) {

 

.portfolio-hero {

    min-height:
        calc(100vh - 70px);

    padding:
        90px 20px
        100px;
}


.portfolio-title {

    font-size:
        clamp(
            3.3rem,
            15vw,
            5.5rem
        );

    letter-spacing:
        4px;
}


.portfolio-tagline {

    font-size:
        1.7rem;
}


.portfolio-intro {

    font-size:
        0.9rem;
}


.on-stage-section {

    padding:
        90px 20px
        110px;
}


.on-stage-heading {

    margin-bottom:
        50px;
}


.on-stage-heading h2 {

    font-size:
        4rem;
}


.production-image {

    height:
        480px;
}


.production-content {

    padding:
        27px;
}


.production-content h3 {

    font-size:
        2.2rem;
}
 


}

/* =========================================================
SECTION 3
CHARACTERS
========================================================= */

.characters-section {

 

position:
    relative;

max-width:
    1450px;

margin:
    0 auto;

padding:
    150px 40px
    170px;
 


}

/* =========================================================
CHARACTERS HEADING
========================================================= */

.characters-heading {

 

max-width:
    800px;

margin:
    0 auto 85px;

text-align:
    center;
 


}

.characters-heading h2 {

 

margin:
    0 0 25px;

color:
    var(--portfolio-white);

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        4rem,
        8vw,
        7rem
    );

font-weight:
    500;

line-height:
    0.9;
 


}

.characters-heading p:last-child {

 

max-width:
    650px;

margin:
    0 auto;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    300;

line-height:
    1.8;
 


}

/* =========================================================
CHARACTER LIST
========================================================= */

.character-list {

 

width:
    100%;

max-width:
    1350px;

margin:
    60px auto 0;

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


}

/* =========================================================
CHARACTER ITEM
========================================================= */

.character-item {

 

width:
    100%;

position:
    relative;

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

overflow:
    hidden;
 


}

/* =========================================================
CLICKABLE CHARACTER HEADER
========================================================= */

.character-trigger {

 

width:
    100%;

min-height:
    150px;

display:
    grid;

grid-template-columns:
    140px
    minmax(0, 1fr)
    140px;

align-items:
    center;

gap:
    35px;

padding:
    30px 45px;

border:
    none;

background:
    transparent;

color:
    white;

text-align:
    center;

cursor:
    pointer;

font-family:
    inherit;

transition:
    .4s ease;
 


}

.character-trigger:hover {

 

background:
    rgba(255,40,40,.045);
 


}

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

.character-number {

 

position:
    relative;

z-index:
    2;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    .75rem;

font-weight:
    600;

letter-spacing:
    3px;

text-align:
    center;

justify-self:
    center;
 


}

/* =========================================================
MAIN CHARACTER
========================================================= */

.character-main {

 

position:
    relative;

z-index:
    2;

width:
    100%;

display:
    flex;

flex-direction:
    column;

align-items:
    center;

justify-content:
    center;

text-align:
    center;

justify-self:
    center;
 


}

.character-main h3 {

 

margin:
    0 0 8px;

color:
    white;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    2.7rem;

font-weight:
    500;

line-height:
    1;

text-align:
    center;

transition:
    .4s ease;
 


}

.character-main p {

 

margin:
    0;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    .75rem;

letter-spacing:
    2px;

text-align:
    center;
 


}

/* =========================================================
RIGHT SIDE
========================================================= */

.character-details {

 

position:
    relative;

z-index:
    2;

display:
    flex;

align-items:
    center;

justify-content:
    center;

gap:
    18px;

justify-self:
    center;
 


}

.character-details span {

 

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    .65rem;

font-weight:
    600;

letter-spacing:
    2px;

text-transform:
    uppercase;

text-align:
    center;
 


}

.character-details i {

 

color:
    var(--portfolio-red);

transition:
    .4s ease;
 


}

/* =========================================================
ARROW ROTATION
========================================================= */

.character-item.active
.character-details i {

 

transform:
    rotate(90deg);
 


}

/* =========================================================
CHARACTER INFORMATION
========================================================= */

.character-info {

 

display:
    grid;

grid-template-rows:
    0fr;

transition:
    grid-template-rows .6s ease;
 


}

.character-item.active
.character-info {

 

grid-template-rows:
    1fr;
 


}

.character-info-inner {

 

min-height:
    0;

overflow:
    hidden;

background:
    rgba(10,10,10,.75);

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

border-radius:
    24px;

margin:
    0 20px 30px;

padding:
    0 45px;

opacity:
    0;

transition:
    padding .6s ease,
    opacity .4s ease;
 


}

.character-item.active
.character-info-inner {

 

padding:
    45px;

opacity:
    1;
 


}

/* =========================================================
INFORMATION HEADING
========================================================= */

.character-info-heading {

 

padding-bottom:
    30px;

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


}

.character-info-heading span {

 

display:
    block;

margin-bottom:
    10px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.65rem;

font-weight:
    600;

letter-spacing:
    3px;
 


}

.character-info-heading h4 {

 

margin:
    0 0 8px;

color:
    white;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    4rem;

font-weight:
    500;
 


}

.character-info-heading p {

 

margin:
    0;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

letter-spacing:
    2px;
 


}

/* =========================================================
INFORMATION CONTENT
========================================================= */

.character-info-content {

 

display:
    grid;

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

gap:
    45px;

padding-top:
    40px;
 


}

.character-info-content > div {

 

padding-right:
    20px;
 


}

.info-label {

 

display:
    block;

margin-bottom:
    15px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    600;

letter-spacing:
    3px;
 


}

.character-info-content p {

 

margin:
    0;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.1rem;

font-weight:
    300;

line-height:
    1.9;
 


}

/* =========================================================
ACTIVE CHARACTER
========================================================= */

.character-item.active
.character-trigger {

 

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


}

.character-item.active
.character-trigger .character-main h3 {

 

color:
    var(--portfolio-red);
 


}

.character-item.active
.character-trigger .character-details span {

 

color:
    white;
 


}

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

@media (max-width: 800px) {

 

.characters-section {

    padding:
        110px 20px
        130px;
}


.characters-heading {

    margin-bottom:
        60px;
}


.character-list {

    max-width:
        100%;
}


.character-trigger {

    grid-template-columns:
        45px
        1fr;

    gap:
        20px;

    padding:
        25px 10px;
}


.character-number {

    text-align:
        center;
}


.character-main {

    text-align:
        center;

    justify-self:
        center;
}


.character-main h3 {

    font-size:
        2.2rem;

    text-align:
        center;
}


.character-main p {

    text-align:
        center;
}


.character-details {

    grid-column:
        2;

    margin-top:
        -10px;

    justify-content:
        center;

    justify-self:
        center;
}


.character-info-inner {

    margin:
        0 10px 25px;
}


.character-item.active
.character-info-inner {

    padding:
        30px 25px;
}


.character-info-content {

    grid-template-columns:
        1fr;

    gap:
        30px;
}
 


}

/* =========================================================
SECTION 4
WATCH ME PERFORM
========================================================= */

.performance-section {

 

position:
    relative;

max-width:
    1450px;

margin:
    0 auto;

padding:
    150px 40px
    170px;
 


}

/* =========================================================
PERFORMANCE HEADING
========================================================= */

.performance-heading {

 

max-width:
    800px;

margin:
    0 auto 80px;

text-align:
    center;
 


}

.performance-heading h2 {

 

margin:
    0 0 25px;

color:
    var(--portfolio-white);

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        4rem,
        8vw,
        7rem
    );

font-weight:
    500;

line-height:
    0.9;
 


}

.performance-heading p:last-child {

 

max-width:
    650px;

margin:
    0 auto;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    300;

line-height:
    1.8;
 


}

/* =========================================================
FEATURED VIDEO
========================================================= */

.featured-video {

 

display:
    block;

position:
    relative;

background:
    rgba(12, 12, 12, 0.8);

border:
    1px solid
    rgba(255, 255, 255, 0.10);

border-radius:
    26px;

overflow:
    hidden;

text-decoration:
    none;

backdrop-filter:
    blur(18px);

transition:
    0.5s ease;
 


}

.featured-video:hover {

 

transform:
    translateY(-10px);

border-color:
    rgba(255, 59, 59, 0.75);

box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.6),

    0 0 45px
    rgba(255, 40, 40, 0.13);
 


}

/* =========================================================
FEATURED IMAGE
========================================================= */

.featured-video-image {

 

position:
    relative;

height:
    620px;

overflow:
    hidden;
 


}

.featured-video-image img {

 

width:
    100%;

height:
    100%;

display:
    block;

object-fit:
    cover;

transition:
    transform 0.8s ease;
 


}

.featured-video:hover
.featured-video-image img {

 

transform:
    scale(1.05);
 


}

/* =========================================================
FEATURED OVERLAY
========================================================= */

.featured-video-overlay {

 

position:
    absolute;

inset:
    0;

background:
    linear-gradient(
        to top,
        rgba(15, 0, 0, 0.95),
        rgba(110, 0, 0, 0.15),
        rgba(0, 0, 0, 0.15)
    );
 


}

/* =========================================================
FEATURED PLAY BUTTON
========================================================= */

.featured-play {

 

position:
    absolute;

top:
    50%;

left:
    50%;

width:
    105px;

height:
    105px;

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

display:
    flex;

align-items:
    center;

justify-content:
    center;

border:
    1px solid
    rgba(255, 255, 255, 0.55);

border-radius:
    50%;

background:
    rgba(120, 0, 0, 0.55);

color:
    white;

font-size:
    1.6rem;

backdrop-filter:
    blur(12px);

box-shadow:
    0 0 45px
    rgba(255, 40, 40, 0.35);

transition:
    0.4s ease;
 


}

.featured-video:hover
.featured-play {

 

width:
    120px;

height:
    120px;

background:
    rgba(255, 40, 40, 0.85);

box-shadow:
    0 0 65px
    rgba(255, 40, 40, 0.55);
 


}

/* =========================================================
FEATURED LABEL
========================================================= */

.featured-video-label {

 

position:
    absolute;

top:
    30px;

left:
    30px;
 


}

.featured-video-label span {

 

display:
    inline-block;

padding:
    10px 15px;

color:
    white;

border:
    1px solid
    rgba(255, 59, 59, 0.65);

border-radius:
    999px;

background:
    rgba(0, 0, 0, 0.45);

backdrop-filter:
    blur(10px);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.75rem;

font-weight:
    600;

letter-spacing:
    2px;
 


}

/* =========================================================
FEATURED CONTENT
========================================================= */

.featured-video-content {

 

display:
    flex;

align-items:
    center;

justify-content:
    space-between;

gap:
    40px;

padding:
    38px 42px;
 


}

.featured-video-eyebrow {

 

margin:
    0 0 10px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    600;

letter-spacing:
    3px;
 


}

.featured-video-content h3 {

 

margin:
    0 0 12px;

color:
    white;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    2.8rem;

font-weight:
    500;
 


}

.featured-video-content p {

 

max-width:
    650px;

margin:
    0;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.12rem;

font-weight:
    300;

line-height:
    1.7;
 


}

/* =========================================================
WATCH LINK
========================================================= */

.watch-link {

 

flex-shrink:
    0;

display:
    inline-flex;

align-items:
    center;

gap:
    12px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.9rem;

font-weight:
    600;

letter-spacing:
    2px;

white-space:
    nowrap;

transition:
    0.35s ease;
 


}

.watch-link i {

 

transition:
    0.35s ease;
 


}

.featured-video:hover
.watch-link {

 

color:
    white;
 


}

.featured-video:hover
.watch-link i {

 

transform:
    translateX(7px);
 


}

/* =========================================================
ADDITIONAL VIDEOS
========================================================= */

.additional-videos {

 

display:
    grid;

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

gap:
    35px;

margin-top:
    35px;
 


}

/* =========================================================
ADDITIONAL VIDEO CARD
========================================================= */

.additional-video {

 

display:
    block;

background:
    rgba(12, 12, 12, 0.8);

border:
    1px solid
    rgba(255, 255, 255, 0.10);

border-radius:
    24px;

overflow:
    hidden;

text-decoration:
    none;

backdrop-filter:
    blur(18px);

transition:
    0.5s ease;
 


}

.additional-video:hover {

 

transform:
    translateY(-8px);

border-color:
    rgba(255, 59, 59, 0.7);

box-shadow:
    0 25px 60px
    rgba(0, 0, 0, 0.55),

    0 0 35px
    rgba(255, 40, 40, 0.12);
 


}

/* =========================================================
ADDITIONAL VIDEO IMAGE
========================================================= */

.additional-video-image {

 

position:
    relative;

height:
    350px;

overflow:
    hidden;
 


}

.additional-video-image img {

 

width:
    100%;

height:
    100%;

object-fit:
    cover;

transition:
    0.6s ease;
 


}

.additional-video:hover
.additional-video-image img {

 

transform:
    scale(1.07);
 


}

/* =========================================================
SMALL PLAY BUTTON
========================================================= */

.additional-play {

 

position:
    absolute;

top:
    50%;

left:
    50%;

width:
    75px;

height:
    75px;

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

display:
    flex;

align-items:
    center;

justify-content:
    center;

border:
    1px solid
    rgba(255, 255, 255, 0.5);

border-radius:
    50%;

background:
    rgba(100, 0, 0, 0.65);

color:
    white;

font-size:
    1.1rem;

backdrop-filter:
    blur(10px);

transition:
    0.4s ease;
 


}

.additional-video:hover
.additional-play {

 

background:
    var(--portfolio-red);

box-shadow:
    0 0 35px
    rgba(255, 40, 40, 0.45);
 


}

/* =========================================================
ADDITIONAL VIDEO CONTENT
========================================================= */

.additional-video-content {

 

padding:
    30px 32px 35px;
 


}

.additional-video-content p {

 

margin:
    0 0 10px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.65rem;

font-weight:
    600;

letter-spacing:
    3px;
 


}

.additional-video-content h3 {

 

margin:
    0 0 22px;

color:
    white;

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    2.2rem;

font-weight:
    500;
 


}

.additional-video-content span {

 

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.65rem;

font-weight:
    600;

letter-spacing:
    2px;

transition:
    0.35s ease;
 


}

.additional-video-content span i {

 

margin-left:
    8px;

color:
    var(--portfolio-red);

transition:
    0.35s ease;
 


}

.additional-video:hover
.additional-video-content span {

 

color:
    white;
 


}

.additional-video:hover
.additional-video-content span i {

 

transform:
    translateX(6px);
 


}

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

@media (max-width: 800px) {

 

.performance-section {

    padding:
        110px 20px
        130px;
}


.performance-heading {

    margin-bottom:
        60px;
}


.featured-video-image {

    height:
        480px;
}


.featured-video-content {

    flex-direction:
        column;

    align-items:
        flex-start;

    padding:
        30px;
}


.featured-video-content h3 {

    font-size:
        2.4rem;
}


.additional-videos {

    grid-template-columns:
        1fr;
}


.additional-video-image {

    height:
        350px;
}
 


}

/* =========================================================
SECTION 5
CURRENTLY
========================================================= */

.currently-section {

 

position:
    relative;

max-width:
    1450px;

margin:
    0 auto;

padding:
    150px 40px
    170px;
 


}

/* =========================================================
CURRENTLY HEADING
========================================================= */

.currently-heading {

 

max-width:
    850px;

margin:
    0 auto 80px;

text-align:
    center;
 


}

.currently-heading h2 {

 

margin:
    0 0 25px;

color:
    var(--portfolio-white);

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        3.8rem,
        8vw,
        6rem
    );

font-weight:
    500;

line-height:
    0.9;
 


}

.currently-heading p:last-child {

 

max-width:
    650px;

margin:
    0 auto;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    300;

line-height:
    1.8;
 


}

/* =========================================================
CURRENTLY CARD
========================================================= */

.currently-card {

 

position:
    relative;

display:
    grid;

grid-template-columns:
    1.4fr
    0.8fr;

gap:
    70px;

max-width:
    1250px;

margin:
    0 auto;

padding:
    70px;

overflow:
    hidden;

background:
    rgba(15, 15, 15, 0.75);

border:
    1px solid
    rgba(255, 255, 255, 0.10);

border-radius:
    30px;

backdrop-filter:
    blur(20px);

transition:
    0.5s ease;
 


}

.currently-card:hover {

 

border-color:
    rgba(255, 59, 59, 0.65);

box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.55),

    0 0 50px
    rgba(255, 40, 40, 0.10);
 


}

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

.currently-glow {

 

position:
    absolute;

width:
    600px;

height:
    600px;

top:
    -300px;

left:
    -250px;

background:
    radial-gradient(
        circle,
        rgba(255, 40, 40, 0.18),
        transparent 70%
    );

filter:
    blur(35px);

pointer-events:
    none;

transition:
    0.6s ease;
 


}

.currently-card:hover
.currently-glow {

 

transform:
    scale(1.2);

opacity:
    1;
 


}

/* =========================================================
CURRENTLY MAIN
========================================================= */

.currently-main {

 

position:
    relative;

z-index:
    2;
 


}

.currently-number {

 

display:
    block;

margin-bottom:
    18px;

color:
    rgba(255, 59, 59, 0.65);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.9rem;

font-weight:
    600;

letter-spacing:
    3px;
 


}

.currently-label {

 

margin:
    0 0 15px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    600;

letter-spacing:
    4px;
 


}

.currently-main h3 {

 

margin:
    0 0 25px;

color:
    var(--portfolio-white);

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        2.8rem,
        5vw,
        5rem
    );

font-weight:
    500;

line-height:
    0.95;
 


}

.currently-programme {

 

margin:
    0;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    400;

line-height:
    1.7;
 


}

.currently-divider {

 

width:
    80px;

height:
    1px;

margin:
    35px 0;

background:
    var(--portfolio-red);

box-shadow:
    0 0 15px
    rgba(255, 59, 59, 0.4);
 


}

.currently-description {

 

max-width:
    650px;

margin:
    0;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    300;

line-height:
    1.9;
 


}

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

.currently-details {

 

position:
    relative;

z-index:
    2;

display:
    flex;

flex-direction:
    column;

justify-content:
    center;
 


}

.currently-detail {

 

padding:
    22px 0;

border-bottom:
    1px solid
    rgba(255, 255, 255, 0.10);
 


}

.currently-detail:first-child {

 

border-top:
    1px solid
    rgba(255, 255, 255, 0.10);
 


}

.currently-detail span {

 

display:
    block;

margin-bottom:
    7px;

color:
    var(--portfolio-red);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.23rem;

font-weight:
    600;

letter-spacing:
    2px;
 


}

.currently-detail strong {

 

color:
    var(--portfolio-white);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1.2rem;

font-weight:
    400;
 


}

/* =========================================================
NEXT CHAPTER
========================================================= */

.next-chapter {

 

display:
    flex;

flex-direction:
    column;

align-items:
    center;

margin-top:
    85px;
 


}

.next-chapter span {

 

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.6rem;

font-weight:
    600;

letter-spacing:
    4px;
 


}

.next-chapter-line {

 

width:
    1px;

height:
    60px;

margin:
    18px 0;

background:
    linear-gradient(
        to bottom,
        var(--portfolio-red),
        transparent
    );
 


}

.next-chapter i {

 

color:
    var(--portfolio-red);

font-size:
    0.8rem;
 


}

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

@media (max-width: 850px) {

 

.currently-section {

    padding:
        110px 20px
        130px;
}


.currently-card {

    grid-template-columns:
        1fr;

    gap:
        45px;

    padding:
        45px 30px;
}


.currently-main h3 {

    font-size:
        3.2rem;
}
 


}

/* =========================================================
SECTION 6
CURTAIN CALL
========================================================= */

.curtain-call-section {

 

position:
    relative;

min-height:
    75vh;

display:
    flex;

align-items:
    center;

justify-content:
    center;

padding:
    150px 30px;

overflow:
    hidden;

text-align:
    center;
 


}

/* =========================================================
CURTAIN CALL GLOW
========================================================= */

.curtain-call-glow {

 

position:
    absolute;

width:
    850px;

height:
    850px;

top:
    50%;

left:
    50%;

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

background:
    radial-gradient(
        circle,
        rgba(255, 35, 35, 0.24),
        rgba(100, 0, 0, 0.10) 35%,
        transparent 70%
    );

filter:
    blur(40px);

pointer-events:
    none;

animation:
    curtainGlow 8s ease-in-out infinite;
 


}

/* =========================================================
CURTAIN CALL CONTENT
========================================================= */

.curtain-call-content {

 

position:
    relative;

z-index:
    2;

max-width:
    900px;

margin:
    0 auto;
 


}

.curtain-call-content h2 {

 

margin:
    0;

color:
    var(--portfolio-white);

font-family:
    'Cormorant Garamond',
    serif;

font-size:
    clamp(
        4rem,
        9vw,
        8rem
    );

font-weight:
    500;

line-height:
    0.85;

letter-spacing:
    1px;
 


}

.curtain-call-line {

 

width:
    100px;

height:
    2px;

margin:
    40px auto;

background:
    var(--portfolio-red);

box-shadow:
    0 0 20px
    rgba(255, 59, 59, 0.55);
 


}

.curtain-call-text {

 

max-width:
    600px;

margin:
    0 auto;

color:
    var(--portfolio-grey);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    1rem;

font-weight:
    300;

line-height:
    1.9;
 


}

/* =========================================================
CURTAIN CALL BUTTON
========================================================= */

.curtain-call-button {

 

display:
    inline-flex;

align-items:
    center;

gap:
    15px;

margin-top:
    45px;

padding:
    18px 32px;

color:
    white;

border:
    1px solid
    var(--portfolio-red);

border-radius:
    999px;

background:
    rgba(100, 0, 0, 0.25);

font-family:
    'Montserrat',
    sans-serif;

font-size:
    0.7rem;

font-weight:
    600;

letter-spacing:
    2px;

transition:
    0.4s ease;
 


}

.curtain-call-button i {

 

color:
    var(--portfolio-red);

transition:
    0.35s ease;
 


}

.curtain-call-button:hover {

 

background:
    var(--portfolio-red);

color:
    white;

transform:
    translateY(-5px);

box-shadow:
    0 15px 45px
    rgba(255, 40, 40, 0.35);
 


}

.curtain-call-button:hover i {

 

color:
    white;

transform:
    translateX(6px);
 


}

/* =========================================================
SIGN OFF
========================================================= */

.curtain-call-signoff {

 

margin-top:
    65px;

color:
    rgba(255, 255, 255, 0.35);

font-family:
    'Shadows Into Light',
    cursive;

font-size:
    1.4rem;

letter-spacing:
    1px;
 


}

/* =========================================================
CURTAIN ANIMATION
========================================================= */

@keyframes curtainGlow {

 

0%,
100% {

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

    opacity:
        0.65;
}

50% {

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

    opacity:
        1;
}
 


}

/* =========================================================
CURTAIN CALL MOBILE
========================================================= */

@media (max-width: 700px) {

 

.curtain-call-section {

    min-height:
        80vh;

    padding:
        110px 20px;
}


.curtain-call-content h2 {

    font-size:
        clamp(
            3.4rem,
            14vw,
            5.5rem
        );
}


.curtain-call-text {

    font-size:
        0.9rem;
}


.curtain-call-signoff {

    font-size:
        1.2rem;
}
 


}

.currently-card {

 

cursor:
    pointer;

text-decoration:
    none;

color:
    inherit;
 


}

.currently-card:hover {

 

transform:
    translateY(-8px);

border-color:
    rgba(255, 59, 59, 0.75);

box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.6),

    0 0 55px
    rgba(255, 40, 40, 0.18);
 


}