/* ============================================================
   ECEL GALA — FFECEL
   ============================================================ */

/* ---- Base ---- */
.gala-page {
    background: #07080d;
    min-height: 100vh;
    color: #e5e7eb;
}

/* ---- Hero ---- */
.gala-hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 11rem 1.5rem 6rem;
    overflow: hidden;
}

.gala-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 50% at 50% -5%, rgba(200, 160, 60, 0.20) 0%, transparent 65%),
        radial-gradient(ellipse 30% 25% at 50% 0%,  rgba(230, 190, 80, 0.10) 0%, transparent 50%),
        linear-gradient(180deg, #08090e 0%, #0c0d14 100%);
    z-index: 0;
}

.gala-hero__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.07) 3px,
        rgba(0, 0, 0, 0.07) 4px
    );
    pointer-events: none;
}

.gala-hero__bg::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(to bottom, transparent, #07080d);
}

.gala-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.gala-hero__ribbon {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(200, 160, 60, 0.55);
    margin-bottom: 1.4rem;
}

.gala-hero__rule {
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200, 160, 60, 0.35), transparent);
    margin: 1rem auto;
}

.gala-hero__title {
    font-size: clamp(3.2rem, 7.5vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    color: #f5f0e8;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

em.text-gala-gold {
    font-style: normal;
    background: linear-gradient(135deg, #c9a84c 0%, #e8c96a 42%, #d4a843 68%, #8b6914 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gala-hero__sub {
    font-size: 0.9rem;
    color: #5a6070;
    max-width: 440px;
    margin: 1.8rem auto 2.2rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
}

.gala-hero__stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.gala-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gala-hero__stat-num {
    font-size: 2.4rem;
    font-weight: 900;
    color: #c9a84c;
    line-height: 1;
}

.gala-hero__stat-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #3d4455;
    margin-top: 0.35rem;
    font-weight: 700;
}

/* ---- Filter Bar ---- */
.gala-filters {
    padding: 0 1.5rem;
    margin-bottom: 3rem;
}

.gala-filter-bar {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(200, 160, 60, 0.1);
    border-radius: 10px;
    max-width: 460px;
    margin: 0 auto;
}

.gala-filter {
    background: transparent;
    border: none;
    color: #4b5563;
    padding: 0.55rem 1.1rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.gala-filter:hover {
    color: #d4a843;
    background: rgba(200, 160, 60, 0.05);
}

.gala-filter.active {
    background: linear-gradient(135deg, rgba(200, 160, 60, 0.14), rgba(200, 160, 60, 0.07));
    color: #d4a843;
    border: 1px solid rgba(200, 160, 60, 0.22);
    box-shadow: 0 2px 12px rgba(200, 160, 60, 0.07);
}

/* ---- Empty State ---- */
.gala-empty { padding: 4rem 1.5rem; }

.gala-empty__box {
    text-align: center;
    padding: 5rem 2rem;
    background: rgba(255, 255, 255, 0.015);
    border: 1px dashed rgba(200, 160, 60, 0.13);
    border-radius: 14px;
    max-width: 450px;
    margin: 0 auto;
}

.gala-empty__box i {
    font-size: 2.5rem;
    color: rgba(200, 160, 60, 0.18);
    margin-bottom: 1.2rem;
    display: block;
}

.gala-empty__box h2 { color: #e5e7eb; font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 800; }
.gala-empty__box p  { color: #3d4455; font-size: 0.87rem; line-height: 1.6; }

/* ---- Grid ---- */
.gala-grid-section { padding-bottom: 6rem; }

.gala-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.8rem;
}

/* ---- Card ---- */
.gala-card {
    position: relative;
    background: linear-gradient(160deg, #0f1018 0%, #0a0b10 100%);
    border: 1px solid rgba(200, 160, 60, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
    animation: galaCardIn 0.55s ease both;
}

@keyframes galaCardIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gala-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(155deg, rgba(200, 160, 60, 0.05) 0%, transparent 45%);
    pointer-events: none;
    transition: opacity 0.4s;
    opacity: 0;
    z-index: 0;
}

.gala-card:hover {
    border-color: rgba(200, 160, 60, 0.28);
    transform: translateY(-7px);
    box-shadow:
        0 28px 55px -14px rgba(0, 0, 0, 0.65),
        0 0 45px -18px rgba(200, 160, 60, 0.14),
        inset 0 1px 0 rgba(200, 160, 60, 0.07);
}

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

.gala-card__num {
    position: absolute;
    top: 13px;
    right: 15px;
    z-index: 6;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    color: rgba(200, 160, 60, 0.38);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

/* ---- Card Media ---- */
.gala-card__media {
    position: relative;
    width: 100%;
    height: 215px;
    overflow: hidden;
    background: #07080d;
    cursor: pointer;
}

.gala-card__media::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(10, 11, 16, 0.8), transparent);
    pointer-events: none;
    z-index: 2;
}

.gala-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gala-card:hover .gala-card__img { transform: scale(1.07); }

.gala-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, #111219, #0a0b10);
    color: rgba(200, 160, 60, 0.1);
    font-size: 3.5rem;
}

.gala-card__video-thumb {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.gala-card__play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 54px; height: 54px;
    background: rgba(200, 160, 60, 0.88);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07080d;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 22px rgba(200, 160, 60, 0.35);
    z-index: 3;
}

.gala-card:hover .gala-card__play {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 6px 34px rgba(200, 160, 60, 0.52);
}

.gala-card__badge {
    position: absolute;
    bottom: 11px; left: 13px;
    z-index: 5;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(200, 160, 60, 0.6);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ---- Card Body ---- */
.gala-card__body {
    position: relative;
    z-index: 1;
    padding: 1rem 1.3rem 1.45rem;
}

.gala-card__rule {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(200, 160, 60, 0.5), transparent);
    margin-bottom: 0.8rem;
}

.gala-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #f0ece4;
    margin-bottom: 0.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.gala-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.gala-card__meta span {
    font-size: 0.7rem;
    color: #555e72;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.gala-card__meta span i {
    color: rgba(200, 160, 60, 0.55);
    font-size: 0.58rem;
}

.gala-card__desc {
    font-size: 0.78rem;
    color: #40475a;
    line-height: 1.55;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gala-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.65rem;
}

.gala-card__tag {
    font-size: 0.58rem;
    color: rgba(200, 160, 60, 0.55);
    background: rgba(200, 160, 60, 0.05);
    border: 1px solid rgba(200, 160, 60, 0.1);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.gala-card__date {
    font-size: 0.65rem;
    color: #2e3344;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.06em;
}

/* ---- Video Modal ---- */
.moment-video-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.moment-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.93);
    backdrop-filter: blur(10px);
}

.moment-video-modal__content {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    z-index: 1;
}

.moment-video-modal__close {
    position: absolute;
    top: -44px; right: 0;
    background: none;
    border: none;
    color: rgba(200, 160, 60, 0.55);
    font-size: 1.4rem;
    cursor: pointer;
    transition: color 0.2s;
}

.moment-video-modal__close:hover { color: #d4a843; }

.moment-video-modal__player {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 35px 80px rgba(0,0,0,0.8), 0 0 60px rgba(200,160,60,0.06);
}

/* ---- Lightbox ---- */
.moment-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 2rem;
}

.moment-lightbox__close {
    position: absolute;
    top: 1.5rem; right: 1.5rem;
    background: none;
    border: none;
    color: rgba(200, 160, 60, 0.55);
    font-size: 1.6rem;
    cursor: pointer;
    transition: color 0.2s;
    z-index: 2;
}

.moment-lightbox__close:hover { color: #d4a843; }

.moment-lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.65), 0 0 50px rgba(200,160,60,0.06);
    object-fit: contain;
}

.moment-lightbox__caption {
    color: rgba(200, 160, 60, 0.55);
    margin-top: 1.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .gala-hero { min-height: 48vh; padding: 9rem 1rem 4rem; }
    .gala-hero__title { font-size: 2.8rem; }
    .gala-hero__stat-num { font-size: 2rem; }
    .gala-grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .gala-card__media { height: 190px; }
    .moment-video-modal__content { max-width: 100%; }
}

@media (max-width: 480px) {
    .gala-hero__title { font-size: 2.2rem; }
    .gala-hero__sub   { font-size: 0.83rem; }
    .gala-filter-bar  { gap: 0.25rem; }
    .gala-filter      { padding: 0.45rem 0.7rem; font-size: 0.67rem; }
    .gala-card__play  { width: 44px; height: 44px; font-size: 0.95rem; }
}

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

/* Rotating spotlight sweep across the hero */
@keyframes galaSweep {
    0%   { transform: rotate(-30deg) translateX(-60%); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: rotate(-30deg) translateX(160%); opacity: 0; }
}

/* Spotlight beam element */
.gala-hero::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 50%;
    width: 3px;
    height: 160%;
    background: linear-gradient(180deg, transparent 0%, rgba(200,160,60,0.12) 30%, rgba(200,160,60,0.06) 70%, transparent 100%);
    filter: blur(18px);
    transform-origin: top center;
    animation: galaSweep 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Hero title shimmer pass */
@keyframes galaShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

em.text-gala-gold {
    font-style: normal;
    background: linear-gradient(
        105deg,
        #8b6914 0%,
        #c9a84c 20%,
        #f0d870 40%,
        #d4a843 55%,
        #c9a84c 70%,
        #8b6914 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: galaShimmer 4s linear infinite;
}

/* Hero stat number count-up glow */
@keyframes galaStatGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(200,160,60,0); }
    50%       { text-shadow: 0 0 22px rgba(200,160,60,0.55), 0 0 40px rgba(200,160,60,0.18); }
}

