/* ARES site — custom styles on top of the compiled utility layer (styles.css).
   Edit this file freely; it is a normal hand-written stylesheet. */

/* Scroll-reveal fade-up. Elements with .reveal start hidden and animate in when
   they enter the viewport (main.js adds .is-in). If JS is unavailable the
   <noscript> block in base.html forces them visible. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Mobile menu open state locks page scroll. */
body.menu-open {
  overflow: hidden;
}

/* ---- Featured hero mosaic gallery ----------------------------------- */
.featured-hero-section {
  border-top: 1px solid var(--ares-line);
}
.featured-hero__card {
  display: block;
  height: 100%;
  border-radius: 0;
  transition: transform 0.2s ease;
}
.featured-hero__card:hover .featured-hero__media video,
.featured-hero__card:hover .featured-hero__media img {
  transform: scale(1.02);
}
.featured-hero__media {
  position: relative;
  overflow: hidden;
  background: var(--ares-surface);
}
.featured-hero__media video,
.featured-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

/*
  Asset frames (@ 16px root):
  16:9 → 998×562, alone on its row
  9:16 → 400×711, up to 2 per row
  1:1  → 450×450, up to 2 per row
*/
:root {
  --asset-long: 62.4rem; /* 998.4px — 16:9 width */
  --asset-portrait: 25rem; /* 400px → 711px tall */
  --asset-square: 28.125rem; /* 450px */
  --asset-gap: 1.25rem;
}

.featured-hero__mosaic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--asset-gap);
  width: min(100%, var(--asset-long));
  margin-inline: auto;
}
.featured-hero__row {
  width: 100%;
}
.featured-hero__row--landscape .featured-hero__cell--widescreen,
.featured-hero__row--landscape .featured-hero__cell--side {
  width: 100%;
  max-width: var(--asset-long);
  margin-inline: auto;
}
.featured-hero__row--portraits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--asset-gap);
}
.featured-hero__row--portraits .featured-hero__cell--portrait {
  width: min(100%, var(--asset-portrait));
  flex: 0 0 auto;
}
.featured-hero__row--photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto));
  gap: var(--asset-gap);
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  justify-content: center;
  justify-items: center;
}
.featured-hero__row--photos .featured-hero__cell--photo {
  width: min(100%, var(--asset-square)); /* 450×450 */
}

[data-grid],
.portfolio-tier-section__grid--primary,
.portfolio-tier-section__grid--medium,
.portfolio-tier-section__grid--small {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--asset-gap);
  width: min(100%, var(--asset-long));
  margin-inline: auto;
  justify-items: center;
  align-items: start;
}
[data-grid].hidden,
.portfolio-tier-section__grid--primary.hidden,
.portfolio-tier-section__grid--medium.hidden,
.portfolio-tier-section__grid--small.hidden {
  display: none;
}

.featured-hero__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}
.featured-hero__figure .featured-hero__media {
  flex: 0 0 auto;
}
.featured-hero__caption {
  flex: 0 0 auto;
}

/* Portfolio 16:9 — full row */
.portfolio-item--landscape,
.portfolio-item--wide {
  grid-column: 1 / -1;
  width: 100%;
  max-width: var(--asset-long);
  margin-inline: auto;
}

/* Portfolio 9:16 — half row */
.portfolio-item--portrait {
  grid-column: span 1;
  width: min(100%, var(--asset-portrait));
  margin-inline: auto;
}

/* Portfolio 1:1 — half row */
.portfolio-item--square {
  grid-column: span 1;
  width: min(100%, var(--asset-square));
  margin-inline: auto;
}

