/*==================================================
  NIHAR ❤️ DHVANI WEDDING WEBSITE
  intro.css
  Part 1 - Cinematic Opening
==================================================*/

/*=========================================
INTRO OVERLAY
=========================================*/

#intro{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:
radial-gradient(circle at center,#3d1b2e 0%,#180814 50%,#000000 100%);

display:flex;

justify-content:center;
align-items:center;

flex-direction:column;

overflow:hidden;

z-index:999999;

animation:introFadeOut 1.2s ease forwards;

animation-delay:4.8s;

}


/*=========================================
FADE OUT
=========================================*/

@keyframes introFadeOut{

0%{

opacity:1;
visibility:visible;

}

100%{

opacity:0;
visibility:hidden;

}

}


/*=========================================
CENTER CONTAINER
=========================================*/

.intro-content{

text-align:center;

z-index:5;

animation:zoomIn 2s ease;

}


/*=========================================
ZOOM ANIMATION
=========================================*/

@keyframes zoomIn{

0%{

opacity:0;

transform:

scale(.6)

translateY(50px);

}

100%{

opacity:1;

transform:

scale(1)

translateY(0);

}

}


/*=========================================
COUPLE NAME
=========================================*/

.intro-name{

font-family:'Great Vibes',cursive;

font-size:80px;

font-weight:400;

color:#fff;

letter-spacing:3px;

text-shadow:

0 0 10px rgba(255,255,255,.5),

0 0 30px rgba(255,215,0,.4),

0 0 60px rgba(255,215,0,.3);

animation:nameGlow 2.5s infinite alternate;

}


/*=========================================
NAME GLOW
=========================================*/

@keyframes nameGlow{

from{

text-shadow:

0 0 15px rgba(255,255,255,.3),

0 0 25px rgba(255,215,0,.3);

}

to{

text-shadow:

0 0 25px rgba(255,255,255,.6),

0 0 50px rgba(255,215,0,.8),

0 0 90px rgba(255,215,0,.5);

}

}


/*=========================================
HEART
=========================================*/

.intro-heart{

display:block;

font-size:50px;

margin:20px 0;

color:#ff4d7d;

animation:heartBeat 1s infinite;

}


@keyframes heartBeat{

0%{

transform:scale(1);

}

20%{

transform:scale(1.25);

}

40%{

transform:scale(1);

}

60%{

transform:scale(1.20);

}

100%{

transform:scale(1);

}

}


/*=========================================
SUBTITLE
=========================================*/

.intro-subtitle{

margin-top:20px;

font-size:22px;

font-family:'Cinzel',serif;

letter-spacing:4px;

color:#ffffff;

opacity:0;

animation:

subtitleFade 2s ease forwards;

animation-delay:1.5s;

}


@keyframes subtitleFade{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/*=========================================
GOLDEN LINE
=========================================*/

.intro-line{

width:0;

height:2px;

margin:35px auto;

background:linear-gradient(

90deg,

transparent,

#FFD700,

transparent

);

animation:lineExpand 2s ease forwards;

animation-delay:1s;

}


@keyframes lineExpand{

0%{

width:0;

}

100%{

width:260px;

}

}


/*=========================================
LIGHT FLASH
=========================================*/

.intro-flash{

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.25),

transparent 70%);

filter:blur(40px);

animation:flashMove 6s infinite alternate;

}


@keyframes flashMove{

0%{

transform:

translate(-120px,-60px)

scale(.8);

}

100%{

transform:

translate(120px,60px)

scale(1.3);

}

}


/*=========================================
TOP SHINE
=========================================*/

.intro-shine{

position:absolute;

top:-150px;

left:-150px;

width:350px;

height:350px;

background:

rgba(255,215,0,.12);

border-radius:50%;

filter:blur(90px);

animation:shineMove 8s infinite alternate;

}


@keyframes shineMove{

100%{

transform:

translate(180px,120px)

scale(1.5);

}

}


/*=========================================
BOTTOM SHINE
=========================================*/

.intro-shine2{

position:absolute;

right:-180px;

bottom:-180px;

width:450px;

height:450px;

background:

rgba(255,192,203,.18);

border-radius:50%;

filter:blur(120px);

animation:shineMove2 10s infinite alternate;

}


@keyframes shineMove2{

100%{

transform:

translate(-180px,-120px)

scale(1.4);

}

}


/*=========================================
LOADING TEXT
=========================================*/

.loading-text{

margin-top:50px;

font-size:18px;

letter-spacing:5px;

color:#FFD700;

animation:loadingBlink 1.5s infinite;

}


@keyframes loadingBlink{

0%,100%{

opacity:.4;

}

50%{

opacity:1;

}

}

