/* Nine Stones — styles. Everything is scoped under .ns-root (classes prefixed ns-).
 * Override any variable on your own element, e.g. <div data-nine-stones style="--ns-height: 600px">. */
.ns-root {
  --ns-height: clamp(460px, 46vw, 700px);
  --ns-height-mobile: 760px;
  --ns-gutter: clamp(1rem, 4vw, 3.5rem);
  --ns-ink: #23201E;            /* text on paper */
  --ns-ink-dim: #5B5A63;
  --ns-light: #ECEEF3;          /* text on the coloured scene */
  --ns-light-dim: rgba(236, 238, 243, 0.68);
  --ns-gold: #D9A441;           /* Devanagari name, note rule */
  --ns-button-text: #1E2A5A;
  --ns-display: 'Gotu', 'Noto Sans Gujarati', Georgia, 'Times New Roman', serif;
  --ns-body: 'Mukta', 'Noto Sans Gujarati', 'Segoe UI', system-ui, sans-serif;
  --ns-ease: cubic-bezier(.2, .7, .1, 1);
  display: block; position: relative;
  font-family: var(--ns-body); line-height: 1.5; color: var(--ns-ink);
}
.ns-root *, .ns-root *::before, .ns-root *::after { box-sizing: border-box; }
.ns-root h2, .ns-root h3, .ns-root p, .ns-root dl, .ns-root dd { margin: 0; }

.ns-stage {
  position: relative; isolation: isolate; overflow: hidden; height: var(--ns-height);
  background: radial-gradient(120% 90% at 28% 18%, #FFFFFF 0%, #F4F4F3 45%, #E9E9EA 100%);
  --ns-deep: #1E2A5A;
}
.ns-paper { /* paper grain */
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: repeat; background-size: 256px; opacity: .55; mix-blend-mode: multiply;
}
.ns-stage.no-gl.is-scene::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--ns-deep); }
.ns-ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: multiply; }

