:root {
--black: #030405;
--black-soft: #07090b;
--black-card: #0b0d10;
--gold: #c7a663;
--gold-light: #ead9a7;
--white: #f4f1e9;
--muted: #99958b;
--line: rgba(255, 255, 255, 0.1);
--serif: "Cormorant Garamond", serif;
--sans: "Inter", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
background: var(--black);
color: var(--white);
font-family: var(--sans);
overflow-x: hidden;
}

img,
video {
max-width: 100%;
display: block;
}

button {
font: inherit;
}

/* AMBIENT */

.ambient {
position: fixed;
pointer-events: none;
z-index: -5;
border-radius: 50%;
filter: blur(120px);
opacity: 0.12;
}

.ambient-one {
width: 500px;
height: 500px;
top: -200px;
left: -150px;
background: #a8843e;
}

.ambient-two {
width: 450px;
height: 450px;
right: -200px;
top: 35%;
background: #34445c;
}

.ambient-three {
width: 400px;
height: 400px;
left: 20%;
bottom: -250px;
background: #8a6a2e;
}

/* HERO */

.cinematic-hero {
position: relative;
min-height: 100vh;
height: 100svh;
overflow: hidden;
background: #010203;
}

.cinematic-bg {
position: absolute;
inset: 0;
z-index: 0;
background:
linear-gradient(
90deg,
rgba(0, 0, 0, 0.86) 0%,
rgba(0, 0, 0, 0.48) 48%,
rgba(0, 0, 0, 0.82) 100%
),
linear-gradient(
180deg,
rgba(0, 0, 0, 0.12),
rgba(0, 0, 0, 0.88)
),
url("sir-teja1.jpeg");
background-size: cover;
background-position: center;
filter: grayscale(0.45) brightness(0.52) contrast(1.08);
}

/* LIGHT */

.cinematic-light {
position: absolute;
pointer-events: none;
mix-blend-mode: screen;
filter: blur(45px);
z-index: 2;
}

.light-one {
width: 5px;
height: 140%;
top: -20%;
left: 35%;
background: linear-gradient(
180deg,
transparent,
rgba(234, 217, 167, 0.7),
rgba(199, 166, 99, 0.2),
transparent
);
transform: rotate(24deg);
opacity: 0.3;
}

.light-two {
width: 4px;
height: 120%;
right: 24%;
top: -10%;
background: linear-gradient(
180deg,
transparent,
rgba(199, 166, 99, 0.55),
transparent
);
transform: rotate(-32deg);
opacity: 0.15;
}

/* GRAIN */

.cinematic-grain {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0.035;
background-image: repeating-radial-gradient(
circle at 0 0,
rgba(255, 255, 255, 0.8) 0,
rgba(255, 255, 255, 0.8) 0.5px,
transparent 0.8px,
transparent 2px
);
background-size: 4px 4px;
}

/* VIGNETTE */

.cinematic-vignette {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: radial-gradient(
ellipse at center,
transparent 25%,
rgba(0, 0, 0, 0.3) 68%,
rgba(0, 0, 0, 0.82) 100%
);
}

/* HERO CONTENT */

.hero-cinema-content {
position: relative;
z-index: 10;
width: min(1180px, 90%);
height: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 70px 0;
}

/* TOP */

.hero-top-line {
position: absolute;
top: 30px;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
font-size: 9px;
letter-spacing: 0.28em;
color: rgba(255, 255, 255, 0.55);
}

/* GLOBAL STAR */

.global-star {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
margin-bottom: 24px;
}

.global-star p {
font-family: var(--serif);
font-size: clamp(58px, 8vw, 115px);
font-weight: 500;
line-height: 0.7;
letter-spacing: 0.02em;
color: #f1e6c6;
margin: 0;
text-shadow:
0 0 30px rgba(199, 166, 99, 0.12),
0 0 80px rgba(199, 166, 99, 0.08);
}

.global-star h1 {
font-family: var(--serif);
font-size: clamp(65px, 9vw, 125px);
line-height: 0.7;
font-weight: 500;
letter-spacing: -0.04em;
color: #f1e6c6;
text-shadow:
0 0 30px rgba(199, 166, 99, 0.12),
0 0 80px rgba(199, 166, 99, 0.08);
}

.star-line {
width: 55px;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--gold)
);
}

.star-line:last-child {
background: linear-gradient(
90deg,
var(--gold),
transparent
);
}

/* INTRO */

.hero-intro {
margin-top: 5px;
margin-bottom: 12px;
}

.intro-line {
font-family: var(--serif);
font-size: clamp(19px, 2.2vw, 28px);
font-style: italic;
color: rgba(255, 255, 255, 0.78);
}

