/*
 * Gaming showcase
 *
 * Self-contained presentation and motion for the gaming feature. The shared
 * heading treatment comes from site.css through `.section-title`.
 */

.gaming-showcase-section {
  --gaming-gold: #c7a66b;
  --gaming-bone: #f0e6d2;
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--site-header-height));
  min-height: calc(100svh - var(--site-header-height));
  padding: clamp(96px, 8vw, 148px) clamp(24px, 3vw, 56px) clamp(100px, 8vw, 150px);
  overflow: hidden;
  isolation: isolate;
  color: var(--gaming-bone);
  background:
    radial-gradient(ellipse 72% 92% at 25% 48%, rgba(8, 48, 55, 0.32), transparent 70%),
    radial-gradient(ellipse 46% 72% at 82% 48%, rgba(90, 10, 26, 0.18), transparent 72%),
    linear-gradient(120deg, #05090c 0%, #07090d 46%, #090609 100%);
}

.gaming-showcase-section::before,
.gaming-showcase-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.gaming-showcase-section::before {
  inset: 0;
  opacity: 0.25;
  background: linear-gradient(116deg, transparent 18%, rgba(255, 255, 255, 0.04) 47%, transparent 70%);
  transform: translateX(-24%);
  animation: gaming-showcase-light 16s ease-in-out infinite alternate;
}

.gaming-showcase-section::after {
  right: -12vw;
  bottom: -24vw;
  width: 66vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(90, 10, 26, 0.08);
  filter: blur(130px);
}

.gaming-showcase-atmosphere,
.gaming-showcase-haze {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.gaming-showcase-haze {
  inset: 12% auto auto 8%;
  width: min(58vw, 980px);
  aspect-ratio: 1.35;
  border-radius: 50%;
  background: rgba(0, 119, 132, 0.09);
  filter: blur(110px);
  animation: gaming-haze-breathe 9s ease-in-out infinite alternate;
}

.gaming-showcase-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(121, 231, 238, 0.72);
  box-shadow: 0 0 14px rgba(70, 220, 231, 0.85);
  animation: gaming-star-pulse 4.8s ease-in-out infinite alternate;
}

.gaming-showcase-star-one { top: 18%; left: 8%; }
.gaming-showcase-star-two { top: 72%; left: 48%; animation-delay: -1.9s; }
.gaming-showcase-star-three { top: 31%; right: 9%; animation-delay: -3.1s; }

.gaming-showcase-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1600px);
  margin: 0 auto;
}

.gaming-showcase-header {
  margin-bottom: clamp(34px, 4vw, 58px);
  text-align: center;
}

.gaming-showcase-title.section-title {
  margin: 0 auto;
  color: #fff;
  text-shadow: 0 20px 65px rgba(0, 0, 0, 0.78);
}

.gaming-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(300px, 0.72fr);
  gap: clamp(44px, 5vw, 88px);
  min-height: clamp(620px, 66svh, 770px);
}

.gaming-panel {
  position: relative;
  min-width: 0;
  overflow: visible;
  color: var(--gaming-bone);
  background: transparent;
}

.gaming-feature-panel {
  --gaming-pointer-x: 68%;
  --gaming-pointer-y: 30%;
  --gaming-shift-x: 0px;
  --gaming-shift-y: 0px;
  display: block;
  isolation: isolate;
  text-decoration: none;
  background: transparent;
}

.gaming-feature-panel::before {
  content: none;
}

.gaming-feature-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.72;
  background: radial-gradient(circle 420px at var(--gaming-pointer-x) var(--gaming-pointer-y), rgba(255, 142, 52, 0.18), transparent 68%);
  -webkit-mask-image: radial-gradient(ellipse closest-side at center, #000 52%, rgba(0, 0, 0, 0.82) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at center, #000 52%, rgba(0, 0, 0, 0.82) 70%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: opacity 700ms ease;
}

