/* One invisible, full-day light source. Coordinates come from Bangkok civil time. */
html[data-lighting] .project {
  background: radial-gradient(ellipse at var(--sun-x) var(--sun-y), rgba(var(--sun-color), .12), transparent 70%), var(--panel);
  box-shadow: inset var(--inset-x) var(--inset-y) 5px var(--shine), inset var(--inset-dark-x) var(--inset-dark-y) 5px var(--rim), var(--shadow-far-x) var(--shadow-far-y) 28px -13px var(--shadow);
}
html[data-lighting] .project::after { background: radial-gradient(ellipse at var(--sun-x) var(--sun-y), var(--shine), transparent 48%, rgba(195, 222, 238, .2)); }
html[data-lighting] .portrait-wrap img { box-shadow: var(--shadow-x) var(--shadow-y) 20px -5px var(--shadow); border-color: var(--edge); }
html[data-lighting] .glass {
  --pointer-shine: transparent;
  --lit-surface: linear-gradient(145deg, rgba(255,255,255,.08), transparent 65%);
  /* Keep the centre transparent; concentrate reflection at the curved edge. */
  background: radial-gradient(ellipse at var(--px, 50%) var(--py, 50%), var(--pointer-shine), transparent 48%), radial-gradient(ellipse 70% 110% at var(--sun-x) var(--sun-y), var(--shine), transparent 60%), var(--lit-surface), var(--glass);
  box-shadow: inset var(--inset-x) var(--inset-y) 2px var(--shine), inset var(--inset-dark-x) var(--inset-dark-y) 4px var(--rim), var(--shadow-near-x) var(--shadow-near-y) 8px -6px var(--shadow), var(--shadow-x) var(--shadow-y) 18px -9px var(--shadow);
}
html[data-lighting] .glass::before { background: radial-gradient(ellipse at var(--sun-x) var(--sun-y), var(--edge), var(--shine) 18%, transparent 52%), conic-gradient(from 105deg, var(--caustic-cyan), transparent 20%, var(--caustic-lilac) 38%, transparent 52%, var(--edge) 65%, var(--caustic-lilac) 78%, var(--caustic-cyan)); opacity: .95; }
html[data-lighting] .glass::after { inset: 12% 3% -4px; transform: translate(var(--shadow-near-x), var(--shadow-near-y)); background: radial-gradient(ellipse at calc(100% - var(--sun-x)) calc(100% - var(--sun-y)), var(--caustic-cyan), transparent 58%), radial-gradient(ellipse at var(--sun-x) var(--sun-y), var(--caustic-lilac), transparent 45%); filter: blur(6px); opacity: .2; }
html[data-lighting] .primary-action { --shadow: var(--cta-shadow); --lit-surface: linear-gradient(150deg, rgba(var(--tint), .1), rgba(var(--tint), var(--tint-strength)) 75%); box-shadow: inset var(--inset-x) var(--inset-y) 2px var(--shine), inset var(--inset-dark-x) var(--inset-dark-y) 4px rgba(var(--tint), .28), var(--shadow-near-x) var(--shadow-near-y) 7.5px -6px var(--shadow), var(--shadow-x) var(--shadow-y) 16px -9px var(--shadow); }
html[data-lighting] .delta .primary-action { --lit-surface: radial-gradient(ellipse at 100% 55%, rgba(160,244,248,.18), transparent 45%), linear-gradient(135deg,#f0effd,#c6c1f8 58%,#9ea4f5); }
html[data-lighting] .donuts .primary-action { --lit-surface: linear-gradient(135deg,#f2e6f4,#e7cff0 58%,#d2c5ff); }
html[data-lighting] .primary-action::after { background: radial-gradient(ellipse at calc(100% - var(--sun-x)) calc(100% - var(--sun-y)), rgba(var(--tint), .72), transparent 62%); opacity: .26; }
html[data-lighting-preview="cycle"] .glass { transition: transform .48s cubic-bezier(.18, .85, .26, 1.4); }
html[data-lighting-preview="cycle"] .glass:active, html[data-lighting-preview="cycle"] .glass.is-pressed { transition: transform .09s ease-out; }
@media (hover: hover) and (pointer: fine) {
  html[data-lighting] .glass:hover { --pointer-shine: rgba(255,255,255,.18); box-shadow: inset var(--inset-x) var(--inset-y) 6px var(--shine), inset var(--inset-dark-x) var(--inset-dark-y) 4px var(--rim), var(--shadow-x) var(--shadow-y) 13px -7px var(--shadow), var(--shadow-far-x) var(--shadow-far-y) 23px -10px var(--shadow); }
  html[data-lighting] .primary-action:hover { box-shadow: inset var(--inset-x) var(--inset-y) 6px var(--shine), inset var(--inset-dark-x) var(--inset-dark-y) 4px var(--rim), var(--shadow-x) var(--shadow-y) 11px -7px var(--shadow), var(--shadow-far-x) var(--shadow-far-y) 19px -10px var(--shadow); }
}
html[data-lighting] .glass:active, html[data-lighting] .glass.is-pressed { box-shadow: inset var(--inset-dark-x) var(--inset-dark-y) 6px var(--rim), inset var(--inset-x) var(--inset-y) 3px var(--shine), var(--shadow-near-x) var(--shadow-near-y) 7px -3px var(--shadow); }
html[data-lighting] .primary-action:active, html[data-lighting] .primary-action.is-pressed { box-shadow: inset var(--inset-dark-x) var(--inset-dark-y) 6px var(--rim), inset var(--inset-x) var(--inset-y) 3px var(--shine), var(--shadow-near-x) var(--shadow-near-y) 5.8px -3px var(--shadow); }
@media (prefers-reduced-motion: reduce) {
  html[data-lighting] .glass { --pointer-shine: transparent; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-lighting] .glass, html[data-lighting] .project { background-color: var(--bg); }
}