/* ==========================================================================
   The Six Auras — effects layer
   Loaded last, after site.css, on every page. Everything here is detail
   that cannot be expressed inline: pseudo-elements, keyframes, hover
   descendants, scroll-driven reveals.

   Rules kept from the Classical design system:
     · colour is stroke, never fill
     · elevation is a whisper (--shadow-sm / md)
     · no gradient washes; gold stays a hairline or a small mark
   ========================================================================== */

/* --- 1. paper grain on the dark bands ------------------------------------
   A near-invisible tooth, so the near-black reads as printed stock rather
   than flat screen black. */

.band--dark::after,
.hero::after,
.page-hero::after,
.footer::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44NScgbnVtT2N0YXZlcz0nMycvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
}
.band--dark, .hero, .page-hero, .footer { position: relative; isolation: isolate; }

/* a gold hairline lying along the top edge of every dark band, fading out */
.band--dark::before,
.hero::before,
.page-hero::before,
.footer::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg,
    var(--color-accent) 0%,
    color-mix(in srgb, var(--color-accent) 40%, transparent) 38%,
    transparent 72%);
}

/* --- 2. scroll progress hairline ---------------------------------------- */

.progress {
  position: absolute; inset: auto 0 -1px 0; height: 2px;
  background: var(--color-accent); transform-origin: 0 50%;
  transform: scaleX(0); z-index: 3;
  animation: progress-grow linear both;
  animation-timeline: scroll(root block);
}
@keyframes progress-grow { to { transform: scaleX(1); } }

/* --- 3. masked heading reveals ------------------------------------------
   Headings rise out of their own line box behind a clip, the way a title
   settles onto a page. Applied only where the author has not already set
   an animation inline, so hero entrances are untouched. */

@supports (animation-timeline: view()) {
    main h2, main h3,
  .doc h2 {
    animation: title-set .9s both;
    animation-timeline: view();
    animation-range: entry 5% cover 22%;
  }
}
@keyframes title-set {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(14px); }
  to   { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; }
}

/* --- 4. photographic plates ---------------------------------------------
   The design system mats every photograph. Here the mat gains a second,
   offset gold hairline — a plate tipped in and pinned — and the image
   drifts a little as it scrolls. */

