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

html,
body {
min-height: 100%;
}

body {
min-height: 100vh;
background: #071a14;
color: #edf5ef;
font-family: Georgia, serif;
overflow-x: hidden;
overflow-y: auto;
line-height: 1.9;
}

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

.welcome {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
padding: 30px;
animation: fadePage 1s ease;
}

.glow {
position: absolute;
width: 300px;
height: 300px;
background: #1d6047;
border-radius: 50%;
filter: blur(100px);
opacity: 0.35;
animation: breathe 5s infinite alternate;
pointer-events: none;
}

.small-text {
font-size: 18px;
color: #b7cfc0;
margin-bottom: 12px;
position: relative;
z-index: 2;
}

h1 {
font-size: 48px;
font-weight: normal;
color: #d9eadf;
position: relative;
z-index: 2;
letter-spacing: 1px;
text-shadow: 0 0 15px rgba(184,232,207,0.25);
}

h2 {
position: relative;
z-index: 2;
color: #d9eadf;
text-shadow: 0 0 15px rgba(184,232,207,0.25);
}

.sub-text {
margin-top: 25px;
color: #91ad9c;
font-size: 15px;
position: relative;
z-index: 2;
max-width: 600px;
}

button {
margin-top: 20px;
padding: 14px 35px;
border: 1px solid #557c68;
border-radius: 50px;
background: transparent;
color: #d9eadf;
font-family: inherit;
font-size: 16px;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
z-index: 10;
box-shadow: 0 0 15px rgba(184,232,207,0.15);
}

button:hover {
background: #234f3d;
transform: scale(1.05);
box-shadow: 0 0 20px rgba(184,232,207,0.4);
}

.choices {
display: flex;
gap: 15px;
justify-content: center;
align-items: center;
position: relative;
z-index: 10;
}

#yesButton,
#noButton {
transition: all 0.4s ease;
}

/* =========================
ماهی صفحه اول
========================= */

.fish-wrap {
position: relative;
width: 270px;
height: 180px;
margin-bottom: 20px;
z-index: 2;
animation: fishSwim 3s ease-in-out infinite;
}

.fish-svg {
width: 100%;
height: 100%;
overflow: visible;
position: relative;
z-index: 2;
}

.fish-body {
fill: #35a9df;
stroke: #126b91;
stroke-width: 5;
}

.fish-tail {
fill: #238fbd;
stroke: #126b91;
stroke-width: 5;
transform-origin: 65px 90px;
animation: tailMove 0.7s ease-in-out infinite alternate;
}

.fish-fin {
fill: #55bde5;
stroke: #126b91;
stroke-width: 5;
}

.fish-eye {
fill: #102a43;
}

.fish-eye-light {
fill: white;
}

.fish-mouth {
fill: none;
stroke: #126b91;
stroke-width: 4;
stroke-linecap: round;
}

@keyframes fishSwim {
0%,
100% {
transform: translateX(-12px) rotate(-2deg);
}


50% {
    transform: translateX(12px) rotate(2deg);
}
}

@keyframes tailMove {
from {
transform: rotate(-8deg);
}


to {
    transform: rotate(8deg);
}
}

/* =========================
ماهی ناراحت
========================= */

.fish-sad {
animation: sadFish 0.8s ease !important;
}

@keyframes sadFish {
0% {
transform: translateX(0) rotate(0);
}


20% {
    transform: translateX(-20px) rotate(-8deg);
}

40% {
    transform: translateX(20px) rotate(8deg);
}

60% {
    transform: translateX(-15px) rotate(-5deg);
}

80% {
    transform: translateX(15px) rotate(5deg);
}

100% {
    transform: translateX(0) rotate(0);
}
}

/* =========================
ماهی خوشحال
========================= */

.fish-happy {
animation: happyFish 0.8s ease-in-out !important;
}

@keyframes happyFish {
0% {
transform: scale(1) rotate(0);
}


30% {
    transform: scale(1.15) rotate(-6deg);
}

60% {
    transform: scale(1.15) rotate(6deg);
}

100% {
    transform: scale(1) rotate(0);
}
}

/* =========================
اشک ماهی
========================= */

.tear {
position: absolute;
right: 58px;
top: 70px;
font-size: 22px;
opacity: 0;
display: block;
z-index: 20;
pointer-events: none;
}

.fish-cry .tear {
opacity: 1 !important;
animation: tearDrop 1s ease-in-out infinite;
}

@keyframes tearDrop {
0% {
transform: translateY(0);
opacity: 0;
}


30% {
    opacity: 1;
}

100% {
    transform: translateY(18px);
    opacity: 0;
}
}

/* =========================
حباب‌های ماهی
========================= */

.bubble {
position: absolute;
border: 2px solid #8bd8f5;
border-radius: 50%;
background: transparent;
pointer-events: none;
z-index: 5;
}

.bubble1 {
width: 14px;
height: 14px;
left: 25px;
bottom: 50px;
animation: bubbleUp 2.5s infinite ease-in;
}

.bubble2 {
width: 9px;
height: 9px;
left: 55px;
bottom: 45px;
animation: bubbleUp 3s infinite ease-in 0.8s;
}

.bubble3 {
width: 6px;
height: 6px;
left: 75px;
bottom: 55px;
animation: bubbleUp 2.8s infinite ease-in 1.4s;
}

@keyframes bubbleUp {
0% {
transform: translateY(0);
opacity: 0;
}


20% {
    opacity: 0.8;
}

100% {
    transform: translateY(-100px);
    opacity: 0;
}
}

/* =========================
تزئینات اطراف ماهی
========================= */