/*==================================================
  intro.css
  PART 2 - Premium Cinematic Effects
==================================================*/


/*=========================================
  CINEMATIC CAMERA ZOOM
=========================================*/

#intro{

    animation:

    introCamera 5s ease forwards,

    introFadeOut 1.2s ease forwards 4.8s;

}

@keyframes introCamera{

0%{

transform:scale(1);

}

50%{

transform:scale(1.03);

}

100%{

transform:scale(1.08);

}

}


/*=========================================
  GOLDEN LIGHT RAYS
=========================================*/

.light-rays{

position:absolute;

inset:0;

pointer-events:none;

overflow:hidden;

}

.light-rays span{

position:absolute;

top:-40%;

left:50%;

width:4px;

height:180%;

background:

linear-gradient(

to bottom,

transparent,

rgba(255,215,0,.25),

transparent

);

filter:blur(2px);

transform-origin:center;

animation:rayMove 8s linear infinite;

}

.light-rays span:nth-child(1){

transform:rotate(-35deg);

}

.light-rays span:nth-child(2){

transform:rotate(-15deg);

}

.light-rays span:nth-child(3){

transform:rotate(0deg);

}

.light-rays span:nth-child(4){

transform:rotate(18deg);

}

.light-rays span:nth-child(5){

transform:rotate(38deg);

}

@keyframes rayMove{

0%{

opacity:0;

}

20%{

opacity:.7;

}

80%{

opacity:.7;

}

100%{

opacity:0;

}

}


/*=========================================
  TWINKLING STARS
=========================================*/

.star{

position:absolute;

width:4px;

height:4px;

border-radius:50%;

background:#fff;

box-shadow:

0 0 10px #fff,

0 0 20px gold;

animation:starBlink 2.5s infinite;

}

@keyframes starBlink{

0%,100%{

opacity:.2;

transform:scale(.5);

}

50%{

opacity:1;

transform:scale(1.8);

}

}


/*=========================================
  FLOATING GOLD PARTICLES
=========================================*/

.gold-particle{

position:absolute;

width:6px;

height:6px;

border-radius:50%;

background:#FFD700;

box-shadow:

0 0 15px rgba(255,215,0,.8);

animation:goldFloat linear infinite;

}

@keyframes goldFloat{

0%{

transform:

translateY(100vh)

scale(.3);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:

translateY(-20vh)

scale(1.5);

opacity:0;

}

}


/*=========================================
  LUXURY GLOW RING
=========================================*/

.glow-ring{

position:absolute;

width:300px;

height:300px;

border-radius:50%;

border:2px solid rgba(255,215,0,.18);

box-shadow:

0 0 30px rgba(255,215,0,.3);

animation:ringPulse 3s infinite;

}

@keyframes ringPulse{

0%{

transform:scale(.8);

opacity:.4;

}

100%{

transform:scale(1.3);

opacity:0;

}

}


/*=========================================
  SHIMMER EFFECT
=========================================*/

.intro-content::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transform:skewX(-20deg);

animation:shimmer 3s infinite;

}

@keyframes shimmer{

100%{

left:150%;

}

}


/*=========================================
  LOGO SPARK
=========================================*/

.logo-spark{

position:absolute;

width:12px;

height:12px;

border-radius:50%;

background:#FFD700;

box-shadow:

0 0 20px gold,

0 0 40px gold;

animation:sparkMove 2s infinite alternate;

}

@keyframes sparkMove{

0%{

transform:

translate(-40px,-20px);

}

100%{

transform:

translate(40px,30px);

}

}


/*=========================================
  HEART GLOW
=========================================*/

.intro-heart{

filter:

drop-shadow(0 0 10px #ff5f8f)

drop-shadow(0 0 20px #ff5f8f)

drop-shadow(0 0 40px #ff5f8f);

}


/*=========================================
  SOFT VIGNETTE
=========================================*/

#intro::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle,

transparent 40%,

rgba(0,0,0,.55) 100%);

pointer-events:none;

}


/*=========================================
  END GLOW BURST
=========================================*/

.end-burst{

position:absolute;

width:120px;

height:120px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.8),

rgba(255,215,0,.4),

transparent);

animation:burst 5s forwards;

}

@keyframes burst{

0%{

transform:scale(.2);

opacity:0;

}

80%{

opacity:1;

}

100%{

transform:scale(15);

opacity:0;

}

}


/*=========================================
  TEXT SHADOW IMPROVEMENT
=========================================*/

.intro-subtitle{

text-shadow:

0 0 10px rgba(255,255,255,.4),

0 0 20px rgba(255,215,0,.3);

}


