/*
 * ENDBRINGER — Version 2 stone altar treatment
 * Loaded after styles.css so Version 1 remains a clean, tagged baseline.
 */

.v2-stone {
  --stone-face: #2c241b;
  --stone-edge: #755035;
  --stone-cavity: #050302;
  --blood-dark: #260504;
}

.v2-stone .hero {
  min-height: max(100svh, 54rem);
  grid-template-columns: minmax(25rem, 0.88fr) minmax(31rem, 1.12fr);
  gap: clamp(1rem, 2.4vw, 3.2rem);
  background: #050403;
  isolation: isolate;
}

.v2-stone .hero-stone {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.v2-stone .hero-stone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.72) contrast(1.1) saturate(0.86);
  transform: scale(1.015);
  transform-origin: 31% 38%;
}

.js .v2-stone .hero-stone img {
  filter: brightness(0.22) contrast(1.18) saturate(0.55);
  transform: scale(1.045);
}

.js.is-ready .v2-stone .hero-stone img {
  filter: brightness(0.72) contrast(1.1) saturate(0.86);
  transform: scale(1.015);
  transition:
    filter 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.72s,
    transform 2.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}

.v2-stone .stone-vignette {
  position: absolute;
  z-index: 4;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 1, 1, 0.2) 0%, transparent 19%, transparent 50%, rgba(2, 1, 1, 0.26) 69%, rgba(2, 1, 1, 0.68) 100%),
    linear-gradient(to bottom, rgba(2, 1, 1, 0.6) 0%, transparent 14%, transparent 68%, rgba(2, 1, 1, 0.72) 100%),
    radial-gradient(ellipse at 27% 48%, transparent 22%, rgba(0, 0, 0, 0.28) 70%);
}

.v2-stone .stone-light {
  position: absolute;
  z-index: 3;
  top: 22%;
  display: block;
  width: clamp(24rem, 39vw, 39rem);
  height: clamp(23rem, 37vw, 37rem);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at center, rgba(255, 179, 77, 0.3) 0%, rgba(233, 93, 29, 0.17) 18%, rgba(129, 35, 12, 0.09) 40%, transparent 68%);
  filter: blur(9px);
  mix-blend-mode: screen;
  transform: scale(0.74);
  transform-origin: center;
}

.v2-stone .stone-light-left {
  left: -17%;
}

.v2-stone .stone-light-right {
  left: 27%;
}

.is-ready .v2-stone .stone-light-left {
  animation:
    stone-light-catch 1s cubic-bezier(0.2, 1.2, 0.3, 1) 1.42s both,
    wall-fire-left 3.8s ease-in-out 2.45s infinite alternate;
}

.is-ready .v2-stone .stone-light-right {
  animation:
    stone-light-catch 1s cubic-bezier(0.2, 1.2, 0.3, 1) 1.58s both,
    wall-fire-right 4.25s ease-in-out 2.6s infinite alternate;
}

.v2-stone .hero::before {
  z-index: 1;
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(ellipse at 28% 25%, rgba(255, 133, 48, 0.07), transparent 18%),
    radial-gradient(ellipse at 28% 43%, transparent 9%, rgba(0, 0, 0, 0.28) 57%),
    linear-gradient(90deg, transparent 0 46%, rgba(2, 1, 1, 0.12) 60%, rgba(2, 1, 1, 0.46) 100%);
  background-size: auto;
  mask-image: none;
}

.v2-stone .hero::after {
  z-index: 2;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow:
    inset 0 0 8rem rgba(0, 0, 0, 0.82),
    inset 0 -5rem 7rem rgba(0, 0, 0, 0.65),
    inset 0 0 0 1px rgba(181, 100, 47, 0.05);
}

.v2-stone .hero-veil {
  z-index: 3;
  opacity: 1;
  background: #030201;
  transform: none;
}

.js .v2-stone .hero-veil {
  transition: opacity 1.15s ease 0.2s, visibility 0s linear 1.4s;
}

