/* ========================================
   DIGITAL ATELIER — Portfolio Collection
   ======================================== */

/* ========================================
   SITE NAV
   ======================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 60px;
  background: linear-gradient(
    to bottom,
    rgba(35, 24, 22, 0.75) 0%,
    rgba(35, 24, 22, 0) 100%
  );
  pointer-events: none;
}

.site-nav__logo,
.site-nav__back {
  pointer-events: auto;
  font-family: var(--font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.site-nav__logo:hover,
.site-nav__back:hover {
  opacity: 0.5;
}

.site-nav__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 400;
}

.site-nav__back-arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-nav__back:hover .site-nav__back-arrow {
  transform: translateX(-5px);
}

/* ========================================
   MINI HERO
   ======================================== */

.pf-hero {
  position: relative;
  width: 100%;
  height: 55vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.pf-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pf-hero__bg-img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 30%;
  will-change: transform;
}

.pf-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* Absolutely placed editorial accents */
.pf-hero__accent {
  position: absolute;
  z-index: 2;
  font-family: var(--font);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-dim);
  opacity: 0;
}

.pf-hero__accent--tag {
  top: 42px;
  right: 60px;
}

.pf-hero__accent--count {
  bottom: 48px;
  right: 60px;
}

.pf-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 150px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pf-hero__title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(56px, 9vw, 130px);
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
}

.pf-hero__sub {
  font-family: var(--font);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white-dim);
  opacity: 0;
  padding-left: 4px;
}

/* ========================================
   PORTFOLIO SECTION
   ======================================== */

.pf-section {
  width: 100%;
  overflow: hidden;
}

/* ── Scattered free-float grid ──
   Items are absolutely positioned within
   a tall relative container. Each has
   unique (left, top, width, height) for
   a drifting editorial feel.
   Container height sized to fit all items
   + generous breathing room.
   ────────────────────────────────────── */

.pf-grid {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  height: 2800px;
  padding: 0 60px;
}

/* ── Floating editorial text labels ── */

.pf-float-label {
  position: absolute;
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--white-dim);
  pointer-events: none;
  user-select: none;
}

/* Sits in open space between items 2 and 3 */
.pf-float-label--1 {
  left: 5%;
  top: 740px;
  text-align: left;
}

/* ========================================
   PORTFOLIO ITEMS — absolute scatter
   ======================================== */

.pf-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
}

/* ── Image container ── */

.pf-item__link {
  display: block;
  cursor: pointer;
}

.pf-item__img-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  will-change: transform;
}

.pf-item__img-wrap img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  position: absolute;
  top: -10%;
  left: 0;
  will-change: transform;
  /* Blur + scale on hover — smooth ease */
  transition: filter 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  filter: blur(0px);
}

.pf-item__link:hover .pf-item__img-wrap img {
  filter: blur(5px);
  transform: scale(1.04);
}

/* ── Hover overlay — soft dark fade ── */

.pf-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 6, 5, 0.38);
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pf-item__link:hover .pf-item__overlay {
  opacity: 1;
}

/* Centered "VIEW PROJECT / →" label */
.pf-item__view {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s,
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;
}

.pf-item__view .cta__slash {
  display: inline-block;
  width: 10px;
  text-align: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center;
}

.pf-item__view .cta__arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.pf-item__link:hover .pf-item__view {
  opacity: 1;
  transform: translateY(0);
}

.pf-item__link:hover .pf-item__view .cta__slash {
  animation: slashSweep 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pf-item__link:hover .pf-item__view .cta__arrow {
  transform: translateX(5px);
}

/* Meta — number + name + category */
.pf-item__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.pf-item__num {
  font-family: var(--font);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 2px;
}

.pf-item__name {
  font-family: var(--font);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
}

.pf-item__category {
  font-family: var(--font);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--white-dim);
}

/* ========================================
   ITEM POSITIONS & SIZES
   Three loose bands, ~800px apart vertically.
   left/top relative to .pf-grid.
   ======================================== */

/* Each item has a unique top — no two share a similar row.
   Gaps between tops: 360 / 440 / 320 / 500 / 380px
   Horizontals zigzag with varied offsets so nothing lines up. */

/* 1 — large portrait, far left, top */
.pf-item--1 {
  left: 4%;
  top: 60px;
  width: 340px;
}
.pf-item--1 .pf-item__img-wrap { height: auto; }
.pf-item--1 .pf-item__img-wrap img {
  position: static;
  height: auto;
  object-fit: contain;
}

/* 2 — landscape, right side, 360px below item 1 top */
.pf-item--2 {
  left: 53%;
  top: 420px;
  width: 450px;
}
.pf-item--2 .pf-item__img-wrap { height: 285px; }

