/* ============================================
   BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
	background: #FFD6E0;
	font-family: 'Signika', sans-serif;
	overflow: hidden;
	height: 100vh; width: 100vw;
}

/* ============================================
   START SCREEN
   ============================================ */
#start-screen {
	position: fixed; inset: 0;
	background: linear-gradient(160deg, #FFD6E0 0%, #FFB3C6 55%, #FF85A1 100%);
	display: flex; align-items: center; justify-content: center;
	z-index: 9000;
	transition: opacity 0.9s ease;
}
#sakura-start-canvas {
	position: absolute; inset: 0;
	width: 100%; height: 100%; pointer-events: none;
}
#start-btn {
	position: relative; z-index: 1;
	font-family: 'Signika', sans-serif;
	font-size: clamp(20px, 5vw, 30px);
	font-weight: 700; color: #fff;
	background: linear-gradient(135deg, #a03055, #d4607a, #a03055);
	border: none; border-radius: 50px;
	padding: 16px 56px;
	cursor: pointer; letter-spacing: 2px; text-transform: uppercase;
	box-shadow: 0 8px 30px rgba(160,48,85,0.55);
	animation: btn-pulse 2s ease-in-out infinite;
	transition: transform 0.2s;
}
#start-btn:hover  { transform: scale(1.07); }
#start-btn:active { transform: scale(0.96); }
@keyframes btn-pulse {
	0%,100% { box-shadow: 0 8px 25px rgba(160,48,85,0.5); }
	50%      { box-shadow: 0 8px 45px rgba(160,48,85,0.9); }
}

/* ============================================
   CANVAS LAYERS
   ============================================ */
#sakura-canvas, #balloon-canvas, #fireworks-canvas {
	position: fixed; inset: 0;
	width: 100%; height: 100%; pointer-events: none;
}
#sakura-canvas    { z-index: 10; }
#balloon-canvas   { z-index: 15; }
#fireworks-canvas { z-index: 20; }

/* ============================================
   HERO
   ============================================ */
#hero {
	position: fixed; inset: 0;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	z-index: 30;
	transition: opacity 0.5s ease;
}
#hero.hidden { opacity: 0; pointer-events: none; }

/* ============================================
   GRADUATION CAP  (shared styles)
   ============================================ */
/* --- hero cap --- */
#grad-cap-wrap {
	position: relative;
	width: 180px; height: 100px;
	margin: 0 auto 12px;
	opacity: 0;
}
#grad-cap-wrap.drop-in { animation: cap-drop 1s ease-out forwards; }
@keyframes cap-drop {
	0%   { opacity:0; transform:translateY(-70px) scale(0.75); }
	65%  { opacity:1; transform:translateY(8px)   scale(1.05); }
	82%  { transform:translateY(-4px) scale(0.98); }
	100% { opacity:1; transform:translateY(0)     scale(1);   }
}

/* --- msg cap (smaller) --- */
#msg-cap {
	position: relative;
	width: 110px; height: 62px;
	margin: 0 auto 6px;
}