.gala-hero__stat-num {
    animation: galaStatGlow 3.5s ease-in-out infinite;
}

/* Card entrance stagger — kept, enhanced */
@keyframes galaCardIn {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gold pulse ring on card hover */
@keyframes galaPulse {
    0%   { box-shadow: 0 0 0 0 rgba(200,160,60,0.25); }
    70%  { box-shadow: 0 0 0 10px rgba(200,160,60,0); }
    100% { box-shadow: 0 0 0 0 rgba(200,160,60,0); }
}

.gala-card:hover {
    animation: galaPulse 1.6s ease-out forwards;
}

/* Ambient gold glow on the play button */
@keyframes galaPlayPulse {
    0%, 100% { box-shadow: 0 4px 22px rgba(200,160,60,0.35); }
    50%       { box-shadow: 0 4px 38px rgba(200,160,60,0.65), 0 0 0 6px rgba(200,160,60,0.1); }
}

.gala-card__play {
    animation: galaPlayPulse 2.2s ease-in-out infinite;
}

/* Hero ribbon blink */
@keyframes galaRibbonFade {
    0%, 100% { opacity: 0.55; }
    50%       { opacity: 0.9; }
}

.gala-hero__ribbon {
    animation: galaRibbonFade 4s ease-in-out infinite;
}

/* Rule lines draw-in on page load */
@keyframes galaRuleDraw {
    from { width: 0; opacity: 0; }
    to   { width: 100px; opacity: 1; }
}

.gala-hero__rule {
    animation: galaRuleDraw 1.2s ease forwards;
}

/* Filter active tab gold slide */
.gala-filter.active::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #c9a84c, transparent);
    border-radius: 2px;
}