.ambient
-decor {
position: absolute;
inset: -100px;
pointer-events: none;
z-index: 0;
}

.star,
.tiny-heart {
position: absolute;
font-family: sans-serif;
color: #9cffc7;
text-shadow: 0 0 12px rgba(100,255,170,0.8);
animation: twinkle 2.5s ease-in-out infinite;
}

.star {
font-size: 22px;
}

.tiny-heart {
font-size: 20px;
}

.s1 {
top: 5%;
left: 18%;
}

.s2 {
top: 22%;
right: 8%;
animation-delay: 0.7s;
}

.s3 {
bottom: 18%;
left: 10%;
animation-delay: 1.3s;
}

.s4 {
bottom: 5%;
right: 20%;
animation-delay: 1.8s;
}

.h1 {
top: 15%;
left: 5%;
animation-delay: 0.4s;
}

.h2 {
top: 5%;
right: 25%;
animation-delay: 1.1s;
}

.h3 {
bottom: 10%;
right: 5%;
animation-delay: 1.7s;
}

.bubble-float {
position: absolute;
border: 1px solid rgba(170,255,210,0.5);
border-radius: 50%;
box-shadow: 0 0 10px rgba(100,255,170,0.25);
animation: floatBubble 5s ease-in-out infinite;
}

.b1 {
width: 12px;
height: 12px;
left: 12%;
bottom: 5%;
}

.b2 {
width: 7px;
height: 7px;
right: 15%;
top: 12%;
animation-delay: 1.5s;
}

.b3 {
width: 16px;
height: 16px;
right: 3%;
bottom: 25%;
animation-delay: 2.5s;
}

@keyframes twinkle {
0%,
100% {
opacity: 0.25;
transform: scale(0.7) rotate(0deg);
}


50% {
    opacity: 1;
    transform: scale(1.25) rotate(15deg);
}
}

@keyframes floatBubble {
0% {
transform: translateY(20px);
opacity: 0;
}


30% {
    opacity: 0.8;
}

100% {
    transform: translateY(-100px);
    opacity: 0;
}
}

/* =========================
قلب‌های صفحه اول
========================= */

.heart-bubble {
position: fixed;
bottom: -40px;
pointer-events: none;
z-index: 9999;
color: #b8e8cf;
font-weight: bold;
animation: heartFloat 2.2s ease-out forwards;
}

@keyframes heartFloat {
0% {
transform: translateY(0) scale(0.2) rotate(0deg);
opacity: 0;
}


15% {
    opacity: 1;
}

50% {
    transform: translateY(-50vh) scale(1.2) rotate(15deg);
    opacity: 0.9;
}

100% {
    transform: translateY(-115vh) scale(1.8) rotate(-15deg);
    opacity: 0;
}
}

/* =========================
انیمیشن‌های عمومی
========================= */

