/* HOME Option 1 — Jungle / Tek, approved APEXIA direction */
@media (min-width: 761px) {
  .hero {
    height: min(25vw, 384px);
    min-height: 270px;
    background: #06050b;
  }
  .hero::before {
    background: url('assets/home-jungle-tek.png') center / cover no-repeat;
    opacity: 1;
    filter: none;
  }
  .hero-grid, .hero-content, .hero .jungle, .hero .scroll-down { display: none; }
}

@media (max-width: 760px) {
  .hero {
    height: 640px;
    min-height: 0;
    background: radial-gradient(ellipse at 50% 69%, rgba(20,86,104,.38), transparent 26%), radial-gradient(ellipse at 50% 30%, rgba(175,48,160,.32), transparent 45%);
  }
  .hero::before {
    background: linear-gradient(90deg,#03050b 0%,transparent 27%,transparent 72%,#03050b 100%), linear-gradient(0deg,#07050d 0%,transparent 32%), url('assets/home-jungle-tek.png') center / cover;
    opacity: .45;
    filter: saturate(1.5);
  }
  .hero-content, .hero .scroll-down { display: block; }
}

/* The Option 1 world continues behind every section.  The layers below are
   deliberately subtle so text and cards remain easy to read. */
body {
  background: #05070d;
}

.ambient {
  z-index: -5;
  background:
    linear-gradient(180deg, rgba(3,5,10,.68) 0%, rgba(5,7,13,.80) 44%, rgba(4,8,15,.70) 100%),
    url('assets/home-jungle-tek.png') center top / cover fixed no-repeat;
  animation: jungle-shift 28s ease-in-out infinite alternate;
}

.ambient::before {
  content: "";
  position: absolute;
  inset: 38% 0 0;
  opacity: .45;
  mask-image: linear-gradient(transparent, #000 22%, #000 82%, transparent);
  background:
    repeating-linear-gradient(176deg, transparent 0 18px, rgba(52,227,255,.15) 19px 20px, transparent 22px 37px),
    linear-gradient(105deg, transparent 0 18%, rgba(170,71,255,.22) 42%, rgba(38,218,255,.20) 54%, transparent 76%);
  background-size: 100% 74px, 210% 100%;
  animation: water-flow 8s linear infinite;
}

.ambient::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 78% 19%, rgba(44,213,255,.34) 0 1.5%, rgba(77,91,255,.14) 6%, transparent 20%),
    radial-gradient(ellipse at 68% 61%, rgba(255,118,93,.11), transparent 25%),
    linear-gradient(110deg, transparent 0 24%, rgba(206,231,255,.07) 38%, transparent 53%);
  filter: blur(11px);
  mix-blend-mode: screen;
  animation: mist-drift 16s ease-in-out infinite alternate, obelisk-pulse 4s ease-in-out infinite;
}

.ambient i {
  width: 4px;
  height: 4px;
  opacity: .8;
  box-shadow: 0 0 10px 3px currentColor, 170px 210px 0 -1px #d44cff, 320px 70px 0 -1px #35e9ff, 520px 290px 0 -1px #bf48ff;
}

.content-section, .shop-section {
  background: linear-gradient(90deg, rgba(5,6,12,.30), rgba(7,10,16,.10), rgba(5,6,12,.30));
}

.site-header {
  background: linear-gradient(180deg, rgba(3,4,9,.92), rgba(4,5,10,.62));
}

.info-card, .map-card, .rules-preview, .shop-categories span {
  backdrop-filter: blur(8px);
}

@keyframes jungle-shift {
  0% { background-position: center top; filter: saturate(1.05) brightness(.85); }
  100% { background-position: 53% 4%; filter: saturate(1.27) brightness(1); }
}
@keyframes water-flow {
  to { background-position: 0 74px, 100% 0; }
}
@keyframes mist-drift {
  0% { transform: translate3d(-4%, 1%, 0) scale(1.03); opacity: .42; }
  100% { transform: translate3d(5%, -2%, 0) scale(1.11); opacity: .73; }
}
@keyframes obelisk-pulse {
  50% { filter: blur(13px) brightness(1.45); }
}

@media (max-width: 760px) {
  .ambient { background-position: 57% top; }
}

