/* Dana Wilcher Art: her Originals page, a private viewing (one candlelit room for each painting). css/site.css comes first. */

/* Sections rise in; her write-ups write themselves in, word by word, as the page scrolls */
/* hidden only once the page's script has started (.reveal on <html>): a script that never loads leaves it all shown */
.reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.wr .w { opacity: 0; color: var(--camel); transition: opacity .45s ease, color 1.2s ease; }
.wr .w.on { opacity: 1; color: inherit; }
@media (prefers-reduced-motion: reduce) { .reveal .rv { opacity: 1; transform: none; transition: none; } }
[id] { scroll-margin-top: 100px; }

/* Rose petals lie over the hero's words as the page opens, the words showing between them (js/petals.js), then a
   gust blows them away */
.or-hero { position: relative; padding: 92px 0 84px; text-align: center; background: radial-gradient(ellipse 46% 64% at 50% 0%, rgba(148, 37, 42, 0.38), transparent 72%); }
.or-hero h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(56px, 7vw, 104px); line-height: .95; letter-spacing: -0.01em; }
.or-hero .her { margin: 34px auto 0; max-width: 34em; font-family: var(--serif); font-size: clamp(20px, 1.9vw, 24px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.rights { margin: 0 auto; padding: 70px 0 90px; max-width: 40em; text-align: center; font-size: 14px; color: var(--ink-3); }

/* A floater frame, as in her gallery: a slim dark wood rail, a shadowed gap, the canvas floating inside it */
.flt { --fw: 16px; position: relative; display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: var(--fw); border: 0; background: #0a0605; cursor: zoom-in;
  box-shadow: 0 30px 60px rgba(6, 3, 2, 0.62), 0 4px 10px rgba(6, 3, 2, 0.5); }
.flt img { display: block; width: auto; max-width: 100%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 2px 4px 8px rgba(0, 0, 0, 0.75); }
.flt .lip { position: absolute; inset: 0; border: calc(var(--fw) * 0.56) solid; border-color: #93593d #6b3f2a #4c2c1d #7c4a33; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35); pointer-events: none; }

/* The words beside a painting */
.or-t h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(42px, 4.4vw, 64px); line-height: 1; }
.or-t .meta { margin: 16px 0 0; font-size: 14.5px; letter-spacing: .05em; color: var(--ink-3); }
/* each available original's price, under its size (Dana's copy review 2026-11-02) */
.or-t .price { margin: 10px 0 0; font-family: var(--serif); font-size: 26px; color: var(--wheat); }
.or-t .series { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--wheat); border-bottom: 1px solid rgba(230, 212, 166, 0.35); padding-bottom: 2px; }
.or-t .series:hover { border-bottom-color: var(--wheat); }
.or-t .story { margin: 28px 0 0; white-space: pre-line; font-family: var(--serif); font-size: clamp(19px, 1.5vw, 21px); line-height: 1.6; color: var(--ink); }
.or-t .ctas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 34px; }
/* Ask about the original: Telify's Message the studio, drawn as her button (js/originals.js). A placed piece fills its
   placeholder, so the placeholder has its own width (the button's, as in the mockup) and the button fills it. */