.gala-filter {
    position: relative;
}

/* Card gold shimmer top-edge on hover */
.gala-card:hover::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,160,60,0.6), transparent);
    animation: galaShimmer 1.8s linear infinite;
    background-size: 200% auto;
    z-index: 10;
}

/* ============================================================
   RED CURTAIN INTRO  — FULL THEATRICAL EXPERIENCE
   ============================================================ */

#galaCurtain {
    position: fixed; inset: 0;
    z-index: 99999;
    overflow: hidden;
    pointer-events: all;
    background: #130003;
}

/* ── Stage spotlights ── */
.curtain-spots {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.curtain-spot {
    position: absolute;
    top: 0;
    width: 320px;
    height: 110vh;
    transform-origin: top center;
    opacity: 0;
    transition: opacity 1s ease;
}

/* Cone shape via clip-path */
.curtain-spot::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(44% 0%, 56% 0%, 100% 100%, 0% 100%);
    background: radial-gradient(
        ellipse 100% 80% at 50% 0%,
        rgba(255,245,200,0.22) 0%,
        rgba(255,230,140,0.10) 40%,
        transparent 100%
    );
}

/* Halo at cone tip */
.curtain-spot::after {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,220,0.9) 0%, rgba(255,220,100,0.4) 50%, transparent 100%);
    filter: blur(4px);
}