/* shared cap pieces */
.cap-board {
	position: absolute; top:0; left:50%; transform:translateX(-50%);
	background: linear-gradient(180deg,#d4607a,#a03055);
	border-radius: 5px;
	box-shadow: 0 5px 14px rgba(0,0,0,0.38);
}
#grad-cap-wrap .cap-board { width:175px; height:19px; }
#msg-cap        .cap-board { width:108px; height:12px; }

.cap-board::after {
	content:''; position:absolute; top:50%; left:50%;
	transform:translate(-50%,-50%);
	border-radius:50%;
	background: radial-gradient(circle at 35% 35%,#ffe87a,#c8940a);
	box-shadow: 0 0 8px 3px rgba(255,210,0,0.6);
}
#grad-cap-wrap .cap-board::after { width:13px; height:13px; }
#msg-cap        .cap-board::after { width:8px;  height:8px;  }

.cap-top {
	position:absolute; left:50%; transform:translateX(-50%);
	background: linear-gradient(150deg,#d4607a,#a03055 55%,#7a1f3d);
	border-radius: 7px 7px 16px 16px;
	box-shadow: 0 10px 26px rgba(0,0,0,0.42);
}
#grad-cap-wrap .cap-top { top:15px; width:105px; height:78px; }
#msg-cap        .cap-top { top:10px; width:65px;  height:48px; }

.cap-tassel {
	position:absolute; right:0;
	background: linear-gradient(180deg,#f0d060,#c8940a,#a07008);
	border-radius:2px; transform-origin:top center;
	animation: tassel-sway 2.5s ease-in-out infinite;
}
#grad-cap-wrap .cap-tassel { top:3px;  right:24px; width:3px; height:75px; }
#msg-cap        .cap-tassel { top:2px;  right:14px; width:2px; height:46px; }

.cap-tassel::before {
	content:''; position:absolute; left:50%; transform:translateX(-50%);
	border-radius:50% 50% 45% 45%;
	background: radial-gradient(circle at 40% 35%,#f5dc6a,#b07808);
}
#grad-cap-wrap .cap-tassel::before { bottom:-11px; width:16px; height:16px; }
#msg-cap        .cap-tassel::before { bottom:-7px;  width:10px; height:10px; }

.cap-tassel::after {
	content:''; position:absolute; left:50%; transform:translateX(-50%);
	background: repeating-linear-gradient(90deg,#c8940a 0,#c8940a 2px,transparent 2px,transparent 5px);
	border-radius:0 0 3px 3px;
}
#grad-cap-wrap .cap-tassel::after { bottom:-26px; width:13px; height:11px; }
#msg-cap        .cap-tassel::after { bottom:-16px; width:8px;  height:7px;  }

@keyframes tassel-sway {
	0%,100% { transform:rotate(-10deg); }
	50%      { transform:rotate(10deg);  }
}

/* ============================================
   NAME & SUBTITLE  (hero)
   ============================================ */
#graduate-name {
	font-size: clamp(30px, 8vw, 56px);
	font-weight:700; color:#fff;
	letter-spacing:2px;
	text-shadow: 0 2px 12px rgba(160,48,85,0.45);
	margin: 2px 0 3px;
	opacity:0; transform:translateY(16px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}
#graduate-name.visible { opacity:1; transform:translateY(0); }

#graduate-subtitle {
	font-size: clamp(13px, 3.5vw, 22px);
	font-weight:600; font-style:italic; color:#fff;
	letter-spacing:0.8px;
	text-shadow: 0 1px 8px rgba(160,48,85,0.3);
	opacity:0; transform:translateY(10px);
	transition: opacity 0.9s ease 0.35s, transform 0.9s ease 0.35s;
}
#graduate-subtitle.visible { opacity:1; transform:translateY(0); }

/* ============================================
   DECORATIVE STARS
   ============================================ */
.deco-star {
	position:absolute; color:#fff; pointer-events:none;
	text-shadow: 0 0 10px rgba(255,210,180,0.9);
	opacity:0;
}
.deco-star.visible { animation: star-float 3s ease-in-out infinite alternate; }
#s1 { top:12%; left:7%;   font-size:clamp(11px,2.2vw,18px); animation-delay:0s;   }
#s2 { top:16%; right:7%;  font-size:clamp(13px,2.8vw,22px); animation-delay:0.7s; }
#s3 { bottom:24%; left:6%;  font-size:clamp(10px,1.9vw,16px); animation-delay:1.2s; }
#s4 { bottom:20%; right:5%; font-size:clamp(12px,2.2vw,18px); animation-delay:0.4s; }
@keyframes star-float {
	0%   { transform:translateY(0)     rotate(0deg);  opacity:0.65; }
	100% { transform:translateY(-13px) rotate(15deg); opacity:1;    }
}

/* ============================================
   MESSAGE SCREEN  (replaces hero, no scroll)
   ============================================ */
#msg-screen {
	display: none;
	position: fixed; inset: 0;
	z-index: 35;
	/* stack everything from top, centered horizontally */
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: clamp(18px, 5vh, 40px);
	gap: 0;
}
#msg-screen.active {
	display: flex;
}

/* compact header */
#msg-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-bottom: clamp(6px, 1.5vh, 14px);
}

#msg-name {
	font-size: clamp(22px, 5.5vw, 38px);
	font-weight:700; color:#fff;
	letter-spacing:2px;
	text-shadow: 0 2px 10px rgba(160,48,85,0.45);
	line-height: 1.1;
}

/* ============================================
   LETTER BALLOONS  (G·R·A·D·U·A·T·E)
   ============================================ */
#grad-balloons {
	display: flex;
	align-items: flex-end;      /* strings hang down, balloons at top */
	justify-content: center;
	gap: clamp(3px, 1.2vw, 10px);
	margin: clamp(4px, 1vh, 8px) 0 clamp(2px, 0.8vh, 6px);
}

