/* Full homepage preview for the video-led visual direction. */
:is(.home, .page-template-page-hero-video-test) .site-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}

:is(.home, .page-template-page-hero-video-test) .site-header.is-scrolled,
:is(.home, .page-template-page-hero-video-test) .site-header.is-open {
  background: rgb(243 239 231 / .92);
  border-bottom-color: rgb(22 18 16 / .12);
  box-shadow: 0 8px 22px rgb(22 18 16 / .06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.admin-bar:is(.home, .page-template-page-hero-video-test) .site-header { top: 32px; }

:is(.home, .page-template-page-hero-video-test) .hero-video-test {
  position: relative;
  isolation: isolate;
  min-height: 715px;
  background: var(--color-paper);
}

.hero-video-test__media,
.hero-video-test__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-video-test__media {
  z-index: -2;
  display: block;
  object-fit: cover;
  object-position: center;
}

.hero-video-test__overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgb(243 239 231 / .97) 0%, rgb(243 239 231 / .91) 32%, rgb(243 239 231 / .62) 55%, rgb(243 239 231 / .1) 82%),
    linear-gradient(0deg, rgb(22 18 16 / .08), rgb(22 18 16 / .08));
  pointer-events: none;
}

.hero-video-test__grid {
  position: relative;
  grid-template-columns: minmax(0, 700px) minmax(0, 1fr);
}

:is(.home, .page-template-page-hero-video-test) .hero__content {
  text-shadow: 0 1px 24px rgb(243 239 231 / .6);
}

