/* SIGNATURE-MOTION-03 — light traveling through structure */
:root {
  --brndia-blue: #004f84;
  --brndia-blue-rgb: 0, 79, 132;
  --blue-silver: #8eb8cf;
  --construction-silver: #b8c8d1;
  --structure-graphite: #26343d;
}

.motion03 .ui-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -.12em;
}
.motion03 .ui-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.motion03 .header-contact .ui-icon,
.motion03 .quiet-link .ui-icon,
.motion03 .action-link .ui-icon { margin-left: 22px; }
.motion03 .hero-exit .icon-disc { display: grid; place-items: center; }
.motion03 .hero-exit .icon-disc .ui-icon { width: 16px; height: 16px; }
.motion03 .idea-coordinate .ui-icon { width: 12px; height: 12px; margin-block: 2px; }
.motion03 .process-arrow { color: var(--brndia-blue); }
.motion03 .process-arrow .ui-icon { width: 22px; height: 22px; }
.motion03 .menu-glyph { width: 15px; height: 11px; display: inline-flex; flex-direction: column; justify-content: space-between; margin-left: 8px; }
.motion03 .menu-glyph i { display: block; width: 100%; height: 1px; background: currentColor; transition: transform .25s ease; }
.motion03 .menu-toggle[aria-expanded="true"] .menu-glyph i:first-child { transform: translateY(5px) rotate(45deg); }
.motion03 .menu-toggle[aria-expanded="true"] .menu-glyph i:last-child { transform: translateY(-5px) rotate(-45deg); }

/* Reusable line states: rest -> approach -> active -> passed. */
.motion03 .idea-rule,
.motion03 .feature-baseline {
  background: linear-gradient(90deg, rgba(93,115,128,.24), rgba(184,200,209,.16) 62%, rgba(38,52,61,.18));
  overflow: visible;
}
.motion03 .idea-rule span,
.motion03 .feature-baseline span {
  position: relative;
  width: 100%;
  transform-origin: left center;
  will-change: transform;
  background: linear-gradient(90deg,
    rgba(142,184,207,.3) 0%,
    rgba(142,184,207,.58) 54%,
    rgba(var(--brndia-blue-rgb),.94) 91%,
    #bfe5f4 100%);
  box-shadow: 0 0 9px rgba(90,161,195,.2);
}
.motion03 .idea-rule span {
  height: 2px;
  transform: scaleX(calc(.04 + var(--ll-idea, 0) * .92));
  opacity: calc(.32 + var(--ll-idea, 0) * .68);
}
.motion03 .idea-rule::after,
.motion03 .feature-baseline::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 9px;
  transform: translate(-55%,-50%);
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(213,239,249,.94), rgba(74,146,181,.5) 35%, transparent 72%);
  filter: blur(.2px);
}
.motion03 .idea-rule::after {
  left: calc(4% + var(--ll-idea, 0) * 92%);
  opacity: calc(.15 + var(--ll-idea, 0) * .85);
}

.motion03 .feature-baseline span {
  height: 1px;
  transform: scaleX(calc(.08 + var(--ll-web, 0) * .78));
  opacity: calc(.34 + var(--ll-web, 0) * .66);
}
.motion03 .feature-baseline::after {
  left: calc(8% + var(--ll-web, 0) * 78%);
  opacity: calc(.14 + var(--ll-web, 0) * .72);
}
.motion03 .feature-baseline i {
  left: calc(8% + var(--ll-web, 0) * 78%);
  background: var(--brndia-blue);
  box-shadow: 0 0 0 3px rgba(var(--brndia-blue-rgb),.14), 0 0 12px rgba(95,170,205,.34);
}
.motion03 .care-line {
  width: calc(30% + var(--ll-care, 0) * 54%);
  background: linear-gradient(90deg, rgba(142,184,207,.32), rgba(var(--brndia-blue-rgb),.7) 78%, transparent);
}

