/* Homepage: hero, showcase, and project cards */
.hero { min-height: 100vh; }
 .hero::before { background-image: url("../../images/ABERRATION_background_edit.png"); background-size: cover; background-position: center; }
.aberration-home .hero-content { align-items: center; text-align: center; }
.hero-content p { max-width: 38rem; }
.hero-actions { display: flex; justify-content: center; gap: 0.8rem; margin-top: 0.75rem; }
.hero-button { min-width: 11rem; padding: 0.85rem 1.35rem; border: 1px solid; border-radius: var(--radius-pill); font-size: 0.7rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; transition: filter 0.4s ease, transform 0.4s ease; }
.hero-button-primary { border-color: rgba(225, 225, 225, 0.4); background: rgba(150, 150, 150, 0.12); color: #f2f2f2; }
.hero-button-secondary { border-color: rgba(125, 125, 125, 0.35); color: #b5b5b5; }
.hero-button:hover { filter: brightness(1.25); transform: translateY(-1px); }

.showcase { position: relative; display: flex; align-items: center; min-height: 82vh; overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.showcase::before { position: absolute; top: 0; right: 0; left: 0; z-index: 3; height: 5rem; background: linear-gradient(180deg, rgba(2, 2, 2, 0.42) 0%, rgba(2, 2, 2, 0.18) 35%, transparent 100%); content: ""; pointer-events: none; }
.showcase-slides, .showcase-slides img, .showcase-overlay { position: absolute; inset: 0; }
.showcase-slides img { width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(60%) brightness(0.42) saturate(0.55); animation: aberration-showcase 18s infinite; }
.showcase-slides img:nth-child(2) { animation-delay: 6s; }
.showcase-slides img:nth-child(3) { animation-delay: 12s; }
@keyframes aberration-showcase { 0%, 8% { opacity: 0; } 14%, 34% { opacity: 1; } 40%, 100% { opacity: 0; } }
.showcase-overlay { background: linear-gradient(90deg, rgba(2, 2, 2, 0.88), rgba(2, 2, 2, 0.32) 58%, rgba(2, 2, 2, 0.72)); }
.showcase-content { position: relative; z-index: 4; width: 100%; max-width: 1400px; margin: 0 auto; padding: 4rem 2rem; text-align: left; }
.showcase-content .section-label { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.showcase-content .section-label::before { display: block; width: 1.5rem; height: 1px; background: rgba(72, 72, 72, 0.5); content: ""; flex-shrink: 0; }
.showcase-content h2 { margin: 0 0 0.75rem; color: var(--text-header); font-size: 2rem; font-weight: 700; text-transform: uppercase; }
.showcase-content p { max-width: 30rem; margin: 0 0 1.25rem; color: var(--text-body); font-size: 1rem; line-height: 1.8; }
.showcase-actions { display: flex; gap: 0.7rem; }
.showcase-button { display: inline-block; padding: 0.75rem 1.15rem; border: 1px solid rgba(225, 225, 225, 0.3); border-radius: var(--radius-pill); color: var(--text-body); font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; transition: filter 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.showcase-button-muted { border-color: var(--border-mid); color: var(--text-body); }
.showcase-button:hover { border-color: rgba(245, 245, 245, 0.65); color: var(--text-header); filter: brightness(1.3); }
.trailer-modal { position: fixed; inset: 56px 0 0; z-index: 90; display: grid; place-items: center; padding: 0; background: rgba(0, 0, 0, 0.78); }
.trailer-modal[hidden] { display: none; }
.trailer-modal-inner { position: relative; width: min(94vw, 1320px); aspect-ratio: 16 / 9; overflow: visible; padding: 0; border: 2px solid rgba(245, 245, 245, 0.46); border-radius: var(--radius-sm); background: rgba(6, 6, 6, 0.72); box-shadow: 0 0 2rem rgba(245, 245, 245, 0.1), 0 1rem 3rem rgba(0, 0, 0, 0.65); }
 .trailer-frame { width: 100%; height: 100%; overflow: hidden; background: #050505 url("../../images/ABERRATION_background_edit.png") center / cover no-repeat; }
.trailer-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.trailer-close { position: absolute; top: 0.9rem; right: -4.5rem; z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: transparent; color: var(--text-header); font-size: 2.25rem; line-height: 1; cursor: pointer; text-shadow: 0 0 0.6rem rgba(255, 255, 255, 0.35); }
.trailer-close:hover { color: #ffffff; text-shadow: 0 0 0.8rem rgba(255, 255, 255, 0.75); }
.showcase-indicator { position: absolute; right: 2rem; bottom: 2rem; z-index: 4; color: var(--text-header); font-size: 0.65rem; letter-spacing: 0.18em; }
.showcase-indicator span { color: var(--text-meta); }

.aberration-home .page-body > .divider-md { display: none; }

.blog-read-popup { opacity: 0; transition: opacity 0.5s ease; }
.blog-card:hover .blog-read-popup { opacity: 1; }
.blog-read-popup .article-read-text { display: flex; align-items: center; gap: 0.35rem; margin-left: -1rem; color: var(--text-body); font-size: 0.75rem; transition: margin-left 0.75s ease, opacity 0.5s ease; }
.blog-card:hover .blog-read-popup .article-read-text { margin-left: 0; }
.blog-read-popup .arrow-right-icon { width: 1rem; height: 1rem; margin: 0; transform: none; }

.brief-image, .record-image { position: relative; overflow: hidden; background-color: #111; }
.brief-image img, .record-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(80%) brightness(.42) saturate(.4); transition: filter 1s ease, transform 1s ease; }
.blog-row-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.blog-card:hover .brief-image img, .blog-row:hover .record-image img { filter: grayscale(20%) brightness(.82) saturate(.8); transform: scale(1.05); }
.record-image { border: 1px solid var(--border); background-color: var(--surface); }

@media (max-width: 600px) {
  .hero-actions, .showcase-actions { align-items: center; flex-direction: column; }
  .showcase { min-height: 36rem; }
  .showcase-content { padding-inline: 2rem; }
  .showcase-indicator { right: 2rem; bottom: 1.5rem; }
  .trailer-close { top: -2.75rem; right: 0; }
}