/*
 * Stokknes Publishing House cinematic layer.
 * Scoped to the publishing landing page and loaded nowhere else.
 */

.publishing-page {
  --house-px: 0;
  --house-py: 0;
  --house-scroll: 0;
}

.house-reading-progress {
  position: fixed;
  z-index: 130;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, #7b241f, var(--gold-2), #f2ddaf);
  box-shadow: 0 0 18px rgba(225, 182, 107, .36);
  will-change: transform;
}

.publishing-page .site-header {
  box-shadow: 0 24px 80px rgba(0, 0, 0, .2);
}

.publishing-page .house-page-masthead {
  position: relative;
  min-height: min(760px, calc(100svh - 78px));
  padding-top: 0;
  overflow: hidden;
  isolation: isolate;
  background: #050605;
}

.publishing-page .house-page-masthead picture {
  position: absolute;
  inset: 0;
  width: auto;
  transform:
    translate3d(
      calc(var(--house-px) * 6px),
      calc(var(--house-py) * 4px + var(--house-scroll) * -18px),
      0
    )
    scale(calc(1.015 + var(--house-scroll) * .02));
  transition: transform .8s cubic-bezier(.2, .65, .25, 1);
  will-change: transform;
}

.publishing-page .house-page-masthead picture,
.publishing-page .house-page-masthead img {
  height: 100%;
  max-height: none;
}

.publishing-page .house-page-masthead img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.94) contrast(1.045) brightness(.94);
}

.publishing-page .house-page-masthead::before,
.publishing-page .house-page-masthead::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.publishing-page .house-page-masthead::before {
  inset: 19px;
  border: 1px solid rgba(225, 182, 107, .13);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, .18);
}

.publishing-page .house-page-masthead::after {
  inset: 0;
  background:
    linear-gradient(0deg, rgba(4, 5, 4, .45), transparent 25%, transparent 76%, rgba(4, 5, 4, .22)),
    radial-gradient(circle at 50% 48%, transparent 34%, rgba(0, 0, 0, .2) 100%);
}

.house-masthead-atmosphere {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      circle at calc(51% + var(--house-px) * 6%) calc(48% + var(--house-py) * 5%),
      rgba(236, 177, 75, .15),
      rgba(142, 45, 39, .05) 22%,
      transparent 43%
    );
  transition: opacity .5s ease;
}

.house-scroll-cue {
  position: absolute;
  z-index: 5;
  right: 45px;
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 13px;
  color: rgba(238, 227, 204, .72);
  text-decoration: none;
  text-transform: uppercase;
  font: 700 8px/1 var(--mono);
  letter-spacing: .16em;
}

.house-scroll-cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 48px;
  overflow: hidden;
  background: rgba(225, 182, 107, .22);
}

.house-scroll-cue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-2);
  transform: translateY(-100%);
  animation: house-scroll-pulse 2.3s .8s cubic-bezier(.76, 0, .24, 1) infinite;
}

.publishing-page .house-intro {
  position: relative;
  z-index: 6;
  width: min(1380px, calc(100% - 96px));
  margin-top: -38px;
  margin-bottom: 34px;
  padding: clamp(38px, 5vw, 74px);
  border: 1px solid var(--line);
  background:
    linear-gradient(125deg, rgba(189, 150, 88, .085), transparent 42%),
    rgba(8, 10, 7, .97);
  box-shadow: 0 35px 90px rgba(0, 0, 0, .38);
}

.publishing-page .house-intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(38px, 5vw, 74px);
  width: 82px;
  height: 1px;
  background: var(--gold-2);
  box-shadow: 0 0 20px rgba(225, 182, 107, .34);
}

.publishing-page .house-intro h1 {
  color: var(--cream-2);
  background: linear-gradient(
    105deg,
    var(--cream-2) 0%,
    var(--cream-2) 43%,
    #f6d594 49%,
    #fff4dc 52%,
    var(--cream-2) 59%,
    var(--cream-2) 100%
  );
  background-size: 260% 100%;
  background-position: 110% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.publishing-page.publishing-ready .house-intro h1 {
  animation: house-title-sheen 9s 1.2s ease-in-out infinite;
}

.publishing-page .house-intro aside {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(189, 150, 88, .11), transparent 42%),
    #0b0d0a;
}

.publishing-page .house-intro aside::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(225, 182, 107, .08);
  transform: scale(.94);
}

.publishing-page .house-evidence {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #090b08, #12110d 48%, #090b08);
}

.publishing-page .house-evidence::before {
  content: "CONTROLLED CATALOGUE";
  position: absolute;
  right: -1.5%;
  bottom: -.25em;
  color: rgba(238, 227, 204, .025);
  font: 500 clamp(58px, 8vw, 132px)/.8 var(--serif);
  white-space: nowrap;
}

.publishing-page .house-evidence > div {
  position: relative;
  z-index: 2;
  transition: background .35s ease;
}