.gaming-feature-art {
  position: absolute;
  right: clamp(-58px, -2.5vw, -22px);
  bottom: -7%;
  z-index: 2;
  display: block;
  width: min(61%, 710px);
  pointer-events: none;
  filter: drop-shadow(-22px 28px 30px rgba(0, 0, 0, 0.56));
  transform: translate3d(var(--gaming-shift-x), var(--gaming-shift-y), 0) scale(1.001);
  transform-origin: 58% 82%;
  transition: transform 1500ms cubic-bezier(0.22, 1, 0.36, 1), filter 1200ms ease;
}

.gaming-feature-art::before {
  content: "";
  position: absolute;
  top: 1%;
  right: 18%;
  z-index: -1;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 112, 25, 0.22);
  filter: blur(34px);
  animation: gaming-flame-breathe 2.8s ease-in-out infinite alternate;
}

.gaming-feature-art img {
  display: block;
  width: 100%;
  height: auto;
}

.gaming-feature-copy {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: min(54%, 620px);
  min-height: 100%;
  padding: clamp(48px, 4.6vw, 82px);
  color: var(--gaming-bone);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.92);
}

.gaming-coming-eyebrow {
  display: block;
  margin: 0 0 24px;
  color: var(--gaming-gold);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.31em;
  text-transform: uppercase;
}

.gaming-feature-title {
  display: block;
  max-width: 590px;
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(2.75rem, 4.2vw, 5.35rem);
  font-weight: 600;
  line-height: 0.97;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.gaming-feature-tagline {
  display: block;
  margin-top: 24px;
  color: rgba(199, 166, 107, 0.92);
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.12vw, 1.08rem);
  font-style: italic;
  line-height: 1.55;
}

.gaming-feature-description {
  display: block;
  max-width: 510px;
  margin-top: 18px;
  color: rgba(240, 230, 210, 0.68);
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 0.86vw, 0.94rem);
  font-weight: 300;
  line-height: 1.76;
}

.gaming-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
}

.gaming-feature-meta span {
  position: relative;
  color: rgba(240, 230, 210, 0.45);
  font-family: var(--font-body);
  font-size: 0.56rem;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.gaming-feature-meta span + span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gaming-gold);
  transform: translateY(-50%);
}

.gaming-feature-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: min(100%, 230px);
  min-height: 54px;
  margin-top: clamp(30px, 3.4vw, 48px);
  padding: 0 18px 0 22px;
  border: 0;
  color: var(--gaming-bone);
  background: linear-gradient(105deg, rgba(104, 10, 30, 0.96), rgba(63, 6, 18, 0.9));
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 500ms ease, box-shadow 500ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gaming-feature-arrow {
  color: var(--gaming-gold);
  font-size: 0.9rem;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.gaming-feature-petal {
  position: absolute;
  z-index: 4;
  display: block;
  width: 10px;
  height: 7px;
  border-radius: 70% 15% 70% 20%;
  pointer-events: none;
  background: #640b22;
  box-shadow: 0 0 14px rgba(129, 10, 42, 0.4);
  animation: gaming-petal-drift 8s ease-in-out infinite alternate;
}

.gaming-feature-petal-one { top: 22%; left: 55%; transform: rotate(24deg); }
.gaming-feature-petal-two { top: 63%; left: 48%; width: 7px; height: 5px; animation-delay: -3s; }
.gaming-feature-petal-three { top: 42%; right: 7%; width: 8px; height: 6px; animation-delay: -5s; }

.gaming-coming-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(38px, 3.5vw, 64px);
  isolation: isolate;
  background: transparent;
}

.gaming-coming-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: min(90%, 390px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(88, 8, 25, 0.2);
  filter: blur(72px);
  transform: translate(-50%, -50%);
  animation: gaming-coming-breathe 7s ease-in-out infinite alternate;
}

.gaming-coming-copy {
  position: relative;
  z-index: 2;
}

