:root{
  --bg:#0a0a0a;
  --red:#ff1a1a;
  --deep-red:#7a0000;
  --text:#f2f2f2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:radial-gradient(1200px 800px at 50% 50%,#1a0000 0%,#0a0a0a 60%);
  color:var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  overflow:hidden;
}

#intro, #lang-select{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.eye{
  width: min(86vw, 820px);
  aspect-ratio: 2 / 1;
  position:relative;
  filter: drop-shadow(0 0 24px rgba(255,0,0,.25));
}
.eye-svg{width:100%; height:100%; display:block}

/* 1) Start as a thin horizontal line, scale to eye shape */
.line-start #eyeGroup{
  transform-origin: 200px 100px;
  animation: lineOpen 900ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes lineOpen{
  0%{ transform: translate(0,0) scaleY(0.02) }
  60%{ transform: translate(0,0) scaleY(1.08) }
  100%{ transform: translate(0,0) scaleY(1) }
}

/* 2) Iris left-right-center tracking */
.iris-seq #inner{
  animation: irisMove 1600ms ease-in-out 900ms forwards;
}
@keyframes irisMove{
  0%{transform:translateX(0)}
  25%{transform:translateX(-48px)}
  60%{transform:translateX(48px)}
  85%{transform:translateX(0)}
  100%{transform:translateX(0)}
}

/* Removed predator slit phase; pupil remains round */

/* 4) Close eye back to a thin line */
.close #eyeGroup{
  transform-origin: 200px 100px;
  animation: lineClose 700ms cubic-bezier(.6,.0,.4,1) forwards;
}
/* Ensure no lateral motion during close */
.close #inner{
  transform: translateX(0) !important;
  animation: none !important;
}
@keyframes lineClose{
  0%{ transform: translate(0,0) scaleY(1) }
  100%{ transform: translate(0,0) scaleY(0.02) }
}

/* Horror Text */
.horror-text{
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: 'Courier New', monospace;
  font-size: clamp(14px, 2.5vw, 20px);
  color: #ff1a1a;
  text-shadow: 0 0 10px rgba(255, 26, 26, 0.8);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  line-height: 1.4;
  letter-spacing: 1px;
}

.text-line{
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid #ff1a1a;
  animation: blink 1s infinite;
}

@keyframes blink{
  0%, 50%{ border-color: #ff1a1a }
  51%, 100%{ border-color: transparent }
}

.horror-text.show{
  opacity: 1;
  transition: opacity 0.3s ease-in;
}

.horror-text.hide{
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

/* Language selection */
#lang-select{ gap: clamp(24px, 6vw, 80px); padding:24px; opacity:0 }
.hidden{display:none}
.fade-in{ animation: fadeIn 400ms ease forwards }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.lang-side{ width:min(44vw,420px); display:flex; flex-direction:column; align-items:center; gap:16px; cursor:pointer; user-select:none; transition: transform .2s ease, filter .2s ease}
.lang-side .flag{ width:min(38vw,360px)}
.flag-svg{ width:100%; height:auto; display:block; border-radius:6px; box-shadow: 0 0 0 2px #300 inset, 0 8px 24px rgba(0,0,0,.55)}
.label{ font-size: clamp(18px, 3vw, 28px); letter-spacing:.08em; text-transform:uppercase; color:#ddd }
.lang-side:hover{ transform: translateY(-4px); filter: brightness(1.1)}

.arrow{ width:min(22vw,220px); height:min(22vw,220px); display:flex; align-items:center; justify-content:center; filter: drop-shadow(0 0 18px rgba(255,0,0,.4))}
.arrow-svg{ width:100%; height:100%; transform: rotate(0deg); transition: transform .08s linear}

/* Selection feedback */
.selected{ outline: 3px solid var(--red); filter: brightness(1.25) saturate(1.2)}

.dim-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.0); pointer-events:none; transition: background 400ms ease}
.dim-overlay.active{ background: rgba(0,0,0,.85)}

@media (max-width: 860px){
  #lang-select{ gap: 24px }
  .lang-side{ width:42vw }
  .lang-side .flag{ width: 40vw }
}


/* English flag disabled (grayscale) */
#langEng .flag-svg{ filter: grayscale(1) contrast(0.9) brightness(0.9) }
#langEng:hover .flag-svg{ filter: grayscale(1) contrast(0.9) brightness(1) }

/* Popup */
.popup{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none }
.popup.hidden{ display:none }
.popup .popup-card{
  pointer-events:auto;
  max-width:min(92vw, 520px);
  background: #0f0b0b;
  color: var(--text);
  border: 2px solid var(--red);
  box-shadow: 0 0 24px rgba(255, 26, 26, 0.6), 0 0 48px rgba(255, 26, 26, 0.35);
  border-radius: 10px;
  padding: 20px 22px;
  text-align: center;
}
.popup .popup-title{
  margin: 0 0 8px 0;
  font-weight: 700;
  letter-spacing: .04em;
}
.popup .popup-message{ margin: 0 0 16px 0; line-height: 1.5 }
.popup .popup-actions{ display:flex; justify-content:center }
.popup .btn{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--red);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 26, 26, 0.4) inset;
}
.popup .btn:hover{ background: rgba(255, 26, 26, 0.08) }