/* rockfall.css – Fire in the Hole 3 Demo | External progressive enhancements */
/* Base styles live inline in index.php. This file handles animations, hovers, transitions, print & a11y. */

/* === VIEWPORT ENTRY ANIMATIONS === */
@keyframes fadeInUp { from { transform:translateY(24px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@keyframes slideInLeft { from { transform:translateX(-32px) } to { opacity:1; transform:translateX(0) } }
@keyframes shimmer { to { background-position:200% center } }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 0 0 rgba(211,84,0,.4) } 50% { box-shadow:0 0 18px 4px rgba(211,84,0,.15) } }
@keyframes fillBar { from { width:0 } }

.animate-ready .seam-section,
.animate-ready .ore-card,
.animate-ready .stat-block,
.animate-ready .faq-item,
.animate-ready .author-shaft,
.animate-ready .cta-strip,
.animate-ready .rtp-row { transform:translateY(24px); transition:opacity .6s ease-out, transform .6s ease-out }

.animate-ready .shaft-toc { transition:opacity .5s ease-out, transform .5s ease-out }

.animate-ready .visible { opacity:1; transform:translate(0) }
.animate-ready .visible:nth-child(2) { transition-delay:.1s }
.animate-ready .visible:nth-child(3) { transition-delay:.2s }
.animate-ready .visible:nth-child(4) { transition-delay:.3s }
.animate-ready .visible:nth-child(5) { transition-delay:.4s }

/* === NAV SCROLL-SHRINK === */
.drill-head { transition:padding .3s ease, box-shadow .3s ease, background-color .3s ease }
.drill-head.scrolled { padding-top:.5rem; padding-bottom:.5rem; box-shadow:0 2px 12px rgba(0,0,0,.35) }
.drill-head.scrolled .brand-mark { transform:scale(.88); transition:transform .3s ease }

/* === HOVER ENHANCEMENTS === */
.ore-card { transition:transform .25s ease, box-shadow .25s ease }
.ore-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.25) }

.table-shaft table tr { transition:background-color .2s ease }
.table-shaft table tbody tr:hover { background-color:rgba(74,144,217,.08) }

.blast-btn, .btn-dynamite, .btn-ore { transition:transform .2s ease, box-shadow .2s ease, filter .2s ease }
.blast-btn:hover, .btn-dynamite:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(211,84,0,.35); filter:brightness(1.08) }
.btn-ore:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(218,165,32,.3); filter:brightness(1.08) }

.mine-menu a { position:relative }
.mine-menu a::after { content:''; position:absolute; bottom:-2px; left:50%; width:0; height:2px; background:var(--ore); transition:width .25s ease, left .25s ease }
.mine-menu a:hover::after { width:100%; left:0 }

.bedrock-footer a { transition:color .2s ease }
.bedrock-footer a:hover { color:var(--ore) }

.gallery-shaft img { transition:transform .3s ease, box-shadow .3s ease; cursor:zoom-in }
.gallery-shaft img:hover { transform:scale(1.03); box-shadow:0 6px 20px rgba(0,0,0,.3) }

