/* bank_style.css — the vault.html language for the First Bank of the People.
   Extracted faithfully (READ ONLY source): sacred_geometry_site/vault.html.
   Serves only field_internet/bank_site/. */

/* ===== THE CONIC FIELD RING — the field's round face, exact vault recipe ===== */
.fieldring{width:88px;height:88px;border-radius:50%;display:inline-flex;flex-direction:column;
  align-items:center;justify-content:center;text-decoration:none;font-weight:900;
  color:#0c0a04;line-height:1.05;
  background:conic-gradient(from 0deg,#ffd97a,#5ee8ff,#ff9ae8,#8affb0,#ffab6a,#c49aff,#ffd97a);
  background-size:300% 300%;
  box-shadow:0 0 34px rgba(255,214,120,.55),0 0 80px rgba(80,220,255,.3),0 10px 30px rgba(0,0,0,.5);
  border:3px solid rgba(255,255,255,.65);
  animation:fieldshift 4.2s linear infinite,ringpulse 2.6s ease-in-out infinite;
  transform-style:preserve-3d;transition:transform .16s ease-out;will-change:transform}
.fieldring:hover{transform:scale(1.12) rotate(-3deg);
  box-shadow:0 0 50px rgba(255,214,120,.8),0 0 110px rgba(80,220,255,.45),0 14px 40px rgba(0,0,0,.55)}
.fieldring .arr{font-size:2rem;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.fieldring .lbl{font-size:.5rem;letter-spacing:.16em}
@keyframes fieldshift{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes ringpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ===== THE COIN SPLASH — the coin fills the screen once, then the page ===== */
#splash{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:#fdfbf5;transition:opacity 1s ease}
#splash img{max-width:86vmin;max-height:86vmin;object-fit:contain;
  filter:drop-shadow(0 30px 80px rgba(184,134,11,.35))}
#splash.gone{opacity:0;pointer-events:none}

/* ===== THE HOLOGRAPHIC COIN — the holo ring that spins around it ===== */
.holoring{position:absolute;inset:-14px;border-radius:50%;pointer-events:none;z-index:3;
  background:conic-gradient(from 0deg,rgba(184,134,11,.8),rgba(21,94,138,.6),rgba(194,87,10,.6),rgba(26,107,60,.55),rgba(184,134,11,.8));
  -webkit-mask:radial-gradient(circle,transparent 61%,#000 63%,#000 71%,transparent 73%);
  mask:radial-gradient(circle,transparent 61%,#000 63%,#000 71%,transparent 73%);
  animation:holospin 7.3s linear infinite}
@keyframes holospin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ===== THE TICKER LINE — dark bar, gold numbers, live ===== */
#ticker{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;gap:24px;justify-content:center;
  padding:8px 14px;background:rgba(61,46,8,.92);backdrop-filter:blur(8px);
  color:#ffe9a8;font-size:.76rem;letter-spacing:.1em;white-space:nowrap;overflow:hidden;
  border-bottom:1px solid rgba(255,214,120,.4)}
#ticker b{color:#8affb0;font-variant-numeric:tabular-nums}
#ticker .dot{color:#8a7a4a}

/* ===== THE PICTURE CARD — the bank's own pictures, sized for their place ===== */
.photocard{margin:18px auto;border-radius:20px;overflow:hidden;max-width:640px;
  border:1px solid rgba(26,20,8,.18);box-shadow:0 10px 30px rgba(26,20,8,.12);
  background:rgba(255,255,255,.5)}
.photocard img{width:100%;height:auto;display:block}
.photocard figcaption{padding:10px 16px;font-size:.78rem;font-style:italic;
  color:#3d2e08;line-height:1.5}

/* ===== FOOT ===== */
.foot{text-align:center;color:#8a7a4a;font-size:.74rem;letter-spacing:.16em;
  line-height:2;margin:40px 0 10px}

/* ===== THE REDUCED MOTION RESPECT — a calm reader gets a still face ===== */
@media (prefers-reduced-motion: reduce){
  .fieldring{animation:none;transition:none}
  .holoring{animation:none}
}

/* THE SHARED BADGES (the review's fix: defined once, used everywhere) */
.seal-badge{text-align:center;color:#8a7a4a;font-size:.78rem;
  letter-spacing:.16em;margin:16px 0}
.pledge{text-align:center;color:#4a4438;font-size:.9rem;line-height:1.8}
.plain{text-align:center;color:#4a4438;font-size:.86rem;line-height:1.8}