/* ---------- SIGNATURE: the silver waterline horizon ----- */
/* The brand idea made literal: an engraved groove that carries
   a specular highlight as it crosses the viewport.            */

.horizon {
  position: relative;
  height: clamp(3.5rem, 8vw, 6rem);
  margin-block: calc(var(--sp-8) * -1) 0;
  background: var(--paper);
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.horizon__line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: linear-gradient(to bottom,
    rgba(18, 16, 14, .16) 0 1px,
    rgba(255, 255, 255, .92) 1px 2px);
}

.horizon__gleam {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  transform: translateX(-120%);
  will-change: transform;
}

.horizon__gleam::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(140px, 20vw, 320px);
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--ag-500) 20%,
    var(--ag-100) 50%,
    var(--ag-500) 80%,
    transparent 100%);
  filter: blur(.5px);
}

@media (prefers-reduced-motion: reduce) {
  .horizon__gleam { transform: translateX(0); opacity: .55; }
  .horizon__gleam::after { width: 100%; }
}
/* ---------- SIGNATURE: pressed-type manifesto ----------- */
/* Huge display type, debossed into a warm paper band, opened
   by a hard clip-path sweep as each line enters view.        */

.manifesto {
  background: var(--paper-warm);
  border-block: 1px solid var(--line);
  text-align: center;
}

.manifesto__text {
  margin: 0 auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.manifesto__line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6.4vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: var(--tr-display);
  font-weight: 500;
  color: var(--tx-hi);
  text-shadow: var(--deboss);
  opacity: 0;
  transform: translateY(22px);
  clip-path: inset(0 100% 0 0);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    clip-path var(--t-slow) var(--ease-out);
}

.manifesto__line--quiet {
  color: var(--ag-600);
  text-shadow: var(--deboss-soft);
}

.manifesto__line.is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
}

@media (prefers-reduced-motion: reduce) {
  .manifesto__line {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}
/* ---------- SIGNATURE: silver-framed image reveal ------- */
/* A masked photograph that opens from a vertical slit while
   engraved silver rules draw themselves around its edge.       */

.reveal-shot { overflow: hidden; }

.reveal-shot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.reveal-shot__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-sunk);
  clip-path: inset(0 50% 0 50%);
  transform: translateZ(0);
  transition: clip-path var(--t-slow) var(--ease-out);
}

.reveal-shot__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform var(--t-slow) var(--ease-out);
}

.reveal-shot__frame.is-in { clip-path: inset(0); }
.reveal-shot__frame.is-in img { transform: scale(1); }

.reveal-shot__rule {
  position: absolute;
  z-index: 2;
  background: linear-gradient(to bottom,
    rgba(18, 16, 14, .16) 0 1px,
    rgba(255, 255, 255, .92) 1px 2px);
  transition: transform var(--t-slow) var(--ease-out);
}

.reveal-shot__rule--top,
.reveal-shot__rule--bottom {
  left: clamp(10px, 2.2vw, 18px);
  right: clamp(10px, 2.2vw, 18px);
  height: 2px;
  transform: scaleX(0);
}

.reveal-shot__rule--top {
  top: clamp(10px, 2.2vw, 18px);
  transform-origin: left center;
}

.reveal-shot__rule--bottom {
  bottom: clamp(10px, 2.2vw, 18px);
  transform-origin: right center;
}

.reveal-shot__rule--left,
.reveal-shot__rule--right {
  top: clamp(10px, 2.2vw, 18px);
  bottom: clamp(10px, 2.2vw, 18px);
  width: 2px;
  transform: scaleY(0);
}

.reveal-shot__rule--left {
  left: clamp(10px, 2.2vw, 18px);
  transform-origin: center top;
}

.reveal-shot__rule--right {
  right: clamp(10px, 2.2vw, 18px);
  transform-origin: center bottom;
}

.reveal-shot__frame.is-in .reveal-shot__rule--top,
.reveal-shot__frame.is-in .reveal-shot__rule--bottom {
  transform: scaleX(1);
}

.reveal-shot__frame.is-in .reveal-shot__rule--left,
.reveal-shot__frame.is-in .reveal-shot__rule--right {
  transform: scaleY(1);
}

.reveal-shot__copy {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
}

.reveal-shot__copy.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .reveal-shot__grid { grid-template-columns: 1fr; }
  .reveal-shot__frame { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-shot__frame { clip-path: inset(0); }
  .reveal-shot__frame img { transform: scale(1); }
  .reveal-shot__rule--top,
  .reveal-shot__rule--bottom { transform: scaleX(1); }
  .reveal-shot__rule--left,
  .reveal-shot__rule--right { transform: scaleY(1); }
  .reveal-shot__copy { opacity: 1; transform: none; }
}