/*==================================================
PROJECT K&E PREMIUM V1.0
STYLE.CSS
PART-1
RESET + ROOT + BODY + TYPOGRAPHY
==================================================*/

:root{

    --white:#ffffff;
    --background:#f7f5f2;
    --text:#222222;
    --muted:#8b8b8b;

    --accent:#D94B5A;

    --glass:rgba(255,255,255,.24);
    --glass2:rgba(255,255,255,.42);

    --border:rgba(255,255,255,.55);

    --radius:34px;

    --blur:26px;

    --shadow:
        0 30px 60px rgba(0,0,0,.05),
        0 8px 25px rgba(0,0,0,.04);

    --transition:.55s cubic-bezier(.22,1,.36,1);

}

/*==================================================*/

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

/*==================================================*/

html{

scroll-behavior:smooth;
-webkit-text-size-adjust:100%;

}

/*==================================================*/

body{

background:var(--background);

color:var(--text);

font-family:"Montserrat",sans-serif;

overflow-x:hidden;

min-height:100vh;

-webkit-font-smoothing:antialiased;

text-rendering:optimizeLegibility;

background-image:

radial-gradient(circle at top left,
rgba(255,255,255,.95),
transparent 42%),

radial-gradient(circle at top right,
rgba(255,255,255,.65),
transparent 45%),

linear-gradient(
180deg,
#faf8f6,
#f4f1ed
);

}

/*==================================================*/

::selection{

background:var(--accent);

color:#fff;

}

/*==================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f0f0f0;

}

::-webkit-scrollbar-thumb{

background:#c8c8c8;

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:#a8a8a8;

}

/*==================================================*/

img{

display:block;

max-width:100%;

-webkit-user-drag:none;

user-select:none;

}

/*==================================================*/

video{

display:block;

width:100%;

}

/*==================================================*/

button{

font:inherit;

background:none;

border:none;

cursor:pointer;

outline:none;

}

/*==================================================*/

a{

color:inherit;

text-decoration:none;

}

/*==================================================*/

main{

max-width:1180px;

margin:auto;

padding:120px 26px 80px;

}

/*==================================================*/

section{

margin-bottom:90px;

position:relative;

}

/*==================================================*/

.sectionTitle{

font-family:"Cormorant Garamond",serif;

font-size:52px;

font-weight:400;

text-align:center;

color:#181818;

}

.sectionNames{

font-family:"Parisienne",cursive;

font-size:74px;

font-weight:400;

text-align:center;

line-height:1.1;

}

.sectionDescription{

max-width:640px;

margin:20px auto 0;

text-align:center;

line-height:1.9;

color:var(--muted);

}

.eyebrow{

text-align:center;

font-size:12px;

letter-spacing:4px;

text-transform:uppercase;

color:#9b9b9b;

margin-bottom:14px;

}

.divider{

width:90px;

height:1px;

margin:34px auto;

background:

linear-gradient(
90deg,
transparent,
rgba(170,170,170,.75),
transparent
);

}
/*==================================================
PROJECT K&E PREMIUM V1.0
STYLE.CSS
PART-2
INTRO + WELCOME + VIDEOS
==================================================*/

#intro{

position:fixed;

inset:0;

z-index:99999;

background:#ffffff;

overflow:hidden;

transition:

opacity .9s ease,

visibility .9s ease;

}

#intro.hide{

opacity:0;

visibility:hidden;

pointer-events:none;

}

/*==================================================*/

#welcomeScreen{

position:fixed;

inset:0;

width:100vw;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:#ffffff;

z-index:100000;

transition:

opacity .8s ease,

visibility .8s ease;

}

#welcomeScreen.hide{

opacity:0;

visibility:hidden;

}

/*==================================================*/

.welcomeContent{

text-align:center;

animation:fadeUp 1.4s ease;

}

.welcomeSmall{

display:block;

font-size:13px;

letter-spacing:6px;

text-transform:uppercase;

color:#999999;

margin-bottom:18px;

}

.welcomeNames{

font-family:"Parisienne",cursive;

font-size:82px;

font-weight:400;

color:#1d1d1d;

}

.welcomeTitle{

margin-top:20px;

letter-spacing:4px;

font-size:13px;

text-transform:uppercase;

color:#8b8b8b;

}

/*==================================================*/

