/* ===================================
   NAIYO — SHARED STYLES (Day 1 set)
   =================================== */

/* Theme tokens */
:root{
  --ink:#f6f1ff; 
  --muted:#e8d7ff; 
  --glow:#b0f5ff; 
  --edge:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.045); 
  --card2:rgba(255,255,255,.06);
  --halo:rgba(176,245,255,.25); 
  --bg:#0a0711;
  --space-1:.5rem; 
  --space-2:.9rem; 
  --space-3:1.4rem; 
  --space-4:2rem; 
  --space-5:3.2rem;
}

/* Base */
*{ box-sizing:border-box }
body{
  margin:0; 
  font:400 16px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); 
  background: radial-gradient(1200px 800px at 20% 15%, #1a1428 0%, #0a0711 55%), #0a0711;
}
main .wrap{ max-width:900px; margin:0 auto; padding:20px 16px 64px }
.card{ background:var(--card); border:1px solid var(--edge); border-radius:18px; padding:1.1rem 1.3rem; box-shadow:0 10px 26px rgba(0,0,0,.35); margin: var(--space-4) 0; }

/* Hero */
.hero{ text-align:center; padding: calc(var(--space-4)) 0 var(--space-2) }
.hero h1{ font-size: clamp(1.6rem, 2.6vw, 2.4rem); margin:.2rem 0 .4rem; opacity:0; animation: fadeUp 1.2s ease-in forwards }
.hero .meta{ color:var(--muted); opacity:0; animation: fadeUp 1s ease-in forwards; animation-delay:.05s }

/* Corridor top-nav */
.topnav{ position:sticky; top:0; z-index:60; background:linear-gradient(180deg,rgba(10,7,17,.94),rgba(10,7,17,.78)); backdrop-filter:saturate(120%) blur(6px); border-bottom:1px solid rgba(255,255,255,.12) }
.topnav__wrap{ max-width:1000px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.topnav a,.topnav button{ appearance:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#b0f5ff; text-decoration:none; border-radius:999px; padding:.4rem .7rem; display:inline-flex; align-items:center; gap:.45rem; font-size:.95rem }
.topnav a:hover,.topnav a:focus-visible{ box-shadow:0 0 0 2px rgba(176,245,255,.25) inset }
.topnav__spacer{ flex:1 1 auto }
.topnav__phase{ display:flex; flex-wrap:wrap; gap:.4rem }
.topnav__current{ color:#fff; box-shadow:0 0 0 2px rgba(176,245,255,.35) inset }
.topnav__sep{ opacity:.35; margin:0 .25rem }
@media (max-width:720px){
  .topnav__label{ position:absolute; clip:rect(0,0,0,0); padding:0; margin:-1px; border:0; height:1px; width:1px; overflow:hidden }
  .topnav__phase a{ padding:.35rem .55rem }
}

/* Footer (generic) */
footer{ padding:16px; border-top:1px dashed var(--edge); text-align:center; font-size:.9rem; color:var(--muted) }
footer a{ color:var(--glow); text-decoration:none }

/* Phase-trail whisper footer */
.phase-trail{ margin-top:3rem; text-align:right; font-size:.9rem; opacity:0; animation: fadeInWhisper 1.2s ease-in forwards }
.phase-trail a{ color: var(--link-color, #8cf); text-decoration:none; font-style:italic }
.phase-trail a:hover{ text-decoration:underline; opacity:1 }

/* Animations */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:translateY(0) } }
@keyframes fadeInWhisper{ from{ opacity:0; transform:translateY(.5rem) } to{ opacity:.7; transform:translateY(0) } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero h1, .hero .meta, .phase-trail{ animation:none !important; opacity:1; transform:none }
}


/* ===================================
   CONTENT SECTIONS
   =================================== */
.section { margin: var(--space-5) 0 }
.section .tiles{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: .6rem;
}
.tile{
  background: var(--card);
  border:1px solid var(--edge);
  border-radius:18px;
  padding:1rem 1.1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}
.tile h3{ margin:.2rem 0 .4rem }
.tile p{ margin:.35rem 0 .7rem }
.tile p em{ color: var(--muted) }
.tile a{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border:1px solid var(--edge);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#b0f5ff;
  text-decoration:none;
}
.tile a:hover,
.tile a:focus-visible{
  box-shadow:0 0 0 2px rgba(176,245,255,.25) inset;
}

/* Helper whisper note */
.helper{ color: var(--muted); }
.helper .card{ color: inherit }

/* Simple responsive pills used in header (rnav) */
.nav-pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .6rem;
  border:1px solid var(--edge);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#b0f5ff;
  text-decoration:none;
}
.nav-pill:hover,
.nav-pill:focus-visible{ box-shadow:0 0 0 2px rgba(176,245,255,.25) inset }

.rnav .wrap{ max-width:1000px; margin:0 auto; padding:8px 16px }
.rnav__links{ display:flex; gap:.5rem; flex-wrap:wrap }
.rnav__links--mobile{ display:none }
@media (max-width:720px){
  .rnav__links--desktop{ display:none }
  .rnav__links--mobile{ display:flex }
}

/* Pattern motif lane */
.strip{
  position:relative;
  display:grid; grid-template-columns: repeat(16, 1fr); gap:6px;
  padding:10px; border-radius:14px;
  background:var(--card2); border:1px solid var(--edge);
  overflow:hidden;
}
.strip::after{
  content:""; position:absolute; inset:-40% -20%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(176,245,255,.08) 85%, transparent 100%);
  animation: scan 12s linear infinite;
  pointer-events:none;
}
@keyframes scan { to { transform: rotate(360deg); } }

.dot{
  aspect-ratio:1/1; border-radius:10px; border:1px solid var(--edge);
  background: radial-gradient(20px 20px at 50% 40%, rgba(255,255,255,.12), rgba(255,255,255,.02));
  position:relative; overflow:hidden;
}
.dot.on::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 120% at 50% 50%, rgba(176,245,255,.28), transparent 60%);
  filter: blur(0.2px);
  animation: breathe 3.8s ease-in-out infinite;
}
@keyframes breathe {
  0%,100% { opacity:.65; transform: scale(1.00); }
  50%     { opacity:.95; transform: scale(1.03); }
}
.notes{ display:grid; gap:.5rem; margin-top:.8rem; color:var(--muted); font-size:.95rem; }
.notes code{ color:var(--glow); }

