/* Homepage composition v2 — cinematic, Minecraft-first, and intentionally distinct. */
body[data-page="home"] .home-main { padding-top: 22px; }

body[data-page="home"] .dashboard-hero--cinematic {
  position: relative;
  isolation: isolate;
  min-height: clamp(590px, 74vh, 760px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin: 14px 0 18px;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid rgba(255, 226, 217, .11);
  border-radius: 26px;
  background: #0b0709;
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
}

.hero-nether-backdrop,
.hero-nether-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-nether-backdrop { z-index: -3; overflow: hidden; }
.hero-nether-backdrop img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.96) contrast(1.05) brightness(.76);
  transform: scale(1.04);
  animation: nether-breathe 9s ease-in-out infinite alternate;
}

/* A small animated energy layer sits over the portal in the artwork. */
.hero-nether-energy {
  position: absolute;
  left: 50.55%;
  top: 40.5%;
  width: clamp(82px, 10.2vw, 145px);
  aspect-ratio: .58;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  opacity: .44;
  mix-blend-mode: screen;
  filter: blur(5px) saturate(1.4);
  background:
    conic-gradient(from 20deg, rgba(255,255,255,.04), rgba(221,104,255,.52), rgba(113,50,210,.08), rgba(255,127,246,.46), rgba(255,255,255,.04)),
    radial-gradient(ellipse, rgba(221,129,255,.25), rgba(117,44,178,.04) 66%, transparent 72%);
  box-shadow: 0 0 24px rgba(197,83,255,.28), 0 0 54px rgba(136,53,218,.18);
  animation: portal-energy 5.2s linear infinite, portal-glow 2.8s ease-in-out infinite alternate;
}
.hero-nether-energy::after {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 45%;
  opacity: .55;
  background: repeating-conic-gradient(from 55deg, rgba(255,255,255,.15) 0 7deg, transparent 7deg 23deg);
  filter: blur(8px);
  animation: portal-energy-reverse 7s linear infinite;
}

.hero-nether-particles { position:absolute; inset:0; }
.hero-nether-particles i {
  position:absolute;
  left:50%; top:44%;
  width:4px; height:4px;
  border-radius:1px;
  background:#d885ff;
  box-shadow:0 0 10px #b44fff, 0 0 18px rgba(181,79,255,.55);
  opacity:0;
  animation: portal-particle 4.8s ease-out infinite;
}
.hero-nether-particles i:nth-child(1){ --x:-52px; --y:-92px; animation-delay:-.4s; }
.hero-nether-particles i:nth-child(2){ --x:74px; --y:-70px; animation-delay:-1.4s; width:3px;height:3px; }
.hero-nether-particles i:nth-child(3){ --x:-90px; --y:-28px; animation-delay:-2.2s; }
.hero-nether-particles i:nth-child(4){ --x:96px; --y:-12px; animation-delay:-3.1s; width:5px;height:5px; }
.hero-nether-particles i:nth-child(5){ --x:-58px; --y:-126px; animation-delay:-3.8s; width:2px;height:2px; }
.hero-nether-particles i:nth-child(6){ --x:62px; --y:-116px; animation-delay:-4.4s; width:3px;height:3px; }

.hero-nether-scrim {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(7,5,7,.96) 0%, rgba(8,5,7,.87) 31%, rgba(8,5,7,.42) 58%, rgba(8,5,7,.12) 77%, rgba(8,5,7,.32) 100%),
    linear-gradient(0deg, rgba(5,4,5,.92) 0%, rgba(5,4,5,.16) 42%, rgba(5,4,5,.14) 100%);
}

body[data-page="home"] .dashboard-hero--cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 -80px 120px rgba(0,0,0,.28);
}

body[data-page="home"] .hero-copy--cinematic {
  position: relative;
  z-index: 2;
  width: min(650px, 61%);
  max-width: none;
  padding-bottom: 8px;
}
body[data-page="home"] .hero-copy--cinematic .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid rgba(226,151,103,.2);
  border-radius: 999px;
  background: rgba(9,6,7,.54);
  backdrop-filter: blur(12px);
}
body[data-page="home"] .hero-copy--cinematic .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d2764f;
  box-shadow: 0 0 13px rgba(210,118,79,.8);
}
body[data-page="home"] .hero-copy--cinematic h1 {
  max-width: 620px;
  margin: 16px 0 16px;
  font-size: clamp(3.5rem, 7.8vw, 7.25rem);
  line-height: .92;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 8px 34px rgba(0,0,0,.5);
}
body[data-page="home"] .hero-copy--cinematic h1 em {
  color: #e8a178;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: -.045em;
}
body[data-page="home"] .hero-copy--cinematic > p {
  max-width: 540px;
  margin: 0;
  color: rgba(244,236,232,.76);
  font-size: clamp(.95rem, 1.5vw, 1.08rem);
  line-height: 1.68;
  text-shadow: 0 3px 20px rgba(0,0,0,.55);
}
body[data-page="home"] .hero-actions { margin-top: 25px; }
body[data-page="home"] .hero-actions .button {
  min-height: 50px;
  padding-inline: 19px;
  border-radius: 12px;
}
body[data-page="home"] .hero-actions .button--secondary {
  background: rgba(12,8,10,.56);
  border-color: rgba(255,255,255,.14);
  backdrop-filter: blur(13px);
}

