/* ═══════════════════════════════════════════════════════
   EASTER EGG — overlay para index.html · v2
   ═══════════════════════════════════════════════════════ */

:root {
  --ee-border : rgba(255,255,255,0.08);
  --ee-muted  : rgba(255,255,255,0.38);
  --ee-subtle : rgba(255,255,255,0.12);
  --ee-hover  : rgba(255,255,255,0.04);
  --ee-ease   : cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Body ──────────────────────────────────────────────── */
body.ee-active { cursor: none; overflow: hidden; }

/* ── Trigger ───────────────────────────────────────────── */
#ee-trigger { position: relative; cursor: default; }
#ee-trigger.pressing { opacity: 0.6; transition: opacity 0.2s; }

/* ── Custom cursor ──────────────────────────────────────── */
#cur-dot, #cur-ring {
  position: fixed; pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  opacity: 0; transition: opacity 0.3s, left 0.02s linear, top 0.02s linear;
}
body.ee-active #cur-dot,
body.ee-active #cur-ring { opacity: 1; }
#cur-dot  { width:6px; height:6px; border-radius:50%; background:#fff; }
#cur-ring {
  width:26px; height:26px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.3);
  transition: opacity 0.3s, left 0.02s linear, top 0.02s linear,
              width 0.2s, height 0.2s, border-color 0.2s;
}
body.ee-active.cur-expand #cur-ring { width:42px; height:42px; border-color:rgba(255,255,255,0.55); }
@media (pointer:coarse) { #cur-dot, #cur-ring { display:none; } }

/* ── Flash ──────────────────────────────────────────────── */
#flash {
  position:fixed; inset:0; z-index:98;
  background:#fff; opacity:0; pointer-events:none; transition:opacity 0.05s;
}
#flash.on { opacity:0.05; }

/* ── Overlay ────────────────────────────────────────────── */
#ee {
  position:fixed; inset:0; z-index:100;
  background:#0A0A0A;
  opacity:0; pointer-events:none;
  transition:opacity 0.55s var(--ee-ease);
  font-family:'Inter','Noto Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  color:#fff;
}
#ee.active { opacity:1; pointer-events:all; }

/* ── Background image (muy sutil, revela con progreso) ── */
#bg-grid {
  position:absolute; inset:0; z-index:0;
  display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(2,1fr);
  pointer-events:none; gap:1px;
}
#bg-grid::before {
  content:'';
  position:absolute; inset:0; z-index:0;
  background-image: url('assets/topo-pattern.png');
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  pointer-events:none;
}
.bg-cell {
  position:relative; z-index:1;
  background-size:calc(500% - 4px) calc(200% - 2px);
  background-repeat:no-repeat;
  opacity:0; transition:opacity 1.4s var(--ee-ease);
}
.bg-cell.on { opacity:0.10; }

/* ── Topbar ─────────────────────────────────────────────── */
.ee-topbar {
  position:relative; z-index:10; flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
  border-bottom:1px solid var(--ee-border);
}
.ee-label {
  font-size:9px; letter-spacing:4px; color:var(--ee-muted); text-transform:uppercase;
}
#btn-close {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  border:1px solid var(--ee-border); background:transparent;
  color:var(--ee-muted); font-size:12px; cursor:none;
  transition:border-color 0.25s, color 0.25s, transform 0.35s var(--ee-ease);
}
#btn-close:hover { border-color:#fff; color:#fff; transform:rotate(90deg); }

/* ── Two-column body ─────────────────────────────────────── */
#ee-body {
  position:relative; z-index:10; flex:1; overflow:hidden;
  display:grid; grid-template-columns:1fr 380px;
}

/* ── Movie list ─────────────────────────────────────────── */
#movie-list {
  padding:0 28px;
  display:flex; flex-direction:column;
  overflow:hidden;
  border-right:1px solid var(--ee-border);
  background: linear-gradient(90deg, rgba(10,10,10,0.55) 60%, transparent);
}
#movie-list::before,
#movie-list::after {
  content:'';
  flex:1 1 0;
  min-height:0;
}