#introVideo1,

#introVideo2{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}

#introVideo2{

display:none;

}

/*==================================================*/

.videoOverlay{

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

rgba(0,0,0,.08),

rgba(0,0,0,.18)

);

z-index:2;

}

/*==================================================*/

/*==================================================*/

.touchHeart{

width:88px;

height:88px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:

linear-gradient(

145deg,

rgba(255,255,255,.40),

rgba(255,255,255,.16)

);

border:1px solid rgba(255,255,255,.55);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

box-shadow:

0 20px 45px rgba(0,0,0,.08),

inset 0 1px 0 rgba(255,255,255,.90);

animation:floatSeal 3.8s ease-in-out infinite;

}

.touchHeart span{

font-size:42px;

color:#D94B5A;

}

/*==================================================*/

.touchText{

font-size:12px;

letter-spacing:4px;

text-transform:uppercase;

color:#ffffff;

text-shadow:0 2px 10px rgba(0,0,0,.25);

}

/*==================================================*/

.scrollIndicator{

position:absolute;

left:50%;

bottom:30px;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:12px;

opacity:0;

pointer-events:none;

transition:.6s;

z-index:15;

}

.scrollIndicator.show{

opacity:1;

}

.scrollIndicator span{

font-size:11px;

letter-spacing:4px;

text-transform:uppercase;

color:#ffffff;

}

.scrollIndicator::after{

content:"";

width:22px;

height:38px;

border:1px solid rgba(255,255,255,.85);

border-radius:20px;

position:relative;

}

.scrollIndicator::before{

content:"";

position:absolute;

bottom:10px;

width:4px;

height:8px;

border-radius:999px;

background:#ffffff;

animation:scrollMouse 2s infinite;

}

/*==================================================*/

@keyframes scrollMouse{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(14px);

opacity:0;

}

}

/*==================================================*/

@keyframes floatSeal{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/*==================================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:none;

}

}
/*==================================================
PROJECT K&E PREMIUM V1.0
STYLE.CSS
PART-3
GLASS CARD SYSTEM
==================================================*/

.card{

position:relative;

overflow:hidden;

isolation:isolate;

padding:70px 60px;

border-radius:34px;

background:

linear-gradient(

145deg,

rgba(255,255,255,.46),

rgba(255,255,255,.18)

);

border:1px solid rgba(255,255,255,.60);

backdrop-filter:blur(28px) saturate(180%);

-webkit-backdrop-filter:blur(28px) saturate(180%);

box-shadow:

0 30px 80px rgba(0,0,0,.06),

0 10px 25px rgba(0,0,0,.04),

inset 0 1px 0 rgba(255,255,255,.95);

transition:

transform .55s cubic-bezier(.22,1,.36,1),

box-shadow .55s cubic-bezier(.22,1,.36,1);

}

/*==================================================*/

.card:hover{

transform:translateY(-8px);

box-shadow:

0 40px 95px rgba(0,0,0,.08),

0 15px 30px rgba(0,0,0,.05),

inset 0 1px 0 rgba(255,255,255,.96);

}

/*==================================================*/

.cardInner{

position:relative;

z-index:10;

}

/*==================================================*/

.glassReflection{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

border-radius:inherit;

}

/*==================================================*/

.glassReflection::before{

content:"";

position:absolute;

top:-60%;

left:-30%;

width:180%;

height:150%;

background:

linear-gradient(

130deg,

rgba(255,255,255,.95) 0%,

rgba(255,255,255,.55) 20%,

rgba(255,255,255,.18) 42%,

transparent 72%

);

transform:rotate(-12deg);

opacity:.9;

}

/*==================================================*/

.glassReflection::after{

content:"";

position:absolute;

inset:2px;

border-radius:32px;

border-top:1px solid rgba(255,255,255,.95);

border-left:1px solid rgba(255,255,255,.48);

border-right:1px solid rgba(255,255,255,.18);

border-bottom:1px solid rgba(255,255,255,.08);

}

/*==================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:

opacity .9s ease,

transform .9s ease;

}

.reveal.show{

opacity:1;

transform:none;

}

/*==================================================*/

.invitationDetails{

margin-top:20px;

display:flex;

flex-direction:column;

gap:8px;

}

/*==================================================*/

.infoItem{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 0;

border-bottom:1px solid rgba(0,0,0,.05);

}

.infoItem:last-child{

border:none;

}

/*==================================================*/

.infoLabel{

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#9b9b9b;

}

.infoItem strong{

font-size:19px;

font-weight:500;

color:#222;

}

/*==================================================*/

.buttonGroup{

display:flex;

gap:18px;

margin-top:38px;

}

/*==================================================*/

.primaryButton,

.secondaryButton{

position:relative;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

flex:1;

height:58px;

border-radius:999px;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

transition:all .45s ease;

}

/*==================================================*/

.primaryButton{

background:

linear-gradient(

145deg,

rgba(255,255,255,.48),

rgba(255,255,255,.18)

);

border:1px solid rgba(255,255,255,.65);

backdrop-filter:blur(22px);

-webkit-backdrop-filter:blur(22px);

color:#1d1d1d;

box-shadow:

0 12px 30px rgba(0,0,0,.05);

}

/*==================================================*/

.secondaryButton{

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

border:1px solid rgba(255,255,255,.50);

backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);

color:#444;

}

