/* Digital Office hero layer: mining heritage flowing into a connected future. */
:root {
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  --pointer-x: 50%;
  --pointer-y: 50%;
}

body {
  overflow-x: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(21, 23, 33, .04);
  transition: box-shadow .35s ease, background-color .35s ease;
}

.site-header:hover {
  box-shadow: 0 12px 32px rgba(21, 23, 33, .08);
}

.scroll-progress {
  position: fixed;
  z-index: 30;
  inset: 0 auto auto 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #31dcff, #0645f5 72%, #151721);
  box-shadow: 0 0 18px rgba(49, 220, 255, .8);
  pointer-events: none;
}

.hero {
  isolation: isolate;
  min-height: min(740px, calc(100vh - 90px));
  background: #0634b8;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero::before {
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(3, 22, 79, .84) 0%, rgba(5, 49, 165, .56) 42%, rgba(3, 43, 145, .18) 100%),
    url("hero-mining-digital-v2.png");
  background-position: center, center;
  background-size: cover, cover;
  transform: scale(1.07) translate3d(var(--hero-shift-x), var(--hero-shift-y), 0);
  filter: saturate(.96) contrast(1.04);
  transition: transform .25s ease-out;
  animation: hero-landscape-in 1.5s cubic-bezier(.22, 1, .36, 1) both;
}

.hero::after {
  z-index: -1;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(49, 220, 255, .16), transparent 22%),
    linear-gradient(180deg, rgba(3, 21, 77, .08), transparent 45%, rgba(3, 21, 77, .36));
  mix-blend-mode: screen;
  opacity: .85;
}

.hero h1 {
  text-shadow: 0 10px 36px rgba(3, 17, 68, .22);
}

.hero-transition {
  position: absolute;
  z-index: 2;
  right: clamp(24px, 9vw, 140px);
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(255, 255, 255, .72);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: transition-in 1s .65s both;
}

.hero-transition i {
  position: relative;
  display: block;
  width: clamp(42px, 7vw, 100px);
  height: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .36);
}

.hero-transition i::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -20%;
  width: 22px;
  height: 5px;
  border-radius: 50%;
  background: #31dcff;
  box-shadow: 0 0 16px #31dcff;
  animation: signal-run 2.4s ease-in-out infinite;
}

.hero-mark {
  z-index: 1;
  will-change: transform;
  transition: transform .25s ease-out;
}

.hero-mark .ring {
  animation: ring-breathe 5s ease-in-out infinite;
}

.hero-mark .ring-two { animation-delay: -.9s; }
.hero-mark .ring-three { animation-delay: -1.8s; }

.hero-mark .dot {
  animation: dot-pulse 2.7s ease-in-out infinite;
}

.button-light {
  position: relative;
  overflow: hidden;
  transition: color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.button-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #31dcff;
  transform: translateX(-102%);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.button-light:hover {
  color: #071d64;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(1, 18, 83, .22);
}

.button-light:hover::before { transform: translateX(0); }
.button-light > * { position: relative; z-index: 1; }

.platform-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}

.platform-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(49, 220, 255, .17), transparent 31%);
  opacity: 0;
  transition: opacity .35s ease;
}

.platform-card:hover::before { opacity: 1; }
.platform-card > * { position: relative; z-index: 1; }

.intro h2,
.section-head h2,
.notice h2 {
  text-wrap: balance;
}

@keyframes hero-landscape-in {
  from { opacity: 0; transform: scale(1.13) translate3d(var(--hero-shift-x), var(--hero-shift-y), 0); }
  to { opacity: 1; transform: scale(1.07) translate3d(var(--hero-shift-x), var(--hero-shift-y), 0); }
}

@keyframes transition-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes signal-run {
  0%, 100% { left: -20%; opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes ring-breathe {
  0%, 100% { opacity: .58; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }
}

@keyframes dot-pulse {
  0%, 100% { box-shadow: 0 0 0 15px rgba(49, 220, 255, .12), 0 0 22px rgba(49, 220, 255, .35); }
  50% { box-shadow: 0 0 0 28px rgba(49, 220, 255, .04), 0 0 42px rgba(49, 220, 255, .7); }
}

@media (max-width: 800px) {
  .hero { min-height: 650px; }
  .hero-transition { right: 24px; bottom: 72px; font-size: 8px; }
  .hero::before { background-position: 58% center, 58% center; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero-transition,
  .hero-transition i::after,
  .hero-mark .ring,
  .hero-mark .dot { animation: none; }
  .button-light,
  .platform-card,
  .hero::before { transition: none; }
}