/* Individual spot positions & sweep animations */
.curtain-spot--1 {
    left: 8%;
    animation: spotSweep1 7s ease-in-out infinite;
}
.curtain-spot--2 {
    left: 28%;
    animation: spotSweep2 9s ease-in-out infinite;
    animation-delay: -2s;
}
.curtain-spot--3 {
    right: 28%; left: auto;
    animation: spotSweep3 8s ease-in-out infinite;
    animation-delay: -4s;
}
.curtain-spot--4 {
    right: 8%; left: auto;
    animation: spotSweep4 6.5s ease-in-out infinite;
    animation-delay: -1s;
}

@keyframes spotSweep1 {
    0%   { transform: rotate(-22deg); opacity: 0.75; }
    25%  { transform: rotate(12deg);  opacity: 0.9; }
    50%  { transform: rotate(-8deg);  opacity: 0.65; }
    75%  { transform: rotate(20deg);  opacity: 0.85; }
    100% { transform: rotate(-22deg); opacity: 0.75; }
}
@keyframes spotSweep2 {
    0%   { transform: rotate(18deg);  opacity: 0.6; }
    30%  { transform: rotate(-14deg); opacity: 0.85; }
    60%  { transform: rotate(22deg);  opacity: 0.7; }
    100% { transform: rotate(18deg);  opacity: 0.6; }
}
@keyframes spotSweep3 {
    0%   { transform: rotate(-15deg); opacity: 0.8; }
    35%  { transform: rotate(18deg);  opacity: 0.55; }
    65%  { transform: rotate(-20deg); opacity: 0.9; }
    100% { transform: rotate(-15deg); opacity: 0.8; }
}
@keyframes spotSweep4 {
    0%   { transform: rotate(25deg);  opacity: 0.65; }
    40%  { transform: rotate(-10deg); opacity: 0.9; }
    70%  { transform: rotate(15deg);  opacity: 0.7; }
    100% { transform: rotate(25deg);  opacity: 0.65; }
}

/* Show spots after phase 1 (crown appears) */
#galaCurtain.curtain--p1 .curtain-spot { opacity: 1; }
/* Fade spots out as curtain opens */
#galaCurtain.curtain--opening .curtain-spot {
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* ── Fixture lights (sources at the top) ── */
.curtain-fixtures {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    padding: 0 6%;
    z-index: 3;
    pointer-events: none;
}

.curtain-fixture {
    width: 32px; height: 42px;
    background: linear-gradient(180deg, #2a2a2a 0%, #111 60%, #1a1a1a 100%);
    border-radius: 4px 4px 8px 8px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.08);
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 4px;
}

.curtain-fixture::before {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 12px;
    background: #1a1a1a;
    border-radius: 3px;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.6);
}

.curtain-fixture__lens {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(
        circle at 38% 38%,
        rgba(255,255,220,0.95) 0%,
        rgba(255,220,100,0.8) 30%,
        rgba(200,150,40,0.5) 60%,
        rgba(100,60,0,0.3) 100%
    );
    box-shadow:
        0 0 8px 4px rgba(255,230,100,0.4),
        0 0 20px 8px rgba(255,200,50,0.2),
        0 0 40px 16px rgba(200,150,30,0.1);
    animation: lensFlicker 3s ease-in-out infinite;
}

.curtain-fixture:nth-child(1) .curtain-fixture__lens { animation-delay: 0s; }
.curtain-fixture:nth-child(2) .curtain-fixture__lens { animation-delay: 0.7s; }
.curtain-fixture:nth-child(3) .curtain-fixture__lens { animation-delay: 1.4s; }
.curtain-fixture:nth-child(4) .curtain-fixture__lens { animation-delay: 2.1s; }

@keyframes lensFlicker {
    0%,100% { box-shadow: 0 0 8px 4px rgba(255,230,100,0.4), 0 0 20px 8px rgba(255,200,50,0.2), 0 0 40px 16px rgba(200,150,30,0.1); opacity: 0.85; }
    30%      { box-shadow: 0 0 14px 7px rgba(255,245,150,0.7), 0 0 35px 14px rgba(255,220,80,0.4), 0 0 70px 28px rgba(200,160,40,0.2); opacity: 1; }
    60%      { box-shadow: 0 0 6px 3px rgba(255,220,80,0.3),  0 0 16px 6px rgba(255,190,40,0.15), 0 0 30px 12px rgba(180,130,20,0.08); opacity: 0.7; }
}

/* Fade out fixtures when opening */
#galaCurtain.curtain--opening .curtain-fixtures {
    opacity: 0;
    transition: opacity 0.8s ease;
}