/*==================================================*/

.primaryButton::before,

.secondaryButton::before{

content:"";

position:absolute;

top:-70%;

left:-45%;

width:170%;

height:180%;

background:

linear-gradient(

120deg,

transparent,

rgba(255,255,255,.80),

transparent

);

transform:rotate(-18deg);

transition:1s;

}

/*==================================================*/

.primaryButton:hover::before,

.secondaryButton:hover::before{

left:120%;

}

/*==================================================*/

.primaryButton:hover,

.secondaryButton:hover{

transform:translateY(-4px);

}

/*==================================================*/

.primaryButton:active,

.secondaryButton:active{

transform:scale(.98);

}

/*==================================================*/

@media(max-width:768px){

.card{

padding:42px 24px;

}

.infoItem{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

.buttonGroup{

flex-direction:column;

}

}
/*==================================================
PROJECT K&E PREMIUM V1.0
STYLE.CSS
PART-4
PREMIUM COUNTDOWN
==================================================*/

.countdownDate{

margin-top:12px;

text-align:center;

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

color:#9b9b9b;

}

/*==================================================*/

.countdownGrid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:24px;

margin-top:45px;

}

/*==================================================*/

.glassBox{

position:relative;

overflow:hidden;

isolation:isolate;

padding:38px 22px;

border-radius:30px;

background:

linear-gradient(

160deg,

rgba(255,255,255,.58) 0%,

rgba(255,255,255,.24) 55%,

rgba(255,255,255,.14) 100%

);

border:1px solid rgba(255,255,255,.70);

backdrop-filter:blur(34px) saturate(200%);

-webkit-backdrop-filter:blur(34px) saturate(200%);

box-shadow:

0 22px 55px rgba(0,0,0,.05),

inset 0 1px 0 rgba(255,255,255,.98),

inset 0 -8px 20px rgba(255,255,255,.18);

transition:

transform .45s ease,

box-shadow .45s ease;

}

/*==================================================*/
/* KRİSTAL CAM YANSIMASI */
/*==================================================*/

.glassBox::before{

content:"";

position:absolute;

top:-55%;

left:-25%;

width:170%;

height:150%;

background:

linear-gradient(

130deg,

rgba(255,255,255,.98),

rgba(255,255,255,.62),

rgba(255,255,255,.22),

transparent

);

transform:rotate(-12deg);

opacity:.95;

pointer-events:none;

}

.glassBox::after{

content:"";

position:absolute;

inset:2px;

border-radius:28px;

border-top:1px solid rgba(255,255,255,.95);

border-left:1px solid rgba(255,255,255,.50);

border-right:1px solid rgba(255,255,255,.18);

border-bottom:1px solid rgba(255,255,255,.10);

pointer-events:none;

}

/*==================================================*/

.glassBox>*{

position:relative;

z-index:2;

}

/*==================================================*/

.glassBox:hover{

transform:

translateY(-8px)

scale(1.02);

box-shadow:

0 30px 70px rgba(0,0,0,.08),

inset 0 1px 0 rgba(255,255,255,.98);

}

/*==================================================*/