.gaming-coming-copy h3 {
  margin: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(2.8rem, 3.7vw, 4.9rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.gaming-coming-copy h3 em {
  display: block;
  color: var(--gaming-gold);
  font-style: italic;
  font-weight: 400;
}

.gaming-coming-copy > p:last-child {
  margin: 28px 0 0;
  color: rgba(240, 230, 210, 0.56);
  font-family: var(--font-body);
  font-size: clamp(0.78rem, 0.86vw, 0.92rem);
  font-weight: 300;
  line-height: 1.75;
}

.gaming-feature-panel:focus-visible {
  outline: 2px solid var(--gaming-gold);
  outline-offset: 5px;
}

.js .gaming-showcase-section.is-gaming-ready .gaming-panel {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(34px);
  transition:
    opacity 1100ms ease,
    filter 1100ms ease,
    transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .gaming-showcase-section.is-gaming-ready.is-in-view .gaming-panel {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.js .gaming-showcase-section.is-gaming-ready.is-in-view .gaming-coming-panel {
  transition-delay: 150ms;
}

@media (hover: hover) and (pointer: fine) {
  .gaming-feature-panel:hover {
    color: var(--gaming-bone);
  }

  .gaming-feature-panel:hover .gaming-feature-art {
    filter: drop-shadow(-26px 32px 38px rgba(0, 0, 0, 0.68));
    transform: translate3d(var(--gaming-shift-x), var(--gaming-shift-y), 0) scale(1.028);
  }

  .gaming-feature-panel:hover .gaming-feature-light {
    opacity: 1;
  }

  .gaming-feature-panel:hover .gaming-feature-cta {
    background: linear-gradient(105deg, rgba(111, 11, 31, 0.94), rgba(58, 5, 15, 0.7));
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.46), 0 0 34px rgba(199, 166, 107, 0.09);
    transform: translateY(-3px);
  }

  .gaming-feature-panel:hover .gaming-feature-arrow {
    transform: translate(3px, -3px);
  }
}

@keyframes gaming-showcase-light {
  from { opacity: 0.16; transform: translateX(-24%); }
  to { opacity: 0.34; transform: translateX(24%); }
}

@keyframes gaming-haze-breathe {
  from { opacity: 0.52; transform: scale(0.9) translate3d(-2%, 1%, 0); }
  to { opacity: 0.9; transform: scale(1.08) translate3d(3%, -2%, 0); }
}

@keyframes gaming-star-pulse {
  from { opacity: 0.28; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1.5); }
}

@keyframes gaming-flame-breathe {
  from { opacity: 0.55; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1.18); }
}

@keyframes gaming-petal-drift {
  from { margin-top: -8px; margin-left: -4px; opacity: 0.35; }
  to { margin-top: 14px; margin-left: 9px; opacity: 0.82; }
}

@keyframes gaming-coming-breathe {
  from { opacity: 0.54; transform: translate(-50%, -50%) scale(0.86); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

@media screen and (max-width: 1200px) {
  .gaming-showcase-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.75fr);
  }

  .gaming-feature-copy {
    width: 58%;
    padding: clamp(42px, 4vw, 62px);
  }

  .gaming-feature-art {
    width: min(64%, 620px);
  }
}

@media screen and (max-width: 991px) {
  .gaming-showcase-section {
    min-height: calc(100vh - var(--site-header-height-mobile));
    min-height: calc(100svh - var(--site-header-height-mobile));
    padding-right: 28px;
    padding-left: 28px;
  }

  .gaming-showcase-grid {
    grid-template-columns: 1fr;
    gap: clamp(58px, 9vw, 92px);
    min-height: 0;
  }

  .gaming-feature-panel {
    min-height: 720px;
  }

  .gaming-feature-art {
    right: -14px;
    bottom: 0;
    width: min(61%, 540px);
  }

  .gaming-feature-copy {
    width: 54%;
  }

  .gaming-coming-panel {
    min-height: 420px;
  }

  .gaming-coming-copy {
    width: min(70%, 520px);
    margin: 0 auto;
  }
}

@media screen and (max-width: 767px) {
  .gaming-showcase-section {
    padding: 88px 20px 78px;
  }

  .gaming-showcase-header {
    margin-bottom: 32px;
  }

  .gaming-feature-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .gaming-feature-copy {
    order: 1;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    padding: 34px 28px 0;
  }

  .gaming-feature-title {
    max-width: 100%;
    font-size: clamp(2.45rem, 12.5vw, 4rem);
  }

  .gaming-feature-tagline {
    margin-top: 18px;
  }

  .gaming-feature-description {
    font-size: 0.82rem;
  }

  .gaming-feature-meta {
    margin-top: 22px;
  }

  .gaming-feature-cta {
    width: 100%;
    max-width: 340px;
    margin-top: 28px;
  }

  .gaming-feature-art {
    position: relative;
    right: auto;
    bottom: auto;
    order: 2;
    width: min(100%, 430px);
    margin: -12px auto -5px;
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.5));
    transform: none;
  }

  .gaming-feature-petal-one { top: 54%; left: 12%; }
  .gaming-feature-petal-two { top: 66%; left: 82%; }
  .gaming-feature-petal-three { top: 78%; right: 47%; }

  .gaming-coming-panel {
    min-height: 380px;
    padding: 34px 28px;
  }

  .gaming-coming-copy {
    width: 100%;
  }

  .gaming-coming-copy h3 {
    font-size: clamp(2.85rem, 14vw, 4.5rem);
  }

  .gaming-coming-copy > p:last-child {
    font-size: 0.82rem;
  }
}

