/* Body base styling */
body {*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    background:#111;
    height:100vh;
    overflow:hidden;
    font-family:"Times New Roman",serif;
}

#intro{
    position:fixed;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:#0c0c0c;
    cursor:pointer;
}

.scroll{
    width:320px;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,0.7));
}

#openText{
    margin-top:20px;
    font-size:22px;
    letter-spacing:2px;
    color:#e6d6a8;
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{opacity:1}
    50%{opacity:.4}
    100%{opacity:1}
}

#letterWrapper{
    display:none;
    height:100vh;
    overflow-y:auto;
    padding:60px 0;
    background:url("paper.jpg");
    background-size:cover;
}

#letter{
    max-width:700px;
    margin:auto;
    background:rgba(255,248,220,0.95);
    padding:60px 50px;
    font-size:20px;
    line-height:1.8;
    color:#2b2b2b;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.15),
        0 20px 40px rgba(0,0,0,0.4);
    border-left:10px solid rgba(120,90,50,0.4);
    border-right:10px solid rgba(120,90,50,0.4);
}

.sentence{
    opacity:0;
    transform:translateY(10px);
    animation:reveal 1.2s forwards;
    margin-bottom:18px;
}

@keyframes reveal{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

  margin: 0;
  font-family: Georgia, serif;
  background: #1a1a1a;
  color: #2b2b2b;
}

/* Overlay for "Press to open" scroll */
#overlay {
  position: fixed;
  inset: 0;
  background: #0f0f0f;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
}

.scroll {
  position:relative;
  background: #f3e6c8;
  padding: 22px 60px;
  border: 2px solid #d2c09a;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.4),
    inset 0 0 25px rgba(0,0,0,0.15);
  animation: float 3.5s ease-in-out infinite;
  transition: transform 1s ease, opacity 0.8s ease;
}

.scroll span {
  font-size: 1.5rem;
  color: #3b2f1c;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.scroll::before,
.scroll::after {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 28px;
  background: linear-gradient(to right, #cbb68c, #f3e6c8);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.scroll::before {
  left: -28px;
  border-radius: 20px 0 0 20px;
}

.scroll::after {
  right: -28px;
  border-radius: 0 20px 20px 0;
}

/* Scroll opening animation */
#overlay.opening .scroll {
  transform: scaleY(0.05);
  opacity: 0;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* Paper container */
#paper {
  min-height: 100vh;
  background: #f4ecd8;
  background-image: url("paper.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 80px 0;
  display: none;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.2);
}

/* Letter container */
.container {
  max-width: 800px;
  margin: auto;
  padding: 60px 48px;
  background: rgba(255, 252, 240, 0.9);
  border-left: 2px solid rgba(120, 100, 60, 0.35);
  border-right: 2px solid rgba(120, 100, 60, 0.35);
  box-shadow:
    0 0 30px rgba(0,0,0,0.15);
  line-height: 1.9;
  font-size: 18px;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12px;
  pointer-events: none;
}

.container::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(0,0,0,0.08),
    transparent
  );
}

.container::after {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.08),
    transparent
  );
}


h1 {
  font-weight: normal;
  margin-bottom: 40px;
}

p {
  margin-bottom: 24px;
}

.signature {
  margin-top: 60px;
}

.line {
  opacity: 0;
  transition: opacity 2s ease;
}

.line {
  opacity: 0;
  transition: opacity 2s ease;
}