/* =========================================================
   UTC Creative — motion layer
   Scoped to the Creative service pages only.
   ========================================================= */

@view-transition {
  navigation: auto;
}

.creative-page {
  --creative-pointer-x: 78%;
  --creative-pointer-y: 32%;
  --creative-hero-progress: 0;
  --creative-page-progress: 0;
}

.creative-page .nav__logo {
  view-transition-name: utc-creative-logo;
}

.creative-page .creative-hero__name {
  view-transition-name: utc-creative-title;
}

.creative-page.is-loaded .creative-hero__name > span {
  color: transparent;
  background:
    linear-gradient(104deg,
      var(--ink) 0%,
      var(--ink) 24%,
      var(--deep-teal) 42%,
      #143f43 53%,
      #9b7730 64%,
      var(--ink) 79%,
      var(--ink) 100%);
  background-size: 240% 100%;
  background-position: 12% 0;
  -webkit-background-clip: text;
          background-clip: text;
  animation: creative-title-spectrum 9s cubic-bezier(.45, 0, .25, 1) 1.4s infinite alternate;
}

@keyframes creative-title-spectrum {
  from { background-position: 12% 0; }
  to { background-position: 88% 0; }
}

/* Persistent Creative-only motion HUD. */
.creative-motion-rail {
  position: fixed;
  left: clamp(14px, 1.55vw, 28px);
  top: 50%;
  z-index: 13;
  display: grid;
  grid-template-rows: auto minmax(92px, 18vh) auto;
  justify-items: center;
  gap: 14px;
  color: rgba(250,249,245,.82);
  mix-blend-mode: difference;
  pointer-events: none;
  transform: translateY(-50%);
}

.creative-motion-rail__label,
.creative-motion-rail__index {
  writing-mode: vertical-rl;
  font-family: var(--numeric);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1;
}

.creative-motion-rail__track {
  position: relative;
  width: 1px;
  height: 100%;
  overflow: hidden;
  background: rgba(250,249,245,.22);
}

.creative-motion-rail__track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #8fded9, #E3BA60);
  transform: scaleY(var(--creative-page-progress));
  transform-origin: top;
  box-shadow: 0 0 16px rgba(143,222,217,.72);
}

.creative-pointer-orb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(7,155,152,.58);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.92) 0 5%, rgba(143,222,217,.20) 18%, transparent 62%);
  box-shadow:
    0 0 34px rgba(7,155,152,.16),
    inset 0 0 18px rgba(203,163,74,.12);
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition:
    width .38s cubic-bezier(.16, 1, .3, 1),
    height .38s cubic-bezier(.16, 1, .3, 1),
    border-color .38s ease,
    opacity .28s ease;
  will-change: transform;
}

.creative-pointer-orb.is-visible { opacity: .92; }
.creative-pointer-orb.is-over {
  width: 72px;
  height: 72px;
  border-color: rgba(203,163,74,.68);
}
.creative-pointer-orb.is-pressed {
  width: 30px;
  height: 30px;
}

.creative-flow-canvas {
  position: fixed;
  inset: 0;
  z-index: 11;
  width: 100%;
  height: 100%;
  opacity: .42;
  mix-blend-mode: color;
  pointer-events: none;
  transition: opacity .8s ease, filter .8s ease;
}

.creative-page.creative-motion-dark .creative-flow-canvas {
  opacity: .50;
  filter: saturate(1.12) contrast(1.03);
  mix-blend-mode: screen;
}

.creative-flow-canvas.is-unavailable { display: none; }

::view-transition-old(root) {
  animation: creative-page-out .42s cubic-bezier(.4, 0, .7, .2) both;
}

::view-transition-new(root) {
  animation: creative-page-in .78s cubic-bezier(.16, 1, .3, 1) both;
}

::view-transition-old(utc-creative-title),
::view-transition-new(utc-creative-title),
::view-transition-old(utc-creative-logo),
::view-transition-new(utc-creative-logo) {
  animation-duration: .8s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@keyframes creative-page-out {
  to {
    opacity: 0;
    filter: blur(8px);
    transform: scale(.992);
  }
}

@keyframes creative-page-in {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.012);
  }
}

/* Hero: pointer light, chromatic atmosphere, and scroll-linked depth. */
.creative-page .creative-hero::before,
.creative-page .creative-hero::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  pointer-events: none;
  will-change: transform, opacity;
}

