/* style.css - We Litrature demo v2 */
/* Google Font 'Special Elite' for typewriter look is used via HTML link; fallback to monospace */
:root{
  --bg: #ffffff;
  --text: #000000;
  --accent: #000000;
  --maxw: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Special Elite", "Courier New", Courier, monospace;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: opacity 400ms ease-in-out;
}

/* Page container */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:28px;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid #eee;
  position:relative;
  z-index:5;
}
.brand{
  font-size:28px;
  font-weight:700;
  letter-spacing:1px;
}
.nav{
  display:flex;
  gap:14px;
}
.nav a{
  color:var(--text);
  text-decoration:none;
  font-weight:600;
  padding:6px 10px;
  border-radius:6px;
}
.nav a:hover{background:#f2f2f2}

/* Hero */
.hero{
  padding:64px 0;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  position:relative;
}
.hero h1{
  margin:0 0 18px 0;
  font-size:40px;
  letter-spacing:1px;
}
.typewriter {
  font-size:22px;
  white-space:nowrap;
  overflow:hidden;
  border-right: .14em solid var(--accent);
  max-width:90ch;
  display:inline-block;
}

/* Cursor blink */
@keyframes blink {
  0% { border-color: transparent; }
  50% { border-color: var(--accent); }
  100% { border-color: transparent; }
}
.typewriter.cursor {
  animation: blink 1s steps(1) infinite;
}

/* Card */
.content{padding:24px 0}
.card{
  padding:22px;
  border:1px solid #efefef;
  border-radius:8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* Footer */
footer{
  margin-top:36px;
  padding:12px 0;
  text-align:center;
  color:#666;
  font-size:14px;
}

/* Full-screen overlay for initial fade and page transitions */
.overlay {
  position:fixed;
  inset:0;
  background:#000;
  z-index:9999;
  pointer-events:none;
  opacity:1;
  transition: opacity 900ms ease, visibility 900ms;
  visibility:visible;
}
/* When overlay-hidden applied, allow click-through and fade */
.overlay.hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* When exiting page (link clicked) we show overlay and fade to black */
body.page-exit .overlay {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* subtle content fade-in after overlay */
.main-content {
  opacity:0;
  transform: translateY(6px);
  transition: opacity 600ms ease 200ms, transform 600ms ease 200ms;
}
.main-content.visible {
  opacity:1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width:700px){
  .brand{font-size:22px}
  .hero h1{font-size:26px}
  .typewriter{font-size:18px; width:100%}
}