/* Shared backdrop and motion for every Emeraldz page.
   The look comes from the AIYOU video: a lamp-lit room (amber light) and the night scenes (emerald
   light) drift slowly behind a pencil-sketched emerald that draws itself once, and a few sparkles
   glint now and then, like the one on the video's title card. The sparkle is also the site's hover
   mark. Everything here stops for people who ask for reduced motion. */
:root {
  --ink: #0e0a08;
  --paper: #f3e7d2;
  --amber: #f0a64a;
  --jade: #3fae8c;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.7 7.6 16.4 11.3 24 12C16.4 12.7 12.7 16.4 12 24C11.3 16.4 7.6 12.7 0 12C7.6 11.3 11.3 7.6 12 0Z'/%3E%3C/svg%3E");
}
body { isolation: isolate; }
/* no rubber-band bounce when scrolling past the top or bottom */
html, body { overscroll-behavior: none; }

/* ---------- backdrop ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--ink); }
.ambient::before, .ambient::after { content: ""; position: absolute; border-radius: 50%; will-change: transform; }
/* lamp light, top right */
.ambient::before {
  width: 95vmax; height: 95vmax; right: -40vmax; top: -50vmax;
  background: radial-gradient(closest-side, rgba(240,166,74,.36), rgba(240,166,74,.13) 45%, rgba(240,166,74,0));
  animation: drift-lamp 46s ease-in-out infinite alternate;
}
/* emerald light, bottom left */
.ambient::after {
  width: 85vmax; height: 85vmax; left: -38vmax; bottom: -48vmax;
  background: radial-gradient(closest-side, rgba(63,174,140,.26), rgba(63,174,140,.09) 50%, rgba(63,174,140,0));
  animation: drift-jade 58s ease-in-out infinite alternate;
}
@keyframes drift-lamp { to { transform: translate(-7vmax, 6vmax) scale(1.08); } }
@keyframes drift-jade { to { transform: translate(8vmax, -5vmax) scale(1.1); } }

.ambient .gem {
  position: absolute; right: -4vmin; top: 50%;
  height: min(116vh, 980px); width: auto;
  transform: translateY(-50%) rotate(-9deg);
  color: var(--paper); opacity: .17;
}
.ambient .gem path {
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sketch 2.2s var(--ease-out) forwards;
}
.ambient .gem .outer2, .ambient .gem .table2 { opacity: .5; animation-delay: .35s; }
.ambient .gem .mid { animation-delay: .5s; }
.ambient .gem .table { animation-delay: .7s; }
.ambient .gem .facets { stroke: var(--jade); opacity: .9; animation-delay: 1s; }
@keyframes sketch { to { stroke-dashoffset: 0; } }

.ambient .spark {
  position: absolute; width: var(--s, 14px); height: var(--s, 14px);
  fill: var(--paper); opacity: 0;
  animation: glint var(--d, 9s) ease-in-out var(--delay, 0s) infinite;
}
/* mostly resting; a quick turn and glint every few seconds */
@keyframes glint {
  0%, 82%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  88% { opacity: .85; transform: scale(1) rotate(45deg); }
  94% { opacity: .35; transform: scale(.7) rotate(80deg); }
}

.ambient .grain {
  position: absolute; inset: 0; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .8 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* admin: same room, lights lower, so forms stay easy to read */
.ambient.quiet::before { opacity: .65; }
.ambient.quiet::after { opacity: .7; }
.ambient.quiet .gem { opacity: .09; }

/* home: the video is the backdrop; only grain and sparkles sit on top of it */
.ambient.over-video { z-index: 0; background: none; }
.ambient.over-video::before, .ambient.over-video::after { display: none; }
.ambient.over-video .grain { opacity: .06; }

@media (max-width: 760px) {
  .ambient .gem { right: -38vw; height: 92vh; opacity: .12; }
  .ambient.quiet .gem { opacity: .07; }
}

/* ---------- shared bits of motion ---------- */
/* the sparkle hover mark: put class "mark" on any element, it turns in on hover/focus of its link.
   It floats just after the last letter and takes no space, so nothing shifts or wraps. */
.mark::after {
  content: ""; position: absolute; width: .42em; height: .42em; background: var(--amber);
  -webkit-mask: var(--spark) center / contain no-repeat; mask: var(--spark) center / contain no-repeat;
  transform: translate(.28em, -.05em) scale(0) rotate(-90deg); opacity: 0;
  transition: transform .35s var(--ease-out), opacity .2s ease-out;
}
a:hover .mark::after, a:focus-visible .mark::after { transform: translate(.28em, -.05em) scale(1) rotate(0deg); opacity: 1; }

/* ---------- getting around: Home, Links, and a key for Admin ---------- */
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 13px;
  border-radius: 999px; border: 1px solid rgba(243,231,210,.22); background: rgba(14,10,8,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--paper); font: 500 13px/1 "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif; text-decoration: none;
  transition: border-color .2s, color .2s, transform .12s;
}
.site-nav a:hover { border-color: var(--amber); color: var(--amber); }
.site-nav a:active { transform: scale(.95); }
.site-nav a[aria-current="page"] { border-color: rgba(240,166,74,.6); color: var(--amber); }
.site-nav a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.site-nav .key-only { width: 34px; padding: 0; }
.site-nav svg { width: 16px; height: 16px; }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.shake { animation: shake .45s ease-in-out both; }

@media (prefers-reduced-motion: reduce) {
  .ambient::before, .ambient::after, .ambient .spark { animation: none; }
  .ambient .spark { opacity: .35; transform: none; }
  .ambient .gem path { animation: none; stroke-dashoffset: 0; }
  .mark::after, .site-nav a { transition: none; }
  .shake { animation: none; }
}