.creative-page .creative-hero::before {
  background:
    radial-gradient(circle at var(--creative-pointer-x) var(--creative-pointer-y),
      rgba(255,255,255,.92) 0,
      rgba(143,222,217,.22) 9%,
      rgba(7,155,152,.08) 24%,
      transparent 47%),
    radial-gradient(ellipse at 16% 78%, rgba(203,163,74,.12), transparent 42%);
  mix-blend-mode: multiply;
  opacity: calc(.72 - (var(--creative-hero-progress) * .34));
  transform:
    translate3d(
      calc((var(--creative-pointer-x-num, .5) - .5) * 18px),
      calc((var(--creative-pointer-y-num, .5) - .5) * 18px),
      0
    )
    scale(1.04);
}

.creative-page .creative-hero::after {
  inset: -36% -18%;
  background:
    conic-gradient(from 218deg at 54% 48%,
      transparent 0deg,
      rgba(7,155,152,.08) 34deg,
      rgba(255,255,255,.34) 58deg,
      rgba(203,163,74,.11) 82deg,
      transparent 118deg 360deg);
  mix-blend-mode: soft-light;
  opacity: calc(.58 - (var(--creative-hero-progress) * .28));
  transform:
    translate3d(0, calc(var(--creative-hero-progress) * 70px), 0)
    rotate(calc(-5deg + (var(--creative-hero-progress) * 8deg)));
  animation: creative-spectrum 13s ease-in-out infinite alternate;
}

@keyframes creative-spectrum {
  0% { scale: .98; rotate: -2deg; }
  55% { scale: 1.04; rotate: 2deg; }
  100% { scale: 1.01; rotate: -1deg; }
}

.creative-page .creative-hero__copy {
  opacity: calc(1 - (var(--creative-hero-progress) * .72));
  transform: translate3d(0, calc(var(--creative-hero-progress) * -52px), 0);
  will-change: transform, opacity;
}

.creative-page .creative-hero__index {
  opacity: calc(1 - (var(--creative-hero-progress) * .58));
  transform:
    perspective(1200px)
    translate3d(0, calc(var(--creative-hero-progress) * 34px), 0)
    rotateX(calc(var(--creative-hero-progress) * -3deg));
  transform-origin: center top;
  will-change: transform, opacity;
}

.creative-page .creative-hero__grid {
  transform:
    translate3d(
      calc((var(--creative-pointer-x-num, .5) - .5) * -24px),
      calc((var(--creative-pointer-y-num, .5) - .5) * -24px),
      0
    )
    scale(1.04);
  will-change: transform, background-position;
}

.creative-page .creative-hero__watermark {
  transform:
    translate3d(
      calc((var(--creative-pointer-x-num, .5) - .5) * 30px),
      calc((var(--creative-pointer-y-num, .5) - .5) * 30px + (var(--creative-hero-progress) * 46px)),
      0
    )
    rotate(calc(-3deg + (var(--creative-hero-progress) * 10deg)))
    scale(calc(1 + (var(--creative-hero-progress) * .08)));
  will-change: transform;
}

@supports (animation-timeline: scroll()) {
  .creative-page .creative-hero__grid {
    animation: creative-grid-timeline linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes creative-grid-timeline {
  from { background-position: 0 0; }
  to { background-position: -192px 288px; }
}

/* Opening choreography appears after the existing UTC loader exits. */
.creative-page.is-loading .creative-hero__kicker,
.creative-page.is-loading .creative-hero__name > *,
.creative-page.is-loading .creative-hero__statement,
.creative-page.is-loading .creative-hero__lead,
.creative-page.is-loading .creative-hero__index > div {
  opacity: 0;
}

.creative-page.is-loading .creative-hero__kicker {
  letter-spacing: .34em;
  transform: translateY(18px);
}

.creative-page.is-loading .creative-hero__name > * {
  clip-path: inset(0 0 100% 0);
  transform: translateY(38px);
}

.creative-page.is-loading .creative-hero__statement,
.creative-page.is-loading .creative-hero__lead {
  transform: translateY(28px);
}

.creative-page.is-loading .creative-hero__index > div {
  transform: translateX(34px);
}

.creative-page.is-loaded .creative-hero__kicker,
.creative-page.is-loaded .creative-hero__name > *,
.creative-page.is-loaded .creative-hero__statement,
.creative-page.is-loaded .creative-hero__lead,
.creative-page.is-loaded .creative-hero__index > div {
  opacity: 1;
  transform: none;
}

.creative-page .creative-hero__kicker {
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1),
    letter-spacing 1.15s cubic-bezier(.16, 1, .3, 1);
}

.creative-page .creative-hero__name > * {
  clip-path: inset(-.12em 0 -.12em 0);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform 1.2s cubic-bezier(.16, 1, .3, 1),
    clip-path 1.2s cubic-bezier(.16, 1, .3, 1);
}

.creative-page .creative-hero__name > :nth-child(2) { transition-delay: .1s; }

.creative-page .creative-hero__statement,
.creative-page .creative-hero__lead {
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform 1.05s cubic-bezier(.16, 1, .3, 1);
}

.creative-page .creative-hero__statement { transition-delay: .18s; }
.creative-page .creative-hero__lead { transition-delay: .28s; }

.creative-page .creative-hero__index > div {
  transition:
    opacity .72s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1),
    background-color .45s ease;
}