.js.is-ready .v2-stone .hero-veil {
  visibility: hidden;
  opacity: 0;
  transform: none;
}

.v2-stone .hero-rune {
  display: none;
}

.v2-stone .hero-copy {
  z-index: 22;
  max-width: 45rem;
  margin-top: clamp(6rem, 12vh, 8.4rem);
}

.v2-stone .hero-eyebrow {
  color: #db8750;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 1rem rgba(171, 55, 18, 0.4);
}

.v2-stone .hero-eyebrow .eyebrow-line {
  height: 2px;
  background: linear-gradient(to right, #5d1b0c, #d76a30);
}

.v2-stone .title-stage {
  isolation: isolate;
}

.v2-stone .title-stage::after {
  z-index: -1;
  right: -1.8rem;
  bottom: -0.55rem;
  left: -0.7rem;
  height: 0.7rem;
  background:
    linear-gradient(177deg, transparent 0 40%, rgba(3, 2, 1, 0.9) 43% 59%, transparent 62%),
    repeating-linear-gradient(175deg, transparent 0 0.24rem, rgba(153, 82, 39, 0.13) 0.25rem 0.29rem);
  filter: blur(0.25px) drop-shadow(0 -1px 0 rgba(179, 111, 60, 0.14));
}

.v2-stone .wordmark {
  color: var(--stone-face);
  font-size: clamp(4.4rem, 6.15vw, 8rem);
  letter-spacing: -0.07em;
  -webkit-text-stroke: 1px rgba(4, 2, 1, 0.9);
  filter: none;
  text-shadow:
    -1px -2px 1px rgba(209, 139, 78, 0.34),
    1px 1px 0 rgba(2, 1, 1, 0.96),
    2px 3px 0 rgba(7, 4, 2, 0.98),
    4px 6px 5px rgba(0, 0, 0, 0.92),
    0 0 1.4rem rgba(218, 79, 24, 0.08);
}

.v2-stone .wordmark::before {
  inset: -0.1em -0.04em -0.16em;
  border-top-color: rgba(210, 133, 71, 0.11);
  border-bottom-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.42);
}

