/* ============================================================
   AUREN STUDIO — SECTION 01 / SELECTED WORK
   ============================================================ */

.work {
  position: relative;
  background: var(--c-black);
  color: var(--c-ivory);
  overflow: hidden;
}

/* ---- environment (continuous with hero) ------------------- */
.work__env {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.work__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}
.work__grid line {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  fill: none;
}
.work__grid .grid__v line { stroke: var(--hair); }
.work__grid .grid__h line { stroke: rgba(255, 255, 255, 0.028); }
.work__grid .grid__gold line { stroke: var(--hair-gold); }
.work__grain {
  position: absolute;
  inset: 0;
  opacity: 0.018;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.work__inner {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 10vh, 120px) 0 clamp(140px, 16vh, 220px);
}

/* ---- section intro ---------------------------------------- */
.work__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 var(--gutter) clamp(64px, 8vh, 96px);
}
.work__identifier {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2vw, 24px);
}
.work__index {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--c-gold-42);
}
.work__heading {
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-ivory-60);
}
.work__year {
  padding-left: calc(var(--fs-micro) + clamp(16px, 2vw, 24px));
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--c-ivory-24);
}

/* ---- project sequence ------------------------------------- */
.work__projects {
  display: flex;
  flex-direction: column;
  gap: clamp(120px, 14vh, 180px);
}

.project {
  position: relative;
}

/* ---- media frame ------------------------------------------ */
.project__media-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--c-black-deep);
  border: 1px solid rgba(190, 145, 65, 0.12);
  transition: border-color var(--dur-hover) var(--ease-premium);
}
.project__media-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  transition: box-shadow var(--dur-hover) var(--ease-premium);
}
.project__media-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 8, 8, 0) 62%, rgba(7, 8, 8, 0.38) 100%);
}

.project__media-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scale(var(--media-scale, 1));
  transition: transform 680ms var(--ease-premium);
  will-change: transform;
}
.project__media-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: filter 680ms var(--ease-premium);
}

.project__hover-label {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  padding: 8px 12px;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ivory);
  background: rgba(7, 8, 8, 0.72);
  border: 1px solid var(--c-gold-22);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 280ms var(--ease-premium);
}

/* ---- copy block ------------------------------------------- */
.project__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.4vh, 16px);
  max-width: 520px;
}

.project__num {
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  color: var(--c-gold-42);
}

.project__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project__name {
  font-size: var(--fs-project);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-ivory);
  overflow: hidden;
}
.project__name-inner {
  display: block;
  transform: translate3d(0, calc(var(--reveal, 0) * 106%), 0);
}

.project__category {
  margin-top: 0.4em;
  margin-inline: 0;
  padding-inline: 0;
  width: max-content;
  max-width: 100%;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  text-align: left;
  color: var(--c-ivory-38);
}

.project__desc {
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.65;
  color: var(--c-ivory-60);
  max-width: 44ch;
}

.project__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ivory-38);
}
.project__meta li + li::before {
  content: '·';
  margin: 0 0.65em;
  color: var(--c-gold-22);
}

.project__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
  padding: 16px 0;
  font-size: var(--fs-cta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ivory);
  border-bottom: 1px solid var(--c-gold-22);
  transition: color var(--dur-hover) var(--ease-premium), border-color var(--dur-hover) var(--ease-premium);
}
.project__cta svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: square;
  transition: transform var(--dur-hover) var(--ease-premium);
}
.project__cta:hover,
.project__cta:focus-visible {
  color: var(--c-gold);
  border-color: var(--c-gold-42);
}
.project__cta:hover svg,
.project__cta:focus-visible svg {
  transform: translate3d(4px, -4px, 0);
}

/* ---- layout variants -------------------------------------- */

/* 01 — VANTA (flagship, centred, largest) */
.project--vanta {
  padding: 0 calc((100% - min(90vw, 1680px)) / 2);
}
.project--vanta .project__layout {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 44px);
}
.project--vanta .project__media-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: clamp(320px, 72vh, 780px);
  max-height: 80vh;
}
.project--vanta .project__copy {
  padding: 0 clamp(4px, 1vw, 12px);
  max-width: 580px;
}