.publishing-page .house-evidence > div:hover {
  background: rgba(189, 150, 88, .045);
}

.publishing-page .house-evidence strong {
  text-shadow: 0 0 34px rgba(225, 182, 107, .12);
}

.publishing-page.publishing-ready .house-reveal {
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform 1s cubic-bezier(.16, 1, .3, 1),
    filter .9s ease;
  transition-delay: var(--house-reveal-delay, 0ms);
}

.publishing-page.publishing-ready .house-reveal:not(.is-visible) {
  opacity: 0;
  filter: blur(7px);
  transform: translate3d(0, 44px, 0);
}

.publishing-page.publishing-ready .house-reveal.is-visible {
  opacity: 1;
  filter: none;
  transform: translate3d(0, 0, 0);
}

.publishing-page .house-cinematic-card {
  position: relative;
  transform:
    perspective(1000px)
    rotateX(var(--house-tilt-y, 0deg))
    rotateY(var(--house-tilt-x, 0deg))
    translate3d(0, var(--house-card-lift, 0), 0);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), border-color .28s ease, box-shadow .35s ease, background .35s ease;
  will-change: transform;
}

.publishing-page .house-cinematic-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--house-card-x, 50%) var(--house-card-y, 50%),
    rgba(255, 226, 169, .13),
    transparent 37%
  );
  transition: opacity .35s ease;
}

.publishing-page .house-cinematic-card:hover {
  --house-card-lift: -4px;
  border-color: rgba(225, 182, 107, .52);
  box-shadow: 0 28px 60px rgba(0, 0, 0, .28);
}

.publishing-page .house-cinematic-card:hover::after {
  opacity: 1;
}

.publishing-page .house-cinematic-card > * {
  position: relative;
  z-index: 2;
}

.publishing-page .house-editorial-figure {
  position: relative;
  overflow: hidden;
}

.publishing-page .house-editorial-figure img {
  transform: scale(1.015);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .55s ease;
}

.publishing-page .house-editorial-figure:hover img {
  transform: scale(1.05);
  filter: saturate(1.05) contrast(1.05);
}

.publishing-page .house-links a {
  position: relative;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .28s ease, background .35s ease;
}

.publishing-page .house-links a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--gold-2);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.publishing-page .house-links a:hover {
  transform: translateY(-4px);
  border-color: rgba(225, 182, 107, .52);
  background: linear-gradient(130deg, rgba(189, 150, 88, .075), transparent 62%), #0d0f0c;
}

.publishing-page .house-links a:hover::before {
  transform: scaleY(1);
}

.publishing-page .edition-principle-section {
  position: relative;
  overflow: hidden;
}

.publishing-page .edition-principle-section::before {
  content: "";
  position: absolute;
  right: -9%;
  top: -42%;
  width: 36%;
  aspect-ratio: 1;
  border: 1px solid rgba(225, 182, 107, .08);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(225, 182, 107, .02),
    0 0 0 82px rgba(225, 182, 107, .014);
}

@keyframes house-title-sheen {
  0%, 61% { background-position: 110% 0; }
  78%, 100% { background-position: -110% 0; }
}

@keyframes house-scroll-pulse {
  0% { transform: translateY(-100%); }
  48%, 52% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (max-width: 900px) {
  .publishing-page .house-page-masthead {
    min-height: min(680px, calc(100svh - 68px));
  }

  .publishing-page .house-page-masthead::before {
    inset: 12px;
  }

  .publishing-page .house-intro {
    width: calc(100% - 36px);
    margin-top: -22px;
    padding: 34px;
  }
}

@media (max-width: 700px) {
  .publishing-page .house-page-masthead {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .publishing-page .house-page-masthead picture {
    inset: 0;
    transform:
      translate3d(0, calc(var(--house-scroll) * -10px), 0)
      scale(calc(1.01 + var(--house-scroll) * .015));
  }

  .publishing-page .house-page-masthead img {
    object-fit: cover;
  }

  .house-scroll-cue {
    display: none;
  }

  .publishing-page .house-intro {
    margin-top: -12px;
    margin-bottom: 22px;
    padding: 28px 22px;
  }

  .publishing-page .house-intro::before {
    left: 22px;
  }

  .publishing-page .house-evidence::before {
    font-size: 64px;
  }
}

@media (hover: none), (pointer: coarse) {
  .publishing-page .house-cinematic-card,
  .publishing-page .house-cinematic-card:hover {
    --house-card-lift: 0;
    --house-tilt-x: 0deg;
    --house-tilt-y: 0deg;
    box-shadow: none;
  }

  .publishing-page .house-cinematic-card::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .publishing-page *,
  .publishing-page *::before,
  .publishing-page *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .house-reading-progress {
    display: none;
  }

  .publishing-page .house-page-masthead picture {
    transform: none !important;
  }

  .publishing-page.publishing-ready .house-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .publishing-page .house-intro h1 {
    color: var(--cream-2);
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}