@media screen and (max-width: 390px) {
  .gaming-showcase-section {
    padding-right: 16px;
    padding-left: 16px;
  }

  .gaming-feature-copy,
  .gaming-coming-panel {
    padding-right: 22px;
    padding-left: 22px;
  }

  .gaming-feature-title {
    font-size: clamp(2.25rem, 12.4vw, 3.25rem);
  }

  .gaming-feature-meta {
    gap: 8px 18px;
  }

  .gaming-feature-meta span {
    font-size: 0.7rem;
  }

  .gaming-feature-art {
    width: 100%;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) and (max-height: 600px) and (orientation: landscape) {
  .gaming-showcase-section {
    padding: 54px 24px 62px;
  }

  .gaming-showcase-header {
    margin-bottom: 24px;
  }

  .gaming-showcase-title.section-title {
    font-size: 2.4rem;
  }

  .gaming-showcase-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
    gap: 30px;
  }

  .gaming-feature-panel {
    min-height: 480px;
  }

  .gaming-feature-copy {
    width: 56%;
    padding: 34px;
  }

  .gaming-feature-title {
    font-size: clamp(2.2rem, 5vw, 3.15rem);
  }

  .gaming-feature-art {
    right: -22px;
    width: min(62%, 430px);
  }

  .gaming-coming-panel {
    min-height: 320px;
    padding: 28px;
  }

  .gaming-coming-copy {
    width: 100%;
  }

  .gaming-coming-copy h3 {
    font-size: clamp(2.25rem, 4.8vw, 3.4rem);
  }
}

@media (hover: none), (pointer: coarse) {
  .gaming-feature-panel {
    -webkit-tap-highlight-color: transparent;
  }

  .gaming-feature-cta {
    min-height: 56px;
  }

  .js .gaming-showcase-section.is-gaming-ready .gaming-panel,
  .js .gaming-showcase-section.is-gaming-ready.is-in-view .gaming-panel {
    filter: none;
    transition: opacity 700ms ease, transform 900ms var(--ease-cinematic);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gaming-showcase-section::before,
  .gaming-showcase-haze,
  .gaming-showcase-star,
  .gaming-feature-art::before,
  .gaming-feature-petal,
  .gaming-coming-glow {
    animation: none;
  }

  .js .gaming-showcase-section.is-gaming-ready .gaming-panel,
  .js .gaming-showcase-section.is-gaming-ready.is-in-view .gaming-panel {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .gaming-feature-art,
  .gaming-feature-cta,
  .gaming-feature-arrow {
    transition: none;
  }

  .gaming-feature-panel:hover .gaming-feature-art {
    transform: translate3d(0, 0, 0) scale(1.001);
  }

  .gaming-feature-panel:hover .gaming-feature-cta,
  .gaming-feature-panel:hover .gaming-feature-arrow {
    transform: none;
  }
}