/* ── Panels ── */
.curtain-panel {
    position: absolute;
    top: 0; bottom: 0; width: 52%;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.22) 0px, rgba(0,0,0,0) 20px,
            rgba(255,255,255,0.045) 24px, rgba(0,0,0,0) 40px
        ),
        linear-gradient(160deg, #d6001f 0%, #9a0012 28%, #5c0008 54%, #9a0012 78%, #d6001f 100%);
    transition: transform 2.8s cubic-bezier(0.86, 0, 0.07, 1);
    will-change: transform;
    box-shadow: inset 0 0 160px rgba(0,0,0,0.6);
}

.curtain-left  { left: 0; }
.curtain-right { right: 0; }

/* Fabric folds */
.curtain-fold {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(180deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 22%,
        rgba(255,255,255,0.07) 50%,
        rgba(0,0,0,0.3) 78%, rgba(0,0,0,0) 100%
    );
    animation: curtainFoldShimmer 3.2s ease-in-out infinite alternate;
}
.curtain-left  .curtain-fold:nth-child(1){left:11%;  animation-delay:0s}
.curtain-left  .curtain-fold:nth-child(2){left:24%;  animation-delay:.22s}
.curtain-left  .curtain-fold:nth-child(3){left:40%;  animation-delay:.50s}
.curtain-left  .curtain-fold:nth-child(4){left:57%;  animation-delay:.78s}
.curtain-left  .curtain-fold:nth-child(5){left:73%;  animation-delay:1.0s}
.curtain-left  .curtain-fold:nth-child(6){left:90%;  animation-delay:1.3s; width:3px; background:rgba(0,0,0,0.5)}
.curtain-right .curtain-fold:nth-child(1){right:11%; animation-delay:.10s}
.curtain-right .curtain-fold:nth-child(2){right:24%; animation-delay:.33s}
.curtain-right .curtain-fold:nth-child(3){right:40%; animation-delay:.62s}
.curtain-right .curtain-fold:nth-child(4){right:57%; animation-delay:.90s}
.curtain-right .curtain-fold:nth-child(5){right:73%; animation-delay:1.1s}
.curtain-right .curtain-fold:nth-child(6){right:90%; animation-delay:1.4s; width:3px; background:rgba(0,0,0,0.5)}

@keyframes curtainFoldShimmer {
    from { opacity: 0.15; }
    to   { opacity: 1; }
}

/* Sweeping sheen across velvet */
.curtain-sweep {
    position: absolute; inset: 0;
    background: linear-gradient(105deg,
        transparent 20%, rgba(255,255,255,0.07) 50%, transparent 80%
    );
    transform: translateX(-150%);
    animation: curtainSweep 5s ease-in-out infinite;
}
.curtain-right .curtain-sweep { animation-delay: 2.2s; }

@keyframes curtainSweep {
    0%   { transform: translateX(-150%); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(250%);  opacity: 0; }
}

/* Glowing slit between the two panels */
.curtain-gapglow {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%; transform: translateX(-50%);
    width: 4px;
    background: linear-gradient(180deg,
        rgba(200,160,60,0.5) 0%, rgba(255,255,255,0.95) 50%, rgba(200,160,60,0.5) 100%
    );
    filter: blur(8px);
    z-index: 1;
    animation: gapGlowPulse 2.4s ease-in-out infinite;
}
@keyframes gapGlowPulse {
    0%, 100% { opacity: 0.35; filter: blur(8px); }
    50%       { opacity: 1;    filter: blur(20px); }
}

/* ── Gold valance ── */
.curtain-valance {
    position: absolute;
    top: 0; left: 0; right: 0; height: 88px;
    background: linear-gradient(90deg,
        #5c0008 0%, #9a0012 8%,
        #c9a84c 12%, #f0d870 15%, #c9a84c 19%,
        #9a0012 24%, #5c0008 35%,
        #9a0012 45%, #c9a84c 49%, #f0d870 50%, #c9a84c 51%,
        #9a0012 55%, #5c0008 65%,
        #9a0012 78%, #c9a84c 82%, #f0d870 86%, #c9a84c 89%,
        #9a0012 93%, #5c0008 100%
    );
    box-shadow: 0 12px 55px rgba(0,0,0,0.95), inset 0 -6px 18px rgba(0,0,0,0.5);
    z-index: 2;
    transition: transform 2.2s cubic-bezier(0.86, 0, 0.07, 1) 0.4s;
    animation: valanceShimmer 4.5s ease-in-out infinite;
}
.curtain-valance::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 16px;
    background: repeating-linear-gradient(
        90deg, #c9a84c 0, #c9a84c 8px, #8b0010 8px, #8b0010 12px
    );
    opacity: 0.8;
}
@keyframes valanceShimmer {
    0%, 100% { filter: brightness(1); }
    50%       { filter: brightness(1.35) saturate(1.2); }
}