.featured-hero__media--landscape,
.featured-hero__media--widescreen,
.featured-hero__media--primary,
.portfolio-item__media--landscape {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
.featured-hero__media--portrait,
.portfolio-item__media--portrait {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  max-width: none;
}
.featured-hero__media--square,
.featured-hero__media--demo,
.featured-hero__media--photo,
.featured-hero__media--medium,
.featured-hero__media--small,
.portfolio-item__media--square {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
}

@media (max-width: 639px) {
  :root {
    --asset-gap: 0.75rem;
  }

  .featured-hero__mosaic {
    width: 100%;
  }

  .featured-hero__row--portraits {
    gap: 0.75rem;
  }
  .featured-hero__row--portraits .featured-hero__cell--portrait {
    width: calc((100% - 0.75rem) / 2);
  }

  .featured-hero__row--photos {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .featured-hero__row--photos .featured-hero__cell--photo {
    width: 100%;
  }

  [data-grid],
  .portfolio-tier-section__grid--primary,
  .portfolio-tier-section__grid--medium,
  .portfolio-tier-section__grid--small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.75rem;
  }

  .portfolio-item--landscape,
  .portfolio-item--wide {
    grid-column: 1 / -1;
    width: 100%;
  }
  .portfolio-item--portrait,
  .portfolio-item--square {
    grid-column: span 1;
    width: 100%;
  }

  .brand-film-badge {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.45rem;
    font-size: 0.55rem;
  }
}

/* Brand film emphasis (hero product) */
.brand-film-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid rgba(212, 175, 120, 0.55);
  background: rgba(10, 10, 9, 0.78);
  color: #e8c98a;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.featured-hero__media--brand {
  outline: 1px solid rgba(212, 175, 120, 0.45);
  outline-offset: -1px;
  box-shadow: inset 0 0 0 1px rgba(212, 175, 120, 0.2), 0 0 28px rgba(212, 175, 120, 0.08);
}
.brand-film-label {
  color: #e8c98a !important;
}
.is-brand-film .featured-hero__media:not(.featured-hero__media--brand) {
  outline: 1px solid rgba(212, 175, 120, 0.35);
  outline-offset: -1px;
}
.chip--brand {
  border-color: rgba(212, 175, 120, 0.45) !important;
  color: #e8c98a !important;
}
.chip--brand[data-active="true"] {
  background: rgba(212, 175, 120, 0.12) !important;
  border-color: rgba(212, 175, 120, 0.7) !important;
}
.portfolio-item.is-brand-film .portfolio-item__media {
  outline: 1px solid rgba(212, 175, 120, 0.45);
  outline-offset: -1px;
  box-shadow: 0 0 24px rgba(212, 175, 120, 0.08);
}
.portfolio-item.is-brand-film .brand-film-badge {
  top: 0.6rem;
  left: 0.6rem;
}
.product-row--brand {
  border-color: rgba(212, 175, 120, 0.28) !important;
}
.portfolio-tier-section[data-tier-section="primary"] .portfolio-tier-section__head .hero-title {
  color: #e8c98a;
}
.portfolio-tier-section[data-tier-section="primary"] .portfolio-item__media {
  outline: 1px solid rgba(212, 175, 120, 0.35);
  outline-offset: -1px;
}

/* ---- Portfolio industry folder tiered grid -------------------------- */
.portfolio-tier-section + .portfolio-tier-section {
  margin-top: 3rem;
}
.portfolio-tier-section__head {
  margin-bottom: 1.5rem;
}
.portfolio-item__media--video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Fullscreen lightbox -------------------------------------------- */
body.lightbox-open {
  overflow: hidden;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
}
.lightbox[hidden] {
  display: none !important;
}
.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ares-line);
  border-radius: 9999px;
  background: rgba(10, 10, 9, 0.75);
  color: var(--ares-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__stage {
  display: flex;
  max-width: min(1200px, 96vw);
  max-height: min(82vh, 900px);
  width: 100%;
  align-items: center;
  justify-content: center;
}
.lightbox__stage video,
.lightbox__stage img {
  max-width: 100%;
  max-height: min(82vh, 900px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lightbox__caption {
  max-width: min(1200px, 96vw);
  text-align: center;
  color: var(--ares-muted);
}