/* Motion is progressive enhancement; content stays visible without this script. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --read-progress: 0; }
.topbar::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--wine); transform: scaleX(var(--read-progress)); transform-origin: left; pointer-events: none; }
.links a { position: relative; }
.links a::after { content: ""; position: absolute; inset: auto 0 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.links a[aria-current="location"] { color: var(--maroon); }
.links a[aria-current="location"]::after, .links a:hover::after { transform: scaleX(1); }
.btn { position: relative; overflow: hidden; transition: background .25s, color .25s, border-color .25s, box-shadow .4s, translate .4s var(--ease-out); }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, #fff2 45%, transparent 65%); transform: translateX(-150%); pointer-events: none; }
html[data-motion="on"] .btn:hover::after { transform: translateX(150%); transition: transform .9s var(--ease-out); }
html[data-motion="on"] .btn:hover:not(:disabled) { translate: 0 -2px; box-shadow: 0 8px 20px #422d2a16; }
.motion-toggle { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--maroon); cursor: pointer; }
.motion-toggle[aria-pressed="true"] { border-color: var(--clay); }
.motion-toggle > [aria-hidden] { font: 400 18px/1 serif; }
.motion-toggle[aria-pressed="false"] > [aria-hidden] { opacity: .4; }
body.sealed .motion-toggle, body.sealed .back-top { visibility: hidden; }
.back-top { position: fixed; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 42; width: 46px; height: 46px; border-radius: 50%; background: var(--paper); color: var(--maroon); box-shadow: 0 3px 20px #422d2a12; }
.back-top svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; }
.back-top .progress-track { stroke: var(--line); }
.back-top .progress-value { stroke-dasharray: 132; stroke-dashoffset: calc(132 * (1 - var(--read-progress))); transform: rotate(-90deg); transform-origin: center; }

/* A staged opening, with room for Thai marks above and below the line. */
html[data-motion="on"] .env-card { animation: card-arrive 1.1s var(--ease-out) both; }
html[data-motion="on"] .env-seal { animation: seal-arrive 1.2s .15s var(--ease-out) both; }
html[data-motion="on"] .envelope.opening .env-card { animation: card-depart .85s var(--ease-out) both; }
@keyframes card-arrive { from { opacity: 0; transform: translateY(30px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes seal-arrive { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes card-depart { to { opacity: 0; transform: perspective(1000px) translateY(-50px) rotateX(8deg) scale(1.04); } }
html[data-motion="on"] .hero.is-entering .hero-text > * { animation: copy-arrive 1.1s var(--entrance-delay, 0ms) var(--ease-out) both; }
html[data-motion="on"] .hero.is-entering .hero-photo { animation: photo-arrive 1.6s var(--ease-out) both; }
@keyframes copy-arrive { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes photo-arrive { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(ellipse at var(--pointer-x, 50%) var(--pointer-y, 50%), #fff2, transparent 55%); opacity: 0; transition: opacity .6s; pointer-events: none; }
html[data-motion="on"] .hero-photo:hover::before { opacity: 1; }
html[data-motion="on"] .hero-photo > img { transform: translate3d(0, var(--photo-shift, 0px), 0) scale(1.07); }
html[data-motion="on"] .hero-photo figcaption { transform: translateY(var(--caption-shift, 0px)); }

/* One-shot reveals; headings are never split into individual Thai glyphs. */
html[data-motion="on"] .motion-reveal { opacity: 0; transform: translateY(32px); transition: opacity .95s var(--ease-out), transform 1.15s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html[data-motion="on"] .motion-reveal.is-visible { opacity: 1; transform: none; }
html[data-motion="on"] .motion-reveal:focus-within { opacity: 1; transform: none; transition-delay: 0s; }
html[data-motion="on"] .split-photo.is-visible img { animation: photo-settle 1.5s var(--ease-out) both; }
@keyframes photo-settle { from { clip-path: inset(6% 6% 6% 6%); } to { clip-path: inset(0); } }
html[data-motion="on"] .timeline li { transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
html[data-motion="on"] .swatch { transition: transform .5s var(--ease-out); }
html[data-motion="on"] .swatches li:hover .swatch { transform: translateY(-5px) scale(1.08); }
html[data-motion="on"] .symbol-picker label { transition: transform .4s var(--ease-out), background .3s, border-color .3s; }
html[data-motion="on"] .symbol-picker label:has(input:checked) b { animation: symbol-select .5s var(--ease-out); }
@keyframes symbol-select { 50% { transform: translateY(-5px) scale(1.15) rotate(-8deg); } }

/* Album controls are visible on touch, revealed on hover with a fine pointer. */
.gallery-open { position: absolute; right: 14px; bottom: 14px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #fff7; border-radius: 50%; background: #422d2a4d; color: white; font: 400 23px/1 var(--serif-en); pointer-events: none; }
.gallery-index { position: absolute; left: 14px; bottom: 20px; color: white; text-shadow: 0 1px 6px #0009; font: 400 12px/1 var(--sans); letter-spacing: .12em; pointer-events: none; }
html[data-motion="on"] .gallery .reveal { transform: translateY(32px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
html[data-motion="on"] .gallery .reveal.in { transform: none; }
.gallery button:focus-visible { outline-offset: -5px; outline-color: var(--paper); z-index: 1; }
.gallery button:focus-visible.reveal { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .gallery-open, .gallery-index { opacity: 0; transition: opacity .4s, translate .5s var(--ease-out); translate: 0 8px; }
  .gallery button:hover .gallery-open, .gallery button:focus-visible .gallery-open, .gallery button:hover .gallery-index, .gallery button:focus-visible .gallery-index { opacity: 1; translate: 0 0; }
}

/* Keep navigation steady while the photograph transitions. */
.lightbox { grid-template-columns: 52px minmax(0, 1fr) 52px; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; padding: 64px 28px 24px; background: #201512f5; }
.lb-stage { grid-column: 2; grid-row: 1; width: 100%; height: 100%; min-height: 0; display: grid; place-items: center; position: relative; }
.lightbox.is-loading .lb-stage::before { content: ""; position: absolute; width: 24px; height: 24px; border: 1px solid var(--rose); border-top-color: transparent; border-radius: 50%; animation: album-loading .8s linear infinite; }
@keyframes album-loading { to { transform: rotate(360deg); } }
.lb-load-error { position: absolute; padding: 20px; color: var(--beige); font: 400 14px/1.7 var(--sans); text-align: center; }
.lightbox .lb-stage img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - 180px); object-fit: contain; box-shadow: 0 16px 70px #0005; }
.lightbox .lb-prev, .lightbox .lb-next { position: static; transform: none; align-self: center; grid-row: 1; width: 48px; min-height: 48px; padding: 0; border: 1px solid #e0cfc24d; border-radius: 50%; font-size: 32px; transition: background .25s; }
.lightbox .lb-prev { grid-column: 1; }
.lightbox .lb-next { grid-column: 3; }
.lightbox button:hover { background: #e0cfc21a; }
.lightbox .lb-close { width: 44px; height: 44px; top: 12px; right: 18px; font-size: 32px; }
.lightbox button:focus-visible { outline-color: var(--beige); }
.lb-details { grid-column: 1 / -1; grid-row: 2; color: var(--beige); text-align: center; }
.lb-chapter { font: 400 24px/1.5 var(--serif-th); }
html[data-lang="en"] .lb-chapter { font: italic 400 24px/1.2 var(--serif-en); }
.lb-count { margin-top: 6px; font: 400 12px/1.5 var(--sans); letter-spacing: .14em; }
.lb-help { font: 300 11px/1.5 var(--sans); color: var(--rose); margin-top: 6px; }
html[data-motion="on"] .lightbox:not([hidden]) { animation: album-open .4s var(--ease-out); }
@keyframes album-open { from { opacity: 0; } to { opacity: 1; } }
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .reveal { opacity: 1; transform: none; }
html[data-motion="off"] .gallery button:hover img { transform: none; }
@media (max-width: 600px) {
  .topbar { gap: 10px; padding-inline: 16px; }
  .tools { gap: 6px; }
  .motion-toggle, .music-btn { width: 34px; height: 38px; }
  .mark { gap: 8px; }
  .lang-toggle button { padding-inline: 9px; }
  .back-top { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .lightbox { padding: 64px 12px 26px; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) 48px auto; gap: 12px; }
  .lb-stage { grid-column: 1 / -1; }
  .lightbox .lb-stage img { max-height: calc(100svh - 250px); }
  .lightbox .lb-prev, .lightbox .lb-next { grid-row: 2; justify-self: end; }
  .lightbox .lb-next { grid-column: 2; justify-self: start; }
  .lb-details { grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-reveal { opacity: 1 !important; transform: none !important; }
  .hero-photo > img, .hero-photo figcaption { transform: none !important; }
}