.m-row {
  flex-shrink:0;
  display:grid; grid-template-columns:18px 1fr auto;
  align-items:center; column-gap:12px;
  padding:6px 0;
  border-bottom:1px solid var(--ee-border);
  cursor:none; position:relative;
  opacity:0;
  animation:ee-row-in 0.4s var(--ee-ease) calc(var(--i,0)*30ms + 80ms) forwards;
  transition:background 0.2s;
}
.m-row:first-child { border-top:1px solid var(--ee-border); }
.m-row:hover, .m-row.active { background:var(--ee-hover); }

@keyframes ee-row-in {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}

.m-chk {
  -webkit-appearance:none !important; appearance:none !important;
  width:12px !important; min-width:12px; max-width:12px;
  height:12px !important; min-height:12px !important; max-height:12px;
  padding:0 !important;
  border:1px solid rgba(255,255,255,0.22) !important;
  border-radius:0 !important;
  background:transparent !important; cursor:none;
  position:relative;
  justify-self:center; align-self:center;
  flex-shrink:0;
  transition:border-color 0.2s, background 0.2s;
}
.m-info { min-width:0; overflow:hidden; }
.m-chk:checked { background:#fff !important; border-color:#fff !important; }
.m-chk:checked::after {
  content:''; position:absolute; top:1px; left:3px;
  width:3px; height:6px;
  border-right:1.5px solid #000; border-bottom:1.5px solid #000;
  transform:rotate(45deg);
}
.m-row:hover .m-chk { border-color:rgba(255,255,255,0.5); }

.m-title {
  font-size:12px; font-weight:600; letter-spacing:1px;
  color:#f1c232; text-transform:uppercase;
  transition:color 0.2s;
}
.m-row.done .m-title { color:rgba(241,194,50,0.3); text-decoration:line-through; text-decoration-color:rgba(241,194,50,0.2); }
.m-year { font-size:9px; color:var(--ee-muted); margin-left:6px; }
.m-dir  { font-size:8px; letter-spacing:1px; color:var(--ee-muted); white-space:nowrap; text-transform:uppercase; transition:color 0.2s; }
.m-row:hover .m-dir, .m-row.active .m-dir { color:rgba(255,255,255,0.65); }

/* ── Detail panel (right column) ────────────────────────── */
#card {
  padding:28px 24px;
  display:flex; flex-direction:column; justify-content:center;
  border-left:1px solid var(--ee-border);
  overflow:hidden;
}

.card-empty {
  font-size:9px; letter-spacing:3px; color:rgba(255,255,255,0.2);
  text-transform:uppercase; line-height:2;
}
#card.show .card-empty { display:none; }

.card-inner { display:none; }
#card.show .card-inner { display:block; }

