/* ============================================================
   Innersanctum Tech, site motion (revamp, owner approved 2026-10-20).
   Loaded on every page after styles.css. Scripts: scripts/motion.js,
   scripts/intro.js (Home), scripts/support.js (Support).
   Reduce Motion ("gentle version"): fades, gold lines, underlines,
   reading progress, story line and soft page changes still run;
   big movement stays still (no rise, no turning circle, no glide).
   ============================================================ */

/* ---------- Soft page changes (cross-document view transition) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
}
.site-header { view-transition-name: site-header; }

/* ---------- Fade-in sections ----------
   html.motion-js is set by scripts/motion.js before the first paint, so
   nothing is hidden when scripts do not run. .is-in always wins. */
html.motion-js :where(
  main .page-head,
  main section:not(.prose):not(.hero):not(.launch-hero),
  main .card,
  main .prose > :is(h1, h2, p, ul, details, img)
) {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out;
}
html.motion-js main .is-in { opacity: 1; transform: none; }

/* ---------- Global page motion rule ----------
   Every content page uses .page-head for its opening heading and lead. This
   rule keeps the same small gold line and left-to-right highlight across the
   site. New pages inherit the effect by using .page-head and loading this
   stylesheet; do not recreate the animation in page-local styles. */
.page-head { position: relative; padding-bottom: 17px; }
.page-head::before {
  content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
}
.page-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 18px; height: 3px; border-radius: 2px;
  background: radial-gradient(ellipse at center, rgba(244, 214, 140, 0.95), rgba(185, 138, 47, 0) 70%);
  animation: divider-led 2.8s ease-in-out infinite alternate;
}

/* ---------- Gold line down the page (all content pages with headings) ----------
   scripts/motion.js adds .gold-line-host automatically, so future pages keep
   the vertical scroll line when they use normal h2 or h3 section headings. */
.gold-line-host { position: relative; }
/* Keep connectors in the gutter and behind opaque content such as cards. */
.gold-line-host > .wrap { position: relative; z-index: 1; }
.gold-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.gold-line svg { position: absolute; left: 0; top: 0; overflow: visible; }
.gold-line path { fill: none; stroke: var(--signal); stroke-width: 1; stroke-linecap: round; }
.gold-line .tick { transition: stroke-dashoffset 300ms ease-in-out; }

/* ---------- Gold underline on key words ---------- */
.key-phrase {
  background-image: linear-gradient(var(--signal), var(--signal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 300ms ease-in-out;
}
.underline-in .key-phrase { background-size: 100% 1.5px; }

/* ---------- Highlighted app ---------- */
.eyebrow {
  display: block; margin: 0 0 8px;
  font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--link);
}
.apps-grid > .card:not(.featured) { border-top-color: var(--ist-silver); }
[data-theme="dark"] .apps-grid > .card:not(.featured) { border-top-color: rgba(255, 255, 255, 0.18); }

/* ---------- Reading progress line (long pages) ---------- */
.reading-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 1;
  background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  transition: transform 120ms linear;
}

/* ---------- Story line (About) ---------- */
.story { position: relative; }
.story-line {
  position: absolute; left: -28px; width: 1px; background: var(--signal);
  transform-origin: top; transform: scaleY(0); pointer-events: none;
}
.story-dot {
  position: absolute; left: -31px; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--signal); pointer-events: none;
  opacity: 0; transition: opacity 300ms ease-in-out;
}
.story-dot.is-in { opacity: 1; }
html.motion-js .story-h { opacity: 0; transform: translateY(6px); transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; }
html.motion-js .story-h.is-in { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .story-line { left: -12px; }
  .story-dot { left: -15px; }
}

/* ---------- Welcome intro (Home, first visit) ----------
   html.intro is set by scripts/intro.js in <head>, so Home never flashes
   before the intro. The cover removes itself after 1.9s even if a script fails. */