@media (prefers-reduced-motion: reduce){
  .strip::after, .dot.on::after{ animation:none }
}
/* Language — lever pills */
.levers{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.8rem }
.lever{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .6rem; border:1px solid var(--edge); border-radius:999px;
  background:var(--card2); color:var(--glow); text-decoration:none; cursor:default;
  transform: perspective(600px) rotateX(0) rotateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}
.lever:hover,.lever:focus-visible{
  box-shadow:0 0 0 2px var(--halo) inset;
  transform: perspective(600px) rotateX(4deg) rotateY(-2deg);
}
blockquote{ margin:1rem 0; padding:.8rem 1rem; border-left:3px solid rgba(232,215,255,.28); color:var(--muted) }
small.note{ color:var(--muted) }
@media (prefers-reduced-motion: reduce){
  .lever{ transition:none; transform:none }
}
/* Reflection — mirror panel */
.mirror{
  position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--edge);
  background:
    radial-gradient(140% 100% at 0% 0%, rgba(176,245,255,.12), transparent 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(232,215,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  isolation:isolate; padding:1.2rem 1.3rem;
}
.mirror::before{
  content:""; position:absolute; inset:-40%; z-index:-1;
  background: conic-gradient(from 30deg, rgba(176,245,255,.28), transparent 35%, rgba(232,215,255,.22), transparent 70%, rgba(176,245,255,.28));
  filter: blur(26px); opacity:.45; transform: rotate(0deg) scale(1.05);
  animation: slowturn 14s linear infinite;
}
@keyframes slowturn { to { transform: rotate(360deg) scale(1.05); } }
.mirror h3{ margin:.2rem 0 .5rem; font-size:1.05rem; color:var(--muted) }
.mirror p{ margin:.45rem 0 }
.rule{ height:1px; background:linear-gradient(90deg, transparent, var(--edge), transparent); margin:.7rem 0 1rem }
@media (prefers-reduced-motion: reduce){ .mirror::before{ animation:none } }
/* Agency — intent grid & buttons */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:.9rem;
}
.choice{
  padding:.9rem 1rem;
  border:1px solid var(--edge);
  border-radius:14px;
  background:var(--card2);
  display:flex; gap:.6rem; align-items:flex-start; position:relative;
}
.choice strong{ color:var(--glow) }
.choice:focus-within, .choice:hover{ box-shadow:0 0 0 2px var(--halo) inset; }
.choice input{ margin-top:.15rem; transform: translateY(2px); }
.choice label{ flex:1; cursor:pointer }

.commit{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem }
.btn{
  appearance:none; border:1px solid var(--edge); background:rgba(255,255,255,.04);
  color:var(--glow); padding:.5rem .8rem; border-radius:999px; cursor:pointer;
  text-decoration:none; display:inline-flex; gap:.5rem; align-items:center;
  transition:box-shadow .18s ease, transform .18s ease;
}
.btn:hover, .btn:focus-visible{ box-shadow:0 0 0 2px var(--halo) inset; transform: translateY(-1px) }
@media (prefers-reduced-motion: reduce){ .btn{ transition:none; transform:none } }

/* Signature swirl aura (shared look with Reflection) */
.aura{
  position:relative; isolation:isolate; overflow:hidden; border-radius:20px;
}
.aura::before{
  content:""; position:absolute; inset:-40%; z-index:-1;
  background: conic-gradient(
    from 20deg,
    rgba(176,245,255,.28),
    transparent 35%,
    rgba(232,215,255,.20),
    transparent 70%,
    rgba(176,245,255,.28)
  );
  filter: blur(26px);
  opacity:.42;
  transform: rotate(0deg) scale(1.05);
  animation: slowturn 16s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .aura::before{ animation:none } }