.v2-stone .title-letter {
  color: var(--stone-face);
  background: linear-gradient(155deg, #72543a 0%, #453427 26%, #281f17 57%, #120d0a 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.is-ready .v2-stone .wordmark {
  color: var(--stone-face);
  filter: none;
  animation: carved-title-light 4.2s ease-in-out 2.35s infinite alternate;
}

.v2-stone .engraving-cracks {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: calc(100% + 8rem);
  height: calc(100% + 5.4rem);
  overflow: visible;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.v2-stone .engraving-cracks path {
  fill: none;
  stroke: rgba(5, 3, 2, 0.83);
  stroke-dasharray: 190;
  stroke-dashoffset: 190;
  stroke-linecap: round;
  stroke-linejoin: bevel;
  stroke-width: 2.2;
  filter: drop-shadow(0 -1px 0 rgba(161, 99, 55, 0.18));
}

.is-ready .v2-stone .engraving-cracks path {
  animation: carve-crack 1.15s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.is-ready .v2-stone .engraving-cracks path:nth-child(1) { animation-delay: 1.05s; }
.is-ready .v2-stone .engraving-cracks path:nth-child(2) { animation-delay: 1.22s; }
.is-ready .v2-stone .engraving-cracks path:nth-child(3) { animation-delay: 1.13s; }
.is-ready .v2-stone .engraving-cracks path:nth-child(4) { animation-delay: 1.31s; }

.v2-stone .hero-decree {
  color: #d0bfa7;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.94), 0 0 1.3rem rgba(0, 0, 0, 0.7);
}

.v2-stone .hero-decree::first-letter {
  color: #f0d9b8;
}

.v2-stone .hero-actions,
.v2-stone .hero-footnote {
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.95);
}

.v2-stone .hero-footnote {
  color: #8b7764;
}

.v2-stone .torch {
  top: 39%;
  width: 2.8rem;
  height: 9rem;
  isolation: isolate;
  transform: translateY(-50%) scale(1.08);
}

.v2-stone .torch-left {
  left: -3.55rem;
}

.v2-stone .torch-right {
  right: -4.45rem;
}

.v2-stone .torch-halo {
  position: absolute;
  z-index: -2;
  bottom: -3.3rem;
  left: 50%;
  display: block;
  width: 21rem;
  height: 20rem;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 50% 42%, rgba(255, 193, 97, 0.42) 0%, rgba(241, 100, 30, 0.23) 14%, rgba(157, 39, 11, 0.09) 36%, transparent 70%);
  filter: blur(10px);
  mix-blend-mode: screen;
  transform: translateX(-50%) scale(0.32);
  pointer-events: none;
}

.is-ready .v2-stone .torch-left .torch-halo {
  animation:
    torch-halo-catch 750ms cubic-bezier(0.2, 1.3, 0.3, 1) 1.43s both,
    torch-halo-left 2.9s ease-in-out 2.2s infinite alternate;
}

.is-ready .v2-stone .torch-right .torch-halo {
  animation:
    torch-halo-catch 750ms cubic-bezier(0.2, 1.3, 0.3, 1) 1.58s both,
    torch-halo-right 3.35s ease-in-out 2.35s infinite alternate;
}

.v2-stone .torch-handle {
  width: 0.42rem;
  height: 4.65rem;
  border-color: #63402c;
  background:
    repeating-linear-gradient(to bottom, transparent 0 0.45rem, rgba(160, 92, 51, 0.2) 0.48rem 0.52rem),
    linear-gradient(90deg, #110b08, #70452e 45%, #21130e 68%, #090605);
  box-shadow: 0.28rem 0.33rem 0.35rem rgba(0, 0, 0, 0.94);
}

.v2-stone .torch-bowl {
  top: 2.48rem;
  width: 1.75rem;
  height: 0.72rem;
  border-color: #8a5737;
  background: linear-gradient(#593823, #160e0a 76%);
  box-shadow: 0 0.28rem 0.3rem rgba(0, 0, 0, 0.75);
}

.v2-stone .torch-cage {
  position: absolute;
  z-index: 4;
  bottom: 4.77rem;
  left: 50%;
  display: block;
  width: 1.9rem;
  height: 2.25rem;
  border-right: 0.16rem solid #27150e;
  border-bottom: 0.22rem solid #3a2117;
  border-left: 0.16rem solid #27150e;
  border-radius: 0 0 45% 45%;
  filter: drop-shadow(0.18rem 0.24rem 0.16rem rgba(0, 0, 0, 0.88));
  transform: translateX(-50%);
}

.v2-stone .torch-cage::before,
.v2-stone .torch-cage::after {
  position: absolute;
  top: -0.1rem;
  left: 50%;
  width: 0.13rem;
  height: 2.15rem;
  content: "";
  background: #2d190f;
  transform-origin: bottom;
}

.v2-stone .torch-cage::before {
  transform: translateX(-50%) rotate(22deg);
}

.v2-stone .torch-cage::after {
  transform: translateX(-50%) rotate(-22deg);
}

.v2-stone .torch-bracket {
  position: absolute;
  z-index: -1;
  right: -0.35rem;
  bottom: 1.1rem;
  display: block;
  width: 1.6rem;
  height: 2.5rem;
  border: 0.15rem solid #1c120d;
  border-left: 0;
  box-shadow: 0.22rem 0.25rem 0.3rem rgba(0, 0, 0, 0.9);
  transform: skewY(-18deg);
}

.v2-stone .flame-outer {
  width: 1.7rem;
  height: 3.35rem;
  box-shadow:
    0 0 1.2rem 0.35rem rgba(239, 72, 24, 0.38),
    0 0 2.9rem 0.8rem rgba(202, 58, 15, 0.14);
}

.v2-stone .flame-inner {
  width: 0.7rem;
  height: 1.9rem;
}

.v2-stone .hero-embers {
  position: absolute;
  z-index: 19;
  inset: 0 48% 0 0;
  overflow: hidden;
  pointer-events: none;
}

.v2-stone .hero-embers i {
  position: absolute;
  bottom: 23%;
  left: var(--x);
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
  background: #ffc06c;
  box-shadow: 0 0 0.45rem 0.12rem rgba(242, 83, 26, 0.65);
}

.is-ready .v2-stone .hero-embers i {
  animation: ember-rise var(--life) ease-out var(--delay) infinite;
}

.v2-stone .trailer-plane {
  z-index: 20;
}

.v2-stone .trailer-frame {
  border-color: #513522;
  background:
    repeating-linear-gradient(93deg, rgba(255, 171, 91, 0.025) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #302015, #090604 27%, #21150f 74%, #060403);
  box-shadow:
    -1.4rem 1.7rem 2.7rem rgba(0, 0, 0, 0.78),
    0 0 0 0.34rem #070403,
    0 0 0 0.45rem rgba(103, 61, 36, 0.55),
    0 0 3.7rem rgba(165, 48, 14, 0.08),
    inset 0 0 1.3rem rgba(0, 0, 0, 0.75);
  transform: perspective(1100px) rotateY(-2.4deg) rotateX(0.6deg) translateX(1%);
}

.js.is-ready .v2-stone .trailer-frame {
  transform: perspective(1100px) rotateY(-2.4deg) rotateX(0.6deg) translateX(1%);
  transition:
    opacity 900ms ease 1.72s,
    transform 1.25s cubic-bezier(0.16, 1, 0.3, 1) 1.68s,
    box-shadow 900ms ease;
}

.js.is-ready .v2-stone .trailer-frame:hover,
.js.is-ready .v2-stone .trailer-frame:focus-within {
  transform: perspective(1100px) rotateY(-0.5deg) rotateX(0deg) translateX(0);
}

.v2-stone .video-viewport video {
  filter: brightness(0.16) contrast(1.2) saturate(0.5) sepia(0.12);
  transition: filter 1.05s ease, transform 800ms ease;
}

.is-ready .v2-stone .trailer-frame:not(.is-booting) .video-viewport video {
  filter: brightness(0.78) contrast(1.1) saturate(0.8) sepia(0.07);
}

.v2-stone .trailer-frame:hover video {
  filter: brightness(0.98) contrast(1.06) saturate(1) sepia(0);
}

.v2-stone .trailer-caption,
.v2-stone .cassette-label {
  text-shadow: 0 2px 3px #000;
}

@keyframes stone-light-catch {
  0% { opacity: 0; transform: scale(0.62); }
  48% { opacity: 0.38; transform: scale(1.05); }
  100% { opacity: 0.28; transform: scale(1); }
}

@keyframes wall-fire-left {
  0%, 100% { opacity: 0.25; transform: scale(0.985) translate(-0.25rem, 0.15rem); }
  36% { opacity: 0.3; transform: scale(1.025) translate(0.2rem, -0.12rem); }
  47% { opacity: 0.265; transform: scale(0.995) translate(-0.08rem, 0.05rem); }
  72% { opacity: 0.315; transform: scale(1.035) translate(0.14rem, -0.18rem); }
}

@keyframes wall-fire-right {
  0%, 100% { opacity: 0.27; transform: scale(1.01) translate(0.18rem, 0); }
  31% { opacity: 0.315; transform: scale(1.04) translate(-0.14rem, -0.1rem); }
  55% { opacity: 0.265; transform: scale(0.995) translate(0.08rem, 0.13rem); }
  79% { opacity: 0.3; transform: scale(1.025) translate(-0.2rem, -0.08rem); }
}

@keyframes carved-title-light {
  0%, 100% {
    text-shadow:
      -1px -2px 1px rgba(209, 139, 78, 0.29),
      1px 1px 0 rgba(2, 1, 1, 0.96),
      2px 3px 0 rgba(7, 4, 2, 0.98),
      4px 6px 5px rgba(0, 0, 0, 0.92),
      0 0 1.2rem rgba(218, 79, 24, 0.06);
  }
  42% {
    text-shadow:
      -2px -2px 1px rgba(230, 153, 84, 0.43),
      1px 2px 0 rgba(2, 1, 1, 0.98),
      3px 4px 0 rgba(7, 4, 2, 0.99),
      5px 7px 7px rgba(0, 0, 0, 0.95),
      0 0 1.7rem rgba(218, 79, 24, 0.11);
  }
  49% {
    text-shadow:
      -1px -1px 1px rgba(188, 112, 59, 0.27),
      1px 1px 0 rgba(2, 1, 1, 0.98),
      2px 3px 0 rgba(7, 4, 2, 0.99),
      4px 6px 5px rgba(0, 0, 0, 0.95),
      0 0 1rem rgba(218, 79, 24, 0.05);
  }
}

@keyframes carve-crack {
  to { stroke-dashoffset: 0; }
}

@keyframes torch-halo-catch {
  0% { opacity: 0; transform: translateX(-50%) scale(0.24); }
  55% { opacity: 0.72; transform: translateX(-50%) scale(1.08); }
  100% { opacity: 0.54; transform: translateX(-50%) scale(1); }
}

@keyframes torch-halo-left {
  from { opacity: 0.48; transform: translateX(-51%) scale(0.98); }
  to { opacity: 0.58; transform: translateX(-49%) scale(1.04); }
}

@keyframes torch-halo-right {
  from { opacity: 0.52; transform: translateX(-49%) scale(1.02); }
  to { opacity: 0.61; transform: translateX(-51%) scale(0.97); }
}

@keyframes ember-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.45); }
  9% { opacity: 0.8; }
  62% { opacity: 0.46; }
  100% { opacity: 0; transform: translate(var(--drift), -13rem) scale(0.08); }
}

@media (max-width: 1200px) {
  .v2-stone .hero {
    grid-template-columns: minmax(22rem, 0.82fr) minmax(28rem, 1.18fr);
    gap: 1.4rem;
  }

  .v2-stone .hero-copy {
    margin-top: 6rem;
  }

  .v2-stone .wordmark {
    font-size: clamp(4rem, 6vw, 5.65rem);
  }

  .v2-stone .torch-left {
    left: -2.8rem;
  }

  .v2-stone .torch-right {
    right: -3.35rem;
  }
}

@media (max-width: 900px) {
  .v2-stone .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 3.75rem;
    padding-top: 9rem;
  }

  .v2-stone .hero-stone {
    right: 0;
    bottom: auto;
    height: 51rem;
  }

  .v2-stone .hero-stone::after {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 0;
    left: 0;
    height: 9rem;
    content: "";
    background: linear-gradient(to bottom, transparent, var(--ink));
  }

  .v2-stone .hero-stone img {
    object-position: 27% center;
  }

  .v2-stone .stone-vignette {
    background:
      linear-gradient(to bottom, rgba(2, 1, 1, 0.58), transparent 12%, transparent 72%, rgba(2, 1, 1, 0.75)),
      radial-gradient(ellipse at 28% 45%, transparent 19%, rgba(0, 0, 0, 0.3) 75%);
  }

  .v2-stone .hero-copy {
    width: min(36rem, 100%);
    min-height: 28rem;
    align-self: start;
    margin-top: 16.5rem;
  }

  .v2-stone .wordmark {
    font-size: clamp(4.1rem, 13vw, 6.2rem);
  }

  .v2-stone .trailer-plane {
    margin-top: -0.8rem;
  }

  .v2-stone .trailer-frame,
  .js.is-ready .v2-stone .trailer-frame {
    transform: perspective(1100px) rotateY(-1deg) rotateX(0.3deg);
  }

  .js.is-ready .v2-stone .trailer-frame:hover,
  .js.is-ready .v2-stone .trailer-frame:focus-within {
    transform: none;
  }

  .v2-stone .hero-embers {
    inset: 0 32% 35% 0;
  }
}

