/* =====================================================
   SPLASH SCREEN v3 — Axe Breaks Wall — css/splash.css
   ===================================================== */

/* ── Base overlay ── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: #07080a;
  overflow: hidden;
  clip-path: circle(150vmax at 50% 50%);
}

/* Subtle ambient concrete texture */
#splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* ── Brick wall layer ── */
.splash__wall {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
}

/* Individual brick */
.splash__brick {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px solid #0d0c0a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.02);
}

@keyframes brickFly {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  12%  { opacity: 1; }
  100% { transform: translate(var(--tx, 200px), var(--ty, 200px)) rotate(var(--rot, 200deg)); opacity: 0; }
}

.splash__brick.is-breaking {
  animation: brickFly 0.85s cubic-bezier(0.28, 0.6, 0.48, 1) var(--bdelay, 0ms) forwards;
}

/* ── Crack lines overlay ── */
.splash__cracks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
}

.splash__crack {
  fill: none;
  stroke: rgba(255, 200, 60, 0);
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}

@keyframes crackGrow {
  0%   {
    stroke-dashoffset: 160;
    stroke: rgba(255, 230, 80, 0.98);
    filter: drop-shadow(0 0 5px rgba(255,200,50,0.95));
  }
  35%  { stroke: rgba(240, 120, 20, 0.85); }
  100% {
    stroke-dashoffset: 0;
    stroke: rgba(220, 90, 10, 0.55);
    filter: drop-shadow(0 0 2px rgba(220,80,10,0.4));
  }
}

.splash__crack.splash--in {
  animation: crackGrow 0.35s ease calc(var(--ci, 0) * 0.06s) forwards;
}

/* ── Axe wrapper ── */
.splash__axe-wrap {
  position: absolute;
  top: calc(42% - 50px);
  left: calc(50% - 60px);
  width: 120px;
  z-index: 20;
  opacity: 0;
  transform: translateX(55vw) translateY(-48vh) rotate(63deg);
  pointer-events: none;
  filter:
    drop-shadow(0 10px 30px rgba(0,0,0,0.8))
    drop-shadow(0 0 22px rgba(232,101,10,0.4));
}

.splash__axe-wrap.splash--swing {
  animation: axeSwing 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes axeSwing {
  0%   { transform: translateX(55vw) translateY(-48vh) rotate(63deg); opacity: 0; }
  6%   { opacity: 1; }
  74%  { transform: translateX(0) translateY(0) rotate(-11deg); }
  87%  { transform: translateX(0) translateY(0) rotate(4deg); }
  100% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
}

.splash__axe-wrap.splash--recoil {
  animation: axeRecoil 0.6s cubic-bezier(0.55, 0, 0.8, 0.5) forwards;
}

@keyframes axeRecoil {
  0%   { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
  22%  { transform: translateX(-12px) translateY(-18px) rotate(-14deg); opacity: 1; }
  100% { transform: translateX(-40vw) translateY(-42vh) rotate(-55deg); opacity: 0; }
}

/* ── Shockwave ring ── */
.splash__shockwave {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 4px solid rgba(255, 220, 70, 0.95);
  z-index: 15;
  pointer-events: none;
  opacity: 0;
}

.splash__shockwave.splash--burst {
  animation: shockBurst 0.58s cubic-bezier(0.3, 0, 0.7, 1) forwards;
}

@keyframes shockBurst {
  0%   { transform: scale(1);  opacity: 0.95; border-color: rgba(255,230,80,0.95); }
  25%  { border-color: rgba(232,101,10,0.8); }
  100% { transform: scale(75); opacity: 0; border-color: rgba(232,101,10,0); }
}

/* ── Hit flash ── */
.splash__hit-flash {
  position: absolute;
  top: 50%; left: 50%;
  width: 200px; height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,230,80,1) 0%,
    rgba(240,130,10,0.85) 28%,
    rgba(232,101,10,0.4) 55%,
    transparent 72%);
  z-index: 14;
  pointer-events: none;
  animation: hitFlash 0.45s cubic-bezier(0.4, 0, 0.7, 1) forwards;
}

