/* =============================================
   Lesson 01 — Blockchain Explainer
   Unique component styles
   ============================================= */

/* CHAIN VISUAL (hero) */
.chain-visual { margin-top:52px; display:flex; align-items:center; gap:0; opacity:0; animation:fadeUp .8s ease .8s forwards; }
.chain-block { background:var(--navy-light); border:1px solid rgba(3,136,166,.3); border-radius:10px; padding:14px 20px; text-align:center; min-width:110px; }
.chain-block .block-num { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.2em; color:var(--blue); text-transform:uppercase; margin-bottom:4px; }
.chain-block .block-data { font-size:.78rem; color:var(--white-dim); }
.chain-block .block-hash { font-family:"DM Mono",monospace; font-size:8px; color:rgba(3,136,166,.7); margin-top:4px; }
.chain-link { width:28px; height:2px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); position:relative; flex-shrink:0; }
.chain-link::after { content:"\25B6"; position:absolute; right:-6px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--blue-light); }

/* PROPERTY CARDS */
.property-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:52px; }
.property-card { background:var(--navy-light); border:1px solid rgba(3,136,166,.14); border-radius:16px; padding:34px 30px; position:relative; overflow:hidden; transition:transform .3s,border-color .3s,box-shadow .3s; }
.property-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); }
.property-card:hover { transform:translateY(-5px); border-color:rgba(3,136,166,.35); box-shadow:0 20px 60px rgba(0,0,0,.4); }
.property-card .icon { width:50px; height:50px; border-radius:12px; background:var(--blue-dim); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.property-card h3 { font-family:"Lora",serif; font-size:1.15rem; margin-bottom:10px; }
.property-card p { font-size:.9rem; color:var(--white-dim); line-height:1.75; max-width:100%; margin:0; }

/* ANALOGY SECTION */
.analogy-split { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:52px; }
.analogy-side { background:var(--navy-light); border-radius:16px; padding:36px; border:1px solid rgba(255,255,255,.06); }
.analogy-side h3 { font-family:"Lora",serif; font-size:1.2rem; margin-bottom:16px; }
.analogy-side p { font-size:.92rem; color:var(--white-dim); line-height:1.75; margin:0; }
.analogy-side .tag { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.2em; color:var(--blue); text-transform:uppercase; margin-bottom:12px; display:block; }

/* HOW IT WORKS STEPS */
.steps { display:flex; flex-direction:column; gap:0; margin-top:52px; }
.step-row { display:grid; grid-template-columns:60px 1fr; gap:24px; align-items:stretch; }
.step-line { display:flex; flex-direction:column; align-items:center; }
.step-circle { width:48px; height:48px; border-radius:50%; background:var(--blue-dim); border:2px solid rgba(3,136,166,.4); display:flex; align-items:center; justify-content:center; font-family:"DM Mono",monospace; font-size:.85rem; color:var(--blue-light); font-weight:500; flex-shrink:0; z-index:1; }
.step-connector { width:2px; flex:1; background:linear-gradient(to bottom,rgba(3,136,166,.4),rgba(3,136,166,.1)); margin:4px auto; }
.step-row:last-child .step-connector { display:none; }
.step-content { padding-bottom:40px; }
.step-content h4 { font-family:"Lora",serif; font-size:1.1rem; margin-bottom:8px; }
.step-content p { font-size:.92rem; color:var(--white-dim); margin:0; max-width:600px; }

/* COMPARISON */
.compare-strip { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px; }
.compare-panel { border-radius:16px; padding:32px; }
.compare-panel.old { background:rgba(255,154,60,.05); border:1px solid rgba(255,154,60,.25); }
.compare-panel.new { background:rgba(94,219,160,.05); border:1px solid rgba(94,219,160,.25); }
.compare-panel .label { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.25em; text-transform:uppercase; margin-bottom:14px; }
.compare-panel.old .label { color:var(--orange); }
.compare-panel.new .label { color:var(--green); }
.compare-panel h3 { font-family:"Lora",serif; font-size:1.1rem; margin-bottom:16px; }
.compare-list { display:flex; flex-direction:column; gap:10px; }
.compare-item { display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--white-dim); }
.compare-item svg { flex-shrink:0; margin-top:2px; }

/* USE CASES */
.usecase-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; margin-top:52px; }
.usecase-card { background:var(--navy-light); border:1px solid rgba(3,136,166,.14); border-radius:16px; padding:32px; transition:transform .3s,box-shadow .3s; }
.usecase-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,.35); }
.usecase-tag { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.2em; color:var(--blue); text-transform:uppercase; margin-bottom:12px; display:block; }
.usecase-card h3 { font-family:"Lora",serif; font-size:1.05rem; margin-bottom:12px; }
.usecase-card p { font-size:.88rem; color:var(--white-dim); margin:0; line-height:1.75; }