@media (max-width: 640px) {
  .v2-stone .hero {
    gap: 3.2rem;
    padding-top: 8.4rem;
    padding-bottom: 5rem;
  }

  .v2-stone .hero-stone {
    height: 52rem;
  }

  .v2-stone .hero-stone img {
    object-position: center top;
    filter: brightness(0.76) contrast(1.09) saturate(0.84);
    transform-origin: center 30%;
  }

  .js .v2-stone .hero-stone img {
    filter: brightness(0.2) contrast(1.18) saturate(0.5);
  }

  .js.is-ready .v2-stone .hero-stone img {
    filter: brightness(0.76) contrast(1.09) saturate(0.84);
  }

  .v2-stone .hero-copy {
    width: 100%;
    min-height: 27rem;
    margin-top: 12rem;
  }

  .v2-stone .hero-eyebrow {
    margin-left: 0;
  }

  .v2-stone .wordmark {
    font-size: clamp(3.2rem, 14.7vw, 5.85rem);
    letter-spacing: -0.086em;
  }

  .v2-stone .engraving-cracks {
    width: calc(100% + 2.4rem);
    height: calc(100% + 3.5rem);
  }

  .v2-stone .torch {
    top: 36%;
    transform: translateY(-50%) scale(0.77);
  }

  .v2-stone .torch-left {
    left: -1.75rem;
  }

  .v2-stone .torch-right {
    right: -2.05rem;
  }

  .v2-stone .torch-halo {
    width: 15rem;
    height: 16rem;
  }

  .v2-stone .stone-light {
    top: 21%;
    width: 22rem;
    height: 24rem;
  }

  .v2-stone .stone-light-left {
    left: -36%;
  }

  .v2-stone .stone-light-right {
    left: 39%;
  }

  .v2-stone .hero-footnote {
    color: #8d7966;
  }

  .v2-stone .hero-embers {
    inset: 0 0 42% 0;
    opacity: 0.72;
  }

  .v2-stone .trailer-plane {
    margin-top: -0.2rem;
  }
}

