/* Main layout */
:root{
	--bg: #E5E1D8;
	--accent: #465f3e;
	--text-color: #605843;
}
* {
	margin:0;
	padding:0;
}
*{box-sizing:border-box}

/* Ensure images scale to their container on small devices */
img{max-width:100%;}
html,body{height:100%}
body{
	min-height:100vh;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.8)),
                url('../IMG/bgtexture.JPG') repeat-y;
    color:var(--text);
    max-width: 100vw;
    overflow-x:hidden;
	overflow-y: hidden;
}
@media (max-width: 450px){
    html, body {
        overflow-x: hidden;
		overflow-y: hidden;
    }
}

.container{
	display: flex;
	flex-direction:column;
	align-items:center;
	width:100%;
	transform: translateY(-25px);
	transform: translate(-50%, -50%);
	max-width:100vw;
	animation: containerSlideUp 1.2s ease-out forwards;
}

@keyframes fadeInBody{
	0%{opacity:0}
	100%{opacity:1}
}

@keyframes containerSlideUp{
	0%{opacity:0;transform:translateY(20px)}
	100%{opacity:1;transform:translateY(0)}
}

p.title-text{
	font-family:'Kapakana', cursive;
	font-size:clamp(56px,14.88vw,64px);
	margin:100px 0 30px;
	color:var(--text-color);
	text-align:center;
	animation: titleFadeIn 0.7s ease-out 0.3s both;
	opacity:0;
	text-shadow:1px 1px 2px rgba(0,0,0,0.05);
	font-weight:400;
	letter-spacing:1px;
}

.Latter{ 
	width:clamp(280px, 90vw, var(--letter-width));
	min-height:var(--letter-height);
	text-align:center; 
	margin:10px auto 0;
	padding:10px 20px 0;
	animation: letterSlideUp 0.9s ease-out cubic-bezier(0.23, 1, 0.320, 1) forwards;
	opacity:0;
	transform-style:preserve-3d;
}

.Latter h2{
	font-family:'Kapakana', cursive;
	font-size:clamp(48px,14.88vw,64px);
	color: #605843;
	font-weight:400;
	letter-spacing:2px;

}

.Latter p.date-text{
	font-family:'Kapakana', cursive;
	font-size:clamp(32px,11.16vw,48px);
	color: #605843;
	opacity:0.9;
	margin:18px 0 4px;
	font-weight:400;
	letter-spacing:1px;
}

@keyframes letterSlideUp{
	0%{
		opacity:0;
		transform:translateY(40px) perspective(600px) rotateX(20deg);
		filter:blur(6px)
	}
	100%{
		opacity:1;
		transform:translateY(0) perspective(600px) rotateX(0deg);
		filter:blur(0)
	}
}

.mail_box_wrapper{
	position: relative;
	width:100%;
	display:flex;
	align-items: center;
	text-align: center;
	justify-content:center;
	animation: envelopeContainerFadeIn 0.8s ease-out0.5s both;
	/* limit 3D perspective to envelope area to reduce page repainting */
	perspective:1200px;
	opacity:0;
}

.mail_box{
	width: clamp(360px, 90vw, 353px);
	position:relative;
	margin:2px auto;
	align-items: center;
	text-align: center;
	justify-content:center;
	image-rendering:crisp-edges;
	transform-style:preserve-3d;
	animation: mailBox3DFlip 1.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
	opacity:0;
	transform-origin:center;
}
@keyframes mailBox3DFlip{
	0%{
		opacity:0;
		transform:translateY(30px);
	}
	100%{
		opacity:1;
		transform:translateY(0);
	}
}

