/* Original, dependency-free treatments inspired by React Bits.
   Component references and adaptation notes: ../THIRD_PARTY_NOTICES.md */
:root { --glow: #d6c39d; --glow-rgb: 214, 195, 157; }

/* Light Rays: layered CSS light, with no canvas or WebGL render loop. */
.hero-atmosphere { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.light-ray { position: absolute; left: 50%; top: -62%; width: 155%; height: 185%; transform-origin: 50% 0; opacity: .65; }
.light-ray-wide {
  background: conic-gradient(from 153deg at 50% 0, transparent 0deg, rgba(var(--glow-rgb), .015) 9deg, rgba(var(--glow-rgb), .2) 22deg, rgba(var(--glow-rgb), .025) 29deg, transparent 36deg, rgba(var(--glow-rgb), .11) 43deg, transparent 52deg);
  transform: translateX(-50%) rotate(-9deg);
  animation: light-drift-wide 24s ease-in-out infinite alternate;
  mask-image: linear-gradient(to bottom, transparent 25%, #000 50%, transparent 95%);
}
.light-ray-fine {
  background: conic-gradient(from 168deg at 50% 0, transparent 0deg, rgba(var(--glow-rgb), .1) 6deg, transparent 9deg, transparent 19deg, rgba(var(--glow-rgb), .065) 23deg, transparent 29deg);
  transform: translateX(-50%) rotate(12deg);
  animation: light-drift-fine 19s ease-in-out infinite alternate;
  mask-image: linear-gradient(to bottom, transparent 27%, #000 55%, transparent 96%);
}
.light-halo { position: absolute; inset: 3% 10% 2%; background: radial-gradient(ellipse at 50% 48%, rgba(var(--glow-rgb), .09), transparent 63%); }
.hero.effects-paused .light-ray { animation-play-state: paused; }
.hero-topline { position: relative; }
.hero-topline span:first-child::before { content: ''; display: inline-block; width: 4px; height: 4px; margin-right: 12px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px rgba(var(--glow-rgb), .5); vertical-align: 2px; }
.hero-copy .eyebrow { color: #b8ab90; letter-spacing: .25em; }
.hero-copy::before { content: ''; position: absolute; inset: -25% -12%; z-index: -1; background: radial-gradient(ellipse, #080909b8 0%, #08090950 45%, transparent 72%); pointer-events: none; }
.hero-title-line, .hero-title-char { display: inline-block; }
.hero-title-line { white-space: nowrap; }
body.intro-active .hero-title-char { opacity: 0; }
.hero-title-line:last-child { color: #e6d9bd; }
.hero-copy h1 { text-shadow: 0 2px 22px #000, 0 0 60px rgba(var(--glow-rgb), .09); }
.archive-link { gap: 18px; }
.archive-link > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #7e74564f; transition: background .3s, border-color .3s, color .3s; }
.archive-link:hover > span, .archive-link:focus-visible > span { background: #d6c39d12; border-color: #b9a784; color: var(--glow); }

/* Spotlight Card and Tilted Card: enhance the archive's photo buttons. */
.photo-row { position: relative; isolation: isolate; perspective: 900px; transition: background .25s, opacity .7s var(--ease), translate .7s var(--ease); }
.photo-row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(380px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(var(--glow-rgb), .09), transparent 75%); opacity: 0; pointer-events: none; transition: opacity .35s; }
.photo-row::after { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: radial-gradient(220px circle at var(--spot-x, 50%) 0, #d6c39d9c, transparent); opacity: 0; pointer-events: none; transition: opacity .35s; }
.photo-row[data-spotlit="true"]::before, .photo-row[data-spotlit="true"]::after { opacity: 1; }
.photo-row:focus-visible::before { opacity: 1; background-position: center; }
.row-image { position: relative; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-origin: 50% 50%; transition: transform .5s var(--ease), box-shadow .5s; border-radius: 3px; border: 1px solid #ffffff0a; }
.photo-row[data-spotlit="true"] .row-image { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(1.025); box-shadow: 0 14px 34px #0005; }
.row-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #fff0 28%, #fff1 48%, #fff0 66%); opacity: 0; pointer-events: none; transition: opacity .4s; }
.photo-row[data-spotlit="true"] .row-image::after { opacity: .7; }
.row-index { transition: color .3s; }
.photo-row:hover .row-index, .photo-row:focus-visible .row-index { color: var(--glow); }
.row-arrow { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #8b8d7933; border-radius: 50%; font-size: 16px; transition: color .3s, border-color .3s, transform .3s; }
.photo-row:hover .row-arrow, .photo-row:focus-visible .row-arrow { color: var(--glow); border-color: #d6c39d80; transform: rotate(45deg); }
.section-heading .eyebrow { color: #a69a81; }
.section-heading h2 { color: #e9e3d6; }
.photo-row.motion-pending { opacity: 0; translate: 0 20px; }
.photo-row.motion-pending.motion-visible, .photo-row.motion-pending:focus-within { opacity: 1; translate: 0 0; }

/* Magnet: individual translate leaves layout and existing transforms intact. */
[data-magnet] { translate: var(--magnet-x, 0px) var(--magnet-y, 0px); transition: translate .45s var(--ease), color .3s; }
[data-magnet]:focus-visible { translate: 0 0; }
.load-more { border-color: #9e8d694f; transition: translate .45s var(--ease), color .3s, border-color .3s; }
.load-more:hover { color: var(--glow); border-color: #b6a37e; }
.site-header nav a:hover, .menu-button:hover { color: var(--glow); }
.about-dialog > a { border-color: #b6a37e; }
@keyframes light-drift-wide { from { transform: translateX(-50%) rotate(-9deg); opacity: .5; } to { transform: translateX(-50%) rotate(7deg); opacity: .8; } }
@keyframes light-drift-fine { from { transform: translateX(-50%) rotate(12deg); } to { transform: translateX(-50%) rotate(-6deg); } }
@media(max-width: 760px) {
  .light-ray { width: 230%; opacity: .45; }
  .hero-atmosphere .light-halo { inset: 10% -15%; }
  .hero-topline span:first-child::before { margin-right: 7px; }
  .hero-copy .eyebrow { letter-spacing: .18em; }
  .archive-link { gap: 10px; }
  .archive-link > span { width: 36px; height: 36px; font-size: 17px; }
  .row-arrow { display: none; }
}
@media(hover: none), (pointer: coarse) {
  [data-magnet] { translate: 0 0; }
  .row-image, .photo-row[data-spotlit="true"] .row-image { transform: none; }
}
@media(prefers-reduced-motion: reduce) {
  .light-ray { animation: none; }
  .hero-title-char { opacity: 1 !important; filter: none !important; transform: none !important; }
  .photo-row.motion-pending { opacity: 1; translate: 0 0; }
  .row-image, .photo-row[data-spotlit="true"] .row-image, .row-arrow { transform: none !important; }
  [data-magnet] { translate: 0 0; }
}