.countNumber{

display:block;

font-family:"Cormorant Garamond",serif;

font-size:82px;

font-weight:500;

line-height:1;

text-align:center;

font-variant-numeric:tabular-nums;

color:#1b1b1b;

text-shadow:

0 1px 0 rgba(255,255,255,.75);

transition:

transform .35s ease,

opacity .35s ease;

}

/*==================================================*/

.countNumber.flip{

transform:

rotateX(90deg);

opacity:.2;

}

/*==================================================*/

.countSeparator{

display:block;

width:46px;

height:1px;

margin:18px auto;

background:

linear-gradient(

90deg,

transparent,

rgba(170,170,170,.9),

transparent

);

}

/*==================================================*/

.countLabel{

display:block;

text-align:center;

font-size:11px;

letter-spacing:3px;

text-transform:uppercase;

color:#9d9d9d;

}

/*==================================================*/

.timelineArea{

margin-top:50px;

}

/*==================================================*/

.timeline{

position:relative;

height:3px;

border-radius:999px;

background:

linear-gradient(

90deg,

#ececec,

#d8d8d8,

#ececec

);

overflow:visible;

}

/*==================================================*/

#timelineFill{

position:absolute;

left:0;

top:0;

height:100%;

width:0;

border-radius:999px;

background:#D94B5A;

transition:width .8s ease;

}

/*==================================================*/

#timelineHeart{

position:absolute;

top:-15px;

left:0;

transform:translateX(-50%);

width:28px;

height:28px;

transition:left .8s cubic-bezier(.22,1,.36,1);

z-index:10;

}

#timelineHeart svg{

width:28px;

height:28px;

display:block;

}

#timelineHeart path{

fill:none;

stroke:#D94B5A;

stroke-width:1.8;

stroke-linecap:round;

stroke-linejoin:round;

filter:

drop-shadow(0 2px 8px rgba(255,255,255,.9));

}

/*==================================================*/

.timelineLabels{

display:flex;

justify-content:space-between;

margin-top:22px;

}

.timelineLabel{

display:flex;

flex-direction:column;

gap:4px;

}

.timelineLabelEnd{

text-align:right;

}

.timelineLabel strong{

font-size:12px;

letter-spacing:2px;

color:#666;

}

.timelineLabel span{

font-size:10px;

letter-spacing:2px;

text-transform:uppercase;

color:#b3b3b3;

}

/*==================================================*/

.countdownMessage{

margin-top:36px;

max-width:600px;

margin-left:auto;

margin-right:auto;

text-align:center;

line-height:2;

font-style:italic;

color:#777;

}

/*==================================================*/

@media(max-width:768px){

.countdownGrid{

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.glassBox{

padding:28px 18px;

}

.countNumber{

font-size:58px;

}

.timelineArea{

margin-top:35px;

}

}
/*==================================================
PROJECT K&E PREMIUM V1.0
STYLE.CSS
PART-5
WEATHER + LOCATION + CALENDAR
==================================================*/


/*==================================================
WEATHER
==================================================*/

.weatherGlass{

display:flex;

align-items:center;

gap:34px;

padding:34px;

margin-top:26px;

border-radius:32px;

background:

linear-gradient(

150deg,

rgba(255,255,255,.58),

rgba(255,255,255,.22)

);

border:1px solid rgba(255,255,255,.65);

backdrop-filter:blur(34px);

-webkit-backdrop-filter:blur(34px);

box-shadow:

0 24px 60px rgba(0,0,0,.05),

inset 0 1px 0 rgba(255,255,255,.96);

position:relative;

overflow:hidden;

}

.weatherGlass::before{

content:"";

position:absolute;

top:-55%;

left:-30%;

width:170%;

height:150%;

background:

linear-gradient(

130deg,

rgba(255,255,255,.92),

rgba(255,255,255,.45),

transparent

);

transform:rotate(-12deg);

}

.weatherGlass>*{

position:relative;

z-index:2;

}

.weatherIconWrap{

width:110px;

height:110px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:

rgba(255,255,255,.28);

backdrop-filter:blur(18px);

}

#weatherIcon{

font-size:60px;

}

.weatherContent{

flex:1;

}

.weatherTemp{

display:block;

font-family:"Cormorant Garamond",serif;

font-size:72px;

line-height:1;

}

.weatherDesc{

margin-top:12px;

line-height:1.8;

color:#666;

}