/* heading */
.ns-head {
  position: absolute; z-index: 3; top: clamp(1.4rem, 3vw, 2.4rem); left: var(--ns-gutter); max-width: 30rem;
  transition: opacity .5s ease, transform .6s var(--ns-ease);
}
.ns-title { font-family: var(--ns-display); font-weight: 400; font-size: 1.9rem; line-height: 1.15; color: var(--ns-ink); }
.ns-lede { margin-top: .35rem !important; color: var(--ns-ink-dim); font-size: 1rem; }
.is-opening .ns-head, .is-scene .ns-head { opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* row */
.ns-row {
  position: absolute; inset: 0; z-index: 2; margin: 0; list-style: none;
  display: flex; align-items: center; padding: 3.5rem 2.5% 0;
  transition: transform 1.25s cubic-bezier(.6, 0, .2, 1), opacity .7s ease .25s, filter .8s ease .15s;
}
.ns-stone { flex: var(--w) 1 0; min-width: 0; display: flex; justify-content: center; }
.ns-stone__btn {
  position: relative; width: 100%; aspect-ratio: var(--w) / var(--hb, 1);
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%;
  transform: translate(calc(var(--par, 0) * var(--depth, 1) * -36px), var(--bob, 0px));
}
.ns-stone__img {
  position: absolute; left: 50%; top: 50%; width: calc(100% * 2 / var(--w)); max-width: none; height: auto;
  translate: -50% -50%; pointer-events: none; user-select: none;
  transition: scale .6s var(--ns-ease);
}
.ns-stone__btn.is-hover .ns-stone__img { scale: 1.07; }
.ns-stone__btn:focus { outline: none; }
.ns-stone__btn:focus-visible::after { content: ''; position: absolute; inset: 8%; border: 1.5px solid var(--ns-button-text); border-radius: 50%; }
.is-opening .ns-row, .is-scene .ns-row { transform: scale(1.75); opacity: 0; filter: blur(8px); pointer-events: none; }
.is-closing .ns-row { transition: transform 1s cubic-bezier(.3, 0, .2, 1), opacity .6s ease .3s, filter .6s ease .3s; }

/* scene */
.ns-scene[hidden], .ns-root [hidden] { display: none !important; }
.ns-scene {
  position: absolute; inset: 0; z-index: 4;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center;
}
.ns-back {
  position: absolute; z-index: 5; top: clamp(1rem, 2.4vw, 1.8rem); left: var(--ns-gutter);
  display: inline-flex; align-items: center; gap: .55rem; opacity: 0; transition: opacity .5s ease .9s;
  background: none; border: 0; padding: .3rem 0; color: var(--ns-light-dim); font: 500 .95rem var(--ns-body); cursor: pointer;
}
.ns-back::before { content: ''; width: 8px; height: 8px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.ns-back:hover { color: var(--ns-light); }
.ns-back:focus-visible, .ns-btn:focus-visible { outline: 2px solid var(--ns-gold); outline-offset: 3px; }
.is-scene .ns-back { opacity: 1; }
.is-closing .ns-back { opacity: 0; transition-delay: 0s; }

.ns-text { position: relative; z-index: 2; padding: 2rem 0 2rem var(--ns-gutter); color: var(--ns-light); max-width: 34rem; }
.ns-text > * { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .8s var(--ns-ease); }
.is-scene .ns-text > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms + 650ms); }
.is-closing .ns-text > * { transition-delay: 0s; transition-duration: .25s; }
.ns-deva { font-family: var(--ns-display); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; color: var(--ns-gold); }
.ns-name { margin-top: .2rem !important; font-family: var(--ns-display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.12; color: var(--ns-light); outline: none; }
.ns-local { font-family: var(--ns-body); font-size: 1.05rem; color: var(--ns-light-dim); margin-left: .35rem; }
.ns-planet { margin-top: .6rem !important; font-weight: 600; font-size: 1.1rem; }
.ns-sig { margin-top: .5rem !important; color: var(--ns-light-dim); max-width: 28em; }
.ns-meta { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: 1.1rem !important; }
.ns-meta dt { font-size: .8125rem; color: var(--ns-light-dim); }
.ns-meta dd { font-weight: 600; }
.ns-note { margin-top: 1.2rem !important; font-size: .92rem; color: var(--ns-light-dim); max-width: 28em; border-left: 2px solid var(--ns-gold); padding-left: .8rem; }
.ns-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.ns-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.5rem;
  font: 600 1rem/1.2 var(--ns-body); text-decoration: none; border-radius: 2px;
  background: var(--ns-light); color: var(--ns-button-text); transition: background .25s ease;
}
.ns-btn:hover { background: #FFFFFF; }

.ns-art { position: relative; height: 100%; min-height: 0; touch-action: none; }
.ns-big {
  position: absolute; left: 50%; top: 50%; height: 118%; width: auto; aspect-ratio: 1; max-width: none;
  translate: -50% -50%; z-index: 1; pointer-events: none; user-select: none;
  transition: transform 1.15s cubic-bezier(.6, 0, .2, 1), opacity .5s ease .1s;
}
.ns-brush { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.is-closing .ns-big { opacity: 0; transform: scale(.85); transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .45s ease; }

/* custom cursor (mouse and trackpad only) */
.ns-stage.has-cursor, .ns-stage.has-cursor .ns-stone__btn { cursor: none; }
.ns-stage.has-cursor .ns-text, .ns-stage.has-cursor .ns-text * { cursor: auto; }
.ns-stage.has-cursor .ns-text a, .ns-stage.has-cursor .ns-back { cursor: pointer; }
.ns-cursor { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.cursor-on .ns-cursor { opacity: 1; }
.ns-ring, .ns-dot { position: absolute; left: 0; top: 0; border-radius: 50%; translate: -50% -50%; }
.ns-ring { width: 36px; height: 36px; border: 1px solid rgba(35, 32, 30, .55); transition: scale .45s var(--ns-ease), border-color .3s; }
.ns-dot { width: 5px; height: 5px; background: var(--ns-ink); transition: background .3s; }
.ns-label {
  position: absolute; left: 26px; top: -7px; white-space: nowrap;
  font: 600 11px/1 var(--ns-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ns-ink);
  transition: opacity .3s ease, translate .4s var(--ns-ease);
}
.ns-cursor.flip .ns-label { left: auto; right: 26px; }
.is-over-stone .ns-ring { scale: 1.55; border-color: rgba(255, 255, 255, .85); }
.is-over-stone .ns-dot { background: #fff; }
.is-over-stone .ns-label { opacity: 0; translate: 10px 0; }
.is-scene .ns-cursor, .is-opening .ns-cursor { mix-blend-mode: difference; }
.is-scene .ns-ring { border-color: rgba(255, 255, 255, .8); }
.is-scene .ns-dot { background: #fff; }
.is-scene .ns-label { color: #fff; }
.over-text .ns-cursor { opacity: 0; }

/* without WebGL: plain bloom on hover */
.no-gl .ns-stone__btn::before {
  content: ''; position: absolute; left: 50%; top: 55%; width: 210%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--wash), transparent); opacity: 0; scale: .6; z-index: -1;
  transition: opacity .6s ease, scale .8s var(--ns-ease);
}
.no-gl .ns-stone__btn.is-hover::before { opacity: .8; scale: 1; }

/* phones */
@media (max-width: 760px) {
  .ns-stage { height: var(--ns-height-mobile); }
  .ns-row { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; row-gap: 1.2rem; padding: 7.5rem 1rem 1.5rem; }
  .ns-stone__btn { width: 72%; aspect-ratio: 1; }
  .ns-stone__img { width: 190%; }
  .ns-scene { grid-template-columns: 1fr; grid-template-rows: 46% 54%; align-items: start; }
  .ns-art { grid-row: 1; }
  .ns-text { grid-row: 2; padding: 0 1rem 1.5rem; }
  .ns-big { height: 112%; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-row, .ns-big, .ns-text > *, .ns-head { transition-duration: .01ms !important; transition-delay: 0s !important; }
}