.intro-small {
margin-top: 7px;
font-size: 8px;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
}

/* NAME */

.hero-name {
margin-top: 12px;
}

.name-kicker {
display: block;
margin-bottom: 4px;
font-size: 8px;
letter-spacing: 0.5em;
color: var(--gold);
}

.hero-name h2 {
font-family: var(--serif);
font-size: clamp(55px, 9vw, 125px);
font-weight: 500;
line-height: 0.88;
letter-spacing: 0.015em;
color: #ffffff;
}

.name-underline {
width: 80px;
height: 1px;
margin: 15px auto 0;
background: linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);
}

/* TITLE */

.hero-title {
margin-top: 17px;
}

.hero-title p {
font-size: 9px;
font-weight: 500;
letter-spacing: 0.65em;
margin-left: 0.65em;
color: var(--gold-light);
}

/* QUOTE */

.hero-quote {
margin-top: 18px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
max-width: 500px;
}

.hero-quote p {
font-family: var(--serif);
font-size: clamp(15px, 1.8vw, 21px);
font-style: italic;
color: rgba(255, 255, 255, 0.72);
}

.quote-mark {
font-family: var(--serif);
color: var(--gold);
font-size: 27px;
}

.quote-end {
transform: translateY(8px);
}

/* PHOTO */

.hero-photo-wrap {
margin-top: 18px;
}

.photo-frame {
position: relative;
width: min(380px, 62vw);
height: min(210px, 29vw);
min-height: 155px;
padding: 2px;
overflow: hidden;
background: linear-gradient(
135deg,
rgba(234, 217, 167, 0.7),
transparent 28%,
transparent 70%,
rgba(199, 166, 99, 0.5)
);
box-shadow:
0 0 0 1px rgba(199, 166, 99, 0.08),
0 20px 80px rgba(0, 0, 0, 0.8);
}

.photo-frame img {
width: 100%;
height: 100%;
object-fit: contain;
background: #050607;
filter: brightness(0.92) contrast(1.08);
}

.photo-light {
position: absolute;
width: 180px;
height: 180px;
top: 20%;
left: 35%;
background: rgba(199, 166, 99, 0.16);
filter: blur(55px);
pointer-events: none;
z-index: 1;
}

.photo-caption {
margin-top: 9px;
display: flex;
justify-content: center;
gap: 20px;
font-size: 7px;
letter-spacing: 0.35em;
color: rgba(255, 255, 255, 0.38);
}

/* BUTTON */

.hero-enter {
margin-top: 20px;
border: 1px solid rgba(199, 166, 99, 0.42);
background: rgba(0, 0, 0, 0.3);
color: var(--gold-light);
padding: 12px 22px;
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
font-size: 8px;
letter-spacing: 0.38em;
transition:
background 0.35s ease,
border-color 0.35s ease,
transform 0.35s ease,
box-shadow 0.35s ease;
}

.hero-enter:hover {
background: rgba(199, 166, 99, 0.1);
border-color: var(--gold);
transform: translateY(-3px);
box-shadow: 0 10px 40px rgba(199, 166, 99, 0.12);
}

.enter-arrow {
font-size: 16px;
letter-spacing: 0;
}

/* CORNERS */

.hero-corner {
position: absolute;
bottom: 70px;
font-size: 8px;
letter-spacing: 0.25em;
color: rgba(255, 255, 255, 0.35);
}

.hero-corner-left {
left: 0;
}

.hero-corner-right {
right: 0;
text-align: right;
line-height: 1.7;
}

/* BOTTOM */

.hero-bottom {
position: absolute;
bottom: 22px;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
font-size: 7px;
letter-spacing: 0.28em;
color: rgba(255, 255, 255, 0.3);
}

.scroll-line {
width: 35px;
height: 1px;
background: linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);
}

/* REVEAL */

.reveal {
opacity: 1 !important;
transform: none !important;
}

/* SECTIONS */

.section {
position: relative;
width: min(1180px, 88%);
margin: auto;
padding: 150px 0;
}

.section-number {
font-size: 8px;
letter-spacing: 0.42em;
color: rgba(255, 255, 255, 0.3);
margin-bottom: 55px;
}

.eyebrow {
font-size: 8px;
letter-spacing: 0.45em;
color: var(--gold);
margin-bottom: 20px;
}

/* MESSAGE */

.sir-message-section {
max-width: 1000px;
}

.message-container {
max-width: 850px;
}

.message-container h2 {
font-family: var(--serif);
font-size: clamp(48px, 7vw, 82px);
font-weight: 500;
line-height: 0.95;
margin-bottom: 55px;
color: var(--white);
}