/* ── Centre stage ── */
.curtain-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 1; pointer-events: none;
}

/* Rotating god-rays behind everything */
.curtain-rays {
    position: absolute;
    width: 700px; height: 700px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,   rgba(200,160,60,0.09) 3deg,  transparent 6deg,
        transparent 22deg,  rgba(200,160,60,0.07) 25deg, transparent 28deg,
        transparent 44deg,  rgba(200,160,60,0.10) 48deg, transparent 51deg,
        transparent 66deg,  rgba(200,160,60,0.08) 69deg, transparent 72deg,
        transparent 88deg,  rgba(200,160,60,0.11) 92deg, transparent 95deg,
        transparent 110deg, rgba(200,160,60,0.07) 113deg,transparent 116deg,
        transparent 132deg, rgba(200,160,60,0.09) 136deg,transparent 139deg,
        transparent 154deg, rgba(200,160,60,0.08) 157deg,transparent 160deg,
        transparent 176deg, rgba(200,160,60,0.10) 180deg,transparent 183deg,
        transparent 198deg, rgba(200,160,60,0.07) 201deg,transparent 204deg,
        transparent 220deg, rgba(200,160,60,0.11) 224deg,transparent 227deg,
        transparent 242deg, rgba(200,160,60,0.08) 245deg,transparent 248deg,
        transparent 264deg, rgba(200,160,60,0.10) 268deg,transparent 271deg,
        transparent 286deg, rgba(200,160,60,0.07) 289deg,transparent 292deg,
        transparent 308deg, rgba(200,160,60,0.09) 312deg,transparent 315deg,
        transparent 330deg, rgba(200,160,60,0.08) 333deg,transparent 336deg,
        transparent 352deg, rgba(200,160,60,0.10) 356deg,transparent 360deg
    );
    animation: raysRotate 14s linear infinite;
    transition: opacity 1s ease;
}
@keyframes raysRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Crown icon */
.curtain-logo {
    font-size: 5.5rem;
    color: #c9a84c;
    opacity: 0;
    transform: translateY(-100px) scale(0.2) rotate(-45deg);
    transition: opacity 0.8s ease, transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 1.1rem;
    position: relative; z-index: 2;
    animation: curtainCrownGlow 2.8s ease-in-out infinite;
}
@keyframes curtainCrownGlow {
    0%, 100% { filter: drop-shadow(0 0 12px #c9a84c); }
    50%       { filter: drop-shadow(0 0 40px #f0d870) drop-shadow(0 0 80px rgba(200,160,60,0.45)); }
}

/* Title with individual letters */
.curtain-title {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: clamp(3.2rem, 10vw, 7.5rem);
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #fff;
    display: flex; align-items: center;
    position: relative; z-index: 2;
    line-height: 1;
}
.curtain-title .ct-sp { display: inline-block; width: 0.3em; }

/* Each letter — hidden by default */
.ct-l {
    display: inline-block;
    opacity: 0;
    transform: translateY(-70px) scale(0.3) rotate(-15deg);
    filter: blur(14px);
    transition:
        opacity   0.55s ease,
        transform 0.7s  cubic-bezier(0.175, 0.885, 0.32, 1.275),
        filter    0.55s ease;
    text-shadow: 0 4px 30px rgba(0,0,0,0.95);
}

/* Gold letters (GALA) */
.ct-g {
    background: linear-gradient(160deg, #8b6914 0%, #c9a84c 25%, #f0d870 50%, #d4a843 75%, #8b6914 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: galaShimmer 2.8s linear infinite;
    text-shadow: none;
}

/* Stagger delays per letter (nth-child of .curtain-title) */
.ct-l:nth-child(1) { transition-delay: 0.00s; }
.ct-l:nth-child(2) { transition-delay: 0.13s; }
.ct-l:nth-child(3) { transition-delay: 0.26s; }
.ct-l:nth-child(4) { transition-delay: 0.39s; }
.ct-l:nth-child(6) { transition-delay: 0.60s; }
.ct-l:nth-child(7) { transition-delay: 0.73s; }
.ct-l:nth-child(8) { transition-delay: 0.86s; }
.ct-l:nth-child(9) { transition-delay: 0.99s; }

/* Divider rule */
.curtain-divider {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, #c9a84c 25%, rgba(255,255,255,0.85) 50%, #c9a84c 75%, transparent
    );
    margin: 1.4rem auto;
    opacity: 0;
    transition: width 1s ease 0.1s, opacity 0.5s ease 0.1s;
    position: relative; z-index: 2;
}

/* Tagline */
.curtain-tagline {
    font-size: clamp(0.7rem, 1.8vw, 0.95rem);
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    position: relative; z-index: 2;
}

/* Progress bar */
.curtain-progress {
    width: clamp(150px, 28vw, 300px);
    height: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    margin-top: 2rem;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative; z-index: 2;
}
.curtain-progress__bar {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #8b6914, #c9a84c, #f0d870, #c9a84c, #8b6914);
    background-size: 200% auto;
    border-radius: 2px;
    transition: width 3.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation: galaShimmer 1.8s linear infinite;
}

/* ══ PHASE CLASSES ══ */

/* Phase 1 — crown */
#galaCurtain.curtain--p1 .curtain-logo {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}
#galaCurtain.curtain--p1 .curtain-rays { opacity: 1; }

/* Phase 2 — letters */
#galaCurtain.curtain--p2 .ct-l {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
}

/* Phase 3 — tagline + divider + progress bar */
#galaCurtain.curtain--p3 .curtain-tagline {
    opacity: 1;
    transform: translateY(0);
}
#galaCurtain.curtain--p3 .curtain-divider {
    width: 320px;
    opacity: 1;
}
#galaCurtain.curtain--p3 .curtain-progress  { opacity: 1; }
#galaCurtain.curtain--p3 .curtain-progress__bar { width: 100%; }

/* Anticipation — panels tremble before opening */
#galaCurtain.curtain--anticipate .curtain-left  {
    animation: curtainAnticL 0.45s ease-in-out 3;
}
#galaCurtain.curtain--anticipate .curtain-right {
    animation: curtainAnticR 0.45s ease-in-out 3;
}
@keyframes curtainAnticL {
    0%, 100% { transform: translateX(0); }
    35%       { transform: translateX(-18px); }
    70%       { transform: translateX(7px); }
}
@keyframes curtainAnticR {
    0%, 100% { transform: translateX(0); }
    35%       { transform: translateX(18px); }
    70%       { transform: translateX(-7px); }
}

