/* OFA / kinetic layer. Decorative effects never replace content or controls. */
:root { --ofa-electric: #48ddff; --ofa-violet: #8274ff; }
body { overflow-x: clip; }

/* Each section catches a moving wash of light as it enters the viewport. */
.ofa-lit-section { position: relative; isolation: isolate; }
.ofa-lit-section::after {
  content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 44% 40% at 84% 15%, rgba(35, 177, 237, .095), transparent 72%),
              radial-gradient(ellipse 28% 38% at 4% 90%, rgba(115, 93, 237, .055), transparent 75%);
  opacity: .22; transition: opacity .9s ease;
}
.ofa-lit-section.ofa-section-visible::after { opacity: 1; }
.ofa-lit-section > .block-layout { position: relative; z-index: 20; }

/* Hero light moves independently from the existing background image/video. */
#ai-3Zzb9x::before {
  animation: ofa-hero-breathe 7s ease-in-out infinite alternate;
  background: radial-gradient(ellipse, rgba(11, 167, 230, .38), rgba(55, 64, 194, .09) 47%, transparent 72%) !important;
}
#ai-3Zzb9x .block-layout::after {
  content: ''; position: absolute; z-index: -1; width: min(72vw, 720px); aspect-ratio: 1;
  left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(120, 226, 255, .13); box-shadow: 0 0 0 90px rgba(51, 187, 245, .018), 0 0 0 180px rgba(106, 105, 242, .012);
  animation: ofa-orbit 13s ease-in-out infinite alternate;
}
@keyframes ofa-hero-breathe { from { opacity: .55; transform: translateX(-50%) scale(.82); } to { opacity: 1; transform: translateX(-50%) scale(1.18); } }
@keyframes ofa-orbit { from { opacity: .38; scale: .88; } to { opacity: .8; scale: 1.09; } }

/* Light follows the pointer on cards without affecting their text. */
.ofa-glow-card { position: relative; isolation: isolate; }
.ofa-card-light {
  position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(300px circle at var(--ofa-light-x, 50%) var(--ofa-light-y, 30%), rgba(101, 220, 255, .18), rgba(92, 102, 226, .075) 38%, transparent 72%);
  opacity: 0; transition: opacity .35s ease;
}
.ofa-glow-card:hover > .ofa-card-light,
.ofa-glow-card:focus-within > .ofa-card-light { opacity: 1; }
.ofa-apply-steps > div > b, .ofa-apply-steps > div > strong,
.ofa-apply-steps > div > span:not(.ofa-card-light) { position: relative; z-index: 1; }
.ofa-service-card, .ofa-value-card, .ofa-job-card, .ofa-about-card,
.ofa-apply-steps > div, .ofa-why-detail-grid > .layout-element {
  transition: transform .42s cubic-bezier(.18,.72,.2,1), border-color .3s ease, box-shadow .42s ease !important;
}
.ofa-service-card:hover, .ofa-value-card:hover, .ofa-job-card:hover,
.ofa-about-card:hover, .ofa-apply-steps > div:hover,
.ofa-why-detail-grid > .layout-element:hover {
  border-color: rgba(113, 225, 255, .72) !important;
  box-shadow: 0 25px 70px rgba(0,0,0,.34), 0 0 40px rgba(35,179,235,.13), inset 0 1px rgba(199,246,255,.14) !important;
}
.ofa-apply-steps > div:hover { transform: translateY(-7px); }
.ofa-about-card:hover, .ofa-why-detail-grid > .layout-element:hover { transform: translateY(-5px); }

/* Buttons have a slow pulse at rest, a diagonal sweep on hover, and a click wave. */
.ofa-luminous {
  position: relative !important; isolation: isolate; overflow: hidden !important;
  transition: transform .26s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease, border-color .3s ease, filter .3s ease !important;
}
.ofa-luminous > :not(.ofa-button-sheen):not(.ofa-click-wave) { position: relative; z-index: 2; }
.ofa-button-sheen {
  position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 21%, rgba(255,255,255,.26) 45%, transparent 64%);
  transform: translateX(-145%); transition: transform .65s cubic-bezier(.2,.7,.2,1);
}
.ofa-luminous:hover .ofa-button-sheen,
.ofa-luminous:focus-visible .ofa-button-sheen { transform: translateX(145%); }
.ofa-luminous:hover { filter: brightness(1.11); box-shadow: 0 13px 36px rgba(15, 181, 242, .32), 0 0 26px rgba(45, 199, 248, .28) !important; }
.ofa-luminous:active { transform: translateY(2px) scale(.975) !important; filter: brightness(1.22); }
.ofa-click-wave {
  position: absolute; z-index: 1; width: 12px; height: 12px; border-radius: 50%; pointer-events: none;
  background: rgba(224, 251, 255, .62); transform: translate(-50%, -50%) scale(1);
  animation: ofa-click .6s ease-out forwards;
}
@keyframes ofa-click { to { opacity: 0; transform: translate(-50%, -50%) scale(24); } }
#ai-5uMVHS, #zmZ6xd, .block-header__button.ofa-luminous,
.ofa-tally-fallback a.ofa-luminous { animation: ofa-cta-pulse 3.4s ease-in-out infinite; }
@keyframes ofa-cta-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(4,174,236,.21), 0 0 0 0 rgba(56,213,255,.19), inset 0 1px rgba(255,255,255,.3); }
  50% { box-shadow: 0 13px 42px rgba(4,174,236,.38), 0 0 0 9px rgba(56,213,255,0), inset 0 1px rgba(255,255,255,.43); }
}

