/* ════════════════════════════════════════
   VIEW SWITCHING
════════════════════════════════════════ */
.view { position: fixed; inset: 0; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16,1,0.3,1); }
.view.hidden   { opacity: 0; pointer-events: none; transform: scale(1.015); }
.view.visible  { opacity: 1; pointer-events: all; transform: scale(1); }
.view.exit     { opacity: 0; transform: scale(0.97); }

/* ════════════════════════════════════════
   HOME SCREEN
════════════════════════════════════════ */
#view-home {
  z-index: 10;
  background: var(--color-bg-primary);
  display: flex; align-items: center; justify-content: center;
}
.home-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(90,169,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 50%, rgba(79,209,197,0.04) 0%, transparent 70%),
    var(--color-bg-primary);
}
.home-bg::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.5) 100%);
  pointer-events:none;
}
.home-vignette { position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.5) 100%); }
.particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.spark { position:absolute; bottom:-10px; border-radius:50%; animation:floatUp linear infinite; opacity:0; }
@keyframes floatUp {
  0%  { transform:translateY(0) translateX(0) scale(1); opacity:0; }
  10% { opacity:.6; }
  50% { transform:translateY(-40vh) translateX(var(--drift)) scale(.8); opacity:.25; }
  100%{ transform:translateY(-90vh) translateX(calc(var(--drift)*2)) scale(.2); opacity:0; }
}
.home-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; padding:2rem; animation:sceneIn 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes sceneIn { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.h-rule { display:flex; align-items:center; gap:1rem; width:100%; max-width:560px; margin-bottom:.5rem; }
.h-rule-line { flex:1; height:1px; background:linear-gradient(to right,transparent,var(--color-border-h),transparent); }
.h-rule-diamond { width:7px; height:7px; background:var(--color-accent-primary); transform:rotate(45deg);
  box-shadow:0 0 8px rgba(90,169,255,0.5); flex-shrink:0; }
.logo-wrap { display:flex; flex-direction:column; align-items:center; margin-bottom:2.5rem; }
.logo-eyebrow { font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:.45em; color:var(--color-text-muted); text-transform:uppercase; margin-bottom:.6rem; animation:fadeSlowIn 2s .4s both; }
.logo-title { font-family:'Cinzel Decorative',serif; font-size:clamp(2.8rem,7vw,5rem); font-weight:700; letter-spacing:.05em; line-height:1;
  background:linear-gradient(180deg, var(--color-accent-primary) 0%, var(--color-grid) 50%, var(--color-accent-secondary) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 24px rgba(90,169,255,.25)); animation:fadeSlowIn 2s .2s both; }
.logo-sub { font-size:.9rem; font-style:italic; color:var(--color-text-muted); letter-spacing:.15em; margin-top:.7rem; animation:fadeSlowIn 2s .7s both; }
@keyframes fadeSlowIn { from{opacity:0} to{opacity:1} }
.home-panel { position:relative; width:100%; max-width:480px;
  background:var(--color-bg-panel);
  border:1px solid var(--color-border-h);
  padding:2.4rem 2.8rem 2.6rem;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  box-shadow: var(--color-surface-in), 0 16px 48px rgba(0,0,0,.4);
  animation:fadeSlowIn 1.8s .5s both; }
.home-panel::before { content:'❧'; position:absolute; top:.7rem; left:1rem; font-size:1.1rem; color:var(--color-text-faint); }
.home-panel::after  { content:'❧'; position:absolute; bottom:.7rem; right:1rem; font-size:1.1rem; color:var(--color-text-faint); transform:rotate(180deg); }
.home-menu { display:flex; flex-direction:column; gap:1rem; }
.h-btn { position:relative; display:flex; align-items:center; gap:1.2rem; padding:1rem 1.4rem;
  background:transparent; border:1px solid var(--color-border);
  color:var(--color-text-primary);
  font-family:'Cinzel',serif; font-size:.9rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; cursor:pointer; transition:all .2s; overflow:hidden; text-align:left; width:100%; }
.h-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(90,169,255,.06),transparent); opacity:0; transition:opacity .2s; }
.h-btn:hover::before { opacity:1; }
.h-btn:hover { border-color:var(--color-border-h); color:var(--color-accent-primary); transform:translateX(4px);
  box-shadow:-3px 0 0 var(--color-accent-primary), 0 0 16px rgba(90,169,255,.08); }
