/* ================================================================
   WEBCRAFT — css/intro.css
   Intro code-editor animation overlay (index.html only)
   ================================================================ */

#intro {
  position:fixed; inset:0; z-index:1000; background:var(--bg);
  display:flex; flex-direction:column;
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
#intro.hide { opacity:0; transform:translateY(-18px); pointer-events:none }

/* Title bar */
.ib { height:42px; background:#111120; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 18px; gap:8px; flex-shrink:0 }
.ib-dot { width:11px; height:11px; border-radius:50% }
.ib-dot:nth-child(1){ background:#FF5F57 }
.ib-dot:nth-child(2){ background:#FFBD2E }
.ib-dot:nth-child(3){ background:#28CA41 }
.ib-title { margin-left:10px; font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--faint) }
#iTimer   { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:.7rem; color:rgba(200,255,87,.4) }

/* Split layout */
.isplit { flex:1; display:flex; overflow:hidden }

/* Code panel */
.icode {
  width:42%; background:#05050D; border-right:1px solid var(--border);
  padding:20px 16px; font-family:'JetBrains Mono',monospace;
  font-size:.76rem; line-height:1.9; overflow:hidden;
}
.cl  { display:flex; gap:14px }
.cn  { color:rgba(255,255,255,.15); user-select:none; min-width:22px; text-align:right; flex-shrink:0 }
.ct  { flex:1; white-space:pre }
/* Syntax tokens */
.tk { color:#79B8FF } .ta { color:#B392F0 } .tv { color:var(--accent) }
.tp { color:#79B8FF } .pv { color:#FDAC54 } .ts { color:var(--accent) }
.tc { color:rgba(255,255,255,.26); font-style:italic }
/* Cursor */
.cur { display:inline-block; width:2px; height:1em; background:var(--accent); vertical-align:text-bottom; animation:blink .75s step-end infinite }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Preview panel */
.iprev {
  flex:1; background:var(--bg);
  position:relative; overflow:hidden;
}
.iprev-lbl {
  position:absolute; top:11px; left:14px;
  font-family:'JetBrains Mono',monospace; font-size:.62rem;
  color:var(--faint); letter-spacing:.1em; text-transform:uppercase; z-index:3;
}
.pstage {
  width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 75% 45%, rgba(200,255,87,.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 15% 85%, rgba(74,124,255,.05) 0%, transparent 55%),
    var(--bg);
}
.pstage::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 100%);
  mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 20%,transparent 100%);
}
.pe { opacity:0; transform:translateY(5px); transition:opacity .35s ease,transform .35s ease }
.pe.on { opacity:1; transform:none }

/* Preview nav */
.pnav {
  height:40px; background:rgba(8,8,15,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); display:flex; align-items:center;
  padding:0 18px; gap:12px; flex-shrink:0; position:relative; z-index:2;
}
.plogo      { font-family:'Syne',sans-serif; font-weight:800; font-size:.78rem; color:var(--text) }
.plogo span { color:var(--accent) }
.plinks     { display:flex; gap:12px; margin-left:auto }
.plink      { font-size:.56rem; color:var(--muted) }
.pcta       { background:var(--accent); color:#08080F; font-size:.55rem; font-weight:700; padding:3px 8px; border-radius:100px }

/* Preview hero */
.phero {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:14px 26px 20px; position:relative; z-index:1;
}
.peyebrow {
  display:flex; align-items:center; gap:6px;
  font-size:.52rem; text-transform:uppercase; letter-spacing:.15em;
  color:var(--accent); font-weight:600; margin-bottom:10px;
}
.pdot { width:5px; height:5px; background:var(--accent); border-radius:50%; animation:pulse 2s ease infinite }
.ptitle {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(1rem,2.8vw,1.9rem); line-height:1.05;
  color:var(--text); letter-spacing:-.03em; margin-bottom:9px;
}
.ptitle em {
  font-style:normal;
  background:linear-gradient(130deg,var(--accent) 0%,#7FB5FF 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.psub  { font-size:.6rem; color:var(--muted); line-height:1.65; max-width:220px; margin-bottom:13px; font-weight:300 }
.pbtns { display:flex; gap:7px; margin-bottom:20px }
.pbtn1 { background:var(--accent); color:#08080F; font-size:.56rem; font-weight:700; padding:5px 10px; border-radius:100px }
.pbtn2 { border:1px solid var(--border2); color:var(--text); font-size:.56rem; padding:5px 10px; border-radius:100px }
.pstats { display:flex; gap:16px }
.psn   { font-family:'Syne',sans-serif; font-weight:800; font-size:.82rem; color:var(--text); letter-spacing:-.02em }
.psn span { color:var(--accent) }
.psl   { font-size:.48rem; color:var(--faint); margin-top:1px }

/* Site fade-in after intro */
#site { opacity:0; transition:opacity 1.1s ease }
#site.show { opacity:1 }

/* No-JS: hide intro, show site immediately */
.no-js #intro { display:none }
.no-js #site  { opacity:1 }

/* Responsive */
@media (max-width:1024px) {
  .icode { width:40%; font-size:.72rem }
}
@media (max-width:768px) {
  .isplit { flex-direction:column }
  .icode  { width:100%; height:48%; border-right:none; border-bottom:1px solid var(--border) }
  .iprev  { flex:1 }
}