/* Simbolet e Dardanisë (assets/js/symbols.js): the design system's symbols as large icons.
   Rules kept from the system: one colour from the source (dielli / oker), always on the dark plate "pllake" (the bride
   of Lubinjë on marble), 12 % clear space (6 % in the drawing, 6 % here), the hand-drawn line never redrawn.
   Motion: a light passes over the symbol, shaped by its meaning; the labyrinth opens from the centre (1.2 s), the sun
   pulses 2 %, only the spiral turns. Everything stands still with reduced motion. */

@property --sym-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --sym-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.sym { --sym-c: #d97c37; --sym-light: #ffe8c4; --sym-w: 112px; --sym-ease: cubic-bezier(.2, .7, .2, 1);
  display: flex; flex-direction: column; align-items: center; gap: 9px; width: var(--sym-w); flex: none; }
.sym[data-c="dielli"] { --sym-c: #f19826; }
.sym-sm { --sym-w: 72px; }
.sym-md { --sym-w: 112px; }
.sym-lg { --sym-w: 160px; }
.sym-xl { --sym-w: clamp(170px, 22vw, 280px); }
.sym-wide { --sym-w: min(100%, 560px); }

.sym-plate { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 14px;
  background: radial-gradient(120% 95% at 50% 24%, #3b3058 0%, #2e2544 55%, #251d38 100%);
  box-shadow: inset 0 0 0 1px rgba(241, 152, 38, .16); }
.sym[data-c="nusja"] .sym-plate { background: radial-gradient(120% 95% at 50% 24%, #fdfaf4 0%, #f5f0e8 60%, #ebe3d6 100%); box-shadow: inset 0 0 0 1px rgba(25, 19, 38, .14); }
.sym-wide .sym-plate { aspect-ratio: 1008 / 164; border-radius: 10px; }

.sym-art, .sym-lit { position: absolute; inset: 6%; -webkit-mask: var(--sym) center / contain no-repeat; mask: var(--sym) center / contain no-repeat; }
.sym-wide .sym-art, .sym-wide .sym-lit { inset: 0 2%; }
.sym-art { background: var(--sym-c); }
.sym-lit { background: var(--sym-light); opacity: 0; }
.sym-img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }

.sym-cap { font: 400 12.5px/1.35 var(--sans); color: var(--text-3); text-align: center; text-wrap: balance; }
.sym-cap b { display: block; font-weight: 600; color: var(--text-2); }
.sym-wide .sym-cap { text-align: left; align-self: flex-start; }
.sym-wide .sym-cap b { display: inline; }
.sym-wide .sym-cap b::after { content: ' ·'; font-weight: 400; }

/* ---------- the pieces some motions add ---------- */
.sym-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(241, 152, 38, .5), rgba(241, 152, 38, 0) 68%); opacity: 0; }
.sym[data-c="nusja"] .sym-glow { background: radial-gradient(circle, rgba(224, 96, 106, .28), rgba(224, 96, 106, 0) 68%); }
.sym-speed { position: absolute; left: 7%; height: 2.4%; min-height: 2px; border-radius: 2px; opacity: 0; transform-origin: 100% 50%;
  background: linear-gradient(90deg, rgba(241, 152, 38, 0), var(--sym-c)); }
.sym-speed:nth-of-type(1) { top: 33%; width: 20%; }
.sym-speed:nth-of-type(2) { top: 47%; left: 3%; width: 27%; }
.sym-speed:nth-of-type(3) { top: 61%; width: 17%; }
.sym-wave { position: absolute; left: 50%; top: 52%; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--sym-light); opacity: 0; transform: translate(-50%, -50%) scale(.3); }
.sym-ripples { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sym-ripples polygon { fill: none; stroke: var(--sym-light); stroke-width: 1.1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* ---------- the light, by shape ---------- */
.sym[data-l="ring"] .sym-lit {
  mask: var(--sym) center / contain no-repeat,
    radial-gradient(circle at var(--cx, 50%) var(--cy, 50%), transparent calc(var(--sym-p) - 11%), #000 var(--sym-p), transparent calc(var(--sym-p) + 11%));
  mask-composite: intersect; }
.sym[data-l="right"] .sym-lit {
  mask: var(--sym) center / contain no-repeat, linear-gradient(90deg, transparent calc(var(--sym-p) - 14%), #000 var(--sym-p), transparent calc(var(--sym-p) + 14%));
  mask-composite: intersect; }
.sym[data-l="up"] .sym-lit {
  mask: var(--sym) center / contain no-repeat, linear-gradient(0deg, transparent calc(var(--sym-p) - 16%), #000 var(--sym-p), transparent calc(var(--sym-p) + 16%));
  mask-composite: intersect; }
.sym[data-l="diag"] .sym-lit {
  mask: var(--sym) center / contain no-repeat, linear-gradient(35deg, transparent calc(var(--sym-p) - 16%), #000 var(--sym-p), transparent calc(var(--sym-p) + 16%));
  mask-composite: intersect; }
/* the double spiral: a wedge of light turns in each disc, one clockwise, one against */
.sym[data-l="twin"] .sym-lit {
  mask: var(--sym) center / contain no-repeat,
    conic-gradient(from calc(var(--sym-a) - 45deg) at 52% 50%, transparent 0deg, #000 45deg, transparent 90deg) left / 50% 100% no-repeat,
    conic-gradient(from calc(-45deg - var(--sym-a)) at 46% 50%, transparent 0deg, #000 45deg, transparent 90deg) right / 50% 100% no-repeat;
  mask-composite: intersect, add; }

/* ---------- before its first entrance ---------- */
.sym.is-wait .sym-art, .sym.is-wait .sym-img { opacity: 0; }

/* ---------- entrances (.is-in) and hover or focus (.is-on) ---------- */
/* Labirinti i Smirës: opens from the centre outward, then the light runs out through its walls */
.sym.is-in[data-m="iris"] .sym-art { animation: sym-iris 1.2s var(--sym-ease) both; }
.sym.is-in[data-m="iris"] .sym-lit { animation: sym-ring 1.7s .55s ease-out both; }
.sym.is-on[data-m="iris"] .sym-lit { animation: sym-ring 1.7s ease-out both; }

/* Dielli i Sharenicës: rises and warms; on hover it pulses 2 % */
.sym.is-in[data-m="sun"] .sym-art { animation: sym-rise .9s var(--sym-ease) both; }
.sym.is-in[data-m="sun"] .sym-lit { animation: sym-ring 1.6s .35s ease-out both; }
.sym.is-in[data-m="sun"] .sym-glow, .sym.is-on[data-m="sun"] .sym-glow { animation: sym-glow 1.9s ease-out both; }
.sym.is-on[data-m="sun"] .sym-art { animation: sym-pulse 1.6s ease-in-out both; }
.sym.is-on[data-m="sun"] .sym-lit { animation: sym-ring 1.6s ease-out both; }

/* Spiralja: unwinds into view; on hover it turns once, slowly (the only symbol that turns) */
.sym.is-in[data-m="spiral"] .sym-art {
  mask: var(--sym) center / contain no-repeat, conic-gradient(from -90deg, #000 var(--sym-a), transparent 0);
  mask-composite: intersect; animation: sym-cone 1.6s var(--sym-ease) both; }
.sym.is-on[data-m="spiral"] .sym-art { animation: sym-turn 3.4s cubic-bezier(.45, 0, .25, 1) both; }

/* Spiralja e dyfishtë: the two discs open in opposite directions; light turns through both */
.sym.is-in[data-m="twin"] .sym-art {
  mask: var(--sym) center / contain no-repeat,
    conic-gradient(from 90deg at 52% 50%, #000 var(--sym-a), transparent 0) left / 50% 100% no-repeat,
    conic-gradient(from 90deg at 46% 50%, transparent calc(360deg - var(--sym-a)), #000 0) right / 50% 100% no-repeat;
  mask-composite: intersect, add; animation: sym-cone 1.5s var(--sym-ease) both; }
.sym.is-in[data-m="twin"] .sym-lit { animation: sym-wedge 1.9s .8s ease-in-out both; }
.sym.is-on[data-m="twin"] .sym-lit { animation: sym-wedge 1.9s ease-in-out both; }

/* Vrapuesja e Prizrenit: runs in from the left; on hover she leans into her stride */
.sym.is-in[data-m="run"] .sym-art { animation: sym-run-in 1s var(--sym-ease) both; }
.sym.is-on[data-m="run"] .sym-art { animation: sym-lean 1.1s var(--sym-ease) both; }
.sym.is-in[data-m="run"] .sym-lit { animation: sym-band 1.4s .5s ease-in-out both; }
.sym.is-on[data-m="run"] .sym-lit { animation: sym-band 1.3s ease-in-out both; }
.sym.is-in[data-m="run"] .sym-speed, .sym.is-on[data-m="run"] .sym-speed { animation: sym-speed 1.1s ease-out both; }
.sym[data-m="run"] .sym-speed:nth-of-type(2) { animation-delay: .08s; }
.sym[data-m="run"] .sym-speed:nth-of-type(3) { animation-delay: .16s; }

/* Simboli i pjellorisë: grows from the ground up; on hover it breathes and the light rises */
.sym.is-in[data-m="grow"] .sym-art { animation: sym-up 1.3s var(--sym-ease) both; }
.sym.is-on[data-m="grow"] .sym-art { animation: sym-breathe 1.8s ease-in-out both; }
.sym.is-in[data-m="grow"] .sym-lit { animation: sym-band 1.6s .6s ease-in-out both; }
.sym.is-on[data-m="grow"] .sym-lit { animation: sym-band 1.6s ease-in-out both; }

/* Okarina e Runikut: its sound spreads in soft rings */
.sym.is-in[data-m="sound"] .sym-art { animation: sym-rise .9s var(--sym-ease) both; }
.sym.is-in[data-m="sound"] .sym-wave, .sym.is-on[data-m="sound"] .sym-wave { animation: sym-wave 2.1s ease-out both; }
.sym[data-m="sound"] .sym-wave:nth-of-type(2) { animation-delay: .45s; }
.sym[data-m="sound"] .sym-wave:nth-of-type(3) { animation-delay: .9s; }

/* Pagëzimorja e Ulpianës: ripples in eight sides, like water in the font */
.sym.is-in[data-m="ripple"] .sym-art { animation: sym-rise 1s var(--sym-ease) both; }
.sym.is-in[data-m="ripple"] .sym-ripples polygon, .sym.is-on[data-m="ripple"] .sym-ripples polygon { animation: sym-ripple 2.4s cubic-bezier(.2, .6, .3, 1) both; }
.sym[data-m="ripple"] .sym-ripples polygon:nth-child(2) { animation-delay: .5s; }
.sym[data-m="ripple"] .sym-ripples polygon:nth-child(3) { animation-delay: 1s; }

/* Gjarpri: the guardian uncoils; the light runs up its body to the head */
.sym.is-in[data-m="wake"] .sym-art { animation: sym-iris 1.3s var(--sym-ease) both; }
.sym.is-in[data-m="wake"] .sym-lit { animation: sym-band 1.6s .6s ease-in-out both; }
.sym.is-on[data-m="wake"] .sym-lit { animation: sym-band 1.6s ease-in-out both; }

/* Nusja e Lubinjës: appears, and warms on hover */
.sym.is-in[data-m="glow"] .sym-img { animation: sym-rise 1s var(--sym-ease) both; }
.sym.is-in[data-m="glow"] .sym-glow, .sym.is-on[data-m="glow"] .sym-glow { animation: sym-glow 2s ease-out both; }

/* Shota: the tune is written from left to right, then the light plays it */
.sym.is-in[data-m="melody"] .sym-art { animation: sym-write 1.6s var(--sym-ease) both; }
.sym.is-in[data-m="melody"] .sym-lit { animation: sym-band 2.6s .9s linear both; }
.sym.is-on[data-m="melody"] .sym-lit { animation: sym-band 2.6s linear both; }

@keyframes sym-iris { from { clip-path: circle(0% at var(--cx, 50%) var(--cy, 50%)); } to { clip-path: circle(76% at var(--cx, 50%) var(--cy, 50%)); } }
@keyframes sym-rise { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes sym-up { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sym-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes sym-run-in { from { opacity: 0; transform: translateX(-9%); clip-path: inset(0 100% 0 0); } 60% { opacity: 1; } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes sym-lean { 0%, 100% { transform: none; } 35% { transform: translateX(3.5%) skewX(-4deg); } 70% { transform: translateX(-1%); } }
@keyframes sym-cone { from { --sym-a: 0deg; } to { --sym-a: 360deg; } }
@keyframes sym-turn { from { transform: none; } to { transform: rotate(360deg); } }
@keyframes sym-pulse { 0%, 100% { transform: none; } 45% { transform: scale(1.02); } }
@keyframes sym-breathe { 0%, 100% { transform: none; } 45% { transform: scale(1.035); } }
@keyframes sym-ring { 0% { --sym-p: 0%; opacity: 0; } 12% { opacity: 1; } 80% { opacity: .9; } 100% { --sym-p: 118%; opacity: 0; } }
@keyframes sym-band { 0% { --sym-p: -18%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { --sym-p: 118%; opacity: 0; } }
@keyframes sym-wedge { 0% { --sym-a: 0deg; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { --sym-a: 360deg; opacity: 0; } }
@keyframes sym-glow { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes sym-speed { 0% { opacity: 0; transform: scaleX(0); } 35% { opacity: .9; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1) translateX(-22%); } }
@keyframes sym-wave { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 15% { opacity: .5; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3); } }
@keyframes sym-ripple { 0% { opacity: 0; transform: scale(.12); } 15% { opacity: .8; } 100% { opacity: 0; transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .sym *, .sym *::before { animation: none !important; }
  .sym.is-wait .sym-art, .sym.is-wait .sym-img { opacity: 1; }
}

/* ---------- where the symbols stand ---------- */
/* Home: the four doors stand side by side, each led by its symbol on its plate (phones: a list, below). */
.index-row .sym-cap { font-size: 12px; }
@media (min-width: 961px) {
  /* One row per part (symbol, name, words, count), shared by the four doors so their names line up. */
  .index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; border-bottom: 1px solid var(--line-2); }
  .index-row { display: grid; grid-row: span 4; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px 0; padding: 32px clamp(18px, 2.2vw, 34px) 34px; border-bottom: 0; border-left: 1px solid var(--line); }
  .index-row:first-child { padding-left: 0; border-left: 0; }
  .index-row .sym { --sym-w: 128px; margin-bottom: 10px; }
  .index-row p { font-size: 18px; }
  .index-row .index-count { margin-top: auto; padding-top: 10px; justify-content: flex-start; }
}
/* Home: "Si e dimë" carries the double spiral: what we know and what we don't know yet */
.section-head:has(> .sym) { flex-wrap: nowrap; align-items: center; }
.section-head:has(> .sym) h2 { flex: 1 1 auto; }
.section-head .sym { margin-left: auto; }
/* Page heads with one big symbol */
.sym-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center; }
/* Footer: the shota tune as a frieze */
.footer-frieze { display: flex; margin: 0 0 34px; }
/* 404 */
.lost { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 40px; align-items: center; }
.lost-lead { max-width: 46ch; margin: 6px 0 0; font: 400 19px/1.6 var(--serif); color: var(--text-2); }
.lost-doors { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 24px; font: 500 20px var(--display); }
.lost-doors a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 5px; }
.lost-doors a:hover { color: var(--gold); text-decoration-color: currentColor; }
/* About: the catalogue of the symbols */
.sym-catalogue { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 26px 28px; }
.sym-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.sym-card .sym { --sym-w: 96px; }
.sym-card h3 { font-size: 21px; margin: 2px 0 4px; }
.sym-card p { margin: 0 0 5px; font-size: 17px; line-height: 1.45; }
.sym-card .sym-source, .sym-card .sym-note { font: 400 13px/1.45 var(--sans); color: var(--text-2); }
.sym-card .sym-note { color: var(--text-3); font-style: italic; }
.sym-card-wide { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
.sym-credit { font-size: 14px; color: var(--text-2); }
.sym-card-wide .sym { --sym-w: min(100%, 520px); }

@media (max-width: 960px) {
  .index-row { grid-template-columns: 96px minmax(0, 1fr); gap: 6px 22px; align-items: start; }
  .index-row .sym { --sym-w: 96px; grid-row: 1 / span 3; }
  .index-row > :not(.sym) { grid-column: 2; }
}
@media (max-width: 640px) {
  .sym-head { grid-template-columns: minmax(0, 1fr); }
  .sym-head .sym { --sym-w: 132px; justify-self: start; }
  .section-head:has(> .sym) { flex-wrap: wrap; align-items: flex-end; }
  .section-head .sym { --sym-w: 96px; margin-left: 0; }
  .lost { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .index-row { grid-template-columns: 76px minmax(0, 1fr); gap: 4px 16px; }
  .index-row .sym { --sym-w: 76px; }
  .index-row .sym-cap span { display: none; }
}

/* Footer: Shota on the page itself (assets/js/shota.js): no paper, the stave and the notes take the theme's colours
   (gold by night, oker by day); the couple keeps its costume colours. A click plays the tune and they dance. */
.footer-frieze .shota-sheet { flex: 1 1 auto; }
.shota-sheet { --sh-text: var(--text); --sh-oker: rgba(216, 179, 79, .55); --sh-note: #e0a85a; --sh-glow: #ffd27a; --sh-shadow: rgba(0, 0, 0, .38);
  --sh-ink: #2a231d; --sh-cloth: #fdfaf3; --sh-red: #b3202f; --sh-velvet: #7d1626; --sh-black: #1f1b18; --sh-skin: #deae88; --sh-thread: #c9a043;
  position: relative; cursor: pointer; border-radius: 10px; background: transparent; color: var(--sh-text);
  padding: clamp(10px, 2vw, 22px) clamp(4px, 1.4vw, 18px) clamp(6px, 1.2vw, 14px); transition: background .3s; }
[data-theme="light"] .shota-sheet { --sh-oker: #d97c37; --sh-note: #b4602a; --sh-glow: #e8a93a; --sh-shadow: rgba(42, 35, 29, .15); }
.shota-sheet:hover { background: var(--gold-soft); }
.shota-hint:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.shota-head { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 6px 16px; padding-inline: 6px; }
.shota-head p { margin: 0; }
.shota-title { font: italic 500 clamp(30px, 4.2vw, 46px)/1 var(--display); text-align: center; }
.shota-tempo { font: 400 16px/1.3 var(--serif); display: grid; gap: 6px; justify-items: start; }
.shota-q { font-family: 'Noto Music', 'Segoe UI Symbol', serif; font-style: normal; }
.shota-hint { display: inline-flex; align-items: center; gap: 7px; font: 600 12px/1 var(--sans); letter-spacing: .02em; color: var(--sh-note);
  border: 1px solid color-mix(in srgb, var(--sh-note) 45%, transparent); border-radius: 999px; padding: 6px 11px 6px 9px; transition: background .2s, color .2s; }
.shota-hint svg { width: 11px; height: 11px; fill: currentColor; }
[data-theme="light"] .shota-hint { color: #8a4424; }
.shota-sheet:hover .shota-hint, .shota-sheet.is-playing .shota-hint { background: var(--sh-note); color: var(--bg); }
.shota-origin { justify-self: end; text-align: right; font: 400 15px/1.3 var(--serif); }
.shota-origin small { display: block; font-size: 13px; opacity: .7; font-style: italic; }
.shota-score { position: relative; display: block; width: 100%; height: 260px; margin-top: 4px; }
@media (max-width: 600px) {
  .shota-head { grid-template-columns: 1fr 1fr; }
  .shota-title { grid-column: 1 / -1; order: -1; text-align: left; }
}