.server-card--hero-float {
  position: absolute;
  right: clamp(22px, 3.5vw, 44px);
  bottom: clamp(22px, 3.5vw, 44px);
  z-index: 3;
  width: min(370px, 34%);
  overflow: hidden;
  border-color: rgba(255,255,255,.13);
  border-radius: 17px;
  background: rgba(10,7,9,.76);
  backdrop-filter: blur(20px) saturate(120%);
  box-shadow: 0 20px 60px rgba(0,0,0,.36);
}
.server-card--hero-float .server-card__top { padding: 15px 16px 12px; }
.server-card--hero-float .server-card__top h2 { font-size: 1.08rem; }
.server-card--hero-float .server-stats { border-top: 1px solid rgba(255,255,255,.075); }
.server-card--hero-float .server-stats > div { padding: 12px 13px; }
.server-card--hero-float .bridge-note,
.server-card--hero-float .server-card__glow,
.server-card--hero-float .nether-scene { display: none !important; }
.server-card--hero-float .server-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-top: 1px solid rgba(255,255,255,.075);
  color: rgba(244,236,232,.68);
  font-size: .67rem;
  font-weight: 800;
  transition: color .16s ease, background .16s ease;
}
.server-card--hero-float .server-card__link:hover {
  color: #fff;
  background: rgba(255,255,255,.035);
}

body[data-page="home"] .personal-dashboard,
body[data-page="home"] .home-strip > * {
  background: linear-gradient(145deg, rgba(255,255,255,.018), transparent 38%), rgba(19,13,16,.88);
}
body[data-page="home"] .home-strip {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 14px;
  padding-top: 4px;
}
body[data-page="home"] .home-strip .panel,
body[data-page="home"] .home-strip .spotlight-card { min-height: 210px; }

@keyframes nether-breathe {
  from { transform:scale(1.04); filter:saturate(.94) contrast(1.04) brightness(.74); }
  to { transform:scale(1.08); filter:saturate(1.03) contrast(1.06) brightness(.8); }
}
@keyframes portal-energy {
  to { transform:translate(-50%,-50%) rotate(360deg) scale(1.04); }
}
@keyframes portal-energy-reverse { to { transform:rotate(-360deg); } }
@keyframes portal-glow {
  from { opacity:.3; box-shadow:0 0 20px rgba(197,83,255,.22),0 0 42px rgba(136,53,218,.14); }
  to { opacity:.54; box-shadow:0 0 32px rgba(223,102,255,.42),0 0 72px rgba(136,53,218,.24); }
}
@keyframes portal-particle {
  0% { opacity:0; transform:translate(0,0) scale(.7); }
  18% { opacity:.9; }
  100% { opacity:0; transform:translate(var(--x),var(--y)) scale(1.25); }
}

@media (max-width: 900px) {
  body[data-page="home"] .dashboard-hero--cinematic {
    min-height: 690px;
    align-items: flex-start;
    padding: 38px 28px 26px;
  }
  .hero-nether-scrim {
    background:
      linear-gradient(180deg, rgba(6,4,6,.86) 0%, rgba(7,5,7,.48) 43%, rgba(6,4,6,.86) 74%, rgba(6,4,6,.97) 100%),
      linear-gradient(90deg, rgba(7,5,7,.72), rgba(7,5,7,.12));
  }
  body[data-page="home"] .hero-copy--cinematic { width: 100%; max-width: 620px; }
  body[data-page="home"] .hero-copy--cinematic h1 { font-size: clamp(3.4rem, 11vw, 6.4rem); max-width: 570px; }
  .server-card--hero-float {
    left: 26px;
    right: 26px;
    bottom: 24px;
    width: auto;
  }
  .hero-nether-energy { left:51.5%; top:39%; width:112px; }
}

@media (max-width: 620px) {
  body[data-page="home"] .home-main { padding-top: 8px; }
  body[data-page="home"] .dashboard-hero--cinematic {
    min-height: 700px;
    margin-inline: -7px;
    padding: 29px 20px 20px;
    border-radius: 20px;
  }
  .hero-nether-backdrop img { object-position: 54% center; }
  .hero-nether-energy { left:54%; top:39%; width:94px; }
  body[data-page="home"] .hero-copy--cinematic h1 {
    margin-top: 13px;
    font-size: clamp(3.2rem, 17vw, 5.1rem);
  }
  body[data-page="home"] .hero-copy--cinematic > p { font-size: .9rem; line-height: 1.58; }
  body[data-page="home"] .hero-actions { gap: 7px; }
  body[data-page="home"] .hero-actions .button { min-height: 46px; padding-inline: 14px; }
  .server-card--hero-float { left: 17px; right: 17px; bottom: 17px; }
  .server-card--hero-float .server-stats > div { padding: 10px; }
  .server-card--hero-float .server-stats span { font-size: .53rem; }
  .server-card--hero-float .server-stats strong { font-size: .86rem; }
  body[data-page="home"] .home-strip { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-nether-backdrop img,
  .hero-nether-energy,
  .hero-nether-energy::after,
  .hero-nether-particles i { animation:none !important; }
  .hero-nether-energy { opacity:.34; }
  .hero-nether-particles { display:none; }
}