.h-btn:active { transform:translateX(2px) scale(.99); }
.h-btn-icon { font-size:1.5rem; line-height:1; flex-shrink:0; filter:drop-shadow(0 0 4px rgba(90,169,255,.35)); transition:filter .2s; }
.h-btn:hover .h-btn-icon { filter:drop-shadow(0 0 8px rgba(90,169,255,.7)); }
.h-btn-text { flex:1; }
.h-btn-label { display:block; font-size:.8rem; letter-spacing:.15em; }
.h-btn-desc { display:block; font-family:'Inter',sans-serif; font-size:.78rem; font-style:italic; font-weight:400; letter-spacing:.03em; color:var(--color-text-muted); text-transform:none; margin-top:.15rem; transition:color .2s; }
.h-btn:hover .h-btn-desc { color:rgba(90,169,255,.65); }
.h-btn-arrow { font-size:.8rem; color:var(--color-text-muted); transition:all .2s; }
.h-btn:hover .h-btn-arrow { color:var(--color-accent-primary); transform:translateX(3px); }
.h-divider { display:flex; align-items:center; gap:.8rem; color:var(--color-text-muted); font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:.2em; }
.h-divider::before,.h-divider::after { content:''; flex:1; height:1px; background:linear-gradient(to right,transparent,var(--color-border),transparent); }
.home-footer { margin-top:2rem; font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.25em; color:var(--color-text-faint); text-transform:uppercase; animation:fadeSlowIn 2.5s 1.2s both; }
.home-cp-btn:hover { border-color:var(--color-border-h) !important; color:var(--color-accent-primary) !important; box-shadow:0 0 12px rgba(90,169,255,.1); }

/* ════════════════════════════════════════
   HOME MODALS
════════════════════════════════════════ */
.h-modal-overlay { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.65); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s; }
.h-modal-overlay.active { opacity:1; pointer-events:all; }
.h-modal { position:relative; background:var(--color-bg-panel); border:1px solid var(--color-border-h);
  padding:2.4rem 2.8rem; width:100%; max-width:420px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transform:scale(.95) translateY(10px); transition:transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 60px rgba(0,0,0,.5); }
.h-modal-overlay.active .h-modal { transform:scale(1) translateY(0); }
.h-modal-title { font-family:'Cinzel Decorative',serif; font-size:1.2rem; color:var(--color-accent-primary); margin-bottom:.4rem; }
.h-modal-sub { font-style:italic; color:var(--color-text-muted); font-size:.85rem; margin-bottom:1.8rem; }
.h-field-label { display:block; font-family:'Cinzel',serif; font-size:.65rem; letter-spacing:.3em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:.5rem; }
.h-field-input { width:100%; background:var(--color-bg-elevated); border:1px solid var(--color-border);
  color:var(--color-text-primary); font-family:'Inter',sans-serif; font-size:1rem;
  padding:.7rem 1rem; outline:none; transition:border-color .2s,box-shadow .2s; margin-bottom:1.2rem; }
.h-field-input::placeholder { color:var(--color-text-faint); }
.h-field-input:focus { border-color:var(--color-accent-primary); box-shadow:0 0 0 3px rgba(90,169,255,.12); }
.h-modal-actions { display:flex; gap:.8rem; margin-top:.4rem; }
.h-btn-primary { flex:1; padding:.8rem 1rem;
  background:linear-gradient(135deg, rgba(90,169,255,.8), rgba(79,209,197,.8));
  border:none; color:#0F1217;
  font-family:'Cinzel',serif; font-size:.78rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:all .2s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); }
.h-btn-primary:hover { filter:brightness(1.1); box-shadow:0 0 20px rgba(90,169,255,.25); }
.h-btn-secondary { padding:.8rem 1.2rem; background:transparent; border:1px solid var(--color-border);
  color:var(--color-text-muted);
  font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:all .2s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px)); }
.h-btn-secondary:hover { border-color:var(--color-border-h); color:var(--color-text-primary); }
.h-modal-close { position:absolute; top:.9rem; right:1rem; background:none; border:none; color:var(--color-text-faint); font-size:1.2rem; cursor:pointer; transition:color .2s; }
.h-modal-close:hover { color:var(--color-accent-primary); }
.code-display { display:flex; align-items:center; gap:.8rem; background:var(--color-bg-elevated); border:1px solid var(--color-border-h); padding:1rem 1.2rem; margin-bottom:1.2rem; }
.code-value { flex:1; font-family:'JetBrains Mono',monospace; font-size:1.8rem; letter-spacing:.35em; color:var(--color-accent-primary); font-weight:500;
  text-shadow:0 0 16px rgba(90,169,255,.35); }
.code-copy { background:none; border:none; color:var(--color-text-muted); font-size:1.1rem; cursor:pointer; padding:.3rem; transition:color .2s,transform .15s; }
.code-copy:hover { color:var(--color-accent-primary); transform:scale(1.1); }
.code-hint { font-style:italic; color:var(--color-text-muted); font-size:.82rem; margin-bottom:1.5rem; line-height:1.5; }