html.intro body { overflow: hidden; }
html.intro body::before {
  content: ''; position: fixed; inset: 0; z-index: 9400; background: #130E27;
  animation: intro-cover-off 1ms linear 1.9s forwards;
}
@keyframes intro-cover-off { to { visibility: hidden; } }
.intro {
  position: fixed; inset: 0; z-index: 9450; padding: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: #130E27; text-align: center; cursor: pointer;
}
.intro[hidden] { display: none; }
.intro.is-leaving { cursor: default; pointer-events: none; }
.intro.is-leaving .intro-mark, .intro.is-leaving .intro-name, .intro.is-leaving .intro-tagline { animation: none; opacity: 1; transform: none; }
.intro-name span { display: inline; }
.intro.two-lines .intro-name span { display: block; }
.intro-held { opacity: 0 !important; }
.intro-mark { width: 96px; height: 96px; opacity: 0; animation: intro-in 400ms ease-in-out forwards; }
.intro-name {
  margin: 0; font-family: var(--serif); font-size: clamp(1.3rem, 5vw, 2.3rem); line-height: 1.3;
  letter-spacing: 0.15em; transform-origin: 50% 50%; text-transform: uppercase; color: #FCFBF9;
  opacity: 0; animation: intro-in 400ms ease-in-out 200ms forwards;
}
.intro-tagline {
  margin: 0; font: 500 0.85rem var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: #C9C3DE;
  opacity: 0; animation: intro-in 400ms ease-in-out 400ms forwards;
}
@keyframes intro-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Product circle (Downloads) ---------- */
.orbit-page { margin: 8px 0 32px; }
.orbit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: center; text-align: left; }
.orbit-stage { position: relative; width: min(460px, 100%); aspect-ratio: 1; margin: 0 auto; container-type: inline-size; --card: 112px; }
.orbit-center {
  position: absolute; left: 50%; top: 50%; width: 42%; margin: 0; transform: translate(-50%, -50%);
  font-family: var(--serif); font-size: clamp(0.85rem, 3.4cqi, 1.1rem); letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--heading); text-align: center; line-height: 1.5;
}
.orbit-ring { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.orbit-item {
  position: absolute; left: 50%; top: 50%; width: var(--card); margin: 0;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(-50cqi + var(--card) * 0.72)) rotate(calc(-1 * var(--a, 0deg)));
}
.orbit-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 6px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font: inherit; color: var(--text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: opacity 300ms ease-in-out, border-color 300ms ease-in-out;
}
.orbit-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; }
.orbit-name { font-size: 12px; font-weight: 500; line-height: 1.25; text-align: center; }
.orbit-card:hover, .orbit-card[aria-expanded="true"] { border-color: var(--structure); }
.orbit.has-focus .orbit-card:not([aria-expanded="true"]) { opacity: 0.28; }
.orbit-details { position: relative; min-height: 180px; }
.orbit-hint { color: var(--muted); }
.orbit-detail h2 { margin-top: 0; padding-right: 44px; }
.orbit-detail:not([hidden]) { animation: orbit-fade 300ms ease-in-out; }
.orbit-close { position: absolute; top: 0; right: 0; padding: 8px 10px; line-height: 0; }
.orbit-close[hidden] { display: none; } /* .button sets a display, so hidden needs saying */
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes orbit-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .orbit .orbit-ring { animation: orbit-turn 150s linear infinite; }
  .orbit .orbit-card { animation: orbit-turn 150s linear infinite reverse; }
  .orbit:hover .orbit-ring, .orbit:hover .orbit-card,
  .orbit:focus-within .orbit-ring, .orbit:focus-within .orbit-card,
  .orbit.has-focus .orbit-ring, .orbit.has-focus .orbit-card { animation-play-state: paused; }
}
@media (max-width: 760px) {
  .orbit { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .orbit-stage { width: min(340px, 100%); --card: 76px; }
  .orbit-center { width: 34%; font-size: clamp(0.7rem, 3.6cqi, 0.85rem); letter-spacing: 0.1em; }
  .orbit-details { min-height: 0; }
  .orbit-name { font-size: 10px; line-height: 1.2; }
  .orbit-card { padding: 4px; gap: 4px; }
}

/* ---------- Backlit launch hero (Geometria Sacra) ----------
   Pure CSS: a gold light fades up behind the phone, peaks, then settles;
   the screen lifts out of the dark and the words fade in under it. */
.launch-hero {
  position: relative; overflow: hidden; isolation: isolate;
  margin: -48px 0 40px; padding: 56px 20px 48px;
  background: var(--ist-night-deep); color: var(--text); text-align: center;
}
.launch-stage { position: relative; width: clamp(150px, 20vw, 196px); margin: 0 auto 28px; }
.launch-glow {
  position: absolute; left: 50%; top: 50%; z-index: -1; width: 260%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  /* Static backlight, gold token at 25% at most (brand check 2026-10-20: no glow animation). */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ist-gold) 25%, transparent), transparent 100%);
}
.launch-phone {
  position: relative; aspect-ratio: 360 / 744; overflow: hidden;
  border: 7px solid #0B0A0E; border-radius: 30px; background: #0B0A0E;
  outline: 1px solid rgba(201, 195, 222, 0.25);
  animation: launch-screen 300ms ease-in-out both;
}
.launch-phone img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes launch-screen { from { filter: brightness(0.15); } to { filter: none; } }
.launch-copy h1 { font-size: clamp(1.9rem, 6vw, 3.4rem); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 10px; }
.launch-copy .tagline { margin-bottom: 10px; }
.launch-line { color: var(--muted); margin: 0 auto; max-width: 520px; }
.launch-copy > * { animation: launch-words 300ms ease-in-out both; }
.launch-copy > :nth-child(1) { animation-delay: 200ms; }
.launch-copy > :nth-child(2) { animation-delay: 300ms; }
.launch-copy > :nth-child(3) { animation-delay: 400ms; }
@keyframes launch-words { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .launch-hero { padding: 40px 20px 36px; }
  .launch-phone { border-width: 5px; border-radius: 22px; }
}