.creative-page .creative-hero__index > :nth-child(1) { transition-delay: .12s; }
.creative-page .creative-hero__index > :nth-child(2) { transition-delay: .19s; }
.creative-page .creative-hero__index > :nth-child(3) { transition-delay: .26s; }
.creative-page .creative-hero__index > :nth-child(4) { transition-delay: .33s; }
.creative-page .creative-hero__index > :nth-child(5) { transition-delay: .40s; }

/* Sections: a scroll-controlled spectral field, never in front of content. */
.creative-page main > .section {
  --creative-scene-progress: 0;
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.creative-page main > .section > .wrap {
  position: relative;
  z-index: 2;
}

.creative-page main > .section::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 28% 42%, rgba(7,155,152,.12), transparent 38%),
    radial-gradient(ellipse at 72% 60%, rgba(203,163,74,.10), transparent 42%),
    linear-gradient(112deg, transparent 26%, rgba(255,255,255,.28) 47%, transparent 66%);
  background-size: 120% 120%, 120% 120%, 220% 100%;
  background-position:
    calc(20% + (var(--creative-scene-progress) * 42%)) 30%,
    calc(86% - (var(--creative-scene-progress) * 34%)) 70%,
    calc(var(--creative-scene-progress) * 100%) 0;
  mix-blend-mode: soft-light;
  opacity: .62;
  transform:
    translate3d(0, calc((.5 - var(--creative-scene-progress)) * 56px), 0)
    scale(1.03);
  will-change: transform, background-position;
}

.creative-page main > .section[data-motion-word]::after {
  content: attr(data-motion-word);
  position: absolute;
  left: calc(-16vw + (var(--creative-scene-progress) * 24vw));
  top: 54%;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(31,40,42,.085);
  font-family: var(--serif);
  font-size: clamp(9rem, 19vw, 20rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .72;
  white-space: nowrap;
  mix-blend-mode: multiply;
  opacity: calc(.38 + (var(--creative-scene-progress) * .34));
  pointer-events: none;
  transform:
    translate3d(0, calc(-50% + ((.5 - var(--creative-scene-progress)) * 46px)), 0)
    skewX(calc((.5 - var(--creative-scene-progress)) * 4deg));
  will-change: left, transform, opacity;
}

.creative-page main > .creative-approach::before,
.creative-page main > .creative-intelligence::before,
.creative-page main > .creative-closing::before {
  background:
    radial-gradient(ellipse at 24% 46%, rgba(7,155,152,.26), transparent 38%),
    radial-gradient(ellipse at 78% 58%, rgba(203,163,74,.16), transparent 42%),
    linear-gradient(112deg, transparent 24%, rgba(143,222,217,.10) 47%, transparent 70%);
  background-size: 120% 120%, 120% 120%, 220% 100%;
  background-position:
    calc(18% + (var(--creative-scene-progress) * 44%)) 34%,
    calc(86% - (var(--creative-scene-progress) * 32%)) 68%,
    calc(var(--creative-scene-progress) * 100%) 0;
  mix-blend-mode: screen;
  opacity: .72;
}

.creative-page main > .creative-approach[data-motion-word]::after,
.creative-page main > .creative-intelligence[data-motion-word]::after,
.creative-page main > .creative-closing[data-motion-word]::after {
  -webkit-text-stroke-color: rgba(250,249,245,.12);
  mix-blend-mode: screen;
  opacity: calc(.40 + (var(--creative-scene-progress) * .30));
}

.creative-page .creative-dark__mark {
  z-index: 1;
  transform:
    translate3d(
      calc((var(--creative-scene-progress) - .5) * -72px),
      calc((var(--creative-scene-progress) - .5) * 54px),
      0
    )
    rotate(calc((var(--creative-scene-progress) - .5) * 8deg));
  will-change: transform;
}

/* Masked editorial reveals for the key statements. */
.creative-page .creative-heading.reveal,
.creative-page .creative-closing__title.reveal {
  /* Keep a small geometric intersection so masked headings can trigger IO reliably. */
  clip-path: inset(-.14em 0 80% -.14em);
  filter: blur(12px);
  transform: translate3d(0, 54px, 0) skewY(1.4deg);
  transform-origin: left bottom;
  transition:
    opacity .78s ease,
    transform 1.25s cubic-bezier(.16, 1, .3, 1),
    filter 1.05s ease,
    clip-path 1.2s cubic-bezier(.16, 1, .3, 1);
}

.creative-page .creative-heading.reveal.in,
.creative-page .creative-closing__title.reveal.in {
  clip-path: inset(-.14em 0 -.14em -.14em);
  filter: blur(0);
  transform: none;
}

/* Fine-pointer cards gain real depth and a tracked highlight. */
.creative-page .creative-motion-card {
  --creative-tilt-x: 0deg;
  --creative-tilt-y: 0deg;
  --creative-card-x: 50%;
  --creative-card-y: 50%;
  position: relative;
  transform:
    perspective(1000px)
    rotateX(var(--creative-tilt-x))
    rotateY(var(--creative-tilt-y))
    translateZ(0)
    scale(var(--creative-card-scale, 1));
  transform-style: preserve-3d;
  transition:
    transform .72s cubic-bezier(.16, 1, .3, 1),
    background-color .5s ease,
    box-shadow .5s ease;
}

.creative-page .creative-motion-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--creative-card-x) var(--creative-card-y),
      rgba(255,255,255,.82),
      rgba(143,222,217,.13) 24%,
      transparent 58%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .45s ease;
}

