/* Grid pan hero — scoped from src/css/base.css so the rest of the site still scrolls */

.grid-hero {
  --gh-color-text: #ffffff;
  --gh-color-bg: #000000;
  --gh-color-link: #ffffff;
  --gh-color-content-title-sub: #ffffff;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  background-color: var(--gh-color-bg);
  color: var(--gh-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform-origin: 50% 0%;
          transform-origin: 50% 0%;
}

/* Scale-on-scroll is handled by hero-section.js (GSAP) — CSS view-timeline
   does not advance under Lenis smooth scrolling. */

.grid-hero.is-loading::before,
.grid-hero.is-loading::after {
  content: "";
  position: absolute;
  z-index: 1000;
}

.grid-hero.is-loading::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.grid-hero.is-loading::after {
  top: 50%;
  left: 50%;
  width: 120px;
  height: 1px;
  margin: -0.5px 0 0 -60px;
  border-radius: 0;
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #fff 0%,
    #fff 35%,
    transparent 35%
  );
  background-size: 280% 100%;
  background-position: 100% 0;
  animation: gridHeroLoaderSweep 1s linear infinite;
}

@keyframes gridHeroLoaderSweep {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.grid-hero .no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.grid-hero__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
  align-items: center;
  justify-content: center;
}

.grid-hero .grid {
  pointer-events: none;
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  display: grid;
  grid-template-columns: repeat(50, 2%);
  grid-template-rows: repeat(50, 2%);
}

.grid-hero .grid__item {
  position: relative;
}

.grid-hero .grid--img .grid__item {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.grid-hero .grid__item-img {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
}

.grid-hero .grid--img .grid__item-img {
  flex: none;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  will-change: transform;
}

.grid-hero .pos-1 {
  grid-area: 10 / 1 / 26 / 7;
}

.grid-hero .pos-2 {
  grid-area: 1 / 18 / 9 / 27;
}

.grid-hero .pos-3 {
  grid-area: 1 / 36 / 14 / 42;
}

.grid-hero .pos-4 {
  grid-area: 13 / 11 / 32 / 18;
}

.grid-hero .pos-5 {
  grid-area: 17 / 32 / 32 / 38;
}

.grid-hero .pos-6 {
  grid-area: 20 / 46 / 28 / 51;
}

.grid-hero .pos-7 {
  grid-area: 43 / 1 / 51 / 10;
}

.grid-hero .pos-8 {
  grid-area: 38 / 14 / 46 / 22;
}

.grid-hero .pos-9 {
  grid-area: 40 / 26 / 51 / 32;
}

.grid-hero .pos-10 {
  grid-area: 37 / 39 / 48 / 47;
}

.grid-hero .content__title {
  font-family: 'Avant-Garde', var(--primary-font, sans-serif);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(64px, 12vw, 160px);
  margin: 0;
  letter-spacing: -4px;
  line-height: normal;
  position: relative;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  color: #fff;
  opacity: 1;
  visibility: visible;
  animation: none;
}

.grid-hero .content__title-main {
  display: block;
  font-family: 'Avant-Garde', var(--primary-font, sans-serif);
  font-weight: 700;
  font-style: normal;
  letter-spacing: -4px;
  line-height: normal;
}

.grid-hero .content__title-sub {
  display: block;
  color: var(--gh-color-content-title-sub);
  font-family: 'Avant-Garde', var(--primary-font, sans-serif);
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  margin: 0;
  line-height: normal;
  letter-spacing: 0;
}

/* iPad / tablet: 5 larger, reshuffled frames */
.grid-hero--tablet .grid {
  width: 124%;
  height: 124%;
  top: -12%;
  left: -12%;
}

.grid-hero--tablet .pos-2,
.grid-hero--tablet .pos-4,
.grid-hero--tablet .pos-6,
.grid-hero--tablet .pos-8,
.grid-hero--tablet .pos-9 {
  display: none !important;
}

.grid-hero--tablet .pos-1 {
  grid-area: 3 / 3 / 22 / 18;
}

.grid-hero--tablet .pos-3 {
  grid-area: 2 / 32 / 20 / 50;
}

.grid-hero--tablet .pos-5 {
  grid-area: 20 / 18 / 36 / 36;
}

.grid-hero--tablet .pos-7 {
  grid-area: 34 / 2 / 50 / 20;
}

.grid-hero--tablet .pos-10 {
  grid-area: 32 / 34 / 50 / 50;
}

/* iPhone: 3-frame destructive grid — uneven, overlapping, edge-bleeding */
.grid-hero--phone .grid {
  width: 120%;
  height: 120%;
  top: -10%;
  left: -10%;
}

.grid-hero--phone .pos-2,
.grid-hero--phone .pos-3,
.grid-hero--phone .pos-4,
.grid-hero--phone .pos-5,
.grid-hero--phone .pos-7,
.grid-hero--phone .pos-8,
.grid-hero--phone .pos-10 {
  display: none !important;
}

/* Top-left fragment */
.grid-hero--phone .pos-1 {
  grid-area: 4 / 4 / 22 / 22;
  z-index: 1;
}

/* Mid-right fragment — overlaps slightly */
.grid-hero--phone .pos-6 {
  grid-area: 10 / 28 / 32 / 48;
  z-index: 2;
}

/* Bottom shard */
.grid-hero--phone .pos-9 {
  grid-area: 30 / 10 / 46 / 36;
  z-index: 3;
}