.plate { position: relative; overflow: hidden; }
.plate::after {
  content: "";
  position: absolute; inset: 12px; pointer-events: none; z-index: 2;
  border: 1px solid color-mix(in srgb, var(--color-accent) 0%, transparent);
  transition: border-color .55s ease, transform .55s ease;
}
.plate:hover::after {
  transform: scale(0.985);
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.plate img { transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .6s ease; }
.plate:hover img { transform: scale(1.035); }

@supports (animation-timeline: view()) {
  .plate img {
    animation: plate-drift linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  .plate:hover img { animation: none; }
}
@keyframes plate-drift {
  from { transform: scale(1.06) translateY(1.5%); }
  to   { transform: scale(1.06) translateY(-1.5%); }
}

/* --- 5. buttons: a gold wash that fills from the left ------------------- */

.btn { position: relative; overflow: hidden; isolation: isolate; transition: color .3s ease, border-color .3s ease; }
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }

/* --- 6. cards: a rule that draws along the top edge --------------------- */

.event-card, .card {
  position: relative;
  transition: border-color .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.event-card::before, .card::before {
  content: "";
  position: absolute; inset: -1px -1px auto -1px; height: 2px; z-index: 3;
  background: var(--color-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.event-card:hover::before, .card:hover::before { transform: scaleX(1); }
.event-card:hover, .card:hover { box-shadow: var(--shadow-md); }

/* --- 7. gallery captions lift instead of appearing ---------------------- */

.shot figcaption {
  transform: translateY(8px);
  transition: opacity .34s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}
.shot:hover figcaption { transform: none; }

/* --- 8. ornamented rule -------------------------------------------------
   A hairline with a small gold lozenge set into the middle of it, the way a
   printed book breaks a chapter. */

hr.hr, .hr {
  height: 1px; border: 0; background: none;
  background-image:
    linear-gradient(90deg, var(--color-divider), var(--color-divider)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 1 12 6.5 6.5 12 1 6.5Z' fill='none' stroke='%23b68235' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 100% 1px, 13px 13px;
  overflow: visible; margin-block: 6px;
}
.hr::after { content: none; }

/* --- 9. drop cap on the justified prose --------------------------------- */

.columns > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 3.55em;
  line-height: .82;
  padding: 0.06em 0.09em 0 0;
  color: var(--color-accent-700);
}

/* --- 10. the marquee ribbon --------------------------------------------- */

.ribbon {
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  overflow: hidden; padding-block: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ribbon > div {
  display: flex; width: max-content; gap: 0;
  animation: ribbon 46s linear infinite;
}
.ribbon:hover > div { animation-play-state: paused; }
.ribbon span {
  display: inline-flex; align-items: center; gap: 34px;
  padding-inline: 17px; white-space: nowrap;
  font-family: var(--font-heading); font-size: clamp(19px, 2.1vw, 27px);
  letter-spacing: 0.07em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.ribbon span::after {
  content: ""; width: 6px; height: 6px; flex: none;
  transform: rotate(45deg);
  border: 1px solid var(--color-accent);
}
@keyframes ribbon { to { transform: translateX(-50%); } }

/* --- 11. link underlines that draw ------------------------------------- */

main p > a:not(.btn),
main li > a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 1px; background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s ease;
}
main p > a:not(.btn):hover,
main li > a:not(.btn):hover {
  text-decoration: none; background-size: 100% 1px;
}

/* --- 12. numbered items: the figure brightens as its row arrives ------- */

@supports (animation-timeline: view()) {
  .item__num, .doc__num {
    animation: figure-in .7s both;
    animation-timeline: view();
    animation-range: entry 8% cover 26%;
  }
}
@keyframes figure-in {
  from { opacity: 0; letter-spacing: .3em; }
  to   { opacity: 1; letter-spacing: normal; }
}

/* --- 13. tags and pills ------------------------------------------------ */

.tag { transition: border-color .25s ease, color .25s ease, background .25s ease; }
.tag:hover { border-color: var(--color-accent-400); }

/* --- respect the setting ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  .ribbon > div { animation: none; }
  .progress { display: none; }
  @keyframes title-set { from { opacity: 1; clip-path: none; transform: none; } to { opacity: 1; clip-path: none; transform: none; } }
}

@media (max-width: 700px) {
    .columns > p:first-of-type::first-letter { font-size: 3.1em; }
}

/* the static header is sticky; give the progress hairline its containing block */
.header { position: sticky; }

/* --- print ---------------------------------------------------------------
   Scroll-driven timelines have no scrollport when printing, so a view()
   animation stays pinned at its from-keyframe. Every animated element is
   reset here or the page prints with invisible headings. */

@media print {
  main h2, main h3, .doc h2,
  [data-screen-label] h2, [data-screen-label] h3,
  .item__num, .doc__num {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
  .plate img { animation: none !important; transform: none !important; }
  .plate::after { display: none !important; }
  .progress, [data-progress] { display: none !important; }
  .ribbon, [data-ribbon] { display: none !important; }
  .band--dark::after, .hero::after, .page-hero::after, .footer::after,
  [data-dark]::after { display: none !important; }
  .btn::before { display: none !important; }
  .event-card, .card, [data-card] { box-shadow: none !important; transform: none !important; }
}


/* Client artwork, not a photograph. .plate is the photo treatment — a sepia
   wash (classical.css), overflow:hidden, and a resting scale(1.06) ken-burns
   drift — which would colour-shift brand artwork and clip its printed border.
   This variant keeps the mat (6px surface border + hairline outline) and drops
   the rest. */
.plate--poster { filter: none; overflow: visible; }
.plate--poster::after { display: none; }
.plate--poster img,
.plate--poster:hover img {
  animation: none !important;
  transform: none !important;
  filter: none;
}