/* 02 — VEYRA (right-aligned media, copy left — distinct zones) */
.project--veyra .project__layout {
  display: grid;
  grid-template-columns: minmax(260px, 38fr) minmax(0, 62fr);
  gap: clamp(56px, 7vw, 112px);
  align-items: center;
  padding: 0 var(--gutter);
  isolation: isolate;
}
.project--veyra .project__copy {
  grid-column: 1;
  position: relative;
  z-index: 2;
  order: unset;
  justify-self: start;
  align-self: center;
  max-width: min(440px, 100%);
  padding-bottom: 0;
  padding-right: clamp(8px, 1.5vw, 20px);
}
.project--veyra .project__media-col {
  grid-column: 2;
  position: relative;
  z-index: 1;
  order: unset;
  justify-self: end;
  width: 100%;
  max-width: min(100%, 960px);
  /* controlled bleed into the gutter only — never over the copy column */
  margin-right: calc(var(--gutter) * -0.35);
}
.project--veyra .project__media-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: clamp(260px, 52vh, 580px);
  max-height: 72vh;
}
/* subtle left-edge fade — improves legibility if edges visually meet */
.project--veyra .project__media-wrap::after {
  background:
    linear-gradient(90deg, rgba(7, 8, 8, 0.38) 0%, rgba(7, 8, 8, 0.1) 9%, rgba(7, 8, 8, 0) 24%),
    linear-gradient(180deg, rgba(7, 8, 8, 0) 62%, rgba(7, 8, 8, 0.38) 100%);
}

/* 03 — APEX — image dominant, name + CTA in a clear zone below */
.project--apex .project__layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(22px, 3vh, 36px);
  padding: 0 var(--gutter);
}
.project--apex .project__media-col {
  width: 100%;
  max-width: min(90vw, 1480px);
}
.project--apex .project__media-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: clamp(260px, 54vh, 600px);
}
.project--apex .project__copy {
  position: relative;
  z-index: 2;
  order: 2;
  padding-bottom: 0;
  max-width: min(520px, 100%);
  text-align: left;
}

/* ---- desktop: frame fits the full screenshot ---------------- */
@media (min-width: 901px) {
  .project--vanta .project__media-wrap,
  .project--veyra .project__media-wrap,
  .project--apex .project__media-wrap {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }

  .project__media-inner {
    height: auto;
  }

  .project__media-inner img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }
}

/* ---- hover (desktop) -------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .project__media-wrap:hover {
    border-color: var(--c-gold-42);
  }
  .project__media-wrap:hover::before {
    box-shadow: inset 0 0 0 1px rgba(190, 145, 65, 0.08);
  }
  .project__media-wrap:hover .project__media-inner {
    --media-scale: 1.02;
  }
  .project__media-wrap:hover .project__media-inner img {
    filter: contrast(1.04) brightness(1.03);
  }
  .project__media-wrap:hover .project__hover-label {
    opacity: 1;
  }
}

/* ---- section outro ---------------------------------------- */
.work__outro {
  /* Quiet interval before Pricing */
  padding: clamp(12px, 2vh, 28px) var(--gutter) 0;
}

/* ---- intro reveal initial states -------------------------- */
.js .work [data-reveal] {
  opacity: 0;
}
.js .project__name-inner {
  --reveal: 1;
}

/* ---- mobile ----------------------------------------------- */
@media (max-width: 900px) {
  .work__inner {
    padding: clamp(56px, 8vh, 80px) 0 clamp(100px, 12vh, 140px);
  }

  .work__intro {
    padding-bottom: clamp(40px, 6vh, 56px);
  }
  .work__year { padding-left: 0; }

  .work__projects {
    gap: clamp(88px, 12vh, 112px);
  }

  .project--vanta,
  .project--veyra,
  .project--apex {
    /* ~20–24px gutters — screenshot stays wide */
    padding: 0 22px;
  }

  .project--veyra .project__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
  }

  .project--vanta .project__layout,
  .project--apex .project__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0;
  }

  /* VEYRA mobile — media first, no overlap */
  .project--veyra .project__media-col {
    order: -1;
    width: 100%;
    max-width: none;
    margin-right: 0;
    z-index: auto;
  }
  .project--veyra .project__copy {
    order: 0;
    max-width: none;
    padding-right: 0;
    z-index: auto;
  }
  .project--veyra .project__media-wrap::after {
    background: none;
  }

  .project--veyra .project__copy,
  .project--apex .project__copy {
    order: unset;
    padding-bottom: 0;
  }

  /*
    FULL SCREENSHOT — frame fits the image (not the reverse).
    Remove forced aspect-ratio / min-height crops from desktop.
  */
  .project--vanta .project__media-wrap,
  .project--veyra .project__media-wrap,
  .project--apex .project__media-wrap {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    overflow: visible;
  }

  .project--veyra .project__media-col,
  .project--apex .project__media-col {
    width: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
  }

  .project__media-inner {
    height: auto;
    overflow: visible;
  }

  .project__media-inner img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
  }

  /* Soften edge vignette so it doesn’t read as a crop */
  .project__media-wrap::after {
    background: none;
  }

  .project__copy {
    max-width: none;
    gap: 12px;
  }
  .project__desc { font-size: 0.875rem; }
  .project__hover-label { display: none; }

  .work__outro {
    /* Mobile: avoid a second Studio label — keep the real #studio label only */
    display: none;
  }
}

/* ---- reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .work [data-reveal] { opacity: 1; }
  .js .project__name-inner { --reveal: 0; }
  .project__media-inner {
    transform: none !important;
    transition: none;
  }
  .project__hover-label { display: none; }
}