.or-t .ask { flex: none; width: 216px; display: flex; flex-direction: column; gap: 8px; }
/* The button keeps the piece's role, secondary-action, which site.css draws as her outline button; here it keeps her fill */
.or-t .ask [data-part="messageStudio"] { width: 100%; background: radial-gradient(circle at 30% 28%, #B8454A 0%, #94252A 55%, #5E1A1A 130%); border-color: rgba(187, 148, 104, 0.4); }
.or-t .ask [data-part="signInError"] { margin: 0; font-size: 14px; color: #E28A8D; }
.look { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 0 0 3px; background: none; border: 0; border-bottom: 1px solid rgba(230, 212, 166, 0.4); color: var(--wheat); font-size: 14.5px; letter-spacing: .04em; cursor: pointer; }
.look svg { width: 16px; height: 16px; }

/* ------------------------------------------------ a private viewing, one candlelit room for each painting */
/* --mh is the height of the painting's reflection in the floor, --s the size of the candles */
/* each room darker in the middle and lighter where it meets the next, as the Sacred Initiations chambers */
.vw { --mh: 110px; --s: 1; position: relative; padding: 110px 0 90px; overflow: clip; background: linear-gradient(180deg, var(--espresso), #1C1512 18%, #1C1512 82%, var(--espresso)); }
.vw-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0 88px; align-items: start; }
.vw.flip .vw-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.vw.flip .vw-art { order: 2; }
.vw-art { align-self: stretch; text-align: center; }
.art-stick { position: sticky; top: calc(var(--head-h) + 20px); }
/* the words sit level with the painting, not with the painting and its reflection */
.vw-txt { padding: 4px 0 40px; }
.stage { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
/* on touch screens the reflections are not blurred and the candle light is not screen-blended: both were redrawn
   every frame while a room lit up, and on a dark floor they look almost the same without */
@media (hover: none) {
  .mirror .flt { filter: none; }
  .mirror { opacity: .24; }
  .flock::before, .flock::after { mix-blend-mode: normal; }
}
/* the candles keep clear of her words and of the screen edge on narrower screens */
@media (max-width: 1520px) { .vw { --s: .84; } }
@media (max-width: 1240px) { .vw { --s: .7; } }
/* the painting stands on the floor; it comes out of the dark as the candles light */
.vw .flt { box-shadow: 0 16px 24px -12px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5); }
.vw .flt img { height: min(calc(100vh - 340px), 640px); }
/* a dark veil over the canvas that fades as the room lights */
.vw .flt::after { content: ""; position: absolute; inset: var(--fw); background: rgba(14, 8, 6, .64); pointer-events: none; will-change: opacity; transition: opacity 2.4s ease .6s; }
.vw.on .flt::after { opacity: 0; }
/* its reflection in the dark floor */
.mirror { display: block; height: var(--mh); margin-top: 2px; overflow: hidden; opacity: .3; pointer-events: none; -webkit-mask: linear-gradient(#000, transparent 92%); mask: linear-gradient(#000, transparent 92%); }
.mirror .flt { transform: scaleY(-1); box-shadow: none; cursor: default; filter: blur(1.5px); }

/* her candles (js/candles.js) on the floor either side of the painting, the larger group on the side away from her
   words; the candle nearest the painting just overlaps the frame (--pl and --pr are each group's margins for its pool) */
.flock { --dc-s: var(--s); position: absolute; bottom: calc(var(--mh) - 26px); pointer-events: none; }
.flock.l { right: calc(100% - 16px - var(--pr) * var(--s) * 1px); }
.flock.r { left: calc(100% - 16px - var(--pl) * var(--s) * 1px); }
/* their light on the wall, the painting and the floor */
.flock::before, .flock::after { content: ""; position: absolute; left: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 2.4s ease .4s; }
.flock::before { bottom: 70%; width: 620px; height: 620px; margin: 0 0 -310px -310px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 184, 104, 0.24), rgba(255, 160, 80, 0.08) 42%, rgba(255, 140, 60, 0) 100%); animation: glow 3.4s ease-in-out infinite alternate; }
.flock:not(.big)::before { width: 440px; height: 440px; margin: 0 0 -220px -220px; }
.flock::after { bottom: -26px; width: 360px; height: 60px; margin-left: -180px; background: radial-gradient(closest-side, rgba(255, 178, 100, 0.2), rgba(255, 178, 100, 0)); }
.vw.on .flock::before, .vw.on .flock::after { opacity: 1; }
.vw:not(.awake) .flock::before { animation-play-state: paused; }
@keyframes glow { 0% { transform: none; } 35% { transform: scale(.95); } 65% { transform: scale(1.03); } 100% { transform: scale(.98); } }

/* ------------------------------------------------ looking closer: her biggest photo of the painting */
.zoom { position: fixed; inset: 0; z-index: 70; background: rgba(12, 9, 7, 0.96); opacity: 0; transition: opacity .3s ease; }
.zoom[hidden] { display: none; }
.zoom.open { opacity: 1; }
.zoom .sc { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; scrollbar-width: none; }
.zoom .sc::-webkit-scrollbar { display: none; }
.zoom img { max-width: 92vw; max-height: 86vh; cursor: zoom-in; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.zoom.big .sc { place-items: start; }
.zoom.big img { max-width: none; max-height: none; cursor: zoom-out; }
.zoom .x { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 24, 20, 0.7); border: 1px solid rgba(230, 212, 166, 0.4); color: var(--ink); cursor: pointer; }
.zoom .x svg { width: 20px; height: 20px; }
.zoom .zc { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-2); pointer-events: none; }

/* ---------- narrower screens ---------- */
@media (max-width: 999px) {
  .vw-in { gap: 0 48px; }
}
@media (max-width: 860px) {
  .or-hero { padding: 60px 0 56px; }
  .vw { --mh: 80px; --s: .46; padding: 64px 0 56px; }
  .vw-in, .vw.flip .vw-in { grid-template-columns: 1fr; }
  .vw.flip .vw-art { order: 0; }
  .vw .flt { --fw: 11px; }
  .vw .flt img { height: auto; max-height: 62vh; }
  .vw-txt { padding: 30px 0 0; }
  .art-stick { position: relative; top: auto; }
  /* on a phone the candles stand in front of the painting's lower corners */
  .flock { bottom: calc(var(--mh) - 46px); }
  .flock.l { right: auto; left: calc(2px - var(--pl) * var(--s) * 1px); }
  .flock.r { left: auto; right: calc(2px - var(--pr) * var(--s) * 1px); }
  .flock::before { width: 340px; height: 340px; margin: 0 0 -170px -170px; }
  .flock:not(.big)::before { width: 260px; height: 260px; margin: 0 0 -130px -130px; }
  .flock::after { width: 200px; height: 40px; margin-left: -100px; bottom: -18px; }
}
@media (prefers-reduced-motion: reduce) {
  .vw .flt img, .flock::before, .flock::after { transition: none; }
  .flock::before { animation: none; }
}