/* Existing imagery gets a restrained, responsive sense of depth. */
.ofa-visual-reactive { overflow: hidden; }
.ofa-visual-reactive img { will-change: transform; }
.ofa-visual-reactive:hover img {
  transform: translate3d(var(--ofa-visual-x, 0px), var(--ofa-visual-y, 0px), 0) scale(1.055) !important;
}
.ofa-visual-reactive::before {
  content: ''; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(116deg, transparent 25%, rgba(133,233,255,.055) 48%, transparent 70%);
  transform: translateX(-130%); transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.ofa-visual-reactive:hover::before { transform: translateX(130%); }

/* The application has a luminous frame, with a stronger cue while it is active. */
.ofa-tally-shell {
  box-shadow: 0 35px 85px rgba(0,0,0,.42), 0 0 0 1px rgba(68,207,252,.18), 0 0 50px rgba(44,180,232,.075) !important;
  transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease !important;
}
.ofa-tally-shell:hover, .ofa-tally-shell:focus-within, .ofa-tally-shell.ofa-form-engaged {
  border-color: rgba(128,230,255,.76) !important;
  box-shadow: 0 40px 95px rgba(0,0,0,.45), 0 0 0 1px rgba(116,221,252,.45), 0 0 62px rgba(43,180,241,.22) !important;
}
.ofa-tally-top { position: relative; overflow: hidden; }
.ofa-tally-top::after {
  content: ''; position: absolute; inset: auto 0 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #73e6ff, #7779ff, transparent);
  background-size: 200% 100%; animation: ofa-tally-scan 5s linear infinite;
}
@keyframes ofa-tally-scan { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.ofa-form-route li { transition: transform .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.ofa-form-route li:hover { transform: translateY(-4px); color: #f5fcff; border-color: rgba(125,229,255,.72); box-shadow: 0 9px 25px rgba(27,181,231,.17); }
.ofa-apply-details summary { transition: color .2s ease, padding-left .25s ease; }
.ofa-apply-details summary:hover { color: #fff; padding-left: 6px; }

/* Interactive form fields on the native contact page. Tally fields remain on Tally. */
#ai-4BdGHm input:not([type="checkbox"]):not([type="radio"]), #ai-4BdGHm textarea {
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
}
#ai-4BdGHm input:focus, #ai-4BdGHm textarea:focus {
  border-color: #78e5ff !important; background: #112637 !important;
  box-shadow: 0 0 0 4px rgba(74,203,244,.13), 0 0 28px rgba(59,191,237,.17) !important;
}

/* The small pointer halo activates only over interactive artwork or controls. */
#ofa-pointer-halo {
  position: fixed; z-index: 10000; left: -70px; top: -70px; width: 140px; height: 140px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(116,228,255,.20), rgba(80,165,238,.07) 36%, transparent 72%);
  filter: blur(9px); transition: opacity .3s ease;
}
#ofa-pointer-halo.ofa-halo-active { opacity: 1; }

@media (max-width: 760px) {
  #ai-3Zzb9x .block-layout::after { width: 90vw; }
  .ofa-apply-steps > div:hover, .ofa-about-card:hover,
  .ofa-why-detail-grid > .layout-element:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #ai-3Zzb9x::before, #ai-3Zzb9x .block-layout::after,
  #ai-5uMVHS, #zmZ6xd, .block-header__button.ofa-luminous,
  .ofa-tally-fallback a.ofa-luminous, .ofa-tally-top::after { animation: none !important; }
  .ofa-click-wave, #ofa-pointer-halo { display: none !important; }
  .ofa-visual-reactive:hover img { transform: none !important; }
}