@keyframes fadePage {
from {
opacity: 0;
transform: translateY(20px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes breathe {
from {
transform: scale(0.8);
opacity: 0.25;
}


to {
    transform: scale(1.2);
    opacity: 0.45;
}
} 
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
min-height: 100%;
}

body {
min-height: 100vh;
background: #071a14;
color: #edf5ef;
font-family: Georgia, serif;
overflow-x: hidden;
overflow-y: auto;
line-height: 1.9;
}

.welcome {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
padding: 30px;
animation: fadePage 1s ease;
}

.glow {
position: absolute;
width: 300px;
height: 300px;
background: #1d6047;
border-radius: 50%;
filter: blur(100px);
opacity: 0.35;
animation: breathe 5s infinite alternate;
pointer-events: none;
}

.small-text {
font-size: 18px;
color: #b7cfc0;
margin-bottom: 12px;
position: relative;
z-index: 2;
}

h1 {
font-size: 48px;
font-weight: normal;
color: #d9eadf;
position: relative;
z-index: 2;
letter-spacing: 1px;
text-shadow: 0 0 15px rgba(184, 232, 207, 0.25);
}

h2 {
position: relative;
z-index: 2;
color: #d9eadf;
text-shadow: 0 0 15px rgba(184, 232, 207, 0.25);
}

.sub-text {
margin-top: 25px;
color: #91ad9c;
font-size: 15px;
max-width: 600px;
position: relative;
z-index: 2;
}

button {
margin-top: 20px;
padding: 14px 35px;
border: 1px solid #557c68;
border-radius: 50px;
background: transparent;
color: #d9eadf;
font-family: Georgia, serif;
font-size: 16px;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
z-index: 10;
box-shadow: 0 0 15px rgba(184, 232, 207, 0.15);
}

button:hover {
background: #234f3d;
transform: scale(1.05);
box-shadow: 0 0 20px rgba(184, 232, 207, 0.4);
}
.choices {
display: flex;
gap: 15px;
justify-content: center;
align-items: center;
position: relative;
z-index: 10;
}

#yesButton,
#noButton {
transition: all 0.4s ease;
}

/* ماهی */

.fish-wrap {
position: relative;
width: 270px;
height: 180px;
margin-bottom: 20px;
z-index: 2;
animation: fishSwim 3s ease-in-out infinite;
}

.fish-svg {
width: 100%;
height: 100%;
overflow: visible;
position: relative;
z-index: 2;
}

.fish-body {
fill: #35a9df;
stroke: #126b91;
stroke-width: 5;
}

.fish-tail {
fill: #238fbd;
stroke: #126b91;
stroke-width: 5;
transform-origin: 65px 90px;
animation: tailMove 0.7s ease-in-out infinite alternate;
}

.fish-fin {
fill: #55bde5;
stroke: #126b91;
stroke-width: 5;
}

.fish-eye {
fill: #102a43;
}

.fish-eye-light {
fill: white;
}

.fish-mouth {
fill: none;
stroke: #126b91;
stroke-width: 4;
stroke-linecap: round;
}

/* تزئینات اطراف ماهی */

.ambient-decor {
position: absolute;
inset: -100px;
pointer-events: none;
z-index: 0;
}

.star,
.tiny-heart {
position: absolute;
font-family: sans-serif;
color: #9cffc7;
text-shadow: 0 0 12px rgba(100, 255, 170, 0.8);
animation: twinkle 2.5s ease-in-out infinite;
}

.star {
font-size: 22px;
}

.tiny-heart {
font-size: 20px;
}

.s1 {
top: 5%;
left: 18%;
}

.s2 {
top: 22%;
right: 8%;
animation-delay: 0.7s;
}

.s3 {
bottom: 18%;
left: 10%;
animation-delay: 1.3s;
}

.s4 {
bottom: 5%;
right: 20%;
animation-delay: 1.8s;
}

.h1 {
top: 15%;
left: 5%;
animation-delay: 0.4s;
}

.h2 {
top: 5%;
right: 25%;
animation-delay: 1.1s;
}

.h3 {
bottom: 10%;
right: 5%;
animation-delay: 1.7s;
}

.bubble-float {
position: absolute;
border: 1px solid rgba(170, 255, 210, 0.5);
border-radius: 50%;
box-shadow: 0 0 10px rgba(100, 255, 170, 0.25);
animation: floatBubble 5s ease-in-out infinite;
}

.b1 {
width: 12px;
height: 12px;
left: 12%;
bottom: 5%;
}

.b2 {
width: 7px;
height: 7px;
right: 15%;
top: 12%;
animation-delay: 1.5s;
}

.b3 {
width: 16px;
height: 16px;
right: 3%;
bottom: 25%;
animation-delay: 2.5s;
}

.bubble {
position: absolute;
border: 2px solid #8bd8f5;
border-radius: 50%;
background: transparent;
pointer-events: none;
z-index: 5;
}

.bubble1 {
width: 14px;
height: 14px;
left: 25px;
bottom: 50px;
animation: bubbleUp 2.5s infinite ease-in;
}

.bubble2 {
width: 9px;
height: 9px;
left: 55px;
bottom: 45px;
animation: bubbleUp 3s infinite ease-in 0.8s;
}

.bubble3 {
width: 6px;
height: 6px;
left: 75px;
bottom: 55px;
animation: bubbleUp 2.8s infinite ease-in 1.4s;
}
/* =========================
PHOTO ALBUM
========================= */

.photo-frame {
position: relative;
width: min(88vw, 430px);
margin: 30px auto 24px;
padding: 14px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(160, 255, 210, 0.35);
box-shadow:
0 0 25px rgba(80, 220, 150, 0.12),
0 15px 45px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
overflow: visible;
}

.photo-frame::before {
content: "✦ ♡ ✦";
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
color: #b8e8cf;
font-size: 24px;
letter-spacing: 10px;
white-space: nowrap;
text-shadow: 0 0 15px rgba(184, 232, 207, 0.8);
animation: floatDecor 3s ease-in-out infinite;
z-index: 10;
}

.photo-frame::after {
content: "✦ ♡ ✦";
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
color: #91ad9c;
font-size: 20px;
letter-spacing: 10px;
white-space: nowrap;
text-shadow: 0 0 12px rgba(184, 232, 207, 0.6);
animation: floatDecor 3s ease-in-out infinite reverse;
z-index: 10;
}

.photo-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
position: relative;
z-index: 2;
transition:
opacity 0.3s ease,
transform 0.4s ease;
}

.photo-frame:hover img {
transform: scale(1.015);
}

.photo-number {
position: absolute;
top: 12px;
left: 12px;
z-index: 5;
background: rgba(7, 26, 20, 0.75);
color: #d9eadf;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
backdrop-filter: blur(5px);
}

#photo {
transition: opacity 0.6s ease, transform 0.6s ease;
}

#photoText {
transition: opacity 0.5s ease, transform 0.5s ease;
}

@keyframes floatDecor {
0%, 100% {
transform: translateX(-50%) translateY(0);
opacity: 0.5;
}


50% {
    transform: translateX(-50%) translateY(-6px);
    opacity: 1;
}
}

/* =========================
عکس کارتونی شما
========================= */

.animated-us {
position: absolute;
width: 72px;
height: 72px;
right: 12px;
bottom: 12px;
z-index: 5;
border-radius: 50%;
padding: 4px;
background: rgba(20, 60, 45, 0.75);
border: 1px solid rgba(170, 255, 210, 0.5);
box-shadow: 0 0 18px rgba(100, 255, 170, 0.25);
backdrop-filter: blur(5px);
}

.animated-us img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

/* =========================
PHOTO LIGHTBOX
========================= */

.photo-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
background:
radial-gradient(
circle at center,
rgba(30, 100, 65, 0.35),
rgba(3, 15, 10, 0.96)
);
backdrop-filter: blur(12px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.35s ease,
visibility 0.35s ease;
cursor: zoom-out;
}

.photo-lightbox.show {
opacity: 1;
visibility: visible;
}

.photo-lightbox img {
max-width: 92vw;
max-height: 82vh;
object-fit: contain;
border-radius: 18px;
box-shadow:
0 0 40px rgba(100, 255, 180, 0.18),
0 20px 70px rgba(0, 0, 0, 0.55);
transform: scale(0.85);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}

