html {
  scroll-behavior: smooth;           /* only affects anchor jumps, safe to keep */
  overflow-y: scroll;                 /* ensures vertical scroll is enabled */
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS / touch devices */
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #ff9ffc;
  background-attachment: fixed; /* so it doesn’t scroll with content */
  color: #0b0009;      /* very dark pink text */
  overflow-x: hidden;  /* prevent horizontal scroll */
}

body::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* content hidden initially */
.hidden {
  display: none;
}

.horizontal-section {
  height: 100vh;  /* controls how long the horizontal scroll lasts */
  background-color: rgba(255, 194, 234, 0.7); /* semi-transparent white bg */
  position: relative;
  overflow-x: hidden;
}

.horizontal-track1 {
  position: sticky;
  top: 0; /* pins it to viewport during scroll */
  height: 45vh;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 5vw;
  will-change: transform; /* improves performance for animations */
}

.horizontal-track2 {
  position: sticky;
  top: 0; /* pins it to viewport during scroll */
  height: 45vh;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 5vw;
  will-change: transform; /* improves performance for animations */
}

img.long-photo {
  display: block;             /* remove inline spacing */
  margin: 0 auto;             /* centers horizontally */
  width: 80vw;                /* 80% of viewport width */
  height: auto;               /* keep original aspect ratio */
  max-width: 100%;            /* never overflow container */
  padding: 2vw;
}

.paragraph-section {
  padding: 5vw 10vw;       /* space around text */
  max-width: 900px;        /* optional: keeps line length readable */
  margin: 0 auto;          /* center horizontally */
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  line-height: 1.6;
  color: #0b0009;
}

.horizontal-track1 img {
  height: 40vh;          /* all images same height relative to viewport */
  flex-shrink: 0;        /* don’t let them shrink */
  width: auto;           /* keep aspect ratio */
  object-fit: cover;     /* fill the height without distortion */
}

.horizontal-track2 img {
  height: 40vh;          /* all images same height relative to viewport */
  flex-shrink: 0;        /* don’t let them shrink */
  width: auto;           /* keep aspect ratio */
  object-fit: cover;     /* fill the height without distortion */
}

.section1 {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(0.5rem, 1.5vw, 1.5rem); /* balanced: mobile -> laptop */
  font-weight: bold;
  text-align: center;
  overflow-wrap: break-word; /* in case it gets too long */
  word-break: break-word;    /* for extra safety */
}

.cursor.underscore {
  display: inline-block;
  width: 0.7em;          /* length of underscore */
  height: 0.15em;        /* thickness */
  background: currentColor;
  margin-left: 0.15em;
  position: relative;
  top: 0.15em;           /* push it down to baseline */
  animation: blink 1s steps(1) infinite;
  border-radius: 1px;    /* optional: softer look */
}

@keyframes blink {
  50% { opacity: 0; }
}

/* password screen styling */
.lock-screen {
  height: 100vh;              /* full screen height */
  display: flex;              /* flexbox to center content */
  flex-direction: column;     /* stack elements vertically */
  justify-content: center;    /* center vertically */
  align-items: center;        /* center horizontally */
  gap: 1rem;                  /* space between elements */
}

/* input box styling */
.lock-screen input {
  padding: 0.5rem;
  border-radius: 6px;
  border: none;
}

/* button styling */
.lock-screen button {
  padding: 0.5rem 1rem;
  border-radius: 999px;  /* pill-shaped button */
  border: none;
  cursor: pointer;
}

/* error message styling */
#error {
  color: #ff4545;    /* red text */
  min-height: 1.2em;        /* always reserve space */
  font-size: 0.9rem;        /* smaller text */
  margin-top: 0.5rem;
  opacity: 0;               /* hidden by default */
  transition: opacity 0.3s; /* smooth fade in/out */
}

/* animation for wrong password */
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

#error.shake {
  animation: shake 0.3s;
  opacity: 1; /* show it */
}