/* ==========================================================================
   Arahan Enterprises — motion
   Keyframes, loader, scroll-reveal states and reduced-motion overrides.
   Reveal "hidden" states only apply when html.js is present, so content
   is always visible if JavaScript is unavailable.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes scroll-cue { 0% { top: -40%; } 60%, 100% { top: 100%; } }
@keyframes spoke-pulse { 0% { bottom: 0; opacity: 0; } 20% { opacity: 1; } 100% { bottom: var(--r); opacity: 0; } }
@keyframes detail-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes list-in { to { opacity: 1; transform: none; } }
@keyframes callout { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(4.5); opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }
@keyframes nf-spin { to { transform: rotateY(360deg) rotateX(20deg); } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes loader-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loader-safety { to { opacity: 0; visibility: hidden; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* SVG rings rotate around their own centre (no translate) */
.shield__ring, .shield__orbit { animation-name: spin-local; }
@keyframes spin-local { to { transform: rotate(360deg); } }

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: var(--primary-green);
  transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s;
  /* Safety net: the loader always clears itself even if JS fails */
  animation: loader-safety 0.6s var(--ease) 4.5s forwards;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.no-loader .loader { display: none; }
.loader__inner { display: grid; justify-items: center; text-align: center; padding: 20px; }
.loader__frame { width: 180px; height: auto; stroke-linecap: round; stroke-linejoin: round; }
.loader__frame path { stroke-dasharray: 400; stroke-dashoffset: 400; animation: loader-draw 1.2s var(--ease-io) forwards; }
.loader__grid path { stroke: rgba(247, 243, 236, 0.18); stroke-width: 1; }
.loader__struct path { stroke: var(--white); stroke-width: 1.4; }
.loader__struct path:nth-child(1) { animation-delay: 0.15s; }
.loader__struct path:nth-child(2) { animation-delay: 0.45s; stroke: var(--accent); }
.loader__struct path:nth-child(3) { animation-delay: 0.6s; }
.loader__struct path:nth-child(4) { animation-delay: 0.3s; }
.loader__dim path { stroke: var(--accent); stroke-width: 1; animation-delay: 0.7s; }
.loader__name {
  margin-top: 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0;
  animation: fade-up 0.7s var(--ease-out) 0.5s forwards;
}
.loader__tag {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: fade-up 0.7s var(--ease-out) 0.7s forwards;
}
.loader__bar { width: 160px; height: 1px; margin-top: 26px; background: var(--line-2); overflow: hidden; }
.loader__bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; animation: loader-bar 1.4s var(--ease-io) forwards; }

/* ---------- Page transition ---------- */
/* `backwards`, not `both`: a forwards fill leaves an identity transform on
   <body> for the life of the page, which makes body the containing block for
   every position:fixed descendant — that unpins the sticky header and any
   other fixed UI. Backwards still hides the pre-animation frame. */
.js main { animation: fade-up 0.6s var(--ease-out) backwards; }
.js.no-loader main { animation-duration: 0.45s; }
.is-leaving main, .is-leaving .site-footer, .is-leaving .cta-band {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.65s var(--ease-out), transform 0.85s var(--ease-out);
  transition-delay: calc(var(--d, var(--reveal-step, 0)) * 90ms);
}
.js [data-reveal="depth"] { transform: perspective(1400px) translate3d(0, 32px, -70px) rotateX(4deg); }
.js [data-reveal="rise"] { transform: scaleY(0.05); transform-origin: bottom; transition-duration: 1s, 1.3s; }
.js [data-reveal="image"] { transform: none; opacity: 1; }
.js [data-reveal="image"] .figure__media { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.js [data-reveal="image"] .figure__media img { transform: scale(1.18); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal]:focus-within { opacity: 1; transform: none; transition-delay: 0s; }
.js [data-reveal="image"].is-in .figure__media { clip-path: inset(0 0 0 0); }
.js [data-reveal="image"].is-in .figure__media img { transform: scale(1); }
.js [data-reveal="image"].is-in:hover .figure__media img { transform: scale(1.04); }

[data-delay="1"] { --d: 1; } [data-delay="2"] { --d: 2; } [data-delay="3"] { --d: 3; }
[data-delay="4"] { --d: 4; } [data-delay="5"] { --d: 5; } [data-delay="6"] { --d: 6; }

/* Split headings: each word slides up from behind a mask */
.js [data-split]:not(.is-split) { opacity: 0; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.w__i {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms + 80ms);
}
.is-in .w__i, .is-in.w__i { transform: none; }

/* Stack diagram: plates drop in when revealed */
.js .stack:not(.is-in) .stack__plate { transform: translateZ(calc(var(--i) * var(--gap) + 320px)); opacity: 0; }

/* Idle float for page-hero frames */
.frame3d { animation: float 7s var(--ease-io) infinite; }

/* One hierarchy: headings lead, cards follow, images carry the depth. */
@media (hover: hover) and (pointer: fine) {
  .sector-card { transform-style: preserve-3d; }
  .sector-card__more { translate: 0 0; transition: translate .4s var(--ease-out), background .35s, color .35s; }
  .sector-card:is(:hover, :focus-within) .sector-card__more { translate: 2px -2px; }
  .cap-card:focus-within .cap-card__media img,
  .sector-card:focus-within .sector-card__media img { filter: none; }
}
@media (max-width: 860px) {
  .js [data-reveal] { transition-duration: .45s, .6s; transition-delay: calc(var(--d, 0) * 40ms); }
  .js [data-reveal="depth"] { transform: translate3d(0, 16px, 0); }
  .js [data-reveal="depth"].is-in { transform: none; }
}

/* ---------- Reduced motion ----------
   html.rm is set by navigation.js when the OS requests reduced motion
   or when the visitor uses the footer "Reduce motion" toggle. */
.rm *, .rm *::before, .rm *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
.rm { scroll-behavior: auto; }
.rm [data-reveal], .rm [data-split] { opacity: 1 !important; transform: none !important; }
.rm [data-reveal="image"] .figure__media { clip-path: none !important; }
.rm .w__i { transform: none !important; }
.rm .marquee { width: auto; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
.rm .marquee__track { animation: none !important; flex-wrap: wrap; row-gap: 20px; }
.rm .marquee__track[aria-hidden="true"] { display: none; }
.rm .loader { display: none; }
.rm .frame3d, .rm .region__pin .icon { animation: none !important; }
.rm .cx__list li { opacity: 1; transform: none; }
.rm .cx__drawing .dl, .rm .shield path { stroke-dashoffset: 0 !important; }
.rm .cx__drawing .dw-callouts circle { opacity: 1; }
.rm .hud__scroll i::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.js) *, html:not(.js) *::before, html:not(.js) *::after {
    animation: none !important;
    transition: none !important;
  }
  html:not(.js) .loader { display: none; }
}

/* ---------- Hold hero intros until the loader has cleared ---------- */
.js:not(.is-ready) .hero [data-reveal],
.js:not(.is-ready) .page-hero [data-reveal] { opacity: 0 !important; transform: translate3d(0, 34px, 0) !important; }
.js:not(.is-ready) .hero .w__i,
.js:not(.is-ready) .page-hero .w__i { transform: translate3d(0, 108%, 0) !important; }