@keyframes hitFlash {
  0%   { transform: scale(0.05); opacity: 1; }
  28%  { transform: scale(1.1);  opacity: 0.95; }
  100% { transform: scale(3.8);  opacity: 0; }
}

/* ── Debris / dust particles ── */
.splash__dust {
  position: absolute;
  top: 50%; left: 50%;
  pointer-events: none;
  z-index: 12;
}

.splash__dust-p {
  position: absolute;
  top: 0; left: 0;
  background: rgba(165, 140, 105, 0.78);
  animation: dustFly var(--pdur, 0.65s) ease var(--pdelay, 0s) forwards;
}

@keyframes dustFly {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); opacity: 0.88; }
  60%  { opacity: 0.5; }
  100% {
    transform: translate(var(--pdx,80px), var(--pdy,-60px)) rotate(var(--prot,240deg)) scale(0.06);
    opacity: 0;
  }
}

/* ── Brand reveal (glows behind breaking wall) ── */
.splash__reveal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 8;
  pointer-events: none;
  gap: 0.6rem;
}

.splash__brand-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 70vw; height: 50vh;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse,
    rgba(232,101,10,0.32) 0%,
    rgba(232,101,10,0.10) 40%,
    transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.75s ease;
  z-index: -1;
}

.splash__reveal.splash--in .splash__brand-glow {
  opacity: 1;
}

/* ── Brand name ── */
.splash__brand {
  margin: 0;
  user-select: none;
  line-height: 1.15;
  text-align: center;
}

.splash__brand-word {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(3rem, 9vw, 8rem);
  letter-spacing: 0.2em;
  color: #ffffff;
  opacity: 0;
  transform: translateY(-80px) scaleY(1.55);
  text-shadow:
    0 0 35px rgba(232,101,10,0.75),
    0 0 75px rgba(232,101,10,0.38),
    0 4px 22px rgba(0,0,0,0.65);
  will-change: transform, opacity;
}

.splash__brand-word.splash--in {
  animation: wordCrash 0.52s cubic-bezier(0.22, 1.42, 0.36, 1) forwards;
}