.letter-balloon {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: lb-sway 3s ease-in-out infinite alternate;
	animation-delay: var(--delay, 0s);
	transform-origin: bottom center;
}

/* The balloon oval */
.lb-body {
	position: relative;
	width:  clamp(28px, 5.5vw, 46px);
	height: clamp(34px, 6.8vw, 56px);
	background: var(--bc, #FF85A1);
	border-radius: 50% 50% 45% 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		inset -3px -4px 8px rgba(0,0,0,0.18),
		0 4px 10px rgba(0,0,0,0.12);
}
/* shine highlight */
.lb-body::before {
	content: '';
	position: absolute;
	top: 18%; left: 18%;
	width: 28%; height: 22%;
	background: rgba(255,255,255,0.42);
	border-radius: 50%;
	transform: rotate(-30deg);
}
/* letter inside */
.lb-body span {
	font-family: 'Signika', sans-serif;
	font-weight: 700;
	font-size: clamp(11px, 2.6vw, 20px);
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,0.3);
	line-height: 1;
	position: relative;
	z-index: 1;
}

/* knot at bottom of balloon */
.lb-knot {
	width: clamp(5px, 1vw, 8px);
	height: clamp(5px, 1vw, 8px);
	background: var(--bc, #FF85A1);
	border-radius: 50% 50% 40% 40%;
	filter: brightness(0.75);
	margin-top: -1px;
}

/* string — thin SVG-style line with slight curve using border trick */
.lb-string {
	width: 1.5px;
	height: clamp(10px, 2.5vw, 18px);
	background: linear-gradient(180deg, rgba(100,40,60,0.55), rgba(100,40,60,0.2));
	border-radius: 1px;
}

/* gentle sway per balloon */
@keyframes lb-sway {
	0%   { transform: rotate(-6deg) translateY(0px); }
	50%  { transform: rotate(0deg)  translateY(-3px); }
	100% { transform: rotate(6deg)  translateY(0px); }
}

/* ============================================
   LETTER BALLOONS  (G·R·A·D·U·A·T·E)
   ============================================ */
#grad-balloons {
	display: flex;
	align-items: flex-end;      /* strings hang down, balloons at top */
	justify-content: center;
	gap: clamp(3px, 1.2vw, 10px);
	margin: clamp(4px, 1vh, 8px) 0 clamp(2px, 0.8vh, 6px);
}

.letter-balloon {
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: lb-sway 3s ease-in-out infinite alternate;
	animation-delay: var(--delay, 0s);
	transform-origin: bottom center;
}

/* The balloon oval */
.lb-body {
	position: relative;
	width:  clamp(28px, 5.5vw, 46px);
	height: clamp(34px, 6.8vw, 56px);
	background: var(--bc, #FF85A1);
	border-radius: 50% 50% 45% 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		inset -3px -4px 8px rgba(0,0,0,0.18),
		0 4px 10px rgba(0,0,0,0.12);
}
/* shine highlight */
.lb-body::before {
	content: '';
	position: absolute;
	top: 18%; left: 18%;
	width: 28%; height: 22%;
	background: rgba(255,255,255,0.42);
	border-radius: 50%;
	transform: rotate(-30deg);
}
/* letter inside */
.lb-body span {
	font-family: 'Signika', sans-serif;
	font-weight: 700;
	font-size: clamp(11px, 2.6vw, 20px);
	color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,0.3);
	line-height: 1;
	position: relative;
	z-index: 1;
}