/* Clean, fully visible Home artwork and its real Discord hit area. */
@media (min-width: 761px) {
  .hero { height: auto; min-height: 0; aspect-ratio: 3 / 1; }
  .hero::before { background-image: url('assets/home-jungle-tek-clean-v2.png'); background-size: contain; background-color: #000; }
  .hero-discord-hotspot { display: block; position: absolute; z-index: 5; left: 50%; top: 71%; width: 180px; height: 52px; transform: translate(-50%,-50%); border-radius: 8px; }
  .hero-discord-hotspot:hover { box-shadow: 0 0 25px 7px rgba(180,70,255,.5); }
}
@media (max-width: 760px) {
  .hero::before { background-image: linear-gradient(90deg,#03050b 0%,transparent 27%,transparent 72%,#03050b 100%), linear-gradient(0deg,#07050d 0%,transparent 32%), url('assets/home-jungle-tek-clean-v2.png'); }
  .hero-discord-hotspot { display: block; position:absolute; z-index:5; left:50%; top:62%; width:180px; height:54px; transform:translate(-50%,-50%); border-radius:8px; }
}

/* Replace the hard water band with softer moving reflections. */
.ambient::before {
  inset: 0;
  opacity: .20;
  mask-image: none;
  background:
    radial-gradient(ellipse at 16% 76%, rgba(43,214,255,.24), transparent 18%),
    radial-gradient(ellipse at 67% 71%, rgba(116,64,255,.20), transparent 21%),
    radial-gradient(ellipse at 88% 43%, rgba(48,207,255,.14), transparent 16%);
  background-size: 150% 125%;
  animation: water-reflection 13s ease-in-out infinite alternate;
}
@keyframes water-reflection {
  from { background-position: 0 0; transform: translate3d(-1%, 1%, 0); }
  to { background-position: 100% 12%; transform: translate3d(1%, -1%, 0); }
}

/* Illustrated APEXIA navigation cards, based on the approved visual style. */
.visual-section-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 auto 45px;
}
.visual-section-card {
  appearance: none;
  display: block;
  position: relative;
  min-height: 220px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(85,220,255,.58);
  background: #090611;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(185,65,255,.27), 0 13px 29px rgba(0,0,0,.36);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.visual-section-card img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; transition: transform .45s ease; }
.visual-section-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,4,12,.72), transparent 56%); pointer-events: none; }
.visual-section-card span { position:absolute; z-index:1; left:18px; right:18px; bottom:15px; color:#f4eaff; font:700 clamp(22px,2.3vw,34px)/.9 Rajdhani,sans-serif; letter-spacing:1.2px; text-shadow:0 0 14px #a33bff,0 2px 5px #000; }
.visual-section-card:hover { transform: translateY(-6px); border-color:#ee61ff; box-shadow:0 0 24px rgba(190,61,255,.45),0 17px 34px rgba(0,0,0,.42); }
.visual-section-card:hover img { transform: scale(1.06); }
@media(max-width:760px){.visual-section-nav{grid-template-columns:1fr;gap:13px;margin-bottom:30px}.visual-section-card,.visual-section-card img{min-height:205px}}

/* The illustrated cards replace the former duplicate mini-card overview. */
.info-grid { display: none; }
.modal-body{background:linear-gradient(135deg,rgba(76,35,126,.16),rgba(22,139,178,.12));border:1px solid rgba(116,225,255,.28);border-radius:14px;padding:24px;box-shadow:inset 0 0 28px rgba(169,63,255,.12)}.modal-body>b:first-child{display:block;font-size:25px;color:#ff9cf3;text-shadow:0 0 14px #a73eff;margin-bottom:4px}.modal-body b{color:#fff;text-shadow:0 0 8px rgba(109,227,255,.45)}
.modal-back-bottom{display:block;width:100%;margin:28px 0 0;padding:13px 18px;border:1px solid rgba(109,226,255,.6);border-radius:8px;background:linear-gradient(135deg,#24114b,#132f51);color:#fff;font:700 15px Rajdhani,sans-serif;letter-spacing:1px;cursor:pointer;text-align:center;box-shadow:0 0 18px rgba(74,194,255,.2)}.modal-back-bottom:hover{border-color:#ff8de9;background:linear-gradient(135deg,#51206b,#173f62);transform:translateY(-1px)}
.modal-back-bottom{width:max-content;min-width:78px;margin:24px 0 0;padding:7px 11px;border-radius:6px;font-size:13px;box-shadow:0 0 12px rgba(55,232,255,.18)}.modal-body{background:linear-gradient(145deg,rgba(87,31,143,.22),rgba(14,102,143,.18) 52%,rgba(189,47,151,.12));border-color:rgba(94,224,255,.42)}.modal-body>b{color:#fff;text-shadow:0 0 10px rgba(255,118,231,.7)}
.modal-body:has(>b:first-child){background:linear-gradient(135deg,rgba(32,14,66,.96),rgba(7,58,91,.94) 48%,rgba(74,16,87,.95));border:1px solid #6ce8ff;box-shadow:0 0 28px rgba(107,57,255,.3),inset 0 0 30px rgba(255,71,207,.12)}.modal-body:has(>b:first-child) b{color:#fff;text-shadow:0 0 9px #d968ff}.modal-body:has(>b:first-child)::first-line{color:#ff9df2}
.modal-body> b:first-child,.modal-body> b:nth-of-type(2){display:inline-block;margin:4px 0 12px;padding:8px 14px;border:1px solid rgba(255,137,231,.75);border-radius:999px;background:linear-gradient(90deg,rgba(135,43,213,.72),rgba(30,154,190,.65));color:#fff;font-size:1.2em;letter-spacing:.5px;text-shadow:0 0 10px #ff74e8;box-shadow:0 0 16px rgba(180,69,255,.35)}