/* LEDGER DEMO — animated blockchain concepts */
.ledger-demo { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:48px 0 16px; }
.demo-card { background:var(--navy-light); border:1px solid rgba(3,136,166,.15); border-radius:16px; padding:28px 20px; text-align:center; }
.demo-visual { height:110px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.demo-label { font-family:"DM Mono",monospace; font-size:.72rem; letter-spacing:.1em; color:var(--white-dim); margin:0; text-transform:uppercase; }

/* Card 1: Shared visibility — nodes around central doc */
.vis-shared { position:relative; width:120px; height:120px; }
.vis-ring-line { position:absolute; top:50%; left:50%; width:96px; height:96px; transform:translate(-50%,-50%); border:1px dashed rgba(3,136,166,.2); border-radius:50%; }
.vis-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:10px; background:var(--blue-dim); border:1px solid rgba(3,136,166,.35); display:flex; align-items:center; justify-content:center; z-index:2; }
.vis-node { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--blue-light); }
.vis-node.n1 { top:7px; left:55px; animation:nodePulse 2.5s ease-in-out infinite 0s; }
.vis-node.n2 { top:40px; left:101px; animation:nodePulse 2.5s ease-in-out infinite .5s; }
.vis-node.n3 { top:91px; left:83px; animation:nodePulse 2.5s ease-in-out infinite 1s; }
.vis-node.n4 { top:91px; left:27px; animation:nodePulse 2.5s ease-in-out infinite 1.5s; }
.vis-node.n5 { top:40px; left:9px; animation:nodePulse 2.5s ease-in-out infinite 2s; }

/* Card 2: Tamper-proof — lock with reject flash */
.vis-locked { position:relative; display:flex; align-items:center; justify-content:center; }
.vis-lock-icon { animation:lockGlow 3s ease-in-out infinite; }
.vis-reject-x { position:absolute; top:-4px; right:-12px; opacity:0; animation:rejectFlash 4s ease-in-out infinite; }

/* Card 3: Permanent records */
.vis-recorded { display:flex; flex-direction:column; gap:8px; width:100%; max-width:170px; }
.rec-row { display:flex; align-items:center; justify-content:space-between; background:rgba(3,136,166,.08); border:1px solid rgba(3,136,166,.15); border-radius:8px; padding:7px 12px; }
.rec-hash { font-family:"DM Mono",monospace; font-size:10px; color:var(--blue-light); letter-spacing:.05em; }

/* Property card icon animations */
.property-card:nth-child(1) .icon svg { animation:iconFloat 4s ease-in-out infinite; }
.property-card:nth-child(2) .icon svg { animation:lockBounce 3s ease-in-out infinite; }
.property-card:nth-child(3) .icon svg { animation:eyeBlink 5s ease-in-out infinite; }
.property-card:nth-child(4) .icon { animation:shieldGlow 3s ease-in-out infinite; }

@keyframes nodePulse { 0%,100%{opacity:.35;box-shadow:0 0 0 0 rgba(42,176,212,0)} 50%{opacity:1;box-shadow:0 0 8px 2px rgba(42,176,212,.25)} }
@keyframes lockGlow { 0%,100%{filter:drop-shadow(0 0 0 transparent)} 50%{filter:drop-shadow(0 0 8px rgba(42,176,212,.35))} }
@keyframes rejectFlash { 0%,35%,65%,100%{opacity:0} 42%,58%{opacity:1} 50%{transform:scale(1.15)} }
@keyframes iconFloat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }
@keyframes lockBounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-2px)} 50%{transform:translateY(1px)} 55%{transform:translateY(0)} }
@keyframes eyeBlink { 0%,42%,58%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.1)} }
@keyframes shieldGlow { 0%,100%{box-shadow:0 0 0 0 rgba(3,136,166,0)} 50%{box-shadow:0 0 16px 4px rgba(3,136,166,.2)} }

/* RESPONSIVE */
@media(max-width:1024px){
  .analogy-split, .compare-strip { grid-template-columns:1fr; }
  .chain-visual { flex-wrap:wrap; justify-content:center; gap:8px; }
  .chain-link { display:none; }
  .ledger-demo { grid-template-columns:1fr; max-width:320px; margin-left:auto; margin-right:auto; }
}

@media(max-width:600px){
  .chain-block { min-width:90px; padding:10px 14px; }
  .block-hash { font-size:10px; }
}