@keyframes wordCrash {
  0%   { opacity: 0; transform: translateY(-90px) scaleY(1.65); }
  42%  { opacity: 1; transform: translateY(8px) scaleY(0.92); }
  65%  { transform: translateY(-3px) scaleY(1.02); }
  82%  { transform: translateY(2px) scaleY(0.99); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* Accent rule between name and subtitle */
.splash__rule {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e8650a 25%, #f5a623 75%, transparent);
  margin: 0 auto;
  opacity: 0;
  transition: width 0.65s ease 0.1s, opacity 0.3s ease;
}

.splash__rule.splash--in {
  width: 220px;
  opacity: 1;
}

/* ── Subtitle tagline ── */
.splash__brand-sub {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(0.6rem, 1.5vw, 0.88rem);
  font-weight: 300;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: rgba(232,101,10,0.88);
  margin: 0;
  opacity: 0;
  transform: translateY(14px);
}

.splash__brand-sub.splash--in {
  animation: subReveal 0.5s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}

@keyframes subReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Screen shake on impact ── */
@keyframes screenShake {
  0%   { transform: translate(0,0) rotate(0deg); }
  8%   { transform: translate(-8px,-5px) rotate(-0.7deg); }
  18%  { transform: translate(7px, 6px) rotate(0.6deg); }
  30%  { transform: translate(-5px, 3px) rotate(-0.45deg); }
  44%  { transform: translate(4px,-4px) rotate(0.3deg); }
  58%  { transform: translate(-2px, 2px) rotate(-0.15deg); }
  72%  { transform: translate(2px,-1px) rotate(0.08deg); }
  85%  { transform: translate(-1px, 0px); }
  100% { transform: translate(0,0); }
}

#splash.splash--shake {
  animation: screenShake 0.52s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

/* ── Progress ring (bottom-right) ── */
.splash__ring-wrap {
  position: absolute;
  bottom: 2.5rem; right: 3rem;
  z-index: 10;
  width: 68px; height: 68px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.splash__ring-wrap.splash--in { opacity: 1; }

.splash__ring { display: block; transform: rotate(-90deg); }

.splash__ring-bg {
  fill: none;
  stroke: rgba(255,255,255,0.05);
  stroke-width: 2;
}

.splash__ring-fill {
  fill: none;
  stroke: #e8650a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 188.5;
  stroke-dashoffset: 188.5;
  filter: drop-shadow(0 0 5px rgba(232,101,10,0.65));
  transition: stroke-dashoffset 0.88s cubic-bezier(0.4, 0, 0.2, 1);
}

.splash__ring-fill.splash--in { stroke-dashoffset: 0; }

.splash__ring-pct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-size: 0.72rem; font-weight: 500;
  color: #e8650a; letter-spacing: 0.03em;
}

/* ── Progress bar (bottom-left) ── */
.splash__bar-wrap {
  position: absolute;
  bottom: 2.5rem; left: 3rem; right: calc(3rem + 88px);
  z-index: 10;
  opacity: 0;
  display: flex; flex-direction: column; gap: 0.45rem;
  transition: opacity 0.35s ease;
}

.splash__bar-wrap.splash--in { opacity: 1; }

.splash__bar-label {
  font-family: 'Barlow', sans-serif;
  font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.17);
}

.splash__bar-track {
  height: 1px;
  background: rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}

.splash__bar-fill {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 0;
  background: linear-gradient(90deg, rgba(232,101,10,0.4), #e8650a);
  box-shadow: 0 0 8px rgba(232,101,10,0.5);
  transition: width 0.88s cubic-bezier(0.4, 0, 0.2, 1);
}

.splash__bar-fill.splash--in { width: 100%; }

/* ── Corner marks ── */
.splash__corner {
  position: absolute; width: 28px; height: 28px;
  z-index: 10; opacity: 0;
  animation: crnIn 0.4s ease 0.15s forwards;
}

.splash__corner--tl { top: 1.5rem; left: 1.5rem;   border-top: 1px solid rgba(232,101,10,0.22); border-left:  1px solid rgba(232,101,10,0.22); }
.splash__corner--tr { top: 1.5rem; right: 1.5rem;  border-top: 1px solid rgba(232,101,10,0.22); border-right: 1px solid rgba(232,101,10,0.22); }
.splash__corner--bl { bottom: 1.5rem; left: 1.5rem;  border-bottom: 1px solid rgba(232,101,10,0.22); border-left:  1px solid rgba(232,101,10,0.22); }
.splash__corner--br { bottom: 1.5rem; right: 1.5rem; border-bottom: 1px solid rgba(232,101,10,0.22); border-right: 1px solid rgba(232,101,10,0.22); }

@keyframes crnIn { to { opacity: 1; } }

/* ── Iris wipe exit ── */
#splash.is-exiting {
  transition: clip-path 0.72s cubic-bezier(0.76, 0, 0.24, 1);
  clip-path: circle(0% at 50% 50%);
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .splash__axe-wrap {
    width: 80px;
    top: calc(42% - 34px);
    left: calc(50% - 40px);
  }
  .splash__brand-word { font-size: clamp(2.2rem, 12vw, 3.8rem); }
  .splash__bar-wrap  { left: 1.5rem; right: calc(1.5rem + 80px); bottom: 1.5rem; }
  .splash__ring-wrap { right: 1.5rem; bottom: 1.5rem; }
  .splash__corner    { width: 18px; height: 18px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .splash__axe-wrap,
  .splash__shockwave,
  .splash__hit-flash,
  .splash__dust-p    { animation: none !important; opacity: 0 !important; }

  .splash__brick.is-breaking {
    animation: none !important;
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
  }

  .splash__brand-word {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .splash__brand-sub {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .splash__rule    { width: 220px !important; opacity: 1 !important; }
  .splash__bar-fill  { width: 100% !important; }
  .splash__ring-fill { stroke-dashoffset: 0 !important; transition: none !important; }
  .splash__ring-wrap, .splash__bar-wrap { opacity: 1 !important; }
  .splash__reveal    { opacity: 1; }
  .splash__reveal .splash__brand-glow { opacity: 1; }

  #splash.is-exiting { transition: clip-path 0.3s ease !important; }
}