.message-text {
max-width: 720px;
font-family: var(--serif);
font-size: clamp(18px, 2vw, 22px);
line-height: 1.75;
color: rgba(255, 255, 255, 0.66);
}

.message-text p {
margin-bottom: 27px;
}

.message-text .highlight-line {
color: var(--gold-light);
font-size: 27px;
font-style: italic;
padding: 22px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}

.closing-advice {
color: var(--white);
font-size: 25px;
line-height: 1.55;
margin: 50px 0 !important;
}

.signature {
margin-top: 65px;
display: flex;
flex-direction: column;
gap: 7px;
font-family: var(--serif);
font-size: 20px;
color: rgba(255, 255, 255, 0.55);
}

.signature strong {
color: var(--gold-light);
font-weight: 500;
}

/* HEADINGS */

.section-heading {
margin-bottom: 65px;
}

.section-heading h2 {
font-family: var(--serif);
font-size: clamp(48px, 7vw, 82px);
font-weight: 500;
line-height: 0.95;
}

/* MEMORY */

.memory-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}

.memory-card {
position: relative;
height: 480px;
overflow: hidden;
background: var(--black-card);
}

.memory-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
transparent 45%,
rgba(0, 0, 0, 0.9)
);
pointer-events: none;
}

.memory-card img {
width: 100%;
height: 100%;
object-fit: contain;
background: #050607;
transition: transform 0.8s ease;
}

.memory-card:hover img {
transform: scale(1.04);
}

.memory-overlay {
position: absolute;
z-index: 2;
left: 25px;
right: 25px;
bottom: 24px;
display: flex;
justify-content: space-between;
align-items: end;
font-size: 8px;
letter-spacing: 0.28em;
color: rgba(255, 255, 255, 0.65);
}

.memory-overlay span {
color: var(--gold);
}

/* TEJA GALLERY */

.teja-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}

.teja-card {
position: relative;
height: 550px;
overflow: hidden;
background: var(--black-card);
}

.teja-card:nth-child(2),
.teja-card:nth-child(3) {
margin-top: 70px;
}

.teja-card img {
width: 100%;
height: 100%;
object-fit: contain;
background: #050607;
transition:
transform 0.8s ease,
filter 0.8s ease;
}

.teja-card:hover img {
transform: scale(1.035);
filter: brightness(1.08);
}

.teja-card span {
position: absolute;
top: 20px;
right: 22px;
font-size: 9px;
letter-spacing: 0.3em;
color: var(--gold);
}

/* VIDEOS */

.video-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.video-card {
background: #050607;
border: 1px solid rgba(255, 255, 255, 0.08);
}

.video-card video {
width: 100%;
height: 500px;
object-fit: contain;
background: #000;
}

.video-label {
padding: 15px 18px;
display: flex;
justify-content: space-between;
font-size: 8px;
letter-spacing: 0.3em;
color: rgba(255, 255, 255, 0.4);
}

.video-label span:last-child {
color: var(--gold);
}

/* BIRTHDAY */

.birthday-section {
position: relative;
width: 100%;
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
background:
radial-gradient(
circle at center,
rgba(199, 166, 99, 0.13),
transparent 34%
),
#050607;
}

.birthday-glow {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(199, 166, 99, 0.1);
filter: blur(120px);
}

.birthday-content {
position: relative;
width: min(900px, 88%);
}

.birthday-date {
font-size: 9px;
letter-spacing: 0.5em;
color: var(--gold);
margin-bottom: 35px;
}

.birthday-section h2 {
font-family: var(--serif);
font-size: clamp(70px, 11vw, 140px);
font-weight: 500;
line-height: 0.8;
margin: 25px 0 35px;
}

.birthday-section h2 span {
color: var(--gold-light);
}

.birthday-title {
font-size: 9px;
letter-spacing: 0.65em;
color: var(--gold);
}

.birthday-text {
max-width: 650px;
margin: 35px auto 0;
font-family: var(--serif);
font-size: 21px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.6);
}

/* FINAL */

.final-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
background: #020304;
padding: 120px 0;
}

.final-light {
position: absolute;
width: 1px;
height: 90%;
background: linear-gradient(
180deg,
transparent,
rgba(199, 166, 99, 0.8),
transparent
);
filter: blur(20px);
opacity: 0.55;
transform: rotate(24deg);
}

.final-content {
position: relative;
width: min(850px, 88%);
z-index: 2;
}

.final-kicker {
font-size: 8px;
letter-spacing: 0.55em;
color: var(--gold);
margin-bottom: 25px;
}