@keyframes titleFadeIn{
	0%{opacity:0;transform:translateY(-20px);filter:blur(5px)}
	100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

@keyframes envelopeContainerFadeIn{
	0%{opacity:0}
	100%{opacity:1}
  }


.mail_box img{max-width:100%;display: block;border-radius:15px}
.mail_box .mail{filter:brightness(0.98);box-shadow:0 8px 24px rgba(0,0,0,0.12);transition:transform 0.3s ease}

/* reduce flicker by hiding backface and hinting GPU compositing */
.mail_box, .mail_box img, .mail_box .mail {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.link_seal {
	animation: sealBounceIn 0.0rc  s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	transition:transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease;
}

.seal{
	position:absolute;
	left:50%;
	top:48%;
	width:clamp(60px,25vw,100px);
	cursor:pointer;
	touch-action:manipulation;
	-webkit-tap-highlight-color:transparent;
	z-index:5;
	transform-style:preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
	transform: translateZ(0);
	filter:drop-shadow(0 8px 16px rgba(0,0,0,0.25))
}

@keyframes sealBounceIn{
	0%{
		opacity:0;
		transform: scale(0) rotateX(180deg) rotateY(180deg)translate(-50%,-50%);
		filter:drop-shadow(0 0px 0px rgba(0,0,0,0))
	}
	100%{
		opacity:1;
		transform:translate(-50%,-50%) scale(1) rotateX(0deg) rotateY(0deg);
		filter:drop-shadow(0 8px 16px rgba(0,0,0,0.25))
	}
}

/* gentle floating motion to make the seal feel alive */
.seal--float{
	animation: float 4.6s ease-in-out infinite;
}

.seal:hover{ 
	transform:translate(-50%,-50%) scale(1.6) rotateY(8deg);
	filter:drop-shadow(0 8px 16px rgba(0,0,0,0.25))
}

@keyframes float{
	0%{transform:translate(-50%,-50%) rotateY(-10deg) rotateZ(0deg) scale(1)}
	50%{transform:translate(-50%,-50%) rotateY(1deg) rotateZ(2deg) translateY(-4px) scale(1.15)}
	100%{transform:translate(-50%,-50%) rotateY(-8deg) rotateZ(0deg) scale(1)}
}

.seal--clicked{
	animation: sealPress 0.3s ease forwards;
}

@keyframes sealPress{
	0%{transform:translate(-50%,-50%) scale(1)}
	40%{transform:translate(-50%,-44%) scale(.96)}
	70%{transform:translate(-50%,-48%) scale(1.03)}
	100%{transform:translate(-50%,-48%) scale(1)}
}



/* patel flower falling elements */
.patel_flower{
	display:none;
	position:fixed;
	left:50%;
	top:8vh;
	transform:translateX(-50%);
	width:clamp(80px,22vw,140px);
	z-index:8;
	opacity:0;
	filter:drop-shadow(0 4px 12px rgba(96, 88, 67, 0.2));
}

@keyframes fadeInUp{
	0%{opacity:0;transform:translateY(20px)}
	100%{opacity:1;transform:translateY(0)}
}

@keyframes fadeInDown{
	0%{opacity:0;transform:translateX(-50%) translateY(-20px)}
	100%{opacity:1;transform:translateX(-50%) translateY(0)}
}

.patel-drop{
	display:block;
	animation: patelDrop 1.6s cubic-bezier(.2,.9,.3,1) forwards;
}

@keyframes patelDrop{
	0%{
		transform:translateX(-50%) translateY(-12vh) scale(1.05);
		filter:grayscale(0.2) contrast(1.1) hue-rotate(180deg) saturate(0.9);
		opacity:1;
		mix-blend-mode:screen;
	}
	50%{
		transform:translateX(-50%) translateY(18vh) scale(1);
		filter:hue-rotate(140deg) saturate(0.9) contrast(1);
		opacity:0.5;
	}
	100%{
		transform:translateX(-50%) translateY(110vh) scale(.98);
		opacity:0;
		filter:none;
	}
}
.falling{
	position:fixed;
	top:-120px;
	width:clamp(36px,6vw,72px);
	pointer-events:none;
	z-index:2;
	opacity:0.95;
	animation-name: fall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes fall{
	0%{transform:translateY(-160px) rotate(0deg); opacity:0}
	50%{opacity:1}
	100%{transform:translateY(110vh) rotate(360deg); opacity:0}

}

/* decorative flowers on envelope corners */
.flower_top{
	position:absolute;
	left:-40px;
	top:-85px;
	width:180px;
	animation-delay: 1s;
	animation: flowerFadeInLeft 1.2s ease-out 0.8s both;
	opacity:0;
	filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));
		z-index:4;
	transform-style:preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
	transform: scaleX(-1);
}

.flower_bottom{
	position:absolute;
	right:-44px;
	bottom:-100px;
	width:140px;
	animation-delay: 1s;
	animation: flowerFadeInRight 1.2s ease-out 0.8s both;
	opacity:0;
	filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));
		z-index:4;
	transform-style:preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform, opacity;
	transform: translateZ(0);
}

@keyframes flowerFadeInLeft{
	0%{opacity:0;transform:translateY(-100px)}
	100%{opacity:1;transform:translateY(0)}
}

@keyframes flowerFadeInRight{
	0%{opacity:0;transform:translateY(100px)}
	100%{opacity:1;transform:translateY(0)}
}

/* ripple created when clicking seal */
.seal-ripple{
	position:absolute;
	width:20px;height:20px;border-radius:50%;
	background: rgba(229, 225, 216, 0.95);
	transform:translate(-50%,-50%) scale(0);
	z-index:4; pointer-events:none;
	box-shadow: 0 4px 18px rgba(96, 88, 67, 0.2);
	animation:ripple .7s ease forwards;
}

@keyframes ripple{
	0%{opacity:1; transform:translate(-50%,-50%) scale(0)}
	40%{transform:translate(-50%,-45%) scale(1.4)}
	100%{opacity:0; transform:translate(-50%,-40%) scale(2.6)}
}

@media (min-width:900px){
	body{padding:60px 24px}
	.mail_box{
		transition:transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	.mail_box:hover{
		transform:translateY(-8px) perspective(800px) rotateX(-5deg);
	}
	
}

@media (max-width:768px){
	body{padding:24px 12px}
	.mail_box_wrapper{margin:0 -12px}
	.Latter{
		margin-right:0;
		margin-left:0;
	}
	.flower_top{
		left:-40px;
		top:-85px;
		width:200px;
		transform:translateY(0) scale(0.95);
	}
	.flower_bottom{
		right:-44px;
		bottom:-100px;
		width:200px;
		transform:translateY(0) scale(0.95);
	}
}

@media (max-width:480px){
	body{padding:12px 8px}
	.container{width:100%}
	.Latter h2{font-size:50px}
	.Latter p.date-text{font-size:35px}
	p.title-text{font-size:52px}
	.mail_box_wrapper{margin:0;width:100%}
	.flower_top{
		left:-28%;
		top:-25%;
		width:200px;
		transform:translateY(0);
	}
	.flower_bottom{
		right:-28.5%;
		bottom:-44.5%;
		width:200px;
		transform:translateY(0);
	}
	.seal{
		width:180px;
		transform: scaleX(-3);
	}
	
}