.photo-lightbox.show img {
transform: scale(1);
}

/* =========================
تزئینات شناور
========================= */

.floating-decor {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 1;
}
.floating-decor span {
position: absolute;
color: rgba(120, 220, 150, 0.55);
font-size: 24px;
animation: floatingDecor 5s ease-in-out infinite;
text-shadow: 0 0 12px rgba(100, 255, 150, 0.5);
}

.floating-decor span:nth-child(1) {
top: 12%;
left: 12%;
}

.floating-decor span:nth-child(2) {
top: 20%;
right: 15%;
animation-delay: 1s;
}

.floating-decor span:nth-child(3) {
top: 48%;
left: 7%;
animation-delay: 2s;
}

.floating-decor span:nth-child(4) {
top: 65%;
right: 8%;
animation-delay: 3s;
}

.floating-decor span:nth-child(5) {
bottom: 12%;
left: 20%;
animation-delay: 1.5s;
}

.floating-decor span:nth-child(6) {
top: 10%;
right: 32%;
animation-delay: 2.5s;
}

.floating-decor span:nth-child(7) {
top: 43%;
right: 5%;
animation-delay: 4s;
}

.floating-decor span:nth-child(8) {
bottom: 20%;
left: 28%;
animation-delay: 3.5s;
}

@keyframes floatingDecor {
0%, 100% {
transform: translateY(0) rotate(0deg) scale(1);
opacity: 0.25;
}


50% {
    transform: translateY(-20px) rotate(15deg) scale(1.15);
    opacity: 0.9;
}
}

/* =========================
تزئینات صفحات
========================= */

.page-decor {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}

.page-decor span {
position: absolute;
color: #9cffc7;
opacity: 0.45;
text-shadow: 0 0 12px rgba(100, 255, 170, 0.7);
animation: pageFloat 5s ease-in-out infinite;
}

.page-decor .d1 {
top: 12%;
left: 10%;
font-size: 25px;
}

.page-decor .d2 {
top: 25%;
right: 12%;
font-size: 18px;
animation-delay: 1s;
}

.page-decor .d3 {
bottom: 20%;
left: 15%;
font-size: 20px;
animation-delay: 2s;
}

.page-decor .d4 {
bottom: 10%;
right: 10%;
font-size: 28px;
animation-delay: 3s;
}

.page-decor .d5 {
top: 8%;
right: 40%;
font-size: 14px;
animation-delay: 1.5s;
}

@keyframes pageFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.25;
}


50% {
    transform: translateY(-18px) rotate(12deg);
    opacity: 0.8;
}
}

/* =========================
صفحات متنی
========================= */

.page-content {
position: relative;
z-index: 2;
width: min(90%, 650px);
margin: auto;
text-align: center;
}

.letter-page {
max-width: 650px;
padding: 35px;
position: relative;
z-index: 2;
animation: letterAppear 1.2s ease;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 25px;
backdrop-filter: blur(8px);
box-shadow: 0 0 35px rgba(0, 0, 0, 0.25);
}

.letter-page .small-text {
color: #b8e8cf;
font-size: 19px;
}

.letter-page .sub-text {
color: #c7ddd0;
font-size: 17px;
line-height: 2.4;
}