/* ---------- Sticky phone tour (Geometria Sacra) ---------- */
.tour { margin: 48px 0 24px; }
.tour-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 40px; align-items: start; }
.tour-steps { list-style: none; padding: 0; margin: 0; }
.tour-step {
  min-height: 60vh; display: flex; flex-direction: column; justify-content: center;
  padding: 16px 0 16px 20px; margin: 0; border-left: 1px solid var(--line);
  transition: border-color 300ms ease-in-out;
}
.tour-step h3 { margin: 0 0 6px; color: var(--muted); transition: color 300ms ease-in-out; }
.tour-step p { margin: 0; }
.tour-step.is-active { border-left-color: var(--signal); }
.tour-step.is-active h3 { color: var(--heading); }
.tour-phone-col { position: sticky; top: 120px; }
.tour-phone {
  position: relative; width: 220px; aspect-ratio: 360 / 744;
  border: 7px solid #0B0A0E; border-radius: 32px; overflow: hidden; background: #0B0A0E;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}
.tour-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms ease-in-out; }
.tour-screen.is-active { opacity: 1; }
@media (max-width: 700px) {
  .tour-grid { grid-template-columns: minmax(0, 1fr) 104px; gap: 16px; }
  .tour-step { min-height: 52vh; padding-left: 12px; }
  .tour-phone-col { top: 128px; }
  .tour-phone { width: 104px; border-width: 4px; border-radius: 16px; }
}

/* ---------- FAQ search (Support) ---------- */
.faq-search { margin: 4px 0 10px; }
.faq-field { position: relative; max-width: 420px; }
.faq-input { padding-right: 44px; }
.faq-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-clear {
  position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.faq-clear[hidden] { display: none; }
.faq-clear:hover { color: var(--link); }
.faq-clear:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.faq-count { margin: 6px 0 0; font-size: 0.85rem; color: var(--faint); }
.faq-none { margin: 10px 0 0; color: var(--muted); }

/* ---------- Thank-you after sending (Support) ---------- */
.thanks-card {
  display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center;
  margin: 16px 0 0; padding: 18px 22px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0; transition: opacity 300ms ease-in-out;
}
.thanks-card[hidden] { display: none; }
.thanks-card.is-shown { opacity: 1; }
.thanks-card:focus { outline: none; }
.thanks-check { grid-row: 1 / span 2; color: var(--signal); }
.thanks-check path { stroke-dasharray: 36; stroke-dashoffset: 36; transition: stroke-dashoffset 300ms ease-in-out 150ms; }
.thanks-card.is-shown .thanks-check path { stroke-dashoffset: 0; }
.thanks-card h3 { margin: 0; }
.thanks-card p { margin: 0; color: var(--muted); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Reduce Motion: the gentle version ----------
   Fades and gold lines keep running; nothing rises, glides or turns. */
@media (prefers-reduced-motion: reduce) {
  html.motion-js :where(
    main section:not(.prose):not(.hero):not(.launch-hero),
    main .card,
    main .prose > :is(h1, h2, p, ul, details, img)
  ) { transform: none; }
  html.motion-js .story-h { transform: none; }
  .intro-mark, .intro-name, .intro-tagline { animation-name: intro-fade; }
  .launch-copy > * { animation-name: intro-fade; }
}
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }