/* The homepage opening: one scene, with independent entrance and depth layers. */
.cinematic-hero {
  --hero-header-height: 4.8rem;
  --hero-scroll-y: 0px;
  --hero-scale: 1;
  --hero-x: 0px;
  --hero-y: 0px;
  --hero-rotate-x: 0deg;
  --hero-rotate-y: 0deg;
  --hero-light-x: 0px;
  --hero-light-y: 0px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - var(--hero-header-height));
  overflow: clip;
  background: var(--paper);
}

.cinematic-world {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cinematic-light {
  position: absolute;
  inset: -10% -10% 0;
  opacity: .55;
  background:
    radial-gradient(ellipse at 23% 35%, #08a9ef25, transparent 48%),
    radial-gradient(ellipse at 70% 20%, #ffb80f28, transparent 45%),
    radial-gradient(ellipse at 72% 60%, #f23aa91c, transparent 45%);
  mask-image: radial-gradient(ellipse, #000 10%, transparent 72%);
  transform: translate3d(var(--hero-light-x), var(--hero-light-y), 0);
}

.cinematic-art-scroll {
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(80vw, 1000px, 110svh);
  transform: translate(-50%, -50%) translateY(var(--hero-scroll-y)) scale(var(--hero-scale));
}

.cinematic-art-depth {
  transform: perspective(1400px) translate3d(var(--hero-x), var(--hero-y), 0)
    rotateX(var(--hero-rotate-x)) rotateY(var(--hero-rotate-y));
}

.cinematic-art-reveal { position: relative; }
.cinematic-brain { width: 100%; height: auto; opacity: 1; }

.cinematic-shimmer {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(112deg, transparent 25%, #08a9ef45 42%, #fffef988 49%, #f23aa938 55%, transparent 68%);
  mask-image: radial-gradient(ellipse, #000 25%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
}


.cinematic-copy {
  align-self: end;
  width: 100%;
  padding: clamp(17rem, 38svh, 30rem) var(--gutter) 1rem;
  text-align: center;
}

.cinematic-eyebrow {
  width: fit-content;
  margin: 0 auto .8rem;
  padding: .25rem .5rem;
  border-radius: .2rem;
  background: rgb(246 244 239 / 86%);
  color: #41434a;
  font: 600 .65rem var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.cinematic-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(4.4rem, 9.6vw, 9.25rem);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.075em;
  text-wrap: balance;
}

.cinematic-wordmark {
  width: fit-content;
  margin: .75rem auto 0;
  font-size: clamp(2.1rem, 3vw, 3rem);
  line-height: 1.1;
}

.cinematic-lede {
  max-width: 35rem;
  margin: 1rem auto 0;
  color: #4b4d55;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.cinematic-action { margin-top: 1.3rem; }
.cinematic-cta { min-height: 3.4rem; width: auto; gap: 2.5rem; padding-inline: 1.35rem; }
.cinematic-cta:hover { transform: none; }
.cinematic-cta span { display: inline-block; transition: transform 180ms ease; }
.cinematic-cta:hover span, .cinematic-cta:focus-visible span { transform: translate(2px, -2px); }

.cinematic-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
  padding: .75rem var(--gutter) 1.25rem;
  color: #555760;
  font: 600 .58rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.cinematic-scroll {
  display: flex;
  grid-column: 2;
  min-height: 44px;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: .3rem .75rem;
  color: var(--ink);
  text-decoration: none;
}
.cinematic-scroll svg { transition: transform 200ms ease; }
.cinematic-scroll:hover svg { transform: translateY(3px); }
.cinematic-discipline, .cinematic-location { position: absolute; bottom: 6.25rem; }
.cinematic-discipline { left: var(--gutter); }
.cinematic-location { right: var(--gutter); }
.cinematic-location span { padding-left: .5rem; }

.cinematic-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100%, var(--max));
  margin-inline: auto;
  padding: 1rem var(--gutter);
  border-top: 1px solid var(--line);
  color: #62636b;
  font: 600 .6rem var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cinematic-context > div { display: flex; flex-wrap: wrap; gap: .7rem 2rem; }
.cinematic-context > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  min-height: 44px;
  padding: .7rem 1rem;
  border-radius: .55rem;
  background: #eae7e0;
  color: var(--ink);
  text-decoration: none;
}
#workflow { scroll-margin-top: 6rem; }

/* Only animate when JS has successfully initialized the scene. */
.cinematic-hero.is-entering .cinematic-art-reveal { animation: cinema-resolve 1200ms var(--ease) both; }
.cinematic-hero.is-entering .cinematic-shimmer { animation: cinema-shimmer 650ms 200ms ease-out both; }
.cinematic-hero.is-entering .cinematic-title { animation: cinema-type 850ms 80ms var(--ease) both; }
.cinematic-hero.is-entering .cinematic-eyebrow,
.cinematic-hero.is-entering .cinematic-wordmark { animation: cinema-copy 800ms 180ms var(--ease) both; }
.cinematic-hero.is-entering .cinematic-lede,
.cinematic-hero.is-entering .cinematic-action,
.cinematic-hero.is-entering .cinematic-footer { animation: cinema-copy 650ms 400ms var(--ease) both; }
.cinematic-hero.is-paused *, .cinematic-hero.is-paused *::after { animation-play-state: paused !important; }

@keyframes cinema-resolve {
  from { transform: scale(1.07); filter: blur(5px); opacity: .25; }
  to { transform: scale(1); filter: blur(0); opacity: 1; }
}
@keyframes cinema-type {
  from { transform: translateY(20px); opacity: .25; clip-path: inset(0 0 35%); }
  to { transform: translateY(0); opacity: 1; clip-path: inset(0); }
}
@keyframes cinema-copy {
  from { transform: translateY(12px); opacity: .35; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes cinema-shimmer {
  0%, 100% { opacity: 0; transform: translateX(-8px); }
  40% { opacity: .75; }
  80% { opacity: .2; transform: translateX(8px); }
}

@media (min-width: 1600px) {
  .cinematic-copy { padding-top: 39svh; }
}
@media (max-width: 760px) {
  .cinematic-hero { --hero-header-height: 4.6rem; }
  .cinematic-art-scroll { top: 32%; width: 94vw; }
  .cinematic-copy { padding-top: clamp(13rem, 34svh, 21rem); padding-bottom: 1.7rem; }
  .cinematic-eyebrow { max-width: 18rem; margin: 0 auto 1rem; font-size: .53rem; line-height: 1.7; letter-spacing: .09em; }
  .cinematic-title { max-width: 8em; margin-inline: auto; font-size: clamp(3.3rem, 11vw, 5.1rem); }
  .cinematic-wordmark { margin-top: .75rem; font-size: clamp(2rem, 7.5vw, 3rem); }
  .cinematic-lede { max-width: 26rem; margin-top: 1.2rem; font-size: .98rem; }
  .cinematic-action { margin-top: 1.5rem; }
  .cinematic-cta { max-width: 100%; font-size: .8rem; gap: 1.5rem; }
  .cinematic-footer { padding: 1rem var(--gutter) max(1.5rem, env(safe-area-inset-bottom)); }
  .cinematic-discipline, .cinematic-location { display: none; }
  .cinematic-scroll { grid-column: 2; }
    .cinematic-context { align-items: center; padding-block: 1.15rem; }
  .cinematic-context > div { flex-direction: column; font-size: .53rem; }
}
@media (max-height: 650px) and (min-width: 761px) {
  .cinematic-copy { padding-top: 10rem; }
  .cinematic-title { font-size: clamp(4.4rem, 8vw, 7rem); }
  .cinematic-wordmark { font-size: 2.5rem; }
  .cinematic-footer { padding-top: 1rem; }
}
@media (max-width: 360px) {
  .cinematic-title { font-size: 11vw; }
}
@media (max-width: 760px) and (max-height: 700px) and (orientation: portrait) {
  .cinematic-copy { padding-top: clamp(6rem, 22svh, 9rem); padding-bottom: 1rem; }
  .cinematic-lede { margin-top: .9rem; font-size: .9rem; line-height: 1.5; }
  .cinematic-action { margin-top: 1.25rem; }
  .cinematic-footer { padding-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-hero *, .cinematic-hero *::after { animation: none !important; transition: none !important; }
  .cinematic-art-depth, .cinematic-art-reveal, .cinematic-light { transform: none !important; }
  .cinematic-art-scroll { transform: translate(-50%, -50%) !important; }
  .cinematic-shimmer { display: none; }
}