.final-section h2 {
font-family: var(--serif);
font-size: clamp(75px, 12vw, 155px);
font-weight: 500;
line-height: 0.78;
}

.final-divider {
width: 70px;
height: 1px;
margin: 40px auto;
background: linear-gradient(
90deg,
transparent,
var(--gold),
transparent
);
}

/* FINAL SHAYARI */

.final-message {
max-width: 620px;
margin: 0 auto 24px;
font-family: var(--serif);
font-size: 22px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.62);
}

.final-message + .final-message {
margin-top: 24px;
}

.final-gold {
margin-top: 52px;
font-family: var(--serif);
font-size: 36px;
font-style: italic;
color: var(--gold-light);
text-shadow: 0 0 25px rgba(199, 166, 99, 0.12);
}

.final-signature {
margin-top: 55px;
display: flex;
flex-direction: column;
gap: 7px;
font-family: var(--serif);
font-size: 19px;
color: rgba(255, 255, 255, 0.5);
}

.final-signature strong {
color: var(--gold-light);
font-weight: 500;
}

/* FOOTER */

.footer {
padding: 28px 6%;
display: flex;
justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 7px;
letter-spacing: 0.35em;
color: rgba(255, 255, 255, 0.25);
}

.footer div:last-child {
color: var(--gold);
}

/* RESPONSIVE */

@media (max-width: 900px) {

.hero-cinema-content {
padding-top: 80px;
}

.memory-grid {
grid-template-columns: 1fr;
}

.memory-card {
height: 430px;
}

.teja-gallery {
grid-template-columns: 1fr;
}

.teja-card {
height: 500px;
}

.teja-card:nth-child(2),
.teja-card:nth-child(3) {
margin-top: 0;
}

.video-grid {
grid-template-columns: 1fr;
}

.video-card video {
height: 430px;
}
}

@media (max-width: 600px) {

.cinematic-hero {
min-height: 100svh;
}

.hero-cinema-content {
width: 92%;
padding-top: 75px;
padding-bottom: 65px;
}

.hero-top-line {
top: 20px;
font-size: 6px;
letter-spacing: 0.18em;
}

.global-star {
gap: 10px;
margin-bottom: 20px;
}

.global-star p {
font-size: 48px;
letter-spacing: 0;
}

.global-star h1 {
font-size: 55px;
}

.star-line {
width: 20px;
}

.intro-line {
font-size: 17px;
}

.intro-small {
font-size: 6px;
letter-spacing: 0.22em;
}

.hero-name h2 {
font-size: 52px;
}

.name-kicker {
font-size: 6px;
letter-spacing: 0.35em;
}

.hero-title p {
font-size: 7px;
letter-spacing: 0.42em;
}

.hero-quote {
max-width: 300px;
}

.hero-quote p {
font-size: 14px;
}

.photo-frame {
width: min(330px, 82vw);
height: 185px;
}

.photo-caption {
font-size: 5px;
letter-spacing: 0.2em;
gap: 10px;
}

.hero-enter {
padding: 11px 17px;
font-size: 7px;
}

.hero-corner {
bottom: 58px;
font-size: 6px;
}

.hero-bottom {
bottom: 18px;
font-size: 5px;
letter-spacing: 0.18em;
}

.section {
padding: 100px 0;
}

.section-number {
margin-bottom: 35px;
font-size: 6px;
}

.message-container h2,
.section-heading h2 {
font-size: 48px;
}

.message-text {
font-size: 18px;
line-height: 1.65;
}

.message-text .highlight-line {
font-size: 22px;
}

.closing-advice {
font-size: 22px;
}

.memory-card {
height: 400px;
}

.teja-card {
height: 430px;
}

.video-card video {
height: 350px;
}

.birthday-section {
min-height: 90vh;
}

.birthday-section h2 {
font-size: 72px;
}

.birthday-text {
font-size: 18px;
}

/* FINAL MOBILE */

.final-section {
min-height: 100svh;
padding: 100px 0;
}

.final-content {
width: 88%;
}

.final-section h2 {
font-size: 78px;
}

.final-divider {
margin: 32px auto;
}

.final-message {
max-width: 340px;
font-size: 18px;
line-height: 1.7;
margin-bottom: 20px;
}

.final-message + .final-message {
margin-top: 20px;
}

.final-gold {
margin-top: 40px;
font-size: 29px;
line-height: 1.2;
}

.final-signature {
margin-top: 45px;
font-size: 18px;
}

.footer {
flex-direction: column;
gap: 12px;
text-align: center;
line-height: 1.7;
}
}