.creative-page .creative-motion-card > * {
  position: relative;
  z-index: 1;
}

.creative-page .creative-motion-card.is-motion-active {
  --creative-card-scale: 1.018;
  z-index: 3;
  background-color: rgba(255,255,255,.36);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 30px 90px rgba(20,28,30,.10);
  transition-duration: .12s, .5s, .5s;
}

.creative-page .creative-motion-card.is-motion-active::after { opacity: 1; }

.creative-page.is-loaded .creative-hero__index > .creative-motion-card {
  transform:
    perspective(1000px)
    rotateX(var(--creative-tilt-x))
    rotateY(var(--creative-tilt-y))
    translateZ(0)
    scale(var(--creative-card-scale, 1));
}

.creative-page .creative-approach .creative-motion-card::after,
.creative-page .creative-intelligence .creative-motion-card::after {
  background:
    radial-gradient(circle at var(--creative-card-x) var(--creative-card-y),
      rgba(143,222,217,.24),
      rgba(203,163,74,.09) 28%,
      transparent 60%);
  mix-blend-mode: screen;
}

@media (max-width: 680px) {
  .creative-motion-rail,
  .creative-pointer-orb { display: none; }

  .creative-flow-canvas {
    opacity: .28;
  }

  .creative-page.creative-motion-dark .creative-flow-canvas {
    opacity: .38;
  }

  .creative-page .creative-hero::after {
    opacity: calc(.34 - (var(--creative-hero-progress) * .18));
  }

  .creative-page main > .section::before {
    opacity: .42;
    transform:
      translate3d(0, calc((.5 - var(--creative-scene-progress)) * 30px), 0)
      scale(1.02);
  }

  .creative-page main > .section[data-motion-word]::after {
    left: calc(-38vw + (var(--creative-scene-progress) * 30vw));
    top: 48%;
    font-size: clamp(8rem, 38vw, 12rem);
    opacity: .38;
    transform:
      translate3d(0, calc(-50% + ((.5 - var(--creative-scene-progress)) * 28px)), 0)
      skewX(calc((.5 - var(--creative-scene-progress)) * 2deg));
  }

  .creative-page .creative-dark__mark {
    transform:
      translate3d(0, calc((var(--creative-scene-progress) - .5) * 26px), 0)
      rotate(calc((var(--creative-scene-progress) - .5) * 4deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(utc-creative-title),
  ::view-transition-new(utc-creative-title),
  ::view-transition-old(utc-creative-logo),
  ::view-transition-new(utc-creative-logo) {
    animation: none !important;
  }

  .creative-page .creative-hero::after,
  .creative-page main > .section::before {
    animation: none !important;
    transform: none !important;
  }

  .creative-page .creative-hero__copy,
  .creative-page .creative-hero__index,
  .creative-page .creative-hero__grid,
  .creative-page .creative-hero__watermark,
  .creative-page .creative-dark__mark,
  .creative-page .creative-motion-card {
    opacity: 1;
    transform: none !important;
  }

  .creative-page .creative-hero__kicker,
  .creative-page .creative-hero__name > *,
  .creative-page .creative-hero__statement,
  .creative-page .creative-hero__lead,
  .creative-page .creative-hero__index > div,
  .creative-page .creative-heading.reveal,
  .creative-page .creative-closing__title.reveal {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
  }

  .creative-page .creative-motion-card::after { display: none; }
  .creative-motion-rail,
  .creative-pointer-orb,
  .creative-flow-canvas { display: none; }
}