.weatherUpdate{

display:block;

margin-top:18px;

font-size:11px;

letter-spacing:3px;

text-transform:uppercase;

color:#999;

}


/*==================================================
LOCATION
==================================================*/

.locationGlass{

display:flex;

align-items:center;

gap:28px;

padding:32px;

margin-top:24px;

border-radius:32px;

background:

linear-gradient(

145deg,

rgba(255,255,255,.55),

rgba(255,255,255,.20)

);

border:1px solid rgba(255,255,255,.65);

backdrop-filter:blur(30px);

-webkit-backdrop-filter:blur(30px);

position:relative;

overflow:hidden;

}

.locationGlass::before{

content:"";

position:absolute;

top:-55%;

left:-35%;

width:180%;

height:150%;

background:

linear-gradient(

135deg,

rgba(255,255,255,.90),

rgba(255,255,255,.35),

transparent

);

transform:rotate(-12deg);

}

.locationGlass>*{

position:relative;

z-index:2;

}

.locationPin{

width:84px;

height:84px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

background:

rgba(255,255,255,.32);

}

.locationContent{

flex:1;

}

.locationContent h3{

font-size:28px;

font-weight:500;

margin-bottom:10px;

}

.locationContent p{

color:#777;

line-height:1.8;

}


/*==================================================
CALENDAR
==================================================*/

.calendarGlass{

width:260px;

margin:42px auto;

border-radius:30px;

overflow:hidden;

background:

linear-gradient(

150deg,

rgba(255,255,255,.60),

rgba(255,255,255,.20)

);

border:1px solid rgba(255,255,255,.65);

backdrop-filter:blur(30px);

-webkit-backdrop-filter:blur(30px);

box-shadow:

0 24px 60px rgba(0,0,0,.05);

position:relative;

}

.calendarGlass::before{

content:"";

position:absolute;

top:-60%;

left:-30%;

width:170%;

height:160%;

background:

linear-gradient(

130deg,

rgba(255,255,255,.90),

rgba(255,255,255,.35),

transparent

);

transform:rotate(-12deg);

}

.calendarGlass>*{

position:relative;

z-index:2;

}

.calendarMonth{

padding:18px;

text-align:center;

letter-spacing:5px;

font-size:12px;

background:

rgba(255,255,255,.34);

}

.calendarNumber{

padding:28px 0 18px;

text-align:center;

font-family:"Cormorant Garamond",serif;

font-size:96px;

line-height:1;

color:#1d1d1d;

}

.calendarDay{

text-align:center;

font-size:18px;

margin-bottom:8px;

}

.calendarTime{

padding:18px;

text-align:center;

letter-spacing:3px;

font-size:12px;

color:#888;

border-top:1px solid rgba(0,0,0,.05);

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:768px){

.weatherGlass{

flex-direction:column;

text-align:center;

}

.locationGlass{

flex-direction:column;

text-align:center;

}

.calendarGlass{

width:100%;

max-width:250px;

}

.weatherTemp{

font-size:56px;

}

.locationContent h3{

font-size:24px;

}

}
/*==================================================
PROJECT K&E PREMIUM V1.0
STYLE.CSS
PART-6
MEMORIES + CLOSING + MUSIC + RESPONSIVE
==================================================*/


/*==================================================
MEMORIES
==================================================*/

.qrGlass{

width:240px;

height:240px;

margin:42px auto;

padding:18px;

border-radius:30px;

background:

linear-gradient(

145deg,

rgba(255,255,255,.58),

rgba(255,255,255,.22)

);

border:1px solid rgba(255,255,255,.65);

backdrop-filter:blur(30px);

-webkit-backdrop-filter:blur(30px);

box-shadow:

0 24px 60px rgba(0,0,0,.05),

inset 0 1px 0 rgba(255,255,255,.96);

position:relative;

overflow:hidden;

}

.qrGlass::before{

content:"";

position:absolute;

top:-60%;

left:-30%;

width:170%;

height:160%;

background:

linear-gradient(

130deg,

rgba(255,255,255,.92),

rgba(255,255,255,.42),

transparent

);

transform:rotate(-12deg);

}

.qrGlass img{

position:relative;

z-index:2;

width:100%;

height:100%;

border-radius:18px;

background:#fff;

}

/*==================================================*/