:is(.home, .page-template-page-hero-video-test) .hero .button--outline {
  border-color: rgb(22 18 16 / .4);
  background: rgb(243 239 231 / .38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-video-test__password {
  min-height: 620px;
  padding-block: 120px;
}

.hero-video-test__password h1 {
  margin-block: 24px 40px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.05;
}

.hero-video-test__password form { max-width: 520px; }
.hero-video-test__password input[type="password"] {
  min-height: 48px;
  margin: 12px 8px 0 0;
  padding: 10px 14px;
  border: 1px solid rgb(22 18 16 / .25);
  border-radius: var(--radius-ui);
  background: #fff;
}
.hero-video-test__password input[type="submit"] {
  min-height: 48px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--radius-ui);
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

/* Original flat shapes echo the rounded 3D forms without reproducing the reference artwork. */
.video-shape {
  color: var(--color-accent);
  pointer-events: none;
}

.video-shape svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.video-shape__layer {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .65s cubic-bezier(.2,.72,.2,1), opacity .35s ease;
}

.video-shape__organic-path,
.video-shape__scroll-form,
.video-shape__pulse-core,
.video-shape__service-core {
  transform-box: fill-box;
  transform-origin: center;
}

.video-shape--service {
  display: block;
  width: 132px;
  opacity: 0;
  transform: translateY(12px) scale(.76) rotate(-5deg);
  transition: opacity .34s ease .16s, transform .68s cubic-bezier(.2,.72,.2,1) .08s;
}

.service-row:hover .video-shape--service,
.service-row:focus-within .video-shape--service {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.service-row:hover .video-shape__service-core,
.service-row:focus-within .video-shape__service-core {
  animation: video-service-breathe 2.7s ease-in-out infinite alternate;
}

/* A fuller rolling marker connects the process line to the hero's soft forms. */
:is(.home, .page-template-page-hero-video-test) .process-track__marker {
  width: 32px;
  height: 32px;
}

:is(.home, .page-template-page-hero-video-test) .process-track__wheel {
  border: 0;
  background: var(--color-accent);
  box-shadow: inset -7px -5px 0 rgb(22 18 16 / .16), 0 5px 12px rgb(22 18 16 / .14);
}

:is(.home, .page-template-page-hero-video-test) .process-track__wheel::before {
  width: 17px;
  height: 7px;
  border-radius: 999px;
  background: #e8a2df;
  transform: translate(-50%, -50%) rotate(-22deg);
}

:is(.home, .page-template-page-hero-video-test) .process-track__wheel::after {
  width: 7px;
  height: 7px;
  background: var(--color-paper-deep);
}

/* Larger members of the same shape family. */
.video-shape--about {
  position: absolute;
  z-index: 2;
  right: -2%;
  bottom: 1%;
  width: min(56%, 300px);
  filter: drop-shadow(0 18px 28px rgb(22 18 16 / .16));
}

.video-shape--cta {
  width: min(100%, 300px);
  justify-self: end;
  filter: drop-shadow(0 18px 28px rgb(22 18 16 / .12));
}

.video-shape--faq {
  display: none;
  width: min(100%, 260px);
  margin-top: auto;
  padding-top: 56px;
  filter: drop-shadow(0 14px 24px rgb(22 18 16 / .11));
}

.video-shape--about .video-shape__layer,
.video-shape--cta .video-shape__layer,
.video-shape--faq .video-shape__layer {
  opacity: .001;
  transform: translateY(14px) scale(.86) rotate(-5deg);
}

.video-shape--about.is-in-view .video-shape__layer,
.video-shape--cta.is-in-view .video-shape__layer,
.video-shape--faq.is-in-view .video-shape__layer {
  opacity: 1;
  transform: none;
}

.video-shape--cta.is-in-view .video-shape__fused {
  animation: video-shape-pop .82s cubic-bezier(.2,.75,.2,1) .12s both;
}

.video-shape--faq.is-in-view .video-shape__faq-mark {
  animation: video-shape-pop .85s cubic-bezier(.2,.78,.2,1) .12s both;
}

.video-shape--about.is-active .video-shape__float-core {
  animation: video-about-float 6.4s ease-in-out infinite alternate;
}

.video-shape--cta.is-active .video-shape__pulse-core,
.video-shape--faq.is-active .video-shape__pulse-core {
  animation: video-shape-breathe 3.6s ease-in-out infinite;
}

@media (min-width: 1101px) {
  .video-shape--faq { display: block; }
}

@keyframes video-service-breathe {
  from { transform: scale(.95) rotate(-1.5deg); }
  to { transform: scale(1.045) rotate(1.5deg); }
}

@keyframes video-about-float {
  0% { transform: translate3d(0, 0, 0) rotate(-2deg) scale(.98); }
  48% { transform: translate3d(-5px, -9px, 0) rotate(1.4deg) scale(1.025); }
  100% { transform: translate3d(4px, -14px, 0) rotate(3deg) scale(.99); }
}

@keyframes video-shape-pop {
  0% { opacity: 0; transform: translateY(28px) scale(.7) rotate(-8deg); }
  64% { opacity: 1; transform: translateY(-4px) scale(1.055) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}

@keyframes video-shape-breathe {
  0%, 100% { transform: scale(.96); }
  48% { transform: scale(1.045); }
  66% { transform: scale(1.015); }
}

@media (max-width: 1100px) {
  .video-shape--service { width: 110px; }
}

@media (max-width: 767px) {
  .admin-bar:is(.home, .page-template-page-hero-video-test) .site-header { top: 46px; }

  :is(.home, .page-template-page-hero-video-test) .hero-video-test {
    min-height: calc(100svh - 64px);
  }

  .hero-video-test__grid {
    min-height: calc(100svh - 64px);
    justify-content: center;
  }

  .hero-video-test__media { object-position: 58% center; }
  .hero-video-test__overlay {
    background:
      linear-gradient(180deg, rgb(243 239 231 / .91) 0%, rgb(243 239 231 / .78) 50%, rgb(243 239 231 / .93) 100%),
      linear-gradient(0deg, rgb(22 18 16 / .08), rgb(22 18 16 / .08));
  }

  .video-shape--service {
    grid-column: 2;
    width: 112px;
  }

  .video-shape--about {
    right: 0;
    bottom: 0;
    width: min(64%, 270px);
  }

  .video-shape--cta {
    display: none;
  }

  :is(.home, .page-template-page-hero-video-test) .process-track__marker {
    width: 28px;
    height: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-shape,
  .video-shape__layer,
  .video-shape__pulse-core,
  .video-shape__float-core,
  .video-shape__service-core { animation: none !important; transition: none !important; }
  .video-shape--about .video-shape__layer,
  .video-shape--cta .video-shape__layer,
  .video-shape--faq .video-shape__layer { opacity: 1; transform: none; }
}