/* 3 — small portrait, center-left, 440px below item 2 top */
.pf-item--3 {
  left: 20%;
  top: 860px;
  width: 252px;
}
.pf-item--3 .pf-item__img-wrap { height: 370px; }

/* 4 — tall portrait, far right, 320px below item 3 top */
.pf-item--4 {
  left: 64%;
  top: 1180px;
  width: 308px;
}
.pf-item--4 .pf-item__img-wrap { height: 470px; }

/* 5 — wide landscape, left-center, 500px below item 4 top */
.pf-item--5 {
  left: 8%;
  top: 1680px;
  width: 390px;
}
.pf-item--5 .pf-item__img-wrap { height: 250px; }

/* 6 — portrait, far right, 380px below item 5 top */
.pf-item--6 {
  left: 61%;
  top: 2060px;
  width: 318px;
}
.pf-item--6 .pf-item__img-wrap { height: 465px; }

/* ========================================
   PORTFOLIO REELS
   ======================================== */

.pf-reels {
  padding: 0 0 120px;
  max-width: 1440px;
  margin: 0 auto;
}

.pf-reels__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 36px;
  padding: 0 60px;
}

.pf-reels__item {
  flex: 1;
  max-width: 280px;
}

.pf-reels__item .reels__video-wrap {
  aspect-ratio: 351 / 563;
}

.pf-reels__item--up {
  margin-top: 0;
}

.pf-reels__item--down {
  margin-top: 80px;
}

/* ========================================
   PORTFOLIO CTA
   ======================================== */

.pf-cta {
  padding: 40px 60px 200px;
  max-width: 1440px;
  margin: 0 auto;
}

.pf-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 70px;
}

.pf-cta__heading-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-cta__line {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(44px, 7.5vw, 110px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.pf-cta__line--1 { align-self: flex-start; }
.pf-cta__line--2 { align-self: flex-start; padding-left: 8%; }
.pf-cta__line--3 { font-style: italic; align-self: flex-end; padding-right: 4%; }

.pf-cta__bottom {
  display: flex;
  align-items: center;
  gap: 80px;
  padding-left: 4%;
  opacity: 0;
}

.pf-cta__sub {
  font-family: var(--font);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-dim);
  max-width: 260px;
  line-height: 1.5;
}

/* Override the hero__cta base opacity:0 */
.pf-cta__btn {
  opacity: 1 !important;
  font-size: 13px;
  padding: 14px 28px;
  border: 1px solid var(--white-divider);
  transition: border-color 0.4s ease, background 0.4s ease;
}

.pf-cta__btn:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}

/* ========================================
   RESPONSIVE — 1200px
   ======================================== */

@media (max-width: 1200px) {
  .pf-hero__content { padding: 0 80px 56px; }
  .pf-hero__accent--tag { right: 40px; }
  .pf-hero__accent--count { right: 40px; }

  .pf-grid {
    padding: 0 40px;
    height: 2480px;
  }

  .pf-item--1 { width: 280px; left: 4%; top: 60px; }
  .pf-item--1 .pf-item__img-wrap { height: auto; }

  .pf-item--2 { width: 360px; left: 50%; top: 360px; }
  .pf-item--2 .pf-item__img-wrap { height: 230px; }

  .pf-item--3 { width: 210px; left: 20%; top: 760px; }
  .pf-item--3 .pf-item__img-wrap { height: 300px; }

  .pf-item--4 { width: 260px; left: 61%; top: 1040px; }
  .pf-item--4 .pf-item__img-wrap { height: 380px; }

  .pf-item--5 { width: 320px; left: 8%; top: 1500px; }
  .pf-item--5 .pf-item__img-wrap { height: 210px; }

  .pf-item--6 { width: 260px; left: 59%; top: 1840px; }
  .pf-item--6 .pf-item__img-wrap { height: 380px; }

  .pf-float-label--1 { left: 5%; top: 640px; }

  .pf-reels__grid { padding: 0 40px; gap: 28px; }
  .pf-reels__item { max-width: 240px; }

  .pf-cta { padding: 40px 40px 160px; }
}

/* ========================================
   RESPONSIVE — 968px (tablet)
   Switch to staggered flex column
   ======================================== */