@media (max-width: 360px) {
  .v2-stone .wordmark {
    font-size: clamp(2.95rem, 14vw, 3.5rem);
  }

  .v2-stone .torch {
    transform: translateY(-50%) scale(0.68);
  }

  .v2-stone .torch-left {
    left: -0.7rem;
  }

  .v2-stone .torch-right {
    right: -0.2rem;
  }

  .v2-stone .engraving-cracks {
    width: calc(100% + 1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-stone .hero-stone img,
  .js .v2-stone .hero-stone img,
  .js.is-ready .v2-stone .hero-stone img {
    filter: brightness(0.72) contrast(1.1) saturate(0.86);
    transform: none;
  }

  .v2-stone .stone-light,
  .is-ready .v2-stone .stone-light {
    opacity: 0.28;
    animation: none;
    transform: scale(1);
  }

  .v2-stone .torch-halo,
  .is-ready .v2-stone .torch-halo {
    opacity: 0.5;
    animation: none;
    transform: translateX(-50%) scale(1);
  }

  .v2-stone .hero-embers {
    display: none;
  }

  .v2-stone .engraving-cracks path,
  .is-ready .v2-stone .engraving-cracks path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .is-ready .v2-stone .wordmark {
    animation: none;
  }

  .v2-stone .video-viewport video,
  .is-ready .v2-stone .trailer-frame:not(.is-booting) .video-viewport video {
    filter: brightness(0.78) contrast(1.1) saturate(0.8) sepia(0.07);
  }
}