@font-face {
  font-family: "Be My Glittertine";
  src: url("fonts/BeMyGlittertine.ttf") format("truetype");
  /* exclude Tamil unicode range so it never tries to render Tamil */
  unicode-range: U+0000-097F, U+0E00-FFFF;
}

/* Tamil text style */
.tamil-text{
font-family:"Baloo Tammudu 2","Noto Sans Tamil",sans-serif;
font-weight:700;
font-size:1.05em;
}

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

body{
height:100vh;
background:#e7c4c9;
overflow:hidden;
font-family:"Be My Glittertine", cursive;
}

/* =========================
MAIN CONTAINER
========================= */

.container{
position:relative;
width:650px;
height:750px;
display:flex;
justify-content:center;
align-items:center;
margin:auto;
margin-top:120px;
}

#penguin{
position:absolute;
width:520px;
left:50%;
transform:translateX(-50%);
top:-120px;
z-index:1;
}

#panel{
position:relative;
width:750px;
background:#efefef;
padding:50px;
border-radius:30px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
text-align:center;
z-index:2;
margin-top:140px;
}

#message{
font-size:42px;
margin-bottom:35px;
}

.buttons{
display:flex;
justify-content:space-evenly;
}

.yes-btn{
padding:14px 45px;
border:none;
border-radius:30px;
font-size:24px;
cursor:pointer;
background:linear-gradient(to bottom,#ff6a9f,#ff2d75);
color:white;
box-shadow:0 6px 18px rgba(255,45,117,0.6);
}

.yes-btn:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(255,45,117,0.8);
}

.no-btn{
padding:14px 45px;
border:none;
border-radius:30px;
font-size:24px;
cursor:pointer;
background:#8a8a8a;
color:#2e2e2e;
box-shadow:inset 0 4px 8px rgba(0,0,0,0.3);
}

button{
font-family:"Be My Glittertine", cursive;
}

/* =========================
CINEMATIC SECTION
========================= */

#cinematicSection{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:#f6e4e7;
justify-content:center;
align-items:center;
overflow:hidden;
z-index:100;
}

.cinematic-wrapper{
display:flex;
flex-direction:column;
align-items:center;
}

#penqueen{
display:none;
width:340px;
margin-bottom:-70px;
z-index:5;
}

.glass-card{
width:900px;
max-width:90%;
height:340px;
padding:70px 60px 50px 60px;
border-radius:25px;
background:rgba(255,255,255,0.45);
backdrop-filter:blur(12px);
box-shadow:0 8px 30px rgba(255,150,170,0.3);
text-align:center;
display:flex;
align-items:center;
justify-content:center;
}

#cinematicText{
font-size:24px;
line-height:1.4;
color:#555;
min-height:220px;
text-align:center;
}

#cursor{
display:none;
width:6px;
height:26px;
background:#d18c95;
margin-left:4px;
animation:blink 1s infinite;
vertical-align:middle;
}

@keyframes blink{
0%,100%{opacity:1;}
50%{opacity:0;}
}

#scrollPrompt{
margin-top:30px;
text-align:center;
opacity:0;
transition:opacity 1s;
}

#scrollPrompt p{
font-size:14px;
letter-spacing:2px;
color:#777;
}

.mouse{
width:18px;
height:30px;
border:2px solid #c99;
border-radius:10px;
margin:auto;
margin-top:10px;
position:relative;
}

.mouse::before{
content:"";
width:4px;
height:4px;
background:#c99;
border-radius:50%;
position:absolute;
top:5px;
left:50%;
transform:translateX(-50%);
animation:scroll 2s infinite;
}

@keyframes scroll{
0%{top:5px;opacity:1;}
100%{top:18px;opacity:0;}
}

.petal{
position:fixed;
top:-10px;
background:#cc0000;
border-radius:50% 0 50% 50%;
opacity:0.7;
pointer-events:none;
animation:fall linear infinite;
}

@keyframes fall{
0%{transform:translateY(0) rotate(0);}
100%{transform:translateY(110vh) rotate(360deg);}
}

/* =========================
MEMORY SECTION
========================= */

#memorySection{
display:none;
width:100%;
background:transparent;
}

.memoryScene{
text-align:center;
color:white;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:0;
padding:0;
}

#memoryCaption{
font-size:34px;
margin-bottom:8px;
transition:opacity 0.6s;
text-shadow:0 2px 8px rgba(0,0,0,0.8);
}

/* =========================
FRAME CONTAINER
fixed natural size, centred
========================= */

.frameContainer{
position:relative;
width:1200px;
margin:0 auto;
}

.frame{
display:block;
width:100%;
height:auto;
position:relative;
z-index:2;
pointer-events:none;
}

.frameInner{
position:absolute;
top:7.81%;
left:12.20%;
width:72.30%;
height:87.86%;
overflow:hidden;
z-index:1;
}

#memoryImage{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
z-index:1;
}

#scrollHint{
margin-top:8px;
font-size:20px;
transition:opacity 1s;
min-height:60px;
display:flex;
flex-direction:column;
align-items:center;
}

#scrollText{
min-height:28px;
display:block;
text-align:center;
white-space:nowrap;
}

.idleText{
animation:fadeLoop 2.5s infinite;
}

@keyframes fadeLoop{
0%{opacity:0.2}
50%{opacity:1}
100%{opacity:0.2}
}