@keyframes letterAppear {
from {
opacity: 0;
transform: translateY(25px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

/* =========================
صفحه پایانی
========================= */

.final-page {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
box-sizing: border-box;
padding: 45px 22px;
background:
radial-gradient(
circle at 50% 45%,
rgba(35, 110, 75, 0.16),
transparent 55%
);
}

.final-page::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: #1d6047;
filter: blur(100px);
opacity: 0.22;
animation: finalGlow 6s ease-in-out infinite alternate;
pointer-events: none;
}

.final-message {
max-width: 600px;
position: relative;
z-index: 2;
animation: finalTextIn 1.5s ease forwards;
}

.final-message h2 {
margin-bottom: 25px;
font-size: 32px;
}

.final-message .sub-text {
font-size: 17px;
line-height: 2.5;
color: #b8d2c2;
}

/* =========================
ماهی خداحافظ
========================= */

.goodbye-fish {
position: relative;
width: 260px;
height: 170px;
margin-top: 20px;
z-index: 3;
animation: fishGoodbye 5s ease-in-out infinite;
}

.final-fish {
width: 260px;
height: auto;
}

.goodbye-text {
position: relative;
z-index: 2;
line-height: 2;
font-size: 16px;
margin-top: 5px;
opacity: 0;
animation: goodbyeTextIn 2s ease forwards;
animation-delay: 1s;
}
.goodbye-bubble {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #8bd8f5;
border-radius: 50%;
opacity: 0;
animation: bubbleUp 3s ease-in-out infinite;
}

.gb1 {
left: 72%;
top: 35%;
animation-delay: 0.3s;
}

.gb2 {
left: 78%;
top: 45%;
width: 7px;
height: 7px;
animation-delay: 1s;
}

.gb3 {
left: 82%;
top: 30%;
width: 5px;
height: 5px;
animation-delay: 1.7s;
}

@keyframes fishGoodbye {
0%, 100% {
transform: translateX(0) rotate(0deg);
}


25% {
    transform: translateX(-12px) rotate(-2deg);
}

50% {
    transform: translateX(8px) rotate(2deg);
}

75% {
    transform: translateX(-8px) rotate(-1deg);
}
}

@keyframes goodbyeTextIn {
from {
opacity: 0;
transform: translateY(15px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes finalGlow {
from {
transform: scale(0.9);
opacity: 0.18;
}


to {
    transform: scale(1.15);
    opacity: 0.28;
}
}

/* =========================
حباب‌های ماهی آخر
========================= */

@keyframes bubbleUp {
0% {
opacity: 0;
transform: translateY(10px) scale(0.7);
}


30% {
    opacity: 0.7;
}

100% {
    opacity: 0;
    transform: translateY(-45px) scale(1.2);
}
}

/* =========================
رفتن ماهی
========================= */

.goodbye-fish.leaving {
animation: fishLeave 3.5s cubic-bezier(.65, 0, .35, 1) forwards !important;
}

.goodbye-fish.leaving .goodbye-bubble {
animation-play-state: paused;
opacity: 0;
}

@keyframes fishLeave {
0% {
opacity: 1;
transform: translateX(0) translateY(0) rotate(0deg);
}


20% {
    transform: translateX(25px) translateY(-8px) rotate(2deg);
}

45% {
    transform: translateX(80px) translateY(5px) rotate(-2deg);
}

70% {
    opacity: 0.75;
    transform: translateX(180px) translateY(-10px) rotate(3deg);
}

100% {
    opacity: 0;
    transform: translateX(520px) translateY(-35px) rotate(5deg);
}
}

.final-page.farewell-end .goodbye-text {
animation: farewellFade 2s ease forwards;
}

@keyframes farewellFade {
from {
opacity: 1;
}


to {
    opacity: 0.45;
}
}

.final-page.farewell-end::before {
animation: finalGlowEnd 3s ease forwards;
}

@keyframes finalGlowEnd {
from {
opacity: 0.22;
transform: scale(1);
}


to {
    opacity: 0.05;
    transform: scale(0.7);
}
}

/* =========================
قلب‌های شناور
========================= */

.mini-heart {
position: absolute;
color: #b8e8cf;
font-size: 24px;
pointer-events: none;
z-index: 9999;
opacity: 1;
animation: heartFly 2s ease-out forwards;
}

@keyframes heartFly {
0% {
opacity: 1;
transform: translateY(0) scale(0.5);
}


50% {
    opacity: 1;
    transform: translateY(-50px) scale(1);
}

100% {
    opacity: 0;
    transform: translateY(-120px) translateX(20px) scale(1.3);
}
}

/* =========================
موبایل
========================= */

@media (max-width: 600px) {


h1 {
    font-size: 38px;
}

h2 {
    font-size: 25px;
}

.sub-text {
    font-size: 14px;
}

.letter-page {
    padding: 25px 20px;
}

.letter-page .sub-text {
    font-size: 15px;
    line-height: 2.2;
}

.memory-page {
    width: 90%;
    padding: 50px 22px 35px;
}

.memory-page h2 {
    font-size: 23px;
}

.final-message {
    width: 90%;
}

.final-message h2 {
    font-size: 26px;
} 

/* =========================
نامه
========================= */

.letter-page {
max-width: 650px;
padding: 35px;
position: relative;
z-index: 2;
margin: auto;
animation: letterAppear 1.2s ease;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 25px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 0 35px rgba(0,0,0,0.25);
}

.letter-page .small-text {
color: #b8e8cf;
font-size: 19px;
}

.letter-page .sub-text {
color: #c7ddd0;
font-size: 17px;
line-height: 2.4;
}

@keyframes letterAppear {
from {
opacity: 0;
transform: translateY(25px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

/* =========================
تزئینات عمومی صفحات
========================= */

#page .small-text::before {
content: "✦";
position: absolute;
right: -35px;
top: 5px;
color: #b8e8cf;
font-size: 16px;
animation: sparkle 2.5s ease-in-out infinite;
}

#page .small-text::after {
content: "✦";
position: absolute;
left: -35px;
top: 5px;
color: #91ad9c;
font-size: 13px;
animation: sparkle 3s ease-in-out infinite reverse;
}

@keyframes sparkle {
0%, 100% {
opacity: 0.2;
transform: scale(0.7) rotate(0deg);
}


50% {
    opacity: 1;
    transform: scale(1.3) rotate(90deg);
}
}

/* =========================
صفحه پایانی
========================= */

.final-page {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
box-sizing: border-box;
padding: 45px 22px;


background:
    radial-gradient(
        circle at 50% 45%,
        rgba(35, 110, 75, 0.16),
        transparent 55%
    );
}

.final-page::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: #1d6047;
filter: blur(100px);
opacity: 0.22;
animation: finalGlow 6s ease-in-out infinite alternate;
pointer-events: none;
}

.final-message {
max-width: 600px;
position: relative;
z-index: 2;
animation: finalTextIn 1.5s ease forwards;
}
.final-message h2 {
font-size: 32px;
margin-bottom: 25px;
color: #d9eadf;
}

.final-message .sub-text {
font-size: 17px;
line-height: 2.5;
color: #b8d2c2;
}

/* =========================
ماهی خداحافظ
========================= */

.goodbye-fish {
position: relative;
width: 260px;
height: 170px;
margin-top: 20px;
z-index: 3;
animation: fishGoodbye 5s ease-in-out infinite;
}

.final-fish {
width: 260px;
height: auto;
}

.goodbye-bubble {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #8bd8f5;
border-radius: 50%;
opacity: 0;
animation: goodbyeBubbleUp 3s ease-in-out infinite;
}

.gb1 {
left: 72%;
top: 35%;
animation-delay: .3s;
}

.gb2 {
left: 78%;
top: 45%;
width: 7px;
height: 7px;
animation-delay: 1s;
}

.gb3 {
left: 82%;
top: 30%;
width: 5px;
height: 5px;
animation-delay: 1.7s;
}

.goodbye-text {
position: relative;
z-index: 3;
line-height: 2;
font-size: 16px;
margin-top: 5px;
color: #b8d2c2;
opacity: 0;
animation: goodbyeTextIn 2s ease forwards;
animation-delay: 1s;
}

@keyframes fishGoodbye {
0%, 100% {
transform: translateX(0) rotate(0deg);
}


25% {
    transform: translateX(-12px) rotate(-2deg);
}

50% {
    transform: translateX(8px) rotate(2deg);
}

75% {
    transform: translateX(-8px) rotate(-1deg);
}
}

@keyframes goodbyeBubbleUp {
0% {
opacity: 0;
transform: translateY(10px) scale(.7);
}


30% {
    opacity: .7;
}

100% {
    opacity: 0;
    transform: translateY(-45px) scale(1.2);
}
}

@keyframes goodbyeTextIn {
from {
opacity: 0;
transform: translateY(15px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes finalTextIn {
from {
opacity: 0;
transform: translateY(20px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

@keyframes finalGlow {
from {
transform: scale(0.85);
opacity: 0.16;
}


to {
    transform: scale(1.15);
    opacity: 0.25;
}
}

/* =========================
رفتن ماهی در پایان
========================= */

.goodbye-fish.leaving {
animation: fishLeave 3.5s cubic-bezier(.65,0,.35,1) forwards !important;
}

.goodbye-fish.leaving .goodbye-bubble {
animation-play-state: paused;
opacity: 0;
}

@keyframes fishLeave {
0% {
opacity: 1;
transform:
translateX(0)
translateY(0)
rotate(0deg);
}


20% {
    transform:
        translateX(25px)
        translateY(-8px)
        rotate(2deg);
}

45% {
    transform:
        translateX(80px)
        translateY(5px)
        rotate(-2deg);
}

70% {
    opacity: 0.75;
    transform:
        translateX(180px)
        translateY(-10px)
        rotate(3deg);
}

100% {
    opacity: 0;
    transform:
        translateX(520px)
        translateY(-35px)
        rotate(5deg);
}
}

.final-page.farewell-end .goodbye-text {
animation: farewellFade 2s ease forwards;
}

@keyframes farewellFade {
from {
opacity: 1;
}


to {
    opacity: 0.45;
}
}

.final-page.farewell-end::before {
animation: finalGlowEnd 3s ease forwards;
}

@keyframes finalGlowEnd {
from {
opacity: 0.22;
transform: scale(1);
}


to {
    opacity: 0.05;
    transform: scale(0.7);
}
}

/* =========================
عکس‌ها
========================= */

.photo-frame {
position: relative;
width: min(88vw, 430px);
margin: 30px auto 24px;
padding: 14px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(160, 255, 210, 0.35);
box-shadow:
0 0 25px rgba(80, 220, 150, 0.12),
0 15px 45px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
overflow: visible;
}

.photo-frame::before {
content: "✦ ♡ ✦";
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
color: #b8e8cf;
font-size: 24px;
letter-spacing: 10px;
white-space: nowrap;
animation: floatDecor 3s ease-in-out infinite;
pointer-events: none;
z-index: 10;
}

.photo-frame::after {
content: "✦ ♡ ✦";
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
color: #91ad9c;
font-size: 20px;
letter-spacing: 10px;
white-space: nowrap;
animation: floatDecor 3s ease-in-out infinite reverse;
pointer-events: none;
z-index: 10;
}
.photo-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
transition:
opacity 0.3s ease,
transform 0.4s ease;
position: relative;
z-index: 2;
}

.photo-frame:hover img {
transform: scale(1.015);
}

@keyframes floatDecor {
0%,100% {
transform: translateX(-50%) translateY(0);
opacity: 0.5;
}


50% {
    transform: translateX(-50%) translateY(-6px);
    opacity: 1;
}
}

/* =========================
عکس کارتونی
========================= */

.animated-us {
position: absolute;
width: 72px;
height: 72px;
right: 12px;
bottom: 12px;
z-index: 5;
border-radius: 50%;
padding: 4px;
background: rgba(20, 60, 45, 0.75);
border: 1px solid rgba(170, 255, 210, 0.5);
box-shadow:
0 0 18px rgba(100, 255, 170, 0.25);
backdrop-filter: blur(5px);
}

.animated-us img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
filter: drop-shadow(0 8px 15px rgba(0,0,0,0.35));
}

/* =========================
شماره عکس
========================= */

.photo-number {
position: absolute;
top: 12px;
left: 12px;
z-index: 5;
background: rgba(7,26,20,0.75);
color: #d9eadf;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
backdrop-filter: blur(5px);
}

/* =========================
لایت‌باکس عکس
========================= */

.photo-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 25px;
background:
radial-gradient(
circle at center,
rgba(30, 100, 65, 0.35),
rgba(3, 15, 10, 0.96)
);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
visibility: hidden;
transition:
opacity 0.35s ease,
visibility 0.35s ease;
cursor: zoom-out;
}

.photo-lightbox.show {
opacity: 1;
visibility: visible;
}

.photo-lightbox img {
max-width: 92vw;
max-height: 82vh;
object-fit: contain;
border-radius: 18px;
box-shadow:
0 0 40px rgba(100, 255, 180, 0.18),
0 20px 70px rgba(0, 0, 0, 0.55);
transform: scale(0.85);
transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}

.photo-lightbox.show img {
transform: scale(1);
}

/* =========================
قلب‌های ریز
========================= */

.mini-heart {
position: absolute;
color: #b8e8cf;
font-size: 24px;
pointer-events: none;
z-index: 9999;
opacity: 1;
animation: heartFly 2s ease-out forwards;
}

@keyframes heartFly {
0% {
opacity: 1;
transform: translateY(0) scale(0.5);
}


50% {
    opacity: 1;
    transform: translateY(-50px) scale(1);
}

100% {
    opacity: 0;
    transform: translateY(-120px) translateX(20px) scale(1.3);
}
}

/* =========================
موبایل
========================= */

@media (max-width: 600px) {


h1 {
    font-size: 38px;
}

h2 {
    font-size: 24px;
}

.fish-wrap {
    width: 240px;
    height: 160px;
}

.page-content {
    width: 90%;
}

.memory-page {
    width: 90%;
    padding: 50px 22px 35px;
}

.memory-page h2 {
    font-size: 24px;
}

.letter-page {
    width: 90%;
    padding: 28px 20px;
}

.letter-page .sub-text {
    font-size: 15px;
    line-height: 2.2;
}
.final-message {
    width: 90%;
}

.final-message h2 {
    font-size: 27px;
}

.final-message .sub-text {
    font-size: 15px;
    line-height: 2.3;
}

.goodbye-fish {
    width: 230px;
    height: 150px;
}

.final-fish {
    width: 230px;
}
.goodbye-text {
    font-size: 15px;
}

button {
    padding: 12px 28px;
    font-size: 15px;
}
.memory-page {
position: relative;
z-index: 2;
width: min(88%, 520px);
padding: 55px 30px 40px;
margin: auto;
text-align: center;
border: 1px solid rgba(120, 190, 150, 0.25);
border-radius: 28px;
background: rgba(255, 255, 255, 0.035);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow:
0 0 40px rgba(80, 180, 120, 0.08),
inset 0 0 30px rgba(255, 255, 255, 0.025);
animation: memoryAppear 1.2s ease forwards;
}

.memory-page::before,
.memory-page::after {
content: "✦";
position: absolute;
color: #b8e8cf;
pointer-events: none;
text-shadow: 0 0 15px rgba(184, 232, 207, 0.8);
animation: tinySpark 3s ease-in-out infinite;
}

.memory-page::before {
top: 25px;
right: 25px;
font-size: 18px;
}

.memory-page::after {
bottom: 25px;
left: 25px;
font-size: 13px;
animation-delay: 1.2s;
}

.memory-number {
font-family: Georgia, serif;
font-size: 110px;
font-weight: 700;
color: rgba(120, 190, 150, 0.055);
line-height: 1;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
pointer-events: none;
}

.memory-line {
position: relative;
width: 55px;
height: 1px;
margin: 0 auto 28px;
background: rgba(130, 210, 160, 0.55);
box-shadow: 0 0 10px rgba(100, 210, 140, 0.4);
}

.memory-line::before,
.memory-line::after {
content: "·";
position: absolute;
color: #91ad9c;
font-size: 28px;
opacity: 0.7;
top: -15px;
}

.memory-line::before {
right: -55px;
}

.memory-line::after {
left: -55px;
}

.memory-page .small-text,
.memory-page h2,
.memory-page .sub-text,
.memory-page button {
position: relative;
z-index: 2;
}

.memory-page .small-text {
color: #b8e8cf;
margin-bottom: 10px;
}

.memory-page h2 {
font-size: 28px;
font-weight: normal;
line-height: 1.8;
margin-bottom: 8px;
}

.memory-page .sub-text {
margin-top: 10px;
color: #b7cfc0;
line-height: 2.2;
}

.memory-page button {
margin-top: 30px;
}

@keyframes memoryAppear {
from {
opacity: 0;
transform: translateY(25px) scale(0.96);
}


to {
    opacity: 1;
    t
    ransform: translateY(0) scale(1);
}
}

@keyframes tinySpark {
0%, 100% {
opacity: 0.3;
transform: translateY(0) rotate(0deg) scale(0.8);
}


50% {
    opacity: 1;
    transform: translateY(-8px) rotate(20deg) scale(1.15);
}
}

/* تزئینات صفحات */

.page-decor {
position: fixed;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}

.page-decor span {
position: absolute;
color: #9cffc7;
opacity: 0.45;
text-shadow: 0 0 12px rgba(100, 255, 170, 0.7);
animation: pageFloat 5s ease-in-out infinite;
}

.page-decor .d1 {
top: 12%;
left: 10%;
font-size: 25px;
}

.page-decor .d2 {
top: 25%;
right: 12%;
font-size: 18px;
animation-delay: 1s;
}

.page-decor .d3 {
bottom: 20%;
left: 15%;
font-size: 20px;
animation-delay: 2s;
}

.page-decor .d4 {
bottom: 10%;
right: 10%;
font-size: 28px;
animation-delay: 3s;
}

.page-decor .d5 {
top: 8%;
right: 40%;
font-size: 14px;
animation-delay: 1.5s;
}

@keyframes pageFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
opacity: 0.25;
}


50% {
    transform: translateY(-18px) rotate(12deg);
    opacity: 0.8;
}
}

/* محتوای صفحات */

.page-content {
position: relative;
z-index: 2;
width: min(90%, 650px);
margin: auto;
text-align: center;
}

/* نامه */

.letter-page {
max-width: 650px;
padding: 35px;
margin: auto;
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 25px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 0 35px rgba(0, 0, 0, 0.25);
animation: letterAppear 1.2s ease;
}

.letter-page .small-text {
color: #b8e8cf;
font-size: 19px;
}

.letter-page .sub-text {
color: #c7ddd0;
font-size: 17px;
line-height: 2.4;
}

@keyframes letterAppear {
from {
opacity: 0;
transform: translateY(25px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

/* صفحه پایانی */

.final-page {
min-height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
padding: 45px 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;


background:
    radial-gradient(
        circle at 50% 45%,
        rgba(35, 110, 75, 0.16),
        transparent 55%
    );
}

.final-page::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: #1d6047;
filter: blur(100px);
opacity: 0.22;
animation: finalGlow 6s ease-in-out infinite alternate;
pointer-events: none;
}

@keyframes finalGlow {
from {
transform: scale(0.85);
opacity: 0.15;
}


to {
    transform: scale(1.15);
    opacity: 0.28;
}
}

.final-message {
position: relative;
z-index: 3;
max-width: 600px;
animation: finalTextIn 1.5s ease forwards;
}

.final-message h2 {
margin-bottom: 25px;
font-size: 32px;
}

.final-message .sub-text {
font-size: 17px;
line-height: 2.5;
color: #b8d2c2;
}

@keyframes finalTextIn {
from {
opacity: 0;
transform: translateY(20px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

/* ماهی خداحافظ */

.goodbye-fish {
position: relative;
width: 260px;
height: 170px;
margin-top: 20px;
z-index: 3;
animation: fishGoodbye 5s ease-in-out infinite;
}

.final-fish {
width: 260px;
height: auto;
}

@keyframes fishGoodbye {
0%, 100% {
transform: translateX(0) rotate(0deg);
}


25% {
    transform: translateX(-12px) rotate(-2deg);
}

50% {
    transform: translateX(8px) rotate(2deg);
}

75% {
    transform: translateX(-8px) rotate(-1deg);
}
}

/* حباب‌های ماهی */

.goodbye-bubble {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #8bd8f5;
border-radius: 50%;
opacity: 0;
animation: goodbyeBubbleUp 3s ease-in-out infinite;
}

.gb1 {
left: 72%;
top: 35%;
animation-delay: 0.3s;
}

.gb2 {
left: 78%;
top: 45%;
width: 7px;
height: 7px;
animation-delay: 1s;
}

.gb3 {
left: 82%;
top: 30%;
width: 5px;
height: 5px;
animation-delay: 1.7s;
}

@keyframes goodbyeBubbleUp {
0% {
opacity: 0;
transform: translateY(10px) scale(0.7);
}


30% {
    opacity: 0.7;
}

100% {
    opacity: 0;
    transform: translateY(-45px) scale(1.2);
}
}

/* متن خداحافظی */

.goodbye-text {
position: relative;
z-index: 3;
line-height: 2;
font-size: 16px;
margin-top: 5px;
opacity: 0;
animation: goodbyeTextIn 2s ease forwards;
animation-delay: 1s;
}

@keyframes goodbyeTextIn {
from {
opacity: 0;
transform: translateY(15px);
}


to {
    opacity: 1;
    transform: translateY(0);
}
}

/* رفتن ماهی */

.goodbye-fish.leaving {
animation: fishLeave 3.5s cubic-bezier(.65, 0, .35, 1) forwards !important;
}

@keyframes fishLeave {
0% {
opacity: 1;
transform: translateX(0) translateY(0) rotate(0deg);
}


20% {
    transform: translateX(25px) translateY(-8px) rotate(2deg);
}

45% {
    transform: translateX(80px) translateY(5px) rotate(-2deg);
}

70% {
    opacity: 0.75;
    transform: translateX(180px) translateY(-10px) rotate(3deg);
}

100% {
    opacity: 0;
    transform: translateX(520px) translateY(-35px) rotate(5deg);
}
}

.goodbye-fish.leaving .goodbye-bubble {
animation-play-state: paused;
opacity: 0;
}

.final-page.farewell-end .goodbye-text {
animation: farewellFade 2s ease forwards;
}

@keyframes farewellFade {
from {
opacity: 1;
}


to {
    opacity: 0.45;
}
}

.final-page.farewell-end::before {
animation: finalGlowEnd 3s ease forwards;
}

@keyframes finalGlowEnd {
from {
opacity: 0.22;
transform: scale(1);
}


to {
    opacity: 0.05;
    transform: scale(0.7);
}
}

/* قلب‌های صفحه اول */

.heart-bubble {
position: fixed;
bottom: -40px;
pointer-events: none;
z-index: 99999;
color: #b8e8cf;
font-weight: bold;
text-shadow: 0 0 15px rgba(184, 232, 207, 0.8);
animation: heartFloat 2.2s ease-out forwards;
}

@keyframes heartFloat {
0% {
transform: translateY(0) scale(0.2) rotate(0deg);
opacity: 0;
}


15% {
    opacity: 1;
}

50% {
    transform: translateY(-50vh) scale(1.2) rotate(15deg);
    opacity: 0.9;
}

100% {
    transform: translateY(-115vh) scale(1.8) rotate(-15deg);
    opacity: 0;
}
}

/* ریسپانسیو موبایل */

@media (max-width: 600px) {


h1 {
    font-size: 40px;
}

h2 {
    font-size: 25px;
}

.sub-text {
    font-size: 14px;
}

.memory-page {
    width: 90%;
    padding: 50px 22px 35px;
}

.memory-number {
    font-size: 90px;
}

.letter-page {
    width: 90%;
    padding: 25px 20px;
}

.letter-page .sub-text {
    font-size: 15px;
    line-height: 2.2;
}

.final-message {
    width: 92%;
}

.final-message h2 {
}