/* Home atmosphere, VIP guidance, and the dedicated news page share the entrance's visual tokens. */
.home-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 650px; padding: 60px max(5%, calc((100vw - 1240px) / 2)); overflow: hidden; background: linear-gradient(90deg, #100b19f5 5%, #100b1970), url('/art/backdrop.webp') center / cover; }
.home-intro { position: relative; z-index: 1; max-width: 660px; }
.home-intro h1 { font-size: clamp(40px, 4.7vw, 68px); line-height: 1.12; }
.public-page em { color: var(--accent); }
.home-intro > p:not(.eyebrow) { max-width: 520px; color: var(--muted); line-height: 1.8; }
.home-intro .home-lead { font-size: 21px; color: var(--text); }
.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 30px 0 20px; }
.home-age { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.home-art { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.home-character { position: relative; width: min(100%, 380px); aspect-ratio: 2 / 3; will-change: transform; }
.home-character img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 45px #be77ea35); }
.home-art span { color: var(--muted); font-size: 10px; letter-spacing: 3px; text-align: center; }
/* The magic and sparks use the same 2:3 canvas as Venom, staying anchored to her raised hand. */
.home-magic { position: absolute; width: 32%; aspect-ratio: 1330 / 1182; left: 47%; top: 2%; background: url('/art/magic.webp') center / contain no-repeat; animation: home-magic-pulse 4s ease-in-out infinite; }
.hand-sparks { position: absolute; left: 63%; top: 13%; width: 1px; height: 1px; }
.hand-sparks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f5daff; box-shadow: 0 0 9px 3px #c06dff; opacity: 0; animation: hand-spark 4s ease-out infinite; }
/* Fixed trajectories and negative delays bound the particle count without timers or allocations. */
.hand-sparks i:nth-child(1) { --spark-x: -32px; --spark-y: -70px; animation-delay: -.5s; }
.hand-sparks i:nth-child(2) { --spark-x: 38px; --spark-y: -84px; animation-delay: -1s; }
.hand-sparks i:nth-child(3) { --spark-x: -48px; --spark-y: -36px; animation-delay: -1.5s; }
.hand-sparks i:nth-child(4) { --spark-x: 20px; --spark-y: -100px; animation-delay: -2s; }
.hand-sparks i:nth-child(5) { --spark-x: -10px; --spark-y: -92px; animation-delay: -2.5s; }
.hand-sparks i:nth-child(6) { --spark-x: 48px; --spark-y: -45px; animation-delay: -3s; }
.hand-sparks i:nth-child(7) { --spark-x: -25px; --spark-y: -110px; animation-delay: -3.5s; }
.hand-sparks i:nth-child(8) { --spark-x: 55px; --spark-y: -65px; animation-delay: -4s; }
.home-clouds { position: absolute; inset: 0 -25px; z-index: -1; pointer-events: none; will-change: transform; }
.home-cloud-texture { width: 100%; height: 100%; background: url('/art/clouds.webp') center / cover no-repeat; opacity: .3; animation: home-cloud-drift 22s ease-in-out infinite alternate; }
@keyframes home-magic-pulse { 0%, 100% { opacity: .6; scale: .94; } 50% { opacity: 1; scale: 1.06; } }
@keyframes home-cloud-drift { from { translate: -15px 0; } to { translate: 15px 8px; } }
@keyframes hand-spark { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.15); } }
.motion-paused .home-magic, .motion-paused .home-cloud-texture, .motion-paused .hand-sparks i { animation-play-state: paused; }
.motion-paused .home-character, .motion-paused .home-clouds { transform: none !important; }
.motion-paused .hand-sparks { visibility: hidden; }
.home-page .about-section { padding-top: 80px; padding-bottom: 80px; }
/* Static community guidance shares the public palette without provider requests. */
.community-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 28px; }
.community-section { padding: 60px max(5%, calc((100vw - 1100px) / 2)); border-top: 1px solid var(--line); }
.community-section h2 { font-size: clamp(30px, 4vw, 44px); }
.community-section p, .role-list { color: var(--muted); line-height: 1.8; }
.community-section > p { max-width: 780px; }
.community-section strong { color: var(--text); }
.community-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.community-grid article { padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: #1b1227; }
.community-grid h3 { font-size: 22px; }
.community-grid p { margin-bottom: 0; overflow-wrap: anywhere; }
.role-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; padding-left: 22px; margin-block: 30px; }
.role-list span { display: block; font-size: 14px; }
.vip-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 6vw, 85px); padding: 80px max(5%, calc((100vw - 1100px) / 2)); background: radial-gradient(ellipse at top left, #36203e, #130d1c 70%); border-block: 1px solid var(--line); }
.vip-intro h2 { font-size: clamp(36px, 4vw, 50px); }
.vip-section p, .vip-guide li { color: var(--muted); line-height: 1.8; }
.vip-guide { border: 1px solid var(--line); border-radius: 8px; padding: clamp(22px, 3vw, 36px); background: #160f22a6; }
.vip-guide h3 { font-size: 28px; }
.vip-guide ol { padding-left: 22px; }
.vip-guide li { padding: 0 0 18px 8px; }
.vip-guide strong { color: var(--text); }
.vip-privacy { border-top: 1px solid var(--line); padding-top: 22px; }
.vip-guide .vip-future { font-size: 13px; margin-bottom: 0; }
.home-news-link { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 55px max(5%, calc((100vw - 1100px) / 2)); }
.home-news-link h2 { font-size: 30px; }
.home-news-link p { color: var(--muted); }
.news-page .news-section { border-top: 0; }
.news-section { padding: 70px max(5%, calc((100vw - 1100px) / 2)); border-top: 1px solid var(--line); background: #140e1e; }
.news-heading { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.news-heading h1 { font-size: clamp(36px, 5vw, 52px); }
.news-heading > p, #news-status { color: var(--muted); line-height: 1.8; }
#news-feed { display: grid; gap: 24px; }
.news-card { min-width: 0; padding: clamp(20px, 4vw, 36px); background: #1b1227; border: 1px solid var(--line); border-radius: 8px; }
.news-card h3 { margin-bottom: 8px; font-size: 24px; }
.news-card time { display: block; color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.news-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.news-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.news-images img { display: block; width: 100%; max-height: 480px; object-fit: contain; border-radius: 4px; background: var(--ink); }
.news-pagination { justify-content: center; margin-top: 32px; gap: 24px; }
.home-invitation { text-align: center; padding: 80px 20px; background: radial-gradient(ellipse at center, #352047, var(--ink) 75%); }
.home-invitation h2 { font-size: clamp(30px, 4vw, 44px); }
.home-invitation > p:not(.eyebrow) { color: var(--muted); }
@media (max-width: 700px) {
  .home-hero { grid-template-columns: 1fr; padding: 48px 6%; background-image: linear-gradient(90deg, #100b19f5, #100b1970), url('/art/backdrop-mobile.webp'); }
  .home-art { margin-top: 30px; }
  .home-character { width: min(100%, 280px); }
  .community-grid, .role-list { grid-template-columns: 1fr; }
  .vip-section { grid-template-columns: 1fr; padding-block: 50px; }
  .home-news-link { flex-direction: column; align-items: flex-start; }
  .news-heading { display: block; }
  .news-pagination { gap: 12px; }
}