/* QR KODU - GÖRÜNÜR VE TIKLANABİLİR */
.qrGlass{
  position:relative;
  z-index:5;
}
.qrGlass::before{
  z-index:1;
  pointer-events:none;
}
.qrLink{
  position:relative;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  opacity:1 !important;
  visibility:visible !important;
}
.qrGlass img#qrCode{
  position:relative;
  z-index:3;
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain;
  opacity:1 !important;
  visibility:visible !important;
  background:#ffffff;
}

.memoryButton{

margin-top:18px;

}

/*==================================================*/

.memoryStats{

display:flex;

justify-content:center;

align-items:center;

gap:36px;

margin-top:48px;

}

.memoryItem{

text-align:center;

}

.memoryItem strong{

display:block;

font-family:"Cormorant Garamond",serif;

font-size:58px;

font-weight:500;

color:#1b1b1b;

}

.memoryItem span{

display:block;

margin-top:10px;

font-size:11px;

letter-spacing:3px;

text-transform:uppercase;

color:#9a9a9a;

}

.memoryDivider{

width:1px;

height:60px;

background:rgba(0,0,0,.08);

}

/*==================================================
CLOSING
==================================================*/

.closingCard{

text-align:center;

}

.closingText{

max-width:560px;

margin:auto;

line-height:2;

font-size:18px;

color:#666;

}

.closingLove{

display:block;

margin-top:24px;

font-size:12px;

letter-spacing:5px;

text-transform:uppercase;

color:#999;

}

.closingNames{

margin-top:18px;

font-family:"Parisienne",cursive;

font-size:76px;

font-weight:400;

line-height:1.1;

}

.closingDate{

margin-top:18px;

letter-spacing:5px;

font-size:13px;

color:#999;

}

/*==================================================
MUSIC BUTTON
==================================================*/

#musicToggle{

position:fixed;

right:26px;

bottom:26px;

width:62px;

height:62px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:

linear-gradient(

145deg,

rgba(255,255,255,.56),

rgba(255,255,255,.22)

);

border:1px solid rgba(255,255,255,.70);

backdrop-filter:blur(26px);

-webkit-backdrop-filter:blur(26px);

box-shadow:

0 18px 40px rgba(0,0,0,.08);

z-index:999;

transition:all .45s ease;

}

#musicToggle:hover{

transform:translateY(-4px);

}

#musicToggle.playing .musicIcon{

animation:musicRotate 6s linear infinite;

}

.musicIcon{

font-size:22px;

color:#222;

}

.musicPulse{

position:absolute;

inset:-6px;

border-radius:50%;

border:1px solid rgba(255,255,255,.45);

animation:musicPulse 2.5s infinite;

}

/*==================================================
SCROLL PROGRESS
==================================================*/

#scrollProgress{

position:fixed;

left:0;

top:0;

height:3px;

width:0;

background:#D94B5A;

z-index:999999;

}

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

@keyframes musicRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes musicPulse{

0%{

transform:scale(1);

opacity:.7;

}

100%{

transform:scale(1.6);

opacity:0;

}

}

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

@media(max-width:768px){

main{

padding:90px 18px 50px;

}

section{

margin-bottom:60px;

}

.memoryStats{

flex-direction:column;

gap:18px;

}

.memoryDivider{

width:70px;

height:1px;

}

.qrGlass{

width:210px;

height:210px;

}

.closingNames{

font-size:56px;

}

#musicToggle{

right:18px;

bottom:18px;

width:56px;

height:56px;

}

}

/*==================================================
SMALL DEVICES
==================================================*/

@media(max-width:480px){

.sectionTitle{

font-size:34px;

}

.sectionNames{

font-size:54px;

}

.closingNames{

font-size:48px;

}

.memoryItem strong{

font-size:46px;

}

.weatherTemp{

font-size:48px;

}

.calendarNumber{

font-size:74px;

}

.countNumber{

font-size:50px;

}

}


/*==================================================
INTRO END
==================================================*/

#introEnd{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:18px;

background:rgba(0,0,0,.12);

backdrop-filter:blur(3px);

-webkit-backdrop-filter:blur(3px);

opacity:0;

visibility:hidden;

pointer-events:none;

transition:1s;

z-index:40;

}

#introEnd.show{

opacity:1;

visibility:visible;

pointer-events:auto;

}

#introEnd h1{

font-family:"Parisienne",cursive;

