html {
scroll-behavior: smooth;
}
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&family=Cormorant+Garamond:wght@300;400&display=swap');
/* =========================================================
GLOBAL
========================================================= */
body {
background:
linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.82)),
url("HG-SITE-BG.png");
background-size: cover;
background-position: center center;
background-attachment: fixed;
min-height: 100vh;
margin: 0;
overflow-x: hidden;
position: relative;
isolation: isolate;
}
/* =========================================================
RED AMBIENCE
========================================================= */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
background:
radial-gradient(circle at 50% 50%, rgba(120,0,0,0.22), transparent 55%),
radial-gradient(circle at 15% 85%, rgba(255,0,0,0.25), transparent 28%),
radial-gradient(circle at 85% 15%, rgba(255,90,0,0.08), transparent 30%);
animation:
emberPulse 8s ease-in-out infinite alternate,
ambientShift 22s ease-in-out infinite alternate,
hellFlash 17s infinite;
}
/* =========================================================
ULTRA CINEMATIC SMOKE
========================================================= */
body::after {
will-change:
transform,
opacity;
content: "";
position: fixed;
top: -80%;
left: -80%;
width: 260%;
height: 260%;
pointer-events: none;
z-index: 2;
background-image:
radial-gradient(circle at 8% 18%, rgba(255,255,255,0.78) 0%, transparent 12%),
radial-gradient(circle at 20% 72%, rgba(255,255,255,0.58) 0%, transparent 18%),
radial-gradient(circle at 34% 42%, rgba(255,255,255,0.48) 0%, transparent 16%),
radial-gradient(circle at 48% 78%, rgba(255,255,255,0.55) 0%, transparent 15%),
radial-gradient(circle at 62% 24%, rgba(255,255,255,0.62) 0%, transparent 18%),
radial-gradient(circle at 76% 66%, rgba(255,255,255,0.52) 0%, transparent 14%),
radial-gradient(circle at 88% 34%, rgba(255,255,255,0.68) 0%, transparent 16%),
radial-gradient(circle at 96% 82%, rgba(255,255,255,0.40) 0%, transparent 18%);
filter: blur(120px);
opacity: 1;
mix-blend-mode: screen;
animation:
cinematicSmokeDrift 32s ease-in-out infinite alternate,
cinematicSmokePulse 12s ease-in-out infinite alternate,
hellDistortion 18s ease-in-out infinite alternate;
}
/* =========================================================
HERO
========================================================= */
.hero-section {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
z-index: 5;
padding: 0 20px;
}
.hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(
circle at center,
transparent 18%,
rgba(0,0,0,0.78) 100%
);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 5;
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform:
translateZ(0);
}
.hero-title {
font-family: 'Cinzel', serif;
font-size: 140px;
font-weight: 700;
letter-spacing: 10px;
line-height: 0.9;
margin: 0;
color: #f5f5f5;
text-transform: uppercase;
text-align: center;
text-shadow:
0 0 4px rgba(255,255,255,0.12),
0 0 12px rgba(255,0,0,0.18),
0 0 26px rgba(120,0,0,0.35),
0 0 50px rgba(80,0,0,0.45),
0 3px 8px rgba(0,0,0,0.9);
}
.hero-tagline {
font-family: 'Cormorant Garamond', serif;
color: #cccccc;
letter-spacing: 8px;
font-size: 28px;
margin-top: 20px;
margin-bottom: 60px;
text-align: center;
}
/* =========================================================
BUTTONS
========================================================= */
.button-area {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.poc-button,
.enter-button,
.cast-button {
display: flex;
justify-content: center;
align-items: center;
width: 340px;
margin: 18px auto;
font-family: 'Cinzel', serif;
color: white;
border: 1px solid rgba(255,255,255,0.15);
padding: 18px 42px;
text-decoration: none;
font-size: 18px;
letter-spacing: 3px;
background-color: rgba(0,0,0,0.38);
transition: 0.65s ease;
backdrop-filter: blur(8px);
position: relative;
overflow: hidden;
cursor: pointer;
text-align: center;
box-sizing: border-box;
box-shadow:
0 0 15px rgba(255,0,0,0.20),
0 0 35px rgba(120,0,0,0.16);
}
.poc-button:hover,
.enter-button:hover,
.cast-button:hover {
transform:
translateY(-5px)
scale(1.025);
background:
linear-gradient(
rgba(120,0,0,0.88),
rgba(40,0,0,0.82)
);
border-color:
rgba(255,80,80,0.45);
box-shadow:
0 0 22px rgba(255,0,0,0.55),
0 0 60px rgba(120,0,0,0.38),
inset 0 0 18px rgba(255,255,255,0.04);
}
/* =========================================================
SECTIONS
========================================================= */
.about-section {
position: relative;
z-index: 5;
color: white;
text-align: center;
overflow: hidden;
padding: 0px 15% 140px 15%;
background:
linear-gradient(rgba(0,0,0,0.74), rgba(0,0,0,0.78));
}
.cast-section {
position: relative;
z-index: 5;
color: white;
text-align: center;
overflow: hidden;
padding: 0px 10% 140px 10%;
background:
linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.86));
}
.footer-section {
position: relative;
z-index: 5;
color: white;
text-align: center;
overflow: hidden;
padding: 140px 20px 80px 20px;
background:
linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.96));
}
/* =========================================================
TITLES
========================================================= */
.about-section h2,
.cast-section h2,
.footer-section h2 {
font-family: 'Cinzel', serif;
font-size: 52px;
letter-spacing: 8px;
margin-bottom: 25px;
color: #f0f0f0;
text-align: center;
text-shadow:
0 0 10px rgba(255,0,0,0.35),
0 0 20px rgba(120,0,0,0.18);
}
/* =========================================================
CINEMATIC DIVIDER
========================================================= */
.section-divider {
width: 140px;
height: 2px;
margin:
0 auto 50px auto;
position: relative;
overflow: hidden;
background:
linear-gradient(
to right,
transparent,
rgba(255,0,0,0.9),
transparent
);
box-shadow:
0 0 12px rgba(255,0,0,0.6);
}
/* =========================================================
IGNITION GLOW
========================================================= */
.section-divider::before {
content: "";
position: absolute;
top: 0;
left: -40%;
width: 40%;
height: 100%;
background:
linear-gradient(
to right,
transparent,
rgba(255,255,255,0.9),
transparent
);
opacity: 0.8;
animation:
dividerIgnite 4.5s ease-in-out infinite;
}
/* =========================================================
DIVIDER ANIMATION
========================================================= */
@keyframes dividerIgnite {
0% {
left: -40%;
opacity: 0;
}
15% {
opacity: 1;
}
50% {
left: 120%;
opacity: 0.9;
}
100% {
left: 120%;
opacity: 0;
}
}
/* =========================================================
BODY TEXT
========================================================= */
.about-section p,
.cast-card p,
.footer-credit {
font-family: 'Cormorant Garamond', serif;
font-size: 24px;
line-height: 1.9;
color: #cccccc;
text-align: center;
}
/* =========================================================
CAST GRID
========================================================= */
.cast-grid {
width: 100%;
max-width: 760px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
isolation: isolate;
}
/* =========================================================
CINEMATIC CAST CARDS
========================================================= */
.cast-card {
width: 100%;
background:
linear-gradient(
rgba(255,255,255,0.04),
rgba(0,0,0,0.45)
);
padding: 24px;
box-sizing: border-box;
border:
1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
text-align: center;
position: relative;
will-change:
transform,
opacity;
overflow: hidden;
transition:
transform 0.55s ease,
box-shadow 0.55s ease,
border-color 0.55s ease;
box-shadow:
0 0 18px rgba(0,0,0,0.45);
}
/* =========================================================
CAST CARD GLOW
========================================================= */
.cast-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at top,
rgba(255,0,0,0.10),
transparent 70%
);
opacity: 0;
transition:
opacity 0.5s ease;
pointer-events: none;
}
/* =========================================================
HOVER EFFECT
========================================================= */
.cast-card:hover {
transform:
translateY(-6px)
scale(1.012);
border-color:
rgba(255,0,0,0.35);
background:
linear-gradient(
rgba(255,255,255,0.07),
rgba(0,0,0,0.55)
);
box-shadow:
0 0 25px rgba(255,0,0,0.24),
0 0 80px rgba(120,0,0,0.22),
inset 0 0 25px rgba(255,255,255,0.03);
}
.cast-card:hover::before {
opacity: 1;
}
/* =========================================================
CAST NAMES
========================================================= */
.cast-name,
.cast-card h3 {
color: #f5f5f5;
font-family: 'Cinzel', serif;
letter-spacing: 3px;
font-size: 24px;
margin-top: 10px;
text-shadow:
0 0 8px rgba(255,0,0,0.25),
0 0 18px rgba(120,0,0,0.18);
}
/* =========================================================
CAST PHOTOS
========================================================= */
.cast-photo {
width: 100%;
height: 420px;
object-fit: cover;
object-position: center top;
display: block;
margin-bottom: 22px;
filter:
contrast(1.08)
brightness(0.92)
saturate(0.92);
transition:
transform 0.6s ease,
filter 0.6s ease;
}
/* =========================================================
PHOTO HOVER
========================================================= */
.cast-card:hover .cast-photo {
transform:
scale(1.04);
filter:
contrast(1.14)
brightness(1)
saturate(1);
}
/* =========================================================
FOOTER NEWSLETTER
========================================================= */
.footer-newsletter {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
flex-wrap: wrap;
margin-bottom: 40px;
}
.footer-newsletter-input {
width: 340px;
max-width: 90%;
padding: 10px 18px;
background:
rgba(255,255,255,0.02);
border:
1px solid rgba(255,255,255,0.08);
border-right: none;
color: #cccccc;
font-family:
'Cinzel', serif;
letter-spacing: 2px;
outline: none;
transition:
0.4s ease;
}
.footer-newsletter-input:focus {
border-color:
rgba(255,0,0,0.35);
color: white;
}
.footer-newsletter-button {
font-family: 'Cinzel', serif;
color: #cccccc;
letter-spacing: 3px;
font-size: 14px;
padding: 10px 18px;
border:
1px solid rgba(255,255,255,0.08);
background:
rgba(255,255,255,0.02);
cursor: pointer;
transition:
0.4s ease;
}
.footer-newsletter-button:hover {
color: white;
transform:
translateY(-3px);
text-shadow:
0 0 15px rgba(255,0,0,0.8),
0 0 30px rgba(255,0,0,0.4);
border-color:
rgba(255,0,0,0.35);
}
/* =========================================================
FOOTER
========================================================= */
.footer-credit {
text-align: center;
width: 100%;
margin: 0 auto;
display: block;
}
/* =========================================================
FOOTER LINKS
========================================================= */
.footer-links {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 50px;
}
.footer-links a {
font-family: 'Cinzel', serif;
color: #cccccc !important;
text-decoration: none !important;
letter-spacing: 3px;
transition: 0.4s;
}
.footer-links a:hover {
color: white !important;
transform: translateY(-3px);
text-shadow:
0 0 15px rgba(255,0,0,0.8),
0 0 30px rgba(255,0,0,0.4);
}
/* =========================================================
SOCIAL LINKS
========================================================= */
.social-links {
display: flex;
justify-content: center;
align-items: center;
gap: 28px;
flex-wrap: wrap;
margin-top: 20px;
margin-bottom: 50px;
}
.social-icon {
font-family: 'Cinzel', serif;
color: rgba(255,255,255,0.72);
text-decoration: none;
letter-spacing: 4px;
font-size: 14px;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.02);
}
/* =========================================================
AUDIO TOGGLE
========================================================= */
.audio-toggle {
position: fixed;
top: 30px;
right: 30px;
width: 54px;
height: 54px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
color: rgba(255,255,255,0.88);
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(10px);
cursor: pointer;
z-index: 99999;
}
/* =========================================================
ASCEND BUTTON
========================================================= */
.ascend-button {
position: fixed;
bottom: 35px;
right: 35px;
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Cinzel', serif;
font-size: 28px;
color: rgba(255,255,255,0.92);
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.16);
backdrop-filter: blur(10px);
cursor: pointer;
z-index: 99999;
}
/* =========================================================
INTRO OVERLAY
========================================================= */
/* =========================================================
CINEMATIC INTRO OVERLAY
========================================================= */
.intro-overlay {
position: fixed;
inset: 0;
background:
linear-gradient(
to bottom,
#120000 0%,
#050000 55%,
#000000 100%
);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
z-index: 999999;
opacity: 1;
visibility: visible;
}
/* =========================================================
INTRO FADE OUT
========================================================= */
.intro-overlay.intro-fade-out {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none;
transition:
opacity 2.4s ease,
visibility 2.4s ease;
}
/* =========================================================
INTRO CONTENT
========================================================= */
.intro-content {
text-align: center;
position: relative;
z-index: 2;
}
.intro-title {
font-family: 'Cinzel', serif;
font-size: 120px;
letter-spacing: 10px;
color: #f5f5f5;
margin: 0;
text-shadow:
0 0 10px rgba(255,0,0,0.35),
0 0 40px rgba(120,0,0,0.28),
0 0 80px rgba(80,0,0,0.20);
}
.intro-subtitle {
font-family: 'Cormorant Garamond', serif;
font-size: 28px;
letter-spacing: 8px;
color: #cccccc;
margin-top: 20px;
}
.intro-smoke {
position: absolute;
inset: 0;
background:
radial-gradient(circle at center,
rgba(255,255,255,0.08),
transparent 60%);
filter: blur(80px);
opacity: 0.8;
}
/* =========================================================
MOBILE
========================================================= */
@media screen and (max-width: 900px) {
.hero-title {
font-size: 72px;
letter-spacing: 5px;
}
.hero-tagline {
font-size: 18px;
letter-spacing: 4px;
}
.cast-grid {
grid-template-columns: 1fr;
max-width: 420px;
}
.poc-button,
.enter-button,
.cast-button {
width: 100%;
max-width: 320px;
}
.about-section,
.cast-section {
padding-left: 24px;
padding-right: 24px;
}
/* =========================================================
MOBILE PERFORMANCE OPTIMIZATION
========================================================= */
body::after {
opacity: 0.55;
filter:
blur(80px);
}
.fog-layer {
opacity: 0.12;
}
.cursor-aura {
display: none;
}
.hero-title {
font-size: 64px;
line-height: 0.95;
}
.about-section h2,
.cast-section h2,
.footer-section h2 {
font-size: 38px;
letter-spacing: 4px;
}
.about-section p,
.cast-card p,
.footer-credit {
font-size: 21px;
line-height: 1.7;
}
.cast-photo {
height: 360px;
}
.button-area {
gap: 10px;
}
.poc-button,
.enter-button,
.cast-button {
font-size: 16px;
letter-spacing: 2px;
padding: 16px 24px;
}
}
/* =========================================================
SOCIAL ICON GLOW FIX
========================================================= */
.social-icon {
transition:
0.45s ease !important;
box-shadow:
0 0 12px rgba(255,0,0,0.18);
}
.social-icon:hover {
color: white !important;
border-color: rgba(255,0,0,0.45);
background: rgba(120,0,0,0.18);
transform:
translateY(-3px);
box-shadow:
0 0 18px rgba(255,0,0,0.45),
0 0 40px rgba(120,0,0,0.28);
}
/* =========================================================
AUDIO BUTTON GLOW FIX
========================================================= */
.audio-toggle {
transition:
0.4s ease;
box-shadow:
0 0 15px rgba(255,0,0,0.18);
}
.audio-toggle:hover {
color: white;
background:
rgba(120,0,0,0.35);
transform:
scale(1.08);
box-shadow:
0 0 18px rgba(255,0,0,0.42),
0 0 40px rgba(120,0,0,0.26);
}
/* =========================================================
ASCEND BUTTON GLOW FIX
========================================================= */
.ascend-button {
transition:
0.4s ease;
box-shadow:
0 0 15px rgba(255,0,0,0.18);
}
.ascend-button:hover {
color: white;
background:
rgba(120,0,0,0.35);
transform:
translateY(-4px)
scale(1.08);
box-shadow:
0 0 18px rgba(255,0,0,0.42),
0 0 40px rgba(120,0,0,0.26);
}
/* =========================================================
INTRO OVERLAY
========================================================= */
.intro-overlay {
display: none !important;
}
/* =========================================================
REMOVE BROKEN INTRO ANIMATIONS
========================================================= */
.intro-overlay.intro-fade-out {
display: none !important;
}
/* =========================================================
REMOVE INTRO SMOKE
========================================================= */
.intro-smoke {
display: none !important;
}
/* =========================================================
REMOVE INTRO TITLE
========================================================= */
.intro-title,
.intro-subtitle,
.intro-content {
display: none !important;
}
/* =========================================================
RANDOM CINEMATIC EMBERS
========================================================= */
.embers {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 9998;
}
.embers span {
position: absolute;
bottom: -120px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,140,0,0.72) 0%,
rgba(255,0,0,0.38) 45%,
transparent 75%
);
box-shadow:
0 0 10px rgba(255,80,0,0.55),
0 0 22px rgba(255,0,0,0.25);
animation:
randomEmbers linear infinite;
opacity: 0;
}
/* =========================================================
RANDOM SIZES / POSITIONS / SPEEDS
========================================================= */
.embers span:nth-child(1) {
left: 4%;
width: 5px;
height: 5px;
animation-duration: 11s;
animation-delay: 0s;
}
.embers span:nth-child(2) {
left: 12%;
width: 3px;
height: 3px;
animation-duration: 7s;
animation-delay: 2s;
}
.embers span:nth-child(3) {
left: 21%;
width: 7px;
height: 7px;
animation-duration: 14s;
animation-delay: 1s;
}
.embers span:nth-child(4) {
left: 33%;
width: 4px;
height: 4px;
animation-duration: 9s;
animation-delay: 5s;
}
.embers span:nth-child(5) {
left: 44%;
width: 6px;
height: 6px;
animation-duration: 13s;
animation-delay: 2s;
}
.embers span:nth-child(6) {
left: 57%;
width: 3px;
height: 3px;
animation-duration: 8s;
animation-delay: 4s;
}
.embers span:nth-child(7) {
left: 69%;
width: 8px;
height: 8px;
animation-duration: 15s;
animation-delay: 1s;
}
.embers span:nth-child(8) {
left: 78%;
width: 5px;
height: 5px;
animation-duration: 10s;
animation-delay: 6s;
}
.embers span:nth-child(9) {
left: 89%;
width: 4px;
height: 4px;
animation-duration: 12s;
animation-delay: 3s;
}
.embers span:nth-child(10) {
left: 96%;
width: 6px;
height: 6px;
animation-duration: 16s;
animation-delay: 0s;
}
/* =========================================================
EMBER FLOAT
========================================================= */
@keyframes randomEmbers {
0% {
transform:
translateY(0)
translateX(0)
scale(0.4)
rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
50% {
transform:
translateY(-45vh)
translateX(25px)
scale(1);
opacity: 0.9;
}
100% {
transform:
translateY(-110vh)
translateX(-40px)
scale(0.2)
rotate(180deg);
opacity: 0;
}
}
/* =========================================================
IMDb CAST LINKS
========================================================= */
.imdb-link {
color: #f5f5f5;
text-decoration: none;
transition:
0.4s ease;
}
.imdb-link:hover {
color: #ffffff;
text-shadow:
0 0 12px rgba(255,0,0,0.65),
0 0 30px rgba(120,0,0,0.35);
}
/* =========================================================
CINEMATIC SECTION REVEALS
========================================================= */
.reveal-section {
opacity: 0;
transform:
translateY(90px);
transition:
opacity 1.4s ease,
transform 1.4s ease;
will-change:
opacity,
transform;
}
.reveal-section.section-visible {
opacity: 1;
transform:
translateY(0);
}
/* =========================================================
STAGGERED CAST CARD REVEALS
========================================================= */
.reveal-card {
opacity: 0;
transform:
translateY(80px)
scale(0.96);
transition:
opacity 1.2s ease,
transform 1.2s ease;
}
.reveal-card.card-visible {
opacity: 1;
transform:
translateY(0)
scale(1);
}
/* =========================================================
STAGGER TIMING
========================================================= */
.reveal-card:nth-child(1) {
transition-delay: 0.15s;
}
.reveal-card:nth-child(2) {
transition-delay: 0.35s;
}
.reveal-card:nth-child(3) {
transition-delay: 0.55s;
}
.reveal-card:nth-child(4) {
transition-delay: 0.75s;
}
/* =========================================================
CINEMATIC BACKGROUND PUSH
========================================================= */
body {
animation:
backgroundPush 45s ease-in-out infinite alternate;
}
/* =========================================================
SLOW CINEMATIC ZOOM
========================================================= */
@keyframes backgroundPush {
0% {
background-size:
100% auto;
background-position:
center center;
}
100% {
background-size:
112% auto;
background-position:
center top;
}
}
/* =========================================================
CINEMATIC FOG LAYER
========================================================= */
.fog-layer {
will-change:
transform,
opacity;
position: fixed;
inset: -20%;
pointer-events: none;
z-index: 2;
opacity: 0.22;
background:
radial-gradient(
circle at 20% 30%,
rgba(255,255,255,0.08),
transparent 30%
),
radial-gradient(
circle at 70% 60%,
rgba(255,255,255,0.06),
transparent 35%
),
radial-gradient(
circle at 40% 80%,
rgba(255,255,255,0.05),
transparent 28%
);
filter:
blur(90px);
animation:
driftingFog 38s ease-in-out infinite alternate;
}
/* =========================================================
FOG DRIFT
========================================================= */
@keyframes driftingFog {
0% {
transform:
translateX(-4%)
translateY(-2%)
scale(1);
}
100% {
transform:
translateX(4%)
translateY(3%)
scale(1.08);
}
}
/* =========================================================
CINEMATIC TRAILER MODAL
========================================================= */
.trailer-modal {
position: fixed;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
background:
rgba(0,0,0,0.82);
backdrop-filter:
blur(12px);
z-index: 9999999;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.6s ease,
visibility 0.6s ease;
}
/* =========================================================
MODAL ACTIVE
========================================================= */
.trailer-modal.trailer-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* =========================================================
TRAILER CONTENT
========================================================= */
.trailer-content {
position: relative;
width: 90%;
max-width: 1100px;
aspect-ratio: 16 / 9;
transform:
scale(0.92);
transition:
transform 0.5s ease;
}
.trailer-modal.trailer-visible
.trailer-content {
transform:
scale(1);
}
/* =========================================================
YOUTUBE FRAME
========================================================= */
.trailer-content iframe {
width: 100%;
height: 100%;
border: none;
box-shadow:
0 0 40px rgba(255,0,0,0.18),
0 0 100px rgba(0,0,0,0.65);
}
/* =========================================================
CLOSE BUTTON
========================================================= */
.trailer-close {
position: absolute;
top: -60px;
right: 0;
font-size: 42px;
color: white;
cursor: pointer;
transition:
0.4s ease;
text-shadow:
0 0 12px rgba(255,0,0,0.45);
}
.trailer-close:hover {
transform:
scale(1.15);
color:
rgba(255,120,120,1);
}
/* =========================================================
BACKGROUND CLICK AREA
========================================================= */
.trailer-overlay {
position: absolute;
inset: 0;
}
/* =========================================================
SOUND REACTIVE CINEMATIC GLOW
========================================================= */
.audio-active .poc-button,
.audio-active .enter-button,
.audio-active .cast-button {
animation:
audioPulse 2.8s ease-in-out infinite;
}
/* =========================================================
AUDIO REACTIVE EMBERS
========================================================= */
.audio-active .embers span {
box-shadow:
0 0 12px rgba(255,80,0,0.9),
0 0 30px rgba(255,0,0,0.45);
}
/* =========================================================
AUDIO REACTIVE AUDIO BUTTON
========================================================= */
.audio-active .audio-toggle {
box-shadow:
0 0 18px rgba(255,0,0,0.55),
0 0 45px rgba(120,0,0,0.35);
}
/* =========================================================
PULSE ANIMATION
========================================================= */
@keyframes audioPulse {
0% {
box-shadow:
0 0 15px rgba(255,0,0,0.18),
0 0 35px rgba(120,0,0,0.16);
transform:
scale(1);
}
50% {
box-shadow:
0 0 22px rgba(255,0,0,0.42),
0 0 55px rgba(120,0,0,0.30);
transform:
scale(1.025);
}
100% {
box-shadow:
0 0 15px rgba(255,0,0,0.18),
0 0 35px rgba(120,0,0,0.16);
transform:
scale(1);
}
}
/* =========================================================
CINEMATIC PARALLAX DEPTH
========================================================= */
.hero-section {
will-change:
transform;
transform-style:
preserve-3d;
}
/* =========================================================
PRODUCTION BANNER
========================================================= */
.production-banner {
font-family:
'Cinzel', serif;
color:
rgba(255,255,255,0.62);
letter-spacing: 6px;
font-size: 14px;
margin-bottom: 28px;
text-transform: uppercase;
opacity: 0.85;
text-shadow:
0 0 12px rgba(255,0,0,0.12);
}
/* =========================================================
HERO TITLE DEPTH
========================================================= */
.hero-title {
animation:
titleFloat 7s ease-in-out infinite alternate;
}
/* =========================================================
TAGLINE DEPTH
========================================================= */
.hero-tagline {
animation:
taglineFloat 9s ease-in-out infinite alternate;
}
/* =========================================================
FLOATING TITLE
========================================================= */
@keyframes titleFloat {
0% {
transform:
translateY(0px);
}
100% {
transform:
translateY(-8px);
}
}
/* =========================================================
FLOATING TAGLINE
========================================================= */
@keyframes taglineFloat {
0% {
transform:
translateY(0px);
}
100% {
transform:
translateY(-5px);
}
}
/* =========================================================
CINEMATIC CURSOR AURA
========================================================= */
..cursor-aura {
position: fixed;
width: 320px;
height: 320px;
border-radius: 50%;
pointer-events: none;
z-index: 9997;
left: 0;
top: 0;
transform:
translate(-50%, -50%);
background:
radial-gradient(
circle,
rgba(255,0,0,0.14) 0%,
rgba(120,0,0,0.08) 30%,
transparent 72%
);
mix-blend-mode:
screen;
filter:
blur(30px);
opacity: 0.55;
transition:
transform 0.08s linear;
}
/* =========================================================
STRONGER AURA WITH AUDIO
========================================================= */
.audio-active .cursor-aura {
opacity: 0.82;
background:
radial-gradient(
circle,
rgba(255,0,0,0.16) 0%,
rgba(120,0,0,0.08) 35%,
transparent 72%
);
}
/* =========================================================
CINEMATIC CHARACTER SPOTLIGHTING
========================================================= */
.cast-grid:hover .cast-card {
opacity: 0.45;
transform:
scale(0.98);
filter:
brightness(0.72);
transition:
opacity 0.45s ease,
transform 0.45s ease,
filter 0.45s ease;
}
/* =========================================================
ACTIVE SPOTLIGHT CARD
========================================================= */
.cast-grid .cast-card:hover {
opacity: 1 !important;
transform:
translateY(-12px)
scale(1.04);
filter:
brightness(1.08);
z-index: 5;
box-shadow:
0 0 35px rgba(255,0,0,0.28),
0 0 90px rgba(120,0,0,0.25),
inset 0 0 30px rgba(255,255,255,0.04);
}
/* =========================================================
CINEMATIC HELL DISTORTION
========================================================= */
@keyframes hellDistortion {
0% {
transform:
scale(1)
rotate(0deg)
skewX(0deg);
}
25% {
transform:
scale(1.01)
rotate(0.15deg)
skewX(0.2deg);
}
50% {
transform:
scale(1.02)
rotate(-0.15deg)
skewX(-0.2deg);
}
75% {
transform:
scale(1.01)
rotate(0.1deg)
skewX(0.15deg);
}
100% {
transform:
scale(1)
rotate(0deg)
skewX(0deg);
}
}
/* =========================================================
CINEMATIC HELL FLASHES
========================================================= */
@keyframes hellFlash {
0% {
opacity: 1;
}
94% {
opacity: 1;
}
95% {
opacity: 1.08;
}
96% {
opacity: 0.92;
}
97% {
opacity: 1.12;
}
98% {
opacity: 0.96;
}
100% {
opacity: 1;
}
}
/* =========================================================
HELL TRANSITION OVERLAY
========================================================= */
.hell-transition {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9996;
opacity: 0;
visibility: hidden;
overflow: hidden;
background:
radial-gradient(
circle at center,
rgba(255,0,0,0.22),
rgba(0,0,0,0.95) 70%
);
mix-blend-mode:
screen;
transform:
scale(1);
}
/* =========================================================
ACTIVE HELL TRANSITION
========================================================= */
.hell-transition-active {
visibility: visible;
animation:
enterHell 1s ease forwards;
}
/* =========================================================
ENTER HELL ANIMATION
========================================================= */
@keyframes enterHell {
0% {
opacity: 0;
transform:
scale(1);
filter:
blur(0px);
}
30% {
opacity: 0.22;
transform:
scale(1.04);
filter:
blur(2px);
}
60% {
opacity: 0.15;
transform:
scale(1.08);
filter:
blur(6px);
}
100% {
opacity: 0;
transform:
scale(1.15);
filter:
blur(14px);
}
}