/* Arumi Aesthetics, home lander ambient layer.
   Load ONLY on index.html and home.html, after chrome.css:

     <link rel="stylesheet" href="/css/ambient.css">

   Pairs with js/ambient.js. Every keyframe the lander's markup references is
   here, so the animation names in the design component resolve unchanged. */

/* ------------------------------------------------------------------ keyframes */

@keyframes arumiLineUp { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes arumiFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes arumiFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes arumiRuleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes arumiSettle { from { transform: scale(1.05); } to { transform: scale(1); } }
@keyframes arumiDrift { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-16px, 12px) rotate(1.6deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
@keyframes arumiCue { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(8px); opacity: 1; } }
@keyframes arumiBreathe { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.75; } }
@keyframes arumiFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes arumiSunrise { 0%, 100% { opacity: 0.4; transform: translateY(6%) scale(0.97); } 50% { opacity: 1; transform: translateY(0) scale(1.03); } }
@keyframes arumiCurtain { 0% { background-position: 0px 0px; } 100% { background-position: 260px 0px; } }
@keyframes arumiSlowPan { from { transform: scale(1.05) translateX(-1.4%); } to { transform: scale(1.1) translateX(1.4%); } }
@keyframes arumiCurtainSway { 0%, 100% { transform: translateX(-1.6%) skewX(-0.8deg); } 50% { transform: translateX(1.6%) skewX(1.1deg); } }
@keyframes arumiGild { 0%, 100% { filter: brightness(0) invert(1); opacity: 0.9; } 50% { filter: brightness(0) invert(72%) sepia(34%) saturate(640%) hue-rotate(6deg) brightness(1.04); opacity: 1; } }
@keyframes arumiInterludeDrift { from { transform: translateX(-6%); } to { transform: translateX(10%); } }
@keyframes arumiHalo { 0%, 100% { opacity: 0; transform: scale(0.94); } 50% { opacity: 0.55; transform: scale(1.06); } }
@keyframes arumiGildGhost { 0%, 100% { filter: none; opacity: 0.12; } 50% { filter: sepia(0.3) saturate(1.5) hue-rotate(-6deg) brightness(1.22); opacity: 0.17; } }

/* The dust. --dx and --dy are written per mote by js/ambient.js. */
@keyframes arumiMote {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  15% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -34px)) scale(0.3); }
}

/* -------------------------------------------------------------- glow layers */
/* Both are parked at the hero's top-left and moved by transform, so their own
   negative margins centre them on the pointer. js/ambient.js sets the blend
   modes only while the pointer is over the hero, then hands them back. */

.ar-hero-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 216, 0.55) 0%, rgba(212, 183, 118, 0.08) 42%, rgba(212, 183, 118, 0) 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms var(--silk);
}

.ar-hero-glow-core {
  position: absolute;
  left: 0;
  top: 0;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 249, 232, 0.85) 0%, rgba(224, 198, 134, 0.18) 42%, rgba(224, 198, 134, 0) 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--silk);
  filter: blur(6px);
}

/* ------------------------------------------------------- firefly and dust */
/* One fixed viewport layer holds the firefly and every mote, below the nav and
   below the contact rail, and never takes a pointer event. */

.ar-fairy-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 90;
}

.ar-hero-sprite {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 235, 1) 0%, rgba(224, 193, 122, 0.95) 55%, rgba(212, 183, 118, 0) 100%);
  box-shadow: 0 0 10px rgba(224, 193, 122, 0.8), 0 0 26px rgba(212, 183, 118, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--silk);
}

/* ------------------------------------------------------- masked line reveals */
/* Each [data-line] sits inside its own overflow-hidden wrapper (a page class,
   see pages/index.css) and is pushed up from below. The inner element is what
   moves, so the mask edge stays put. js/ambient.js writes the per-line
   transition and stagger.

   Never hide content we cannot bring back. The rest state is gated on
   body.js-lines, which js/ambient.js only adds once it knows it can actually
   animate these lines back in. If the script is blocked, or the browser has no
   IntersectionObserver, or reduced motion is on, the class is never added and
   every line simply stays where it is. Do not lift this rule out of the gate:
   these masks are overflow-hidden, so a line pushed out has no way back. */

[data-lines] [data-line] { display: block; }
body.js-lines [data-lines] [data-line] { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .ar-hero-glow,
  .ar-hero-glow-core,
  .ar-hero-sprite,
  .ar-fairy-layer { display: none; }
  body.js-lines [data-lines] [data-line] { transform: none !important; transition: none; }
}