/* Two material identities: a light source and an animated LookDev surface.
   The actual words remain native text; only empty decorative pseudos sit behind them. */
.intro-portrait .ability-lighting-main,
.intro-portrait .ability-material {
  position: relative;
  isolation: isolate;
}
.intro-portrait .ability-lighting-main {
  --lighting-core: #fff0be;
  --lighting-glow: #ffd47c;
  --lighting-bloom: #edb854;
}
.intro-portrait .ability-material {
  --material-a: #a4ebe0;
  --material-b: #f7dba0;
  --material-c: #f0a8bf;
  --material-d: #aec9ff;
  --material-highlight: #ffffffd9;
  --material-grain: #14253640;
}
[data-theme="light"] .intro-portrait .ability-lighting-main {
  --lighting-core: #795008;
  --lighting-glow: #ae7618;
  --lighting-bloom: #d2a143;
}
[data-theme="light"] .intro-portrait .ability-material {
  --material-a: #126760;
  --material-b: #81520a;
  --material-c: #93314e;
  --material-d: #325a91;
  --material-highlight: #17333b9c;
  --material-grain: #ffffff40;
}
.intro-portrait .ability-lighting-main::before,
.intro-portrait .ability-lighting-main::after,
.intro-portrait .ability-material::after {
  content: "";
  position: absolute;
  pointer-events: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  opacity: 0;
  z-index: -1;
}
.intro-portrait .ability-lighting-main::before {
  inset: -25% -12% -45%;
  background: radial-gradient(ellipse at 50% 46%,color-mix(in srgb,var(--lighting-bloom) 24%,transparent),transparent 67%);
  transform: translate3d(calc(var(--depth-x,0px) * -.16),calc(var(--depth-y,0px) * -.12),0);
}
.intro-portrait .ability-lighting-main::after {
  inset: -30% -12% -52%;
  background: conic-gradient(from 156deg at 50% 20%,transparent 0deg,color-mix(in srgb,var(--lighting-bloom) 22%,transparent) 13deg,transparent 24deg,color-mix(in srgb,var(--lighting-bloom) 14%,transparent) 31deg,transparent 49deg);
  mask-image: radial-gradient(ellipse at 50% 20%,#000 2%,transparent 72%);
  transform-origin: 50% 20%;
}
.intro-portrait .ability-material::after {
  left: 2%;
  right: 2%;
  bottom: -.32em;
  height: 2px;
  border-radius: 100%;
  background: linear-gradient(90deg,transparent,var(--material-a),var(--material-b),var(--material-c),transparent);
  transform-origin: 50% 50%;
}
/* Animation declarations exist only while the established disclosure and motion
   controller are active. Pause, selection and offscreen states restore plain text. */
html:not(.motion-paused):not(.text-selection-active):not(.tab-inactive) .intro-person.is-ambient .intro-portrait:is([data-portrait-open="true"],[data-portrait-present="true"]) .ability-lighting-main {
  animation: portrait-light-current 6.8s ease-in-out infinite;
  animation-play-state: var(--life-state,paused) !important;
}
html:not(.motion-paused):not(.text-selection-active):not(.tab-inactive) .intro-person.is-ambient .intro-portrait:is([data-portrait-open="true"],[data-portrait-present="true"]) .ability-lighting-main::before {
  animation: portrait-light-bloom 6.8s ease-in-out infinite;
  animation-play-state: var(--life-state,paused) !important;
}
html:not(.motion-paused):not(.text-selection-active):not(.tab-inactive) .intro-person.is-ambient .intro-portrait:is([data-portrait-open="true"],[data-portrait-present="true"]) .ability-lighting-main::after {
  animation: portrait-light-shafts 9.4s ease-in-out infinite alternate;
  animation-play-state: var(--life-state,paused) !important;
}
html:not(.motion-paused):not(.text-selection-active):not(.tab-inactive) .intro-person.is-ambient .intro-portrait:is([data-portrait-open="true"],[data-portrait-present="true"]) .ability-material {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(110deg,transparent 36%,var(--material-highlight) 46%,transparent 57%),
    repeating-linear-gradient(114deg,transparent 0 2px,var(--material-grain) 2px 3px,transparent 3px 5px),
    linear-gradient(105deg,var(--material-a),var(--material-b) 29%,var(--material-c) 55%,var(--material-d) 77%,var(--material-a));
  background-size: 240% 100%,7px 7px,240% 100%;
  background-position: 120% 0,0 0,0 0;
  background-clip: text;
  -webkit-background-clip: text;
  animation: portrait-material-study 10s ease-in-out infinite;
  animation-play-state: var(--life-state,paused) !important;
}
html:not(.motion-paused):not(.text-selection-active):not(.tab-inactive) .intro-person.is-ambient .intro-portrait:is([data-portrait-open="true"],[data-portrait-present="true"]) .ability-material::after {
  animation: portrait-material-reflection 10s ease-in-out infinite;
  animation-play-state: var(--life-state,paused) !important;
}
@keyframes portrait-light-current {
  0%,100% { color: var(--lighting-core); text-shadow: 0 0 7px color-mix(in srgb,var(--lighting-glow) 35%,transparent),0 0 22px color-mix(in srgb,var(--lighting-glow) 14%,transparent); }
  22%,57%,80% { color: var(--ability-color); text-shadow: 0 0 3px color-mix(in srgb,var(--lighting-glow) 18%,transparent),0 0 12px color-mix(in srgb,var(--lighting-glow) 8%,transparent); }
  29%,49%,68% { color: var(--lighting-core); text-shadow: 0 0 9px color-mix(in srgb,var(--lighting-glow) 43%,transparent),0 0 28px color-mix(in srgb,var(--lighting-glow) 19%,transparent); }
  35%,73% { color: var(--lighting-core); text-shadow: 0 0 5px color-mix(in srgb,var(--lighting-glow) 28%,transparent),0 0 18px color-mix(in srgb,var(--lighting-glow) 11%,transparent); }
}
@keyframes portrait-light-bloom {
  0%,100% { opacity: .74; }
  22%,57%,80% { opacity: .38; }
  29%,49%,68% { opacity: 1; }
  35%,73% { opacity: .61; }
}
@keyframes portrait-light-shafts {
  from { opacity: .4; transform: rotate(-7deg) scaleX(.94); }
  to { opacity: .8; transform: rotate(7deg) scaleX(1.06); }
}
@keyframes portrait-material-study {
  0%,100% { background-position: 120% 0,0 0,0 0; background-size: 240% 100%,7px 7px,240% 100%; }
  38% { background-position: 25% 0,8px 2px,64% 0; background-size: 240% 100%,5px 9px,240% 100%; }
  65% { background-position: -20% 0,12px 6px,100% 0; background-size: 240% 100%,9px 5px,240% 100%; }
}
@keyframes portrait-material-reflection {
  0%,100% { opacity: .35; transform: scaleX(.72) translateX(-3px); }
  38% { opacity: .75; transform: scaleX(1) translateX(0); }
  65% { opacity: .42; transform: scaleX(.78) translateX(3px); }
}
@media (max-width: 760px) {
  .intro-portrait .ability-lighting-main::before { inset: -15% -8% -30%; }
  .intro-portrait .ability-lighting-main::after { inset: -18% -8% -35%; }
}
@media print {
  .intro-portrait .ability-lighting-main,
  .intro-portrait .ability-material {
    animation: none !important;
    color: var(--ability-color) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    background: none !important;
  }
  .intro-portrait .ability-lighting-main::before,
  .intro-portrait .ability-lighting-main::after,
  .intro-portrait .ability-material::after { display: none !important; }
}