@media (max-width: 968px) {
  .site-nav { padding: 22px 30px; }

  .pf-hero { height: 52vh; min-height: 440px; }
  .pf-hero__content { padding: 0 40px 48px; }
  .pf-hero__accent--tag { top: 28px; right: 30px; }
  .pf-hero__accent--count { right: 30px; bottom: 36px; }

  /* Switch off absolute layout */
  .pf-section { padding: 100px 0 0; }

  .pf-grid {
    position: static;
    height: auto;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 100px;
  }

  .pf-item {
    position: static;
    width: auto;
  }

  .pf-float-label { display: none; }

  /* Every item has a unique width, height, alignment, and gap —
     no two feel the same size or position */

  /* 1 — portrait feel, left flush, generous gap after */
  .pf-item--1 {
    width: 56%;
    align-self: flex-start;
    margin-bottom: 90px;
  }
  .pf-item--1 .pf-item__img-wrap { height: auto; }

  /* 2 — landscape feel, right flush, smaller gap */
  .pf-item--2 {
    width: 72%;
    align-self: flex-end;
    margin-bottom: 65px;
  }
  .pf-item--2 .pf-item__img-wrap { height: 210px; }

  /* 3 — small portrait, inset from left, big gap after */
  .pf-item--3 {
    width: 42%;
    align-self: flex-start;
    margin-left: 14%;
    margin-bottom: 110px;
  }
  .pf-item--3 .pf-item__img-wrap { height: 320px; }

  /* 4 — tall portrait, right flush, medium gap */
  .pf-item--4 {
    width: 60%;
    align-self: flex-end;
    margin-bottom: 80px;
  }
  .pf-item--4 .pf-item__img-wrap { height: 400px; }

  /* 5 — wide landscape, left flush, tight gap */
  .pf-item--5 {
    width: 68%;
    align-self: flex-start;
    margin-bottom: 75px;
  }
  .pf-item--5 .pf-item__img-wrap { height: 200px; }

  /* 6 — portrait, right flush, last item */
  .pf-item--6 {
    width: 48%;
    align-self: flex-end;
  }
  .pf-item--6 .pf-item__img-wrap { height: 350px; }

  .pf-reels__grid { padding: 0 30px; gap: 20px; }
  .pf-reels__item { max-width: none; }
  .pf-reels__item--down { margin-top: 60px; }
  .pf-reels { padding: 40px 0 80px; }

  .pf-cta { padding: 40px 30px 140px; }
  .pf-cta__bottom { flex-direction: column; align-items: flex-start; gap: 32px; padding-left: 0; }
}

/* ========================================
   RESPONSIVE — 640px (mobile)
   ======================================== */

@media (max-width: 640px) {
  .site-nav { padding: 18px 20px; }

  .pf-hero { height: 50svh; min-height: 380px; }
  .pf-hero__content { padding: 0 20px 36px; }
  .pf-hero__accent--tag { top: 22px; right: 20px; font-size: 10px; }
  .pf-hero__accent--count { bottom: 28px; right: 20px; font-size: 10px; }

  .pf-grid { padding: 0 16px; padding-bottom: 80px; }

  /* Every item its own size, position and breathing room */

  /* 1 — wide portrait, left, big gap */
  .pf-item--1 {
    width: 82%;
    align-self: flex-start;
    margin-left: 0;
    margin-bottom: 65px;
  }
  .pf-item--1 .pf-item__img-wrap { height: auto; }

  /* 2 — landscape, right, medium gap */
  .pf-item--2 {
    width: 65%;
    align-self: flex-end;
    margin-bottom: 85px;
  }
  .pf-item--2 .pf-item__img-wrap { height: 190px; }

  /* 3 — narrow portrait, inset left, tight gap */
  .pf-item--3 {
    width: 60%;
    align-self: flex-start;
    margin-left: 16%;
    margin-bottom: 55px;
  }
  .pf-item--3 .pf-item__img-wrap { height: 270px; }

  /* 4 — tall portrait, right, big gap */
  .pf-item--4 {
    width: 76%;
    align-self: flex-end;
    margin-bottom: 95px;
  }
  .pf-item--4 .pf-item__img-wrap { height: 330px; }

  /* 5 — full-width landscape, slight left offset, medium gap */
  .pf-item--5 {
    width: 88%;
    align-self: flex-start;
    margin-left: 4%;
    margin-bottom: 60px;
  }
  .pf-item--5 .pf-item__img-wrap { height: 185px; }

  /* 6 — medium portrait, right, last item */
  .pf-item--6 {
    width: 70%;
    align-self: flex-end;
  }
  .pf-item--6 .pf-item__img-wrap { height: 295px; }

  .pf-reels__grid {
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
  }
  .pf-reels__item {
    width: 42%;
    max-width: none;
    flex: none;
  }
  .pf-reels__item--down { margin-top: 40px; }
  .pf-reels { padding: 30px 0 60px; }

  .pf-cta { padding: 40px 20px 120px; }

  .pf-cta__line { font-size: clamp(38px, 12vw, 60px); }
  .pf-cta__line--2 { padding-left: 12%; }
  .pf-cta__line--3 { padding-right: 0; }
  .pf-cta__bottom { padding-left: 0; gap: 28px; }
}