/*=========================================
  CONTENT LAYER
=========================================*/

.intro-content{

position:relative;

z-index:10;

}


/*=========================================
  PREVENT SELECTION
=========================================*/

#intro{

user-select:none;

-webkit-user-select:none;

}

/*==================================================
  intro.css
  PART 3 - Final Premium Effects
==================================================*/


/*=========================================
  SAKURA PETALS
=========================================*/

.sakura{

position:absolute;

top:-80px;

font-size:24px;

pointer-events:none;

opacity:.9;

animation:sakuraFall linear forwards;

filter:

drop-shadow(0 0 8px rgba(255,192,203,.5));

}

@keyframes sakuraFall{

0%{

transform:

translateY(-100px)

translateX(0)

rotate(0deg)

scale(.6);

opacity:0;

}

15%{

opacity:1;

}

100%{

transform:

translateY(120vh)

translateX(180px)

rotate(720deg)

scale(1);

opacity:0;

}

}


/*=========================================
  ROSE PETALS
=========================================*/

.rose-petal{

position:absolute;

top:-60px;

font-size:22px;

pointer-events:none;

animation:roseFall linear forwards;

filter:

drop-shadow(0 0 12px rgba(255,80,120,.5));

}

@keyframes roseFall{

0%{

transform:

translateY(-80px)

rotate(0deg);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:

translateY(120vh)

translateX(-120px)

rotate(-540deg);

opacity:0;

}

}


/*=========================================
  FLOATING DUST
=========================================*/

.dust{

position:absolute;

width:3px;

height:3px;

border-radius:50%;

background:rgba(255,255,255,.9);

box-shadow:

0 0 10px rgba(255,255,255,.8);

animation:dustFloat linear infinite;

}

@keyframes dustFloat{

0%{

transform:

translateY(100vh)

scale(.2);

opacity:0;

}

30%{

opacity:1;

}

100%{

transform:

translateY(-20vh)

scale(1.4);

opacity:0;

}

}


/*=========================================
  SOFT FOG
=========================================*/

.intro-fog{

position:absolute;

bottom:-120px;

left:-20%;

width:140%;

height:300px;

background:

radial-gradient(circle,

rgba(255,255,255,.10),

transparent 70%);

filter:blur(50px);

animation:fogMove 18s ease-in-out infinite alternate;

}

@keyframes fogMove{

100%{

transform:

translateX(100px);

}

}


/*=========================================
  LUXURY FRAME
=========================================*/

.intro-frame{

position:absolute;

inset:30px;

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

border-radius:24px;

box-shadow:

0 0 25px rgba(255,215,0,.15);

pointer-events:none;

}


/*=========================================
  LIGHT ORBS
=========================================*/

.light-orb{

position:absolute;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.3),

transparent);

filter:blur(25px);

animation:orbMove 10s ease-in-out infinite alternate;

}

@keyframes orbMove{

100%{

transform:

translate(80px,-60px)

scale(1.4);

}

}


/*=========================================
  CINEMATIC END FLASH
=========================================*/

.intro-end-flash{

position:absolute;

inset:0;

background:white;

opacity:0;

pointer-events:none;

animation:endFlash 5s forwards;

}

@keyframes endFlash{

0%,85%{

opacity:0;

}

92%{

opacity:.6;

}

100%{

opacity:0;

}

}


/*=========================================
  FINAL TEXT FADE
=========================================*/

.intro-content{

animation:

zoomIn 2s ease,

contentFade 5s forwards;

}

@keyframes contentFade{

0%,80%{

opacity:1;

}

100%{

opacity:0;

}

}


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

#intro,
.intro-content,
.sakura,
.rose-petal,
.gold-particle,
.star,
.dust,
.light-orb{

will-change:

transform,

opacity;

}


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

@media (max-width:768px){

.intro-name{

font-size:48px;

}

.intro-subtitle{

font-size:16px;

letter-spacing:2px;

}

.intro-heart{

font-size:34px;

}

.intro-line{

width:180px;

}

.intro-frame{

inset:15px;

}

}


/*=========================================
  TABLET
=========================================*/

@media (min-width:769px) and (max-width:1024px){

.intro-name{

font-size:64px;

}

}


/*=========================================
  LARGE SCREENS
=========================================*/

@media (min-width:1600px){

.intro-name{

font-size:100px;

}

.intro-subtitle{

font-size:28px;

}

}


/*=========================================
  REDUCE MOTION SUPPORT
=========================================*/

@media (prefers-reduced-motion: reduce){

*{

animation:none !important;

transition:none !important;

}

}


/*==================================================
  END OF intro.css
==================================================*/