.card-title {
  font-size:20px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:#fff;
  margin-bottom:3px; line-height:1.2;
}
.card-dir {
  font-size:8px; letter-spacing:3px; color:var(--ee-muted);
  text-transform:uppercase; margin-bottom:14px;
  padding-bottom:14px; border-bottom:1px solid var(--ee-border);
}
.card-synopsis {
  font-size:11px; line-height:1.85; color:rgba(255,255,255,0.5);
  margin-bottom:16px;
}
.card-ratings { display:flex; gap:20px; margin-bottom:18px; }
.card-rating  { display:flex; flex-direction:column; gap:2px; }
.card-rating b    { font-size:18px; font-weight:700; color:#fff; }
.card-rating span { font-size:7px; letter-spacing:2px; color:var(--ee-muted); text-transform:uppercase; }
.card-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; width:fit-content;
  border:1px solid var(--ee-border); background:transparent;
  color:var(--ee-muted); text-decoration:none;
  font-size:8px; letter-spacing:3px; text-transform:uppercase; cursor:none;
  transition:border-color 0.2s, color 0.2s, background 0.2s;
}
.card-cta:hover { border-color:var(--ee-subtle); color:#fff; background:var(--ee-hover); }

/* ── Footer: progress ───────────────────────────────────── */
#ee-progress {
  position:relative; z-index:10; flex-shrink:0;
  display:flex; align-items:center; gap:14px;
  padding:12px 28px;
  border-top:1px solid var(--ee-border);
}
.prog-label { font-size:8px; letter-spacing:3px; color:var(--ee-muted); text-transform:uppercase; }
.prog-num   { font-size:13px; font-weight:700; color:#fff; min-width:38px; }
.prog-bar   { flex:1; height:1px; background:var(--ee-border); }
.prog-fill  { height:100%; width:0%; background:#fff; transition:width 0.55s var(--ee-ease); }

/* ── Unlock screen ──────────────────────────────────────── */
#unlock {
  position:fixed; inset:0; z-index:600;
  background:#0A0A0A;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px;
  font-family:'Inter','Noto Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  opacity:0; pointer-events:none; transition:opacity 0.8s var(--ee-ease);
}
#unlock.show { opacity:1; pointer-events:all; }

.unlock-tag  { font-size:9px; letter-spacing:5px; color:var(--ee-muted); text-transform:uppercase; margin-bottom:16px; opacity:0; }
.unlock-head { font-size:clamp(56px,9vw,100px); font-weight:800; letter-spacing:3px; text-transform:uppercase; color:#fff; margin-bottom:22px; opacity:0; }
.unlock-rule { width:48px; height:1px; background:var(--ee-border); margin:0 auto 22px; opacity:0; }
.unlock-q    { font-size:13px; font-style:italic; line-height:1.9; color:rgba(255,255,255,0.42); max-width:380px; margin-bottom:5px; opacity:0; }
.unlock-auth { font-size:8px; letter-spacing:3px; color:var(--ee-muted); text-transform:uppercase; opacity:0; }
.unlock-building {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  margin-top:24px; opacity:0;
}
.unlock-building-label {
  font-size:8px; letter-spacing:4px; color:rgba(255,255,255,0.22);
  text-transform:uppercase;
}
.unlock-building-name {
  font-size:15px; font-weight:700; letter-spacing:1px;
  color:#fff; text-transform:uppercase;
}
.unlock-building-meta {
  font-size:8px; letter-spacing:2px; color:rgba(255,255,255,0.38);
  text-transform:uppercase;
}

.unlock-btn  {
  margin-top:28px; padding:9px 26px;
  border:1px solid var(--ee-border); background:transparent;
  color:var(--ee-muted); font-family:'Inter',sans-serif; font-size:8px;
  letter-spacing:4px; text-transform:uppercase; cursor:none;
  transition:border-color 0.25s, color 0.25s; opacity:0;
}
.unlock-btn:hover { border-color:#fff; color:#fff; }

#unlock.show .unlock-tag  { animation:ee-lift 0.6s var(--ee-ease) 0.3s  both; }
#unlock.show .unlock-head { animation:ee-lift 0.6s var(--ee-ease) 0.44s both; }
#unlock.show .unlock-rule { animation:ee-lift 0.6s var(--ee-ease) 0.54s both; }
#unlock.show .unlock-q    { animation:ee-lift 0.6s var(--ee-ease) 0.62s both; }
#unlock.show .unlock-auth { animation:ee-lift 0.6s var(--ee-ease) 0.72s both; }
#unlock.show .unlock-building { animation:ee-lift 0.6s var(--ee-ease) 0.86s both; }
#unlock.show .unlock-btn  { animation:ee-lift 0.6s var(--ee-ease) 1.0s both; }

@keyframes ee-lift {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:680px) {
  #ee-body { grid-template-columns:1fr; }
  #card    { display:none; }
  .ee-topbar, #movie-list, #ee-progress { padding-left:18px; padding-right:18px; }
}