/* ——— Hall / Codex niceties ——— */
.hall-codex details.codex > summary { cursor: pointer; user-select: none; }
.hall-codex .codex-links { display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 0; padding:0; list-style:none; }
.hall-codex .nav-pill {
  display:inline-block; padding:.4rem .7rem; border-radius:999px;
  background: rgba(173,216,230,.12); border:1px solid rgba(173,216,230,.25);
  text-decoration:none; font-weight:600; letter-spacing:.2px;
}
.hall-codex .nav-pill:hover { background:rgba(173,216,230,.18); }

/* Offset anchors so headings aren’t hidden under sticky/viewport edges */
.anchor { position: relative; top: -96px; visibility: hidden; }

/* Cards inside details */
details.arc { margin:.6rem 0; border-radius:14px; overflow:hidden; }
details.arc > summary {
  list-style:none; cursor:pointer; padding:.9rem 1rem;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
details.arc[open] > summary { border-bottom-left-radius:0; border-bottom-right-radius:0; }
details.arc > .arc-links {
  border:1px solid rgba(255,255,255,.08); border-top:none;
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
}

/* Smooth show of “Glyph Phrase” */
.glyph-phrase { display:none; margin:.75rem 0 0; font-style:italic; opacity:.9; }
#glyph-phrase.anchor:target + .glyph-phrase { display:block; }

/* ——— Continuity Glyph (hybrid) ——— */
.card.glyph-card { position:relative; }

/* ——— Watermark: Weave Mark on a card ——— */
/* ——— Watermark: Weave Mark on a card ——— */
.card.weavemark-watermark {
  position: relative;
  overflow: hidden;
}
/* — Continuity Glyph watermark — */
.card.weavemark-watermark { 
  position: relative;
  overflow: hidden;
}

.card.weavemark-watermark::before {
  content: "";
  position: absolute;
  inset: -1.25rem;                          /* bleed a bit beyond rounded corners */
  background: url("/images/WeaveMark.png")  /* root-relative path is correct */
              center 14% / clamp(320px, 46vw, 560px) no-repeat;
  opacity: .16;                             /* was .09 — too subtle to see */
  filter: drop-shadow(0 0 22px rgba(123,192,255,.25));
  pointer-events: none;
  z-index: 0;                               /* under content, above card bg */
}

/* keep the card’s content above the watermark */
.card.weavemark-watermark > * {
  position: relative;
  z-index: 1;
}





.glyph__badge {
  width:120px; height:120px; margin:.4rem 0 0;
  background: url("/images/WeaveMark.png") center/contain no-repeat;
  opacity:.35; filter: drop-shadow(0 0 10px rgba(86,200,255,.25));
}
.glyph--hybrid .glyph__badge { margin-bottom:.25rem; }
/* subtle watermark behind the text */
.glyph--hybrid {
  --wm: url("/images/WeaveMark.png");
  background-image: radial-gradient(transparent 40%, rgba(86,200,255,.06) 41%),
                    linear-gradient(transparent, transparent),
                    var(--wm);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center 5.8rem, center, center 7.5rem;
  background-size: 540px, cover, 360px;
  background-blend-mode: normal, normal, soft-light;
}
@media (max-width: 720px){
  .glyph--hybrid { background-size: 380px, cover, 260px; }
}

/* Nice smooth scroll everywhere */
html { scroll-behavior: smooth; }

/* --- WeaveMark emblem (inline image) --- */
.weavemark {
  display: block;
  margin: 1rem auto;
  max-width: 120px;
  opacity: 0.9;
}

/* --- WeaveMark watermark (background behind text) --- */
.weavemark-watermark {
  position: relative;
  overflow: hidden;
}

.weavemark-watermark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/WeaveMark.png") no-repeat center;
  background-size: 200px auto; /* adjust size */
  opacity: 0.07;               /* subtle fade */
  pointer-events: none;        /* clicks pass through */
}


/* --- WeaveMark watermark: use ::after to avoid clashing with page auras --- */
.card.weavemark-watermark { position: relative; overflow: hidden; }

.card.weavemark-watermark::after {
  content: "";
  position: absolute;
  inset: -1.25rem;
  background: url("/images/WeaveMark.png") center 14% / clamp(260px, 45vw, 540px) no-repeat;
  opacity: .09;
  filter: drop-shadow(0 0 22px rgba(123,192,255,.25));
  pointer-events: none;
  z-index: 0;                 /* sit behind the card’s content */
}

/* keep the text above the watermark */
.card.weavemark-watermark > * { position: relative; z-index: 1; }

.card.weavemark-watermark::after {
  background-position: center 10%;
  opacity: .07;
}




/* Vignette styling */
.vignette {
  max-width: 600px;
  margin: 1.5rem auto;
  padding: 1rem 1.25rem;
  border-left: 3px solid #a28bff; /* subtle accent */
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.vignette h3 {
  margin-top: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #cbb8ff;
}

.vignette blockquote {
  margin: 0.75rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid #6c57d6;
  color: #ddd;
  font-style: italic;
}

.vignette em {
  display: block;
  margin: 0.5rem 0;
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: #c8f2ff;
}