/* ── OPENING ── */
#galaCurtain.curtain--opening .curtain-left {
    transform: translateX(-112%);
    transition: transform 2.8s cubic-bezier(0.86, 0, 0.07, 1) 0.05s;
}
#galaCurtain.curtain--opening .curtain-right {
    transform: translateX(112%);
    transition: transform 2.8s cubic-bezier(0.86, 0, 0.07, 1) 0.05s;
}
#galaCurtain.curtain--opening .curtain-valance {
    transform: translateY(-115%);
}
#galaCurtain.curtain--opening .curtain-center {
    animation: curtainCenterExit 0.7s ease 0.15s forwards;
}
#galaCurtain.curtain--opening .curtain-gapglow {
    animation: gapFlash 0.55s ease forwards;
}
@keyframes gapFlash {
    0%   { opacity: 1; filter: blur(5px) brightness(4); width: 100px; }
    100% { opacity: 0; filter: blur(60px) brightness(1); width: 300px; }
}
#galaCurtain.curtain--opening .curtain-rays {
    animation: raysRotate 14s linear infinite, curtainRaysFade 0.5s ease 0.1s forwards;
}
@keyframes curtainRaysFade { to { opacity: 0; } }

@keyframes curtainCenterExit {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(1.25) translateY(-20px); }
}

/* Done */
#galaCurtain.curtain--done { display: none; }

/* ── Skip button ── */
.curtain-skip {
    position: absolute;
    bottom: 28px;
    right: 28px;
    z-index: 10;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
    padding: 6px 14px 6px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease, color 0.3s, background 0.3s, border-color 0.3s;
    pointer-events: none;
    font-family: inherit;
}
.curtain-skip i { font-size: 0.6rem; margin-left: 4px; }

.curtain-skip.curtain-skip--visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.curtain-skip:hover {
    background: rgba(200,160,60,0.15);
    color: rgba(200,160,60,0.8);
    border-color: rgba(200,160,60,0.3);
}

#galaCurtain.curtain--opening .curtain-skip {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ── Oscar award row ── */
.curtain-award-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2.4rem;
    margin-top: 2.2rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.175,0.885,0.32,1.275);
}

#galaCurtain.curtain--p3 .curtain-award-row {
    opacity: 1;
    transform: translateY(0);
}
#galaCurtain.curtain--opening .curtain-award-row {
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Oscar statuette — pure CSS */
.curtain-oscar {
    position: relative;
    width: 36px;
    flex-shrink: 0;
}

.oscar__head {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f5e070, #c9a84c 55%, #8b6914 100%);
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 10px rgba(200,160,60,0.6), 0 2px 6px rgba(0,0,0,0.5);
}

.oscar__body {
    width: 22px; height: 42px;
    margin: 1px auto 0;
    background: linear-gradient(170deg, #f0d060 0%, #c9a84c 40%, #8b6914 75%, #c9a84c 100%);
    clip-path: polygon(30% 0%, 70% 0%, 85% 100%, 15% 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.oscar__base {
    width: 32px; height: 8px;
    margin: 0 auto;
    background: linear-gradient(90deg, #8b6914, #e8c96a, #c9a84c, #e8c96a, #8b6914);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.oscar__plinth {
    width: 36px; height: 12px;
    margin: 0 auto;
    background: linear-gradient(180deg, #6b4e10 0%, #3d2800 100%);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08);
}

.oscar__glow {
    position: absolute;
    inset: -12px;
    background: radial-gradient(ellipse at 50% 60%, rgba(200,160,60,0.35) 0%, transparent 70%);
    pointer-events: none;
}

.curtain-oscar {
    animation: oscarGlow 2.5s ease-in-out infinite;
}

@keyframes oscarGlow {
    0%,100% { filter: drop-shadow(0 0 6px rgba(200,160,60,0.5)); }
    50%      { filter: drop-shadow(0 0 20px rgba(240,210,80,0.9)) drop-shadow(0 0 40px rgba(200,160,60,0.35)); }
}

/* Award text block */
.curtain-award-text {
    text-align: center;
    flex-shrink: 0;
}

.award-org {
    font-size: 0.6rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 0.45rem;
}

.award-name {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: clamp(0.85rem, 2.2vw, 1.1rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    line-height: 1.3;
    background: linear-gradient(135deg, #8b6914, #c9a84c, #f0d870, #c9a84c, #8b6914);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: galaShimmer 2.2s linear infinite;
}

.award-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 0.6rem;
}
.award-dots span {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: #c9a84c;
    animation: dotPulse 1.8s ease-in-out infinite;
}
.award-dots span:nth-child(2) { animation-delay: 0.3s; }
.award-dots span:nth-child(3) { animation-delay: 0.6s; }
@keyframes dotPulse {
    0%,100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.6); }
}

/* ── Red carpet ── */
.curtain-carpet {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 90px;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.carpet-strip {
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.12) 0px, rgba(0,0,0,0) 4px,
            rgba(255,255,255,0.03) 8px, rgba(0,0,0,0) 12px
        ),
        linear-gradient(180deg,
            rgba(180,0,15,0) 0%,
            rgba(180,0,15,0.7) 25%,
            #a50010 50%,
            #8b000e 80%,
            #6b0008 100%
        );
    animation: carpetSheen 6s ease-in-out infinite;
}

.carpet-edge {
    position: absolute;
    top: 0; bottom: 0; width: 6px;
    background: linear-gradient(180deg,
        transparent 0%, #c9a84c 20%, #f0d870 50%, #c9a84c 80%, transparent 100%
    );
    opacity: 0.7;
}
.carpet-edge--l { left: 0; }
.carpet-edge--r { right: 0; }

@keyframes carpetSheen {
    0%,100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}

#galaCurtain.curtain--opening .curtain-carpet {
    opacity: 0;
    transition: opacity 0.6s ease;
}