/* === IMAGE SKELETON SHIMMER === */
.img-loading { background:linear-gradient(90deg, var(--soot) 25%, #3a4a5c 50%, var(--soot) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite }

/* === DECORATIVE TOUCHES === */
.seam-section + .seam-section::before { content:''; display:block; width:80px; height:3px; margin:0 auto 2rem; background:linear-gradient(90deg, var(--dynamite), var(--ore)); border-radius:2px }

::selection { background:var(--dynamite); color:var(--ash) }

.tunnel-hero .blast-btn { animation:pulseGlow 2.5s ease-in-out infinite }

/* === DEMO OVERLAY === */
.demo-pit { visibility:hidden; transition:opacity .35s ease, visibility .35s ease }
.demo-pit.active { visibility:visible }
.demo-cage { transform:scale(.92); transition:transform .35s ease }
.demo-pit.active .demo-cage { transform:scale(1) }
.demo-shut { transition:color .2s ease, transform .2s ease }
.demo-shut:hover { color:var(--dynamite); transform:rotate(90deg) }

/* === TOC SCROLL SPY === */
.shaft-toc a { transition:color .2s ease, padding-left .2s ease, border-color .2s ease }
.shaft-toc .toc-active { color:var(--dynamite); padding-left:.75rem; border-left:3px solid var(--dynamite) }

/* === VOLATILITY METER & RTP BARS === */
.volt-fill { transition:width 1s ease-out .3s; animation:fillBar 1s ease-out .3s }
.rtp-fill { transition:width .8s ease-out .2s; animation:fillBar .8s ease-out .2s }
.volt-bar:hover .volt-fill { filter:brightness(1.15) }
.rtp-row:hover .rtp-fill { filter:brightness(1.15) }

/* === BET CALCULATOR === */
.calc-shaft input[type="number"],
.calc-shaft select { transition:border-color .2s ease, box-shadow .2s ease }
.calc-shaft input[type="number"]:focus,
.calc-shaft select:focus { border-color:var(--vein); box-shadow:0 0 0 3px rgba(74,144,217,.25); outline:none }

/* === SCROLL TO TOP === */
.shaft-top { transform:translateY(12px); pointer-events:none; transition:opacity .3s ease, transform .3s ease }
.shaft-top.visible { opacity:1; transform:translateY(0); pointer-events:auto }
.shaft-top:hover { background:var(--dynamite); transform:translateY(-3px) }

/* === STAT STRIP COUNTERS === */
.stat-block { transition:transform .2s ease }
.stat-block:hover { transform:scale(1.05) }

/* === RG STRIP === */
.rg-strip a { transition:opacity .2s ease }
.rg-strip a:hover { opacity:.85 }

/* === RESPONSIVE EDGE CASES === */
@media (max-width:480px) {
  .drill-head.scrolled .brand-mark { transform:scale(.8) }
  .seam-section + .seam-section::before { width:50px }
  .gallery-shaft img:hover { transform:none }
  .rg-strip { padding: 10px 0!important; line-height: 17px; }
}
@media (max-width:375px) {
  .rg-strip { padding: 10px 0!important; line-height: 8px; }
}

@media (max-width: 900px) {
	.mine-menu {
	  top: 64px !important;
      width: 200px !important;
      gap: 0 !important;
	}
	
	.mine-menu li {
        padding: .5rem 1.1rem !important;
        background: #244165;
        width: inherit;
        border-bottom: 1px solid rgb(255 255 255 / 50%) !important;
    }
	
}

@media (min-width:1400px) {
  .ore-card:hover { transform:translateY(-6px) }
}

/* === PRINT STYLES === */
@media print {
  .drill-head, .mine-menu, .bedrock-footer, .demo-pit, .shaft-top, .rg-strip, .blast-btn, .btn-dynamite, .btn-ore, .cta-strip { display:none !important }
  .faq-body { display:block !important; height:auto !important; overflow:visible !important }
  a[href]::after { content:" (" attr(href) ")"; font-size:.85em; color:var(--gravel) }
  .seam-section, .ore-card, .faq-item { break-inside:avoid }
  body { background:#fff; color:#000 }
  .animate-ready .seam-section, .animate-ready .ore-card, .animate-ready .stat-block,
  .animate-ready .faq-item, .animate-ready .author-shaft, .animate-ready .cta-strip,
  .animate-ready .rtp-row, .animate-ready .shaft-toc { opacity:1 !important; transform:none !important }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  .animate-ready .seam-section, .animate-ready .ore-card, .animate-ready .stat-block,
  .animate-ready .faq-item, .animate-ready .author-shaft, .animate-ready .cta-strip,
  .animate-ready .rtp-row, .animate-ready .shaft-toc { opacity:1; transform:none }
}

/* === HIGH CONTRAST === */
@media (forced-colors:active) {
  .blast-btn, .btn-dynamite, .btn-ore { border:2px solid ButtonText }
  .volt-fill, .rtp-fill { forced-color-adjust:none }
  .ore-card { border:1px solid CanvasText }
  .shaft-toc .toc-active { border-left-color:Highlight }
}