.reveal {
  opacity: 0;
  transform: translateY(42px) scale(.985);
  filter: blur(5px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease;
}

.reveal.visible { opacity: 1; transform: none; filter: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.hero-showcase {
  min-height: auto;
  position: relative;
  overflow: hidden;
  background: #070202;
  color: #fff;
  display: block;
}

.hero-art-layers {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #070202;
}

.hero-loop-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #070202;
}

.hero-art-slice {
  position: absolute;
  inset: 0;
  background: #070202 url("assets/hero-creative-design.png") center center / contain no-repeat;
  will-change: transform,opacity,filter;
}

.hero-art-copy {
  clip-path: inset(0 46% 0 0);
  opacity: 0;
  transform: translateX(-5%);
  filter: blur(8px);
  animation: hero-copy-in 1.1s cubic-bezier(.16,1,.3,1) .12s forwards;
}

.hero-art-person {
  clip-path: inset(0 0 0 54%);
  opacity: 0;
  transform: translateX(5%) scale(1.025);
  filter: blur(8px);
  animation: hero-person-in 1.2s cubic-bezier(.16,1,.3,1) .28s forwards;
}

.hero-moving-light {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse at 35% 57%,rgba(255,51,0,.32),transparent 28%),
    radial-gradient(ellipse at 72% 52%,rgba(255,139,24,.18),transparent 24%);
  mix-blend-mode: screen;
  opacity: .75;
  filter: blur(28px);
  animation: hero-light-loop 8s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero-action {
  position: relative;
  z-index: 4;
  left: auto;
  bottom: auto;
  width: min(var(--max),calc(100% - 56px));
  margin: 0 auto;
  min-height: 106px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(22px);
  animation: hero-action-in .8s cubic-bezier(.16,1,.3,1) .85s forwards;
}

.hero-showcase .primary-btn {
  background: #fff;
  color: #101010;
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}

.hero-showcase .primary-btn:hover { background: var(--orange); color: #fff; }
.hero-showcase .hero-index { color: rgba(255,255,255,.65); z-index: 3; }
.hero-showcase .hero-index div { background: rgba(255,255,255,.26); }
.hero-showcase .hero-index { left: min(480px,34vw); bottom: 34px; }

.profile-showcase {
  background: #080303;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 28px 70px rgba(20,4,0,.18);
}

.profile-showcase::after { height: 20%; }
.profile-showcase img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
}

.about:has(.profile-showcase) {
  grid-template-columns: minmax(0,1.22fr) minmax(360px,.78fr);
  gap: 6%;
}

.about:has(.profile-showcase) .about-copy h2 {
  font-size: clamp(2.45rem,4.1vw,4.8rem);
  margin-bottom: 30px;
}

@keyframes hero-copy-in {
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes hero-person-in {
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes hero-action-in {
  to { opacity: 1; transform: none; }
}

@keyframes hero-light-loop {
  0% { transform: translate3d(-5%,2%,0) scale(.98); opacity: .55; }
  50% { transform: translate3d(4%,-2%,0) scale(1.04); opacity: .85; }
  100% { transform: translate3d(8%,3%,0) scale(1); opacity: .65; }
}

.hero-video {
  min-height: calc(100svh - 88px);
  place-items: stretch;
  background: #090909;
  color: #fff;
  isolation: isolate;
}

.hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  z-index: -3;
  transform: none;
  animation: none;
  background: #090909;
}

.hero-film-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.48),transparent 45%);
}

.hero-video .hero-grid {
  grid-template-columns: minmax(0,820px) 1fr;
  min-height: calc(100svh - 88px);
  padding: 90px 0 110px;
}

.hero-video .hero-copy { position: relative; z-index: 2; }
.hero-video .eyebrow { color: #fff; }
.hero-video h1 { text-shadow: 0 4px 30px rgba(0,0,0,.28); }
.hero-video .hero-copy > p { color: rgba(255,255,255,.78); }
.hero-video .primary-btn { background: #fff; color: #101010; }
.hero-video .primary-btn:hover { background: var(--orange); color: #fff; }
.hero-video .hero-index { color: rgba(255,255,255,.65); z-index: 3; }
.hero-video .hero-index div { background: rgba(255,255,255,.26); }

.hero-intro > * {
  opacity: 0;
  transform: translateY(30px);
  animation: hero-enter .9s cubic-bezier(.16,1,.3,1) forwards;
}

.hero-intro .eyebrow { animation-delay: .18s; }
.hero-intro h1 { animation-delay: .32s; }
.hero-intro > p { animation-delay: .46s; }
.hero-intro .primary-btn { animation-delay: .6s; }

@keyframes hero-enter { to { opacity: 1; transform: none; } }

.section-kicker { transition: letter-spacing .45s ease; }
.section-pad:hover .section-kicker { letter-spacing: .22em; }
.manifesto h2,.section-head h2,.about h2,.portfolio-head h2 { transition: transform .55s cubic-bezier(.2,.75,.25,1); }
.section-pad:hover .manifesto h2,.section-pad:hover .section-head h2,.section-pad:hover .about h2,.section-pad:hover .portfolio-head h2 { transform: translateX(8px); }
.portrait-wrap img { transition: transform 1.2s cubic-bezier(.2,.75,.25,1), filter .8s ease; }
.portrait-wrap:hover img { transform: scale(1.055); filter: saturate(1.08); }
.process-grid article { overflow: hidden; }
.process-grid article::before { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg,rgba(255,61,0,.14),transparent 55%); opacity: 0; transform: translateY(20%); transition: .45s; }
.process-grid article:hover::before { opacity: 1; transform: none; }
.service-item h3,.service-item p,.service-item > span { transition: transform .35s ease,color .3s ease; }
.service-item:hover h3 { transform: translateX(10px); }
.service-item:hover p { transform: translateX(-5px); }

@media (max-width: 900px) {
  .hero-showcase { min-height: auto; }
  .hero-art-slice { background-size: contain; background-position: center; }
  .hero-action { width: calc(100% - 40px); min-height: 94px; }
  .hero-action .primary-btn { width: min(100%,390px); }
  .hero-showcase .hero-index { display: none; }
  .about:has(.profile-showcase) { grid-template-columns: 1fr; }
  .hero-video,.hero-video .hero-grid { min-height: calc(100svh - 74px); }
  .hero-video .hero-grid { grid-template-columns: 1fr; }
  .hero-film { object-fit: contain; object-position: center center; }
  .hero-film-overlay { background: linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.48)),linear-gradient(0deg,rgba(0,0,0,.5),transparent); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-film { animation: none; transform: none; }
  .hero-intro > * { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .project-media img,.portrait-wrap img,.process-grid article,.service-item { transition: none; }
  .hero-art-slice,.hero-action { animation: none; opacity: 1; transform: none; filter: none; }
  .hero-moving-light { animation: none; }
  .hero-loop-video { animation: none; }
}