/* Official blue is the active/signature state; material neutrals retain the surfaces. */
.motion03 .period,
.motion03 .signature-activation,
.motion03 .web-blueprint-field .activation { color: var(--brndia-blue); stroke: var(--brndia-blue); }
.motion03 .web-blueprint-field circle.activation { fill: var(--brndia-blue); }
.motion03 a:focus-visible,
.motion03 button:focus-visible,
.motion03 input:focus-visible,
.motion03 select:focus-visible,
.motion03 textarea:focus-visible { outline-color: var(--brndia-blue); box-shadow: 0 0 0 4px rgba(var(--brndia-blue-rgb),.2); }

/* Partners: a distinct material surface with slow ambient light and local response. */
.motion03 .partners { isolation: isolate; background: #07131b; }
.motion03 .partners::before { opacity: calc(.52 + var(--partners-presence,0) * .32); }
.motion03 .partners::after { opacity: .22; }
.motion03 .partners-material {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 56% 95% at var(--partners-x,76%) var(--partners-y,35%), rgba(154,203,224,.18), transparent 61%),
    linear-gradient(112deg, transparent 12%, rgba(142,184,207,.08) 38%, rgba(220,239,247,.17) 48%, rgba(var(--brndia-blue-rgb),.2) 56%, transparent 73%);
  background-size: 100% 100%, 180% 100%;
  background-position: center, var(--partners-light,-35%) 0;
  opacity: calc(.56 + var(--partners-presence,0) * .36);
}
.motion03 .partners-material::before {
  content: "";
  position: absolute;
  inset: 12% 4%;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(184,200,209,.12) 18% 18.08%, transparent 18.08%),
    linear-gradient(0deg, transparent 0 74%, rgba(142,184,207,.1) 74% 74.1%, transparent 74.1%);
  transform: translate3d(calc((var(--partners-x-num,.76) - .5) * 8px),0,0);
}
.motion03 .partners-material::after {
  content: "";
  position: absolute;
  width: 34vw;
  height: 34vw;
  min-width: 420px;
  min-height: 420px;
  right: -7vw;
  top: -13vw;
  border: 1px solid rgba(174,208,224,.16);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(var(--brndia-blue-rgb),.08);
}
.motion03 .partners.is-present .partners-material {
  animation: partners-ambient 13s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.motion03 .partners-layout { z-index: 2; }
.motion03 .partners .section-label,
.motion03 .partners-b2b { color: #a9c8d8; }
.motion03 .partners .period { color: #4d93bc; }
.motion03 .partners .action-link { border-color: rgba(174,208,224,.72); }
.motion03 .partners .action-link:hover { color: #d5effa; border-color: var(--brndia-blue); }

@keyframes partners-ambient {
  from { background-position: center, -35% 0; }
  to { background-position: center, 80% 0; }
}

@media (max-width: 700px) {
  .motion03 .idea-rule span { transform: scaleX(calc(.08 + var(--ll-idea,0) * .88)); }
  .motion03 .idea-rule::after { left: calc(8% + var(--ll-idea,0) * 88%); }
  .motion03 .feature-baseline span { transform: scaleX(calc(.12 + var(--ll-web,0) * .76)); }
  .motion03 .feature-baseline::after,
  .motion03 .feature-baseline i { left: calc(12% + var(--ll-web,0) * 76%); }
  .motion03 .partners-material { opacity: .72; background-size: 100% 100%, 230% 100%; }
  .motion03 .partners-material::after { right: -290px; top: -170px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion03 .idea-rule span { transform: scaleX(.92); opacity: .76; }
  .motion03 .idea-rule::after { left: 92%; opacity: .56; }
  .motion03 .feature-baseline span { transform: scaleX(.72); opacity: .7; }
  .motion03 .feature-baseline::after,
  .motion03 .feature-baseline i { left: 72%; opacity: .48; }
  .motion03 .partners-material { animation: none !important; background-position: center, 42% 0; opacity: .72; }
  .motion03 .menu-glyph i { transition: none; }
}