/* Light is the visual motif: static depth, a warm pointer beam, and brief signals. */
:root { --motion-ease: cubic-bezier(.22,.75,.2,1); --motion-glow: rgb(255 105 43 / .18); }
body {
  isolation: isolate;
  background-color: var(--paper);
  background-image: radial-gradient(ellipse 1000px 780px at 85% 5%,rgb(113 57 27 / .12),transparent 72%),radial-gradient(ellipse 900px 1000px at 0% 43%,rgb(66 71 75 / .12),transparent 78%);
}
body::before {
  content: ''; position: fixed; z-index: -1; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(247 247 242 / .075) .6px,transparent .8px);
  background-size: 5px 5px; opacity: .23;
}
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0 -1% -50px 28%; pointer-events: none; opacity: .36;
  background-image: linear-gradient(rgb(255 255 255 / .055) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .055) 1px,transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(ellipse at 65% 36%,#000 10%,transparent 69%);
}
.hero h1 > span,.error-main h1 > span { animation: experience-flash 7.6s ease-out 1.2s infinite; animation-play-state: paused; }
.hero.is-lit h1 > span,.error-main.is-lit h1 > span { animation-play-state: running; }
.hero h1 > span::after { transition: filter 200ms ease-out; }
@keyframes experience-flash {
  0%,65%,80%,100% { color: var(--accent); text-shadow: 0 0 0 transparent; }
  69% { color: #fff7ed; text-shadow: 0 0 12px rgb(255 159 97 / .5),0 0 40px rgb(255 105 43 / .25); }
  73% { color: var(--accent); text-shadow: 0 0 16px rgb(255 105 43 / .14); }
  76% { color: #ffe5cb; text-shadow: 0 0 9px rgb(255 174 115 / .35),0 0 25px rgb(255 105 43 / .16); }
}
.portrait-frame img,.about-photo img,.service-portrait img { filter: none !important; }
.editorial-art img { filter: drop-shadow(0 15px 25px rgb(255 105 43 / .09)) !important; }
.editorial-art { perspective: 900px; }
.editorial-art img { transition: transform 500ms var(--motion-ease); }
.editorial-art:hover img { transform: translateY(-5px) rotate(-1deg); }
.editorial-art-home { max-width: 430px; }
.editorial-art-resume { max-width: 345px; }
.editorial-art-employment { max-width: 530px; }
.hero-portrait .portrait-frame,.hero-portrait::before,.hero-portrait figcaption { transition: transform 600ms var(--motion-ease); }
html[data-theme="capture"] .hero-portrait:hover .portrait-frame { transform: rotate(0deg); }
html[data-theme="capture"] .hero-portrait:hover::before { transform: rotate(-4deg); }
html[data-theme="capture"] .hero-portrait:hover figcaption { transform: rotate(-1deg); }
.button,.header-contact {
  position: relative; isolation: isolate; overflow: hidden;
  transform: translate3d(var(--button-x,0px),calc(var(--button-y,0px) - var(--button-lift,0px)),0);
  transition: transform 200ms var(--motion-ease),background-color 160ms ease-out,border-color 160ms ease-out;
}
.button::before,.header-contact::before {
  content: ''; pointer-events: none; position: absolute; z-index: -1; inset: -25% auto -25% -50%; width: 45%;
  background: linear-gradient(100deg,transparent,rgb(255 255 255 / .36),transparent);
  transform: translateX(-130%) skewX(-18deg); opacity: 0;
}
.button:hover,.header-contact:hover { --button-lift: 2px; }
.button:hover::before,.header-contact:hover::before { transform: translateX(470%) skewX(-18deg); opacity: 1; transition: transform 650ms var(--motion-ease),opacity 80ms ease-out; }
.button:active,.header-contact:active { --button-lift: 0px; }
.button > span,.header-contact > span:last-child { transition: transform 200ms var(--motion-ease); }
.button:hover > span,.header-contact:hover > span:last-child { transform: translate(2px,-2px); }
.text-link { position: relative; transition: color 160ms ease-out; }
.text-link > span { transition: transform 200ms var(--motion-ease); }
.text-link:hover > span { transform: translate(3px,-2px); }
.interactive-card {
  position: relative; isolation: isolate;
  transform: perspective(1100px) translate3d(0,var(--card-lift,0px),0) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));
  transition: transform 280ms var(--motion-ease),border-color 180ms ease-out;
}
.interactive-card::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--card-x,50%) var(--card-y,50%),rgb(255 133 77 / .11),transparent 75%);
  transition: opacity 220ms ease-out;
}
.interactive-card:hover,.interactive-card:focus-within { --card-lift: -4px; border-color: rgb(255 105 43 / .7); }
.interactive-card:hover::before,.interactive-card:focus-within::before { opacity: 1; }
.situation { transition: border-color 160ms ease-out; }
.situation .row-arrow { transition: transform 220ms var(--motion-ease); }
.situation:hover .row-arrow { transform: translate(4px,-4px); }
.material .expand-icon { transition: transform 220ms var(--motion-ease),border-color 160ms ease-out,color 160ms ease-out; }
.material:hover .expand-icon { border-color: var(--accent); color: var(--accent); }
.quiz-stage progress::-webkit-progress-value { transition: width 250ms ease-out; }
.quiz-option { transition: border-color 160ms ease-out,background-color 160ms ease-out,transform 160ms ease-out; }
.quiz-option:hover { transform: translateX(3px); }
.path-light {
  position: fixed; z-index: 4; top: 0; left: 0; width: 740px; height: 740px; pointer-events: none;
  opacity: 0; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle,rgb(255 207 141 / .09) 0%,rgb(255 126 52 / .055) 22%,rgb(255 105 43 / .025) 43%,transparent 67%);
  mix-blend-mode: screen; transition: opacity 250ms ease-out;
}
.path-light::before {
  content: ''; position: absolute; inset: 0; opacity: .42;
  background-image: linear-gradient(rgb(255 163 98 / .12) 1px,transparent 1px),linear-gradient(90deg,rgb(255 163 98 / .12) 1px,transparent 1px);
  background-size: 38px 38px; mask-image: radial-gradient(circle,#000 0%,transparent 55%);
}
.torch-cursor {
  position: fixed; z-index: 90; top: 0; left: 0; width: 32px; height: 32px; pointer-events: none; border-radius: 50%;
  opacity: 0; border: 1px solid rgb(255 167 104 / .8); box-shadow: 0 0 16px rgb(255 115 48 / .25);
  transition: opacity 120ms ease-out,width 180ms ease-out,height 180ms ease-out,border-color 180ms ease-out;
}
.torch-cursor::before { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%,-50%); background: #fff0da; box-shadow: 0 0 9px #ffb05e; }
.torch-cursor::after { content: ''; position: absolute; inset: -5px; border: 1px solid rgb(255 105 43 / .16); border-radius: 50%; }
.torch-cursor.is-interactive { width: 46px; height: 46px; border-color: rgb(255 221 176 / .9); }
.torch-cursor.is-pressed { width: 24px; height: 24px; }
html.has-flashlight .path-light,html.has-flashlight .torch-cursor { opacity: 1; }
@media(hover:hover) and (pointer:fine) {
  html.has-flashlight,html.has-flashlight a,html.has-flashlight button,html.has-flashlight summary,html.has-flashlight label { cursor: none; }
  html.has-flashlight input,html.has-flashlight textarea,html.has-flashlight select { cursor: text; }
}
html[data-effects="off"] .path-light,html[data-effects="off"] .torch-cursor,html[data-effects="reduced"] .path-light,html[data-effects="reduced"] .torch-cursor { display: none; }
html[data-effects="off"] *,html[data-effects="off"] *::before,html[data-effects="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-effects="off"] .interactive-card,html[data-effects="off"] .button,html[data-effects="off"] .header-contact { transform: none !important; }
@media(max-width:700px) {
  .hero::before { inset: 0 -2% 0 0; background-size: 48px 48px; opacity: .2; }
  .editorial-art-home { max-width: 320px; }
  .editorial-art-resume { max-width: 275px; }
  .editorial-art-employment { max-width: 390px; }
}
@media(hover:none),(pointer:coarse) {
  .path-light,.torch-cursor { display: none; }
  .interactive-card,.button,.header-contact { transform: none !important; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .path-light,.torch-cursor { display: none !important; }
  .interactive-card,.button,.header-contact,.editorial-art img { transform: none !important; }
}
@media print { body::before,.path-light,.torch-cursor { display: none !important; } }