font-size:88px;

font-weight:400;

color:#ffffff;

text-shadow:0 8px 30px rgba(0,0,0,.35);

}

#introEnd span{

font-size:14px;

letter-spacing:5px;

text-transform:uppercase;

color:#ffffff;

}

#introEnd .scrollIndicator{

position:relative;

left:auto;

bottom:auto;

transform:none;

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

margin-top:50px;

opacity:1;

pointer-events:none;

}

#introEnd .scrollIndicator small{

font-size:12px;

letter-spacing:4px;

color:#ffffff;

text-transform:uppercase;

}

#introEnd .scrollIndicator strong{

font-size:18px;

letter-spacing:6px;

color:#ffffff;

font-weight:500;

}

#introEnd .arrow{

margin-top:10px;

font-size:34px;

color:#ffffff;

animation:introArrow 1.8s ease-in-out infinite;

}

@keyframes introArrow{

0%,100%{

transform:translateY(0);

opacity:.7;

}

50%{

transform:translateY(12px);

opacity:1;

}

}
/*==================================================
END OF STYLE.CSS
PROJECT K&E PREMIUM V1.0
==================================================*/


/*==================================================
FINAL INTRO FLOW OVERRIDES
==================================================*/


#introVideo2{display:none;opacity:1;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:8;}
#introEnd{z-index:30;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.22));}
#introEnd .scrollIndicator{z-index:auto;animation:none;}
@media(max-width:480px){
    #introEnd h1{font-size:58px;}
    #introEnd span{font-size:11px;letter-spacing:4px;}
    #introEnd .scrollIndicator{margin-top:36px;}
    #introEnd .scrollIndicator strong{font-size:15px;letter-spacing:5px;}
}

/* FINAL WELCOME SCREEN RESTORE */
#welcomeScreen{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100vh !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:2147483647 !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:none !important;
  background:#f6f4f1 !important;
  transition:opacity 1s ease, visibility 1s ease !important;
}
#welcomeScreen.welcomeHide{
  opacity:0 !important;
  visibility:hidden !important;
}
#welcomeScreen .welcomeInner{
  text-align:center;
  transform:translateY(-2vh);
}
#welcomeScreen .welcomeSmall{
  font-size:12px;
  letter-spacing:4px;
  margin-bottom:20px;
}
#welcomeScreen .welcomeNames{
  font-family:"Parisienne", cursive;
  font-size:clamp(54px, 12vw, 88px);
  line-height:1.1;
}
#welcomeScreen .welcomeNames span{
  font-family:inherit;
  font-size:.72em;
  margin:0 .12em;
}
#welcomeScreen .welcomeTitle{
  margin-top:18px;
  font-size:14px;
  letter-spacing:5px;
  text-transform:uppercase;
}


/* FINAL INTRO SCROLL READABILITY */
#introEnd{
  background:linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.28)) !important;
}
#introEnd .scrollIndicator{
  opacity:1 !important;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.72));
}
#introEnd .scrollIndicator small{
  color:#fff !important;
  opacity:1 !important;
  font-weight:700 !important;
  letter-spacing:4px !important;
  text-shadow:0 2px 10px rgba(0,0,0,.9) !important;
}
#introEnd .scrollIndicator strong{
  color:#fff !important;
  opacity:1 !important;
  font-weight:700 !important;
  letter-spacing:6px !important;
  text-shadow:0 2px 12px rgba(0,0,0,.95) !important;
}
#introEnd .arrow{
  color:#fff !important;
  opacity:1 !important;
  font-weight:700 !important;
  text-shadow:0 2px 12px rgba(0,0,0,.95) !important;
}


/* FINAL MOBILE VIDEO CONTROL SUPPRESSION */
#introVideo1::-webkit-media-controls,
#introVideo1::-webkit-media-controls-enclosure,
#introVideo1::-webkit-media-controls-panel,
#introVideo1::-webkit-media-controls-play-button,
#introVideo2::-webkit-media-controls,
#introVideo2::-webkit-media-controls-enclosure,
#introVideo2::-webkit-media-controls-panel,
#introVideo2::-webkit-media-controls-play-button{
    display:none !important;
    -webkit-appearance:none !important;
    opacity:0 !important;
}
#introVideo1,
#introVideo2{
    pointer-events:none !important;
}