/* knot at bottom of balloon */
.lb-knot {
	width: clamp(5px, 1vw, 8px);
	height: clamp(5px, 1vw, 8px);
	background: var(--bc, #FF85A1);
	border-radius: 50% 50% 40% 40%;
	filter: brightness(0.75);
	margin-top: -1px;
}

/* string — thin SVG-style line with slight curve using border trick */
.lb-string {
	width: 1.5px;
	height: clamp(10px, 2.5vw, 18px);
	background: linear-gradient(180deg, rgba(100,40,60,0.55), rgba(100,40,60,0.2));
	border-radius: 1px;
}

/* gentle sway per balloon */
@keyframes lb-sway {
	0%   { transform: rotate(-6deg) translateY(0px); }
	50%  { transform: rotate(0deg)  translateY(-3px); }
	100% { transform: rotate(6deg)  translateY(0px); }
}

/* separator line */
#msg-header::after {
	content: '';
	display: block;
	width: clamp(60px, 18vw, 120px);
	height: 2px;
	background: rgba(255,255,255,0.5);
	border-radius: 2px;
	margin-top: clamp(4px, 1vh, 10px);
}

/* text lines — sit tight under the header */
#msg-stage {
	text-align: center;
	padding: 0 clamp(16px, 5vw, 40px);
	width: 100%;
	max-width: 500px;
}
.msg-line {
	font-size: clamp(17px, 4.8vw, 26px);
	font-style:italic; font-weight:400;
	color: #5C2A00;
	line-height: 1.7;
	letter-spacing: 0.3px;
	opacity: 0;
	transition: opacity 0.65s ease;
	min-height: 1.7em;
}
.msg-line.show { opacity: 1; }

/* ============================================
   ACTION BAR
   ============================================ */
#action-bar {
	position: fixed; bottom:0; left:0; right:0;
	padding: 10px 16px 12px;
	text-align: center;
	background: linear-gradient(to top,rgba(255,183,207,0.98),rgba(255,220,232,0.88));
	border-top: 1px solid rgba(232,116,154,0.3);
	box-shadow: 0 -4px 18px rgba(201,64,128,0.12);
	z-index: 600;
}
.btn-bloom {
	display: none;
	margin: 4px 5px; padding: 12px 32px;
	font-family: 'Signika', sans-serif;
	font-size: clamp(13px, 3.5vw, 16px);
	font-weight:700; color:#5C2A00;
	background: linear-gradient(135deg,#ffe0ec,#ffb3c6,#ff85a1);
	border: 2px solid #e8749a; border-radius:50px;
	cursor:pointer;
	box-shadow: 0 4px 16px rgba(232,116,154,0.4);
	transition: all 0.25s ease; white-space:nowrap;
}
.btn-bloom:hover  { transform:translateY(-2px); box-shadow:0 6px 22px rgba(201,64,128,0.5); }
.btn-bloom:active { transform:translateY(0); }

/* ============================================
   BACKGROUND PULSE
   ============================================ */
body.celebrate { animation: bg-pulse 8s linear infinite; }
@keyframes bg-pulse {
	0%,100% { background-color:#FFD6E0; }
	25%      { background-color:#FFC8D8; }
	75%      { background-color:#FFE4EC; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
	#grad-cap-wrap     { width:145px; height:82px; }
	#grad-cap-wrap .cap-board { width:142px; }
	#grad-cap-wrap .cap-top   { width:86px; height:65px; }
	#grad-cap-wrap .cap-tassel { height:62px; }

	#msg-cap        { width:88px; height:50px; }
	#msg-cap .cap-board { width:86px; height:10px; }
	#msg-cap .cap-top   { width:52px; height:38px; }
	#msg-cap .cap-tassel { height:38px; }
}