/* Fonts, self-hosted (SIL Open Font License, see fonts/). Jost is a variable font: one file covers 300, 400 and 500. */
@font-face { font-family: 'Gloock'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gloock-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Gloock'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/gloock-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(../fonts/jost-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 500; font-display: swap; src: url(../fonts/jost-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body{margin:0}
html{scroll-behavior:smooth}
a{color:inherit;text-underline-offset:0.25em;text-decoration-thickness:1px}
a:hover{opacity:0.62}
a:focus-visible,video:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.ph{display:inline-block;border:1px dashed currentColor;padding:0.15em 0.6em;font-size:0.82em;letter-spacing:0.02em;line-height:1.5}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

@property --gx { syntax: '<percentage>'; inherits: true; initial-value: 72%; }
@property --gy { syntax: '<percentage>'; inherits: true; initial-value: 28%; }
.satin { animation: satin 14s ease-in-out infinite alternate; transition: --gx 0.9s cubic-bezier(.2,.7,.2,1), --gy 0.9s cubic-bezier(.2,.7,.2,1); }
@keyframes satin { from { background-position: 0% 20%; } to { background-position: 100% 80%; } }
.glint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,0.9), rgba(255,255,255,0) 34%); }
.ln { display: block; overflow: hidden; padding: 0.14em 0; margin: -0.14em 0; }
.lni { display: block; animation: rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { transform: translateY(118%); } to { transform: none; } }
.fadein { animation: fade 1.8s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.refl { animation: reflin 2.4s 1.3s ease both, ripple 7s 1.3s ease-in-out infinite; }
@keyframes reflin { from { opacity: 0; } }
@keyframes ripple { 0%, 100% { transform: scaleY(-1) skewX(0deg); } 50% { transform: scaleY(-1) skewX(-4deg) translateX(0.03em); } }
.rv { transition: opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1); }
.rv.pre { opacity: 0; transform: translateY(32px); }
.rvi { transition: clip-path 1.5s cubic-bezier(.7,0,.2,1); clip-path: inset(0 0 0 0); }
.rvi.pre { clip-path: inset(0 0 92% 0); }
.rvc { transition: opacity 1.2s ease, rotate 1.6s cubic-bezier(.2,.7,.2,1); }
.rvc.pre { opacity: 0; rotate: -8deg; }
.rvc:hover { rotate: 1.5deg; }
.d2 { transition-delay: 0.2s; }
.mq { animation: mq 48s linear infinite; }
@keyframes mq { to { transform: translateX(-50%); } }
.chrome { background: linear-gradient(100deg, #6f6f6d 0%, #f5f5f3 18%, #8e8e8c 38%, #ececea 58%, #7a7a78 78%, #dcdcda 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 9s ease-in-out infinite alternate; }
@keyframes sheen { to { background-position: 100% 0; } }
.btn { transition: background-color 0.4s ease, color 0.4s ease; }
.btn:hover { background-color: #050010 !important; color: #F9F0E8 !important; opacity: 1; }
@keyframes px { from { transform: translateY(-7%) scale(1.16); } to { transform: translateY(7%) scale(1.16); } }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: view()) {
.px { animation: px linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
}
@media (prefers-reduced-motion: reduce) {
.satin, .lni, .fadein, .refl, .mq, .chrome, .px { animation: none !important; }
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.7s; }
.skip { position: absolute; left: -999px; top: 0; background: #050010; color: #F9F0E8; padding: 0.75rem 1rem; z-index: 10; }
.skip:focus { left: 0; }


/* Layout — moved from inline styles; kept after the motion rules so animation delays still apply. */
.site { font-family: 'Jost', 'Century Gothic', 'Avenir Next', sans-serif; font-weight: 300; color: #050010; background: #D8D8D5; font-size: 1.125rem; line-height: 1.6; }
.opening { background: linear-gradient(118deg, #9a9a98 0%, #ececea 12%, #b4b4b2 24%, #f5f5f3 38%, #8e8e8c 52%, #e4e4e2 64%, #a2a2a0 76%, #f0f0ee 88%, #969694 100%); background-size: 240% 240%; position: relative; overflow: hidden; min-height: 800px; display: flex; flex-direction: column; box-sizing: border-box; padding: 1.5rem clamp(1.25rem, 5vw, 5rem) 4rem; }
.nav { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; font-size: 0.95rem; font-weight: 400; }
.nav-brand { text-decoration: none; letter-spacing: 0.08em; min-height: 44px; display: flex; align-items: center; }
.brand-mark { height: 1.7em; width: auto; margin-right: 0.65em; flex: none; }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.75rem; }
.nav-link { text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.tap { min-height: 44px; display: flex; align-items: center; }
.opening-body { position: relative; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2.5rem; padding-top: 5rem; }
.opening-lede { margin: 0; max-width: 24rem; font-weight: 400; animation-delay: 0.9s; }
.opening-title { display: flex; flex-direction: column; }
.title-hero { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; font-size: clamp(3.1rem, 11vw, 10rem); line-height: 0.95; letter-spacing: -0.02em; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.31s; }
.delay-3 { animation-delay: 0.47s; }
.title-mirror { font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-size: clamp(3.1rem, 11vw, 10rem); line-height: 0.95; letter-spacing: -0.02em; transform: scaleY(-1); opacity: 0.2; height: 0.62em; overflow: hidden; mask-image: linear-gradient(to top, #000 0%, transparent 85%); filter: blur(1.5px); user-select: none; }
.section { padding: clamp(4rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem); }
.section-dark { background: #050010; color: #F9F0E8; padding: clamp(4rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem); }
.section-bone { background: #F9F0E8; padding: clamp(4rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem); }
.section-red { background: #86130F; color: #F9F0E8; padding: clamp(4.5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 5rem); }
.title-intro { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.12; text-wrap: balance; }
.title-section { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1; }
.title-process { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.01em; }
.title-work { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.15; }
.title-contact { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; font-size: clamp(3rem, 10vw, 9rem); line-height: 0.95; letter-spacing: -0.02em; }
.flush { margin: 0; }
.measure-24 { margin: 0; max-width: 24rem; }
.measure-26 { margin: 0; max-width: 26rem; }
.measure-30 { margin: 0; max-width: 30rem; }
.measure-32 { margin: 0; max-width: 32rem; }
.measure-32-strong { margin: 0; max-width: 32rem; font-weight: 400; }
.muted { color: #B9B9B5; }
.flush-muted { margin: 0; color: #B9B9B5; }
.measure-24-muted { margin: 0; max-width: 24rem; color: #B9B9B5; }
.caption-dark { font-size: 0.9rem; color: #B9B9B5; }
.caption { font-size: 0.9rem; color: #3A3A38; }
.credit { margin: 0; font-size: 0.9rem; color: #3A3A38; }
.intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: clamp(2.5rem, 6vw, 6rem); align-items: end; max-width: 82rem; margin: 0 auto; }
.intro-text { display: flex; flex-direction: column; gap: 2rem; }
.intro-figure { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.intro-frame { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; }
.fill { width: 100%; height: 100%; object-fit: cover; display: block; }
.process-row { display: flex; flex-wrap: wrap; gap: clamp(2.5rem, 6vw, 6rem); align-items: flex-start; max-width: 82rem; margin: 0 auto; }
.process-film { margin: 0; flex: 0 1 360px; display: flex; flex-direction: column; gap: 0.75rem; }
.film { width: 100%; aspect-ratio: 576 / 1020; display: block; background: #050010; object-fit: cover; }
.process-text { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 2.5rem; }
.process-stills { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1.5rem; max-width: 34rem; }
.still { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.still-low { margin: 3rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.still-pour { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; display: block; }
.still-torch { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; display: block; }
.marquee { background: #050010; overflow: hidden; padding: clamp(3rem, 6vw, 6rem) 0 0; }
.marquee-track { display: flex; width: max-content; }
.marquee-text { font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-size: clamp(4rem, 14vw, 13rem); line-height: 1.15; white-space: nowrap; padding-right: 0.7em; }
.works { max-width: 82rem; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(4rem, 8vw, 8rem); }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 3rem; }
.work { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 5rem); align-items: flex-end; }
.work-reverse { display: flex; flex-wrap: wrap-reverse; gap: clamp(2rem, 5vw, 5rem); align-items: flex-end; justify-content: flex-end; }
.work-frame-blue { flex: 0 1 440px; min-width: 0; width: 100%; max-width: 440px; aspect-ratio: 4 / 5; overflow: hidden; }
.work-frame-red { flex: 0 1 520px; min-width: 0; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; overflow: hidden; }
.fill-blue { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.fill-red { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; display: block; }
.work-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 0.5rem; }
.work-text-narrow { flex: 0 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 0.5rem; }
.work-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.5rem; font-size: 0.98rem; max-width: 24rem; }
.still-photo { width: 100%; height: auto; display: block; }
.more-works { display: flex; flex-direction: column; gap: 2rem; }
.gallery { columns: 3 16rem; column-gap: 1.5rem; }
.gallery-item { margin: 0 0 1.5rem; break-inside: avoid; display: flex; flex-direction: column; gap: 0.6rem; }
.gallery-img { width: 100%; height: auto; display: block; }
.work-ask { min-height: 44px; display: flex; align-items: center; align-self: flex-start; font-weight: 400; }
.cert-row { display: flex; flex-wrap: wrap; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; max-width: 82rem; margin: 0 auto; }
.cert-image { flex: 0 1 400px; min-width: 0; width: 100%; max-width: 400px; height: auto; display: block; box-shadow: 0 24px 48px -24px rgba(60, 30, 10, 0.45); transform: rotate(-1.5deg); }
.care { max-width: 82rem; margin: clamp(4rem, 8vw, 7rem) auto 0; display: flex; flex-direction: column; gap: 1.5rem; }
.care-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.5rem clamp(2rem, 4vw, 3.5rem); margin-top: 0.5rem; }
.care-item { display: flex; flex-direction: column; gap: 0.6rem; font-size: 1rem; }
.care-title { margin: 0; font-weight: 500; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.cert-text { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 1.75rem; }
.place { max-width: 82rem; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4.5rem); }
.place-photos { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; }
.place-main { flex: 3 1 420px; min-width: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.place-side { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.place-keyring { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; display: block; }
.place-stamp { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.contact { max-width: 82rem; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; font-weight: 400; }
.btn-solid { text-decoration: none; background-color: #F9F0E8; color: #050010; padding: 0 2rem; min-height: 56px; display: flex; align-items: center; }
.footer { background: #050010; color: #B9B9B5; padding: 2rem clamp(1.25rem, 5vw, 5rem); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 2rem; font-size: 0.9rem; }

/* ——— Refinements, 2026-10-03: fuller opening, balanced works, playlist, quieter-richer motion ——— */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Opening: fill the viewport, not a fixed 800px; the symbol answers the empty half */
.opening { min-height: 640px; min-height: max(560px, min(100svh, 940px)); }
.hero-mark { position: absolute; right: clamp(1.25rem, 7vw, 8rem); top: 50%; height: min(74%, 660px); width: auto; transform: translateY(-50%); translate: calc((var(--gx) - 72%) * -0.12) calc((var(--gy) - 28%) * -0.12); overflow: visible; pointer-events: none; }
.hero-mark-fill { fill: rgba(255, 255, 255, 0.22); }
.hero-mark-line { fill: none; stroke: url(#chrome-a); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
@media (max-width: 759px) {
  .hero-mark { top: 6.5rem; height: 38%; transform: none; right: 1.25rem; opacity: 0.85; }
  .nav-link { display: none; }
}

/* Process: the film travels with the reader instead of leaving a hole */
@media (min-width: 900px) { .process-film { position: sticky; top: 2rem; align-self: flex-start; } }

/* Works: a calm two-column rhythm with numbered entries */
.works { counter-reset: work; }
.work-text::before, .work-text-narrow::before { counter-increment: work; content: counter(work, decimal-leading-zero); font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px #B9B9B5; margin-bottom: 0.5rem; }
@media (min-width: 900px) {
  .work, .work-reverse { display: grid; align-items: center; gap: clamp(3rem, 6vw, 6rem); }
  .work { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .work-reverse { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .work-frame-blue, .work-frame-red { justify-self: center; }
  .work-text, .work-text-narrow { padding-bottom: 0; }
}
.notes { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }

/* Gallery and stills: images settle into place, and answer the pointer */
img.rvi { transition: clip-path 1.5s cubic-bezier(.7,0,.2,1), transform 1.8s cubic-bezier(.2,.7,.2,1), filter 0.6s ease, box-shadow 0.6s ease; }
img.rvi.pre { transform: scale(1.06); }
.gallery-img:hover, .still-photo:hover { filter: brightness(1.06) saturate(1.08); box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.8); }
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* Place: the side column now ends level with the main photograph */
.place-keyring { aspect-ratio: 1 / 1; }

/* Playlist */
.playlist-grid { max-width: 82rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.playlist-intro { display: flex; flex-direction: column; gap: 1.5rem; }
.disc { width: clamp(9rem, 18vw, 13rem); aspect-ratio: 1; border-radius: 50%; margin-bottom: 1rem; display: grid; place-items: center; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.55), rgba(255,255,255,0) 32%), conic-gradient(from 20deg, #86130F, #e0582b, #f3b04b, #f2a6b8, #b84a8c, #3f7f8f, #f3b04b, #e0582b, #86130F); box-shadow: 0 30px 60px -30px rgba(224, 88, 43, 0.6), inset 0 0 0 1px rgba(255,255,255,0.25); animation: spin 28s linear infinite; }
.disc-label { width: 30%; aspect-ratio: 1; border-radius: 50%; background: #050010; color: #F9F0E8; display: grid; place-items: center; }
.disc-label svg { height: 58%; width: auto; }
@keyframes spin { to { rotate: 360deg; } }
.tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(249, 240, 232, 0.16); }
.track { display: grid; grid-template-columns: 2.75rem 1fr auto; align-items: center; gap: 1rem; padding: 0.9rem 0.25rem; min-height: 44px; text-decoration: none; border-bottom: 1px solid rgba(249, 240, 232, 0.16); position: relative; transition: background-color 0.5s ease, padding 0.5s cubic-bezier(.2,.7,.2,1); }
.track:hover, .track:focus-visible { opacity: 1; background-color: rgba(249, 240, 232, 0.05); padding-left: 0.85rem; }
.track-n { font-size: 0.85rem; color: #B9B9B5; letter-spacing: 0.08em; }
.track-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; }
.track-title { font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; }
.track-artist { font-size: 0.92rem; color: #B9B9B5; }
.track-go { color: #B9B9B5; transition: transform 0.5s cubic-bezier(.2,.7,.2,1), color 0.5s ease; }
.track:hover .track-go, .track:focus-visible .track-go { transform: translate(3px, -3px); color: #F9F0E8; }

/* Contact: the symbol, drawn in a single line */
.section-red { position: relative; overflow: hidden; }
.contact { position: relative; }
.contact-mark { position: absolute; right: -6%; bottom: -14%; height: 120%; width: auto; fill: none; stroke: rgba(249, 240, 232, 0.28); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; animation: float 16s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(-3%) rotate(-3deg); } }
@media (max-width: 899px) { .contact-mark { display: none; } }

/* Scroll progress: a thin chrome line, where the browser supports scroll timelines */
.progress { display: none; }
@supports (animation-timeline: scroll()) {
  .progress { display: block; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 20; transform-origin: 0 50%; background: linear-gradient(90deg, #6f6f6d, #f5f5f3, #86130F); animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* Lightbox */
.lightbox { font-family: 'Jost', 'Century Gothic', 'Avenir Next', sans-serif; font-weight: 300; border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(5, 0, 16, 0.94); color: #F9F0E8; }
.lightbox[open] { display: grid; place-items: center; animation: fade 0.5s ease both; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 3.5rem 1rem 1.5rem; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 80vh; width: auto; height: auto; display: block; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9); }
.lightbox figcaption { font-size: 0.95rem; color: #B9B9B5; text-align: center; max-width: 40rem; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; min-width: 44px; min-height: 44px; background: none; border: 1px solid rgba(249,240,232,0.4); color: inherit; font: inherit; font-size: 0.9rem; padding: 0 1rem; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .hero-mark-line { animation: draw 3.2s 0.4s cubic-bezier(.6,0,.2,1) both; }
  .hero-mark-fill { animation: fade 2.4s 2.4s ease both; }
  .hero-mark { animation: breathe 14s ease-in-out infinite alternate; }
  @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes breathe { from { scale: 1; } to { scale: 1.035; } }
}
@media (prefers-reduced-motion: reduce) {
  .disc, .contact-mark, .lightbox[open] { animation: none !important; }
  img.rvi, .track, .track-go { transition: none; }
}

/* ——— Artists, 2026-10-03 ——— */
.artists { max-width: 82rem; margin: clamp(5rem, 11vw, 10rem) auto 0; padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(249, 240, 232, 0.16); display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: end; }
.artists-text { display: flex; flex-direction: column; gap: 1.5rem; }
.artists-label { margin: 0; font-weight: 500; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: #B9B9B5; }
.title-artists { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; font-size: clamp(2.4rem, 6vw, 5.2rem); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; }
.artists-amp { display: block; font-style: italic; font-size: 0.55em; color: #B9B9B5; margin: 0.15em 0; }
.artists-figure { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.artists-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1.5vw, 1.25rem); align-items: start; }
.artists-frame { aspect-ratio: 3 / 4; overflow: hidden; }
.artists-frame + .artists-frame { margin-top: clamp(2rem, 6vw, 5rem); }
.artists-frame img { cursor: zoom-in; }
@media (min-width: 900px) {
  .artists { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* ——— Playlist dock, 2026-10-03: stays in the corner while scrolling; hidden until a playlist link is set ——— */
.dock { position: fixed; right: clamp(0.75rem, 2vw, 1.5rem); bottom: clamp(0.75rem, 2vw, 1.5rem); z-index: 30; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; width: min(22rem, calc(100vw - 1.5rem)); pointer-events: none; font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; }
.dock[hidden] { display: none; }
.dock-panel { width: 100%; height: 152px; border-radius: 12px; overflow: hidden; background: #050010; box-shadow: 0 18px 50px rgba(5, 0, 16, 0.45); opacity: 0; visibility: hidden; transform: translateY(12px); }
.dock-panel iframe { display: block; width: 100%; height: 152px; border: 0; }
.dock.is-open .dock-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.dock-toggle { pointer-events: auto; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1px solid rgba(249, 240, 232, 0.35); background: rgba(5, 0, 16, 0.86); color: #F9F0E8; font: inherit; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dock-toggle:focus-visible, .listen:focus-visible { outline: 2px solid #F9F0E8; outline-offset: 3px; }
.dock-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.dock-bars i { display: block; width: 2px; height: 100%; background: currentColor; transform-origin: 50% 100%; transform: scaleY(0.35); }
.listen { align-self: flex-start; min-height: 44px; padding: 0 1.4rem; border-radius: 999px; border: 1px solid rgba(249, 240, 232, 0.5); background: transparent; color: #F9F0E8; font: inherit; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.listen:hover { background: #F9F0E8; color: #050010; }
.listen[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .dock-panel { transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s; }
  .dock.is-open .dock-panel { transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s; }
  .dock.is-open .dock-bars i { animation: bar 1.4s ease-in-out infinite alternate; }
  .dock.is-open .dock-bars i:nth-child(2) { animation-delay: -0.5s; }
  .dock.is-open .dock-bars i:nth-child(3) { animation-delay: -0.9s; }
  @keyframes bar { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
  .listen { transition: background 0.3s ease, color 0.3s ease; }
}
.dock-panel > div, .dock-panel iframe { display: block; width: 100%; height: 152px; border: 0; }
.track.is-playing .track-n { color: #F9F0E8; }
.track.is-playing { background-color: rgba(249, 240, 232, 0.08); padding-left: 0.85rem; }

main { overflow-x: clip; }


/* ——— Brand textures, 2026-10-03: the studio's liquid-silver film under the opening, and its warm grain gradients ——— */
.hero-fluid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; mix-blend-mode: soft-light; opacity: 0.75; filter: contrast(1.15); }
.section-red { background-color: #86130F; background-image: linear-gradient(180deg, rgba(60, 6, 8, 0.5), rgba(60, 6, 8, 0.15) 60%, rgba(60, 6, 8, 0.35)), url("../assets/textura-contato-1000.jpg"); background-size: cover; background-position: 30% 50%; }
.playlist { background-color: #050010; background-image: linear-gradient(100deg, rgba(5, 0, 16, 0.72) 0%, rgba(5, 0, 16, 0.45) 45%, rgba(5, 0, 16, 0.6) 100%), url("../assets/textura-trilha-1000.jpg"); background-size: cover; background-position: center; }
@media (min-width: 900px) {
  .section-red { background-image: linear-gradient(180deg, rgba(60, 6, 8, 0.5), rgba(60, 6, 8, 0.15) 60%, rgba(60, 6, 8, 0.35)), url("../assets/textura-contato-2000.jpg"); }
  .playlist { background-image: linear-gradient(100deg, rgba(5, 0, 16, 0.72) 0%, rgba(5, 0, 16, 0.45) 45%, rgba(5, 0, 16, 0.6) 100%), url("../assets/textura-trilha-2000.jpg"); }
}
@media (prefers-reduced-motion: reduce) { .hero-fluid { display: none; } }
.artists-quote { margin: 0.5rem 0 0; padding-left: 1.25rem; border-left: 1px solid rgba(249, 240, 232, 0.35); display: flex; flex-direction: column; gap: 0.6rem; max-width: 30rem; }
.artists-quote p { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.4; }


/* No empty frames: every picture sits on a soft tone while it loads, and all pictures load with the page. */
main img, .intro-frame, .artists-frame, .work-frame-blue, .work-frame-red, .place-main { background-color: rgba(160, 140, 128, 0.22); }

/* ——— Posters band and Vila Velha placeholder, 2026-10-03 ——— */
.poster-band { background: #050010; padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 5vw, 5rem) 0; }
.poster-figure { margin: 0 auto; max-width: 82rem; display: flex; flex-direction: column; gap: 0.75rem; }
.poster-frame { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: rgba(160, 140, 128, 0.22); }
.place-pending { position: relative; display: grid; place-items: center; }
.place-pending img { position: absolute; inset: 0; }
.place-wait { position: relative; color: #F9F0E8; background: rgba(5, 0, 16, 0.35); }
@media (max-width: 759px) { .poster-frame { aspect-ratio: 4 / 3; } }

/* Soundtrack dock, file player version: play/pause pill with the current title, plus a "next" button while playing. */
.dock { flex-direction: row; align-items: center; justify-content: flex-end; width: auto; max-width: calc(100vw - 1.5rem); }
.dock-label { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-next { pointer-events: auto; min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid rgba(249, 240, 232, 0.35); background: rgba(5, 0, 16, 0.86); color: #F9F0E8; font: inherit; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dock-next[hidden] { display: none; }
.dock-next:focus-visible { outline: 2px solid #F9F0E8; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .dock.is-playing .dock-bars i { animation: bar 1.4s ease-in-out infinite alternate; }
  .dock.is-playing .dock-bars i:nth-child(2) { animation-delay: -0.5s; }
  .dock.is-playing .dock-bars i:nth-child(3) { animation-delay: -0.9s; }
}

/* ——— Vila Velha photos, 2026-10-03: Praia da Costa wide, then the bay view, keyring and stamp in a row ——— */
.place-photos { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vw, 2rem); }
.place-hero { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.place-hero .place-main { flex: none; aspect-ratio: 16 / 9; }
.place-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.5rem); align-items: start; }
.place-cell { margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.place-view { width: 100%; aspect-ratio: 650 / 372; object-fit: cover; display: block; }
@media (max-width: 759px) { .place-hero .place-main { aspect-ratio: 4 / 3; } }

/* Vila Velha photos blend into the page: a softer, warmer grade close to the brand tones, a long soft shadow,
   and edges that melt into the background, like a mirage at the horizon. Below the wide beach photo the other three
   sit in one clean row, all the same height, nothing overlapping (Nilvan disliked the overlapping collage). */
.place-row { display: flex; gap: clamp(1rem, 2.5vw, 2rem); align-items: flex-start; }
.place-cell { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.place-trail { flex: 1 1 0; }
.place-sunset { flex: 1.333 1 0; }
.place-bridge { flex: 1.747 1 0; }
.place-frame { overflow: hidden; }
.place-img { width: 100%; height: auto; display: block; }
.place-main, .place-frame { position: relative; background-color: transparent; box-shadow: 0 2.5rem 4.5rem -2rem rgba(5, 0, 16, 0.42), 0 0.75rem 1.5rem -1rem rgba(5, 0, 16, 0.25); }
.place-main img, .place-img { filter: saturate(1.08) contrast(1.04) brightness(1.02) sepia(0.05); }
/* A slow drift inside each frame keeps the place alive, each photo on its own rhythm */
@media (prefers-reduced-motion: no-preference) {
  .place-img { animation: place-drift 22s ease-in-out infinite alternate; transform-origin: 50% 60%; }
  .place-sunset .place-img { animation-duration: 18s; transform-origin: 30% 40%; }
  .place-bridge .place-img { animation-duration: 26s; transform-origin: 70% 50%; }
  @keyframes place-drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1%, -1%); } }
}
.place-main::after, .place-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 45%, transparent 62%, rgba(216, 216, 213, 0.28) 100%), linear-gradient(180deg, rgba(255, 220, 170, 0.06), transparent 50%); }
@media (max-width: 759px) { .place-row { flex-direction: column; gap: clamp(1.5rem, 5vw, 2rem); } .place-cell { flex: none; width: 100%; } }

/* Mirage light: every section carries its own slow, quiet movement of light and shadow,
   like reflections from a mirror drifting across a wall. One idea per section, never the same. */
main > section, .footer { position: relative; isolation: isolate; overflow: clip; }
main > section::before, .footer::before { content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none; will-change: transform; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }


/* Process: a warm pool of resin light turns, as if poured and settling */
#processo::before { inset: -8%; background: url("../assets/textura-resina-1000.jpg") center / cover no-repeat; animation-name: m-pour; animation-duration: 40s; }
@media (min-width: 900px) { #processo::before { background-image: url("../assets/textura-resina-2000.jpg"); } }
@keyframes m-pour { from { transform: scale(1) translate(-2%, -1%); } to { transform: scale(1.12) translate(2%, 1.5%) rotate(1.5deg); } }

/* Works: the blue and the red of the pieces glow and pass by each other */
#obras::before { inset: -10%; background: radial-gradient(40vw 32vw at 24% 26%, rgba(46, 76, 200, 0.18), transparent 70%), radial-gradient(40vw 32vw at 76% 55%, rgba(170, 26, 18, 0.18), transparent 70%), linear-gradient(rgba(5, 0, 16, 0.25), rgba(5, 0, 16, 0.25)), url("../assets/textura-obras-1600.jpg") center / cover no-repeat; animation-name: m-pass; animation-duration: 48s; }
@keyframes m-pass { from { transform: scale(1) translate(-3%, 2%); } to { transform: scale(1.12) translate(3%, -2%) rotate(-2deg); } }

/* Certificate: soft shadows of a window sweep across the paper */
#certificado::before { inset: -8%; background: linear-gradient(rgba(249, 240, 232, 0.35), rgba(249, 240, 232, 0.35)), url("../assets/textura-espelho-1600.jpg") center / cover no-repeat; animation-name: m-window; animation-duration: 44s; }
@keyframes m-window { from { transform: scale(1.04) translateX(-3%); } to { transform: scale(1.12) translateX(3%) rotate(-1deg); } }

/* Vila Velha: heat haze over the sand, the mirage itself */
[aria-labelledby="t-mundo"]::before { background: radial-gradient(50vw 24vw at 50% 22%, rgba(255, 214, 160, 0.3), transparent 70%), repeating-linear-gradient(180deg, transparent 0 1.6rem, rgba(255, 255, 255, 0.045) 2.2rem, transparent 2.8rem 4rem); animation-name: m-haze; animation-duration: 18s; }
@keyframes m-haze { from { transform: translateY(-1.5%) scaleY(1); } to { transform: translateY(1.5%) scaleY(1.06) skewY(0.6deg); } }

/* Posters: a slow beam of light crosses the dark */
.poster-band::before { background: linear-gradient(100deg, transparent 30%, rgba(249, 240, 232, 0.07) 45%, rgba(249, 240, 232, 0.02) 55%, transparent 70%); animation-name: m-beam; animation-duration: 34s; }
@keyframes m-beam { from { transform: translateX(-18%); } to { transform: translateX(18%); } }

/* Soundtrack: light breathes on the warm texture, like a slow beat */
.playlist::before { background: radial-gradient(34% 30% at 60% 45%, rgba(255, 200, 150, 0.12), transparent 70%); animation-name: m-breathe; animation-duration: 14s; }
@keyframes m-breathe { from { transform: scale(0.9) translateX(-4%); opacity: 0.6; } to { transform: scale(1.15) translateX(4%); opacity: 1; } }

/* Contact: a cloud's shadow drifts over the red */
#contato::before { background: radial-gradient(44vw 30vw at 40% 50%, rgba(30, 2, 4, 0.36), transparent 72%); animation-name: m-cloud; animation-duration: 40s; }
@keyframes m-cloud { from { transform: translate(-14%, -4%); } to { transform: translate(16%, 5%); } }

/* Footer: a thin chrome glint travels along the edge */
.footer::before { inset: 0 -40%; background: linear-gradient(90deg, transparent 40%, rgba(230, 230, 236, 0.08) 50%, transparent 60%); animation-name: m-glint; animation-duration: 24s; }
@keyframes m-glint { from { transform: translateX(-25%); } to { transform: translateX(25%); } }

@media (prefers-reduced-motion: reduce) { main > section::before, .footer::before { animation: none; } }

/* ——— Stealth reveals, 2026-10-03: Nilvan wanted transitions smooth and barely noticed. Nothing wipes, slides or spins any more:
   things simply come into focus, like a mirage settling, and finish on their own even if the visitor stops scrolling.
   Elements start already partly visible, so there is never an empty gap. Small differences keep it from feeling repetitive. ——— */
@media (prefers-reduced-motion: no-preference) {
  .rv, .rvi, .rvc { clip-path: none; transition: opacity 2.6s cubic-bezier(.25,.1,.25,1), filter 2.8s cubic-bezier(.25,.1,.25,1), transform 3.2s cubic-bezier(.16,.84,.3,1), rotate 3.2s cubic-bezier(.16,.84,.3,1); }
  .rv.pre { opacity: 0.3; filter: blur(5px); transform: translateY(12px); }
  .rvi.pre { opacity: 0.45; filter: blur(6px); transform: scale(1.02); clip-path: none; }
  .rvc.pre { opacity: 0.3; rotate: -2deg; }
  .title-section.rv.pre { transform: translateY(6px); filter: blur(8px); }
  .work-text.rv.pre { transform: translateX(10px); }
  .work-text-narrow.rv.pre, .artists-text.rv.pre { transform: translateX(-10px); }
  .gallery-item:nth-child(3n+2) .rvi, .artists-frame.rvi + .artists-frame.rvi { transition-delay: 0.25s; }
  .gallery-item:nth-child(3n) .rvi { transition-delay: 0.5s; }
}

/* ——— The artists' letter, 2026-10-03: their own words from the letter that travels with every work, given a full-width
   moment of their own. The two key phrases catch the light like chrome, and the heart of it is mirrored below,
   the same reflection the opening title has. The words come into focus one phrase at a time. ——— */
.letter { position: relative; max-width: 70rem; margin: clamp(6rem, 13vw, 12rem) auto 0; padding: clamp(3rem, 7vw, 6rem) 0 0; border-top: 1px solid rgba(249, 240, 232, 0.16); display: flex; flex-direction: column; align-items: center; text-align: center; }
.letter-mark { display: block; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-size: clamp(6rem, 16vw, 13rem); line-height: 0.6; height: 0.45em; margin-bottom: clamp(0.5rem, 2vw, 1.5rem); }
.letter-text { margin: 0; font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-weight: 400; font-size: clamp(1.75rem, 4.3vw, 3.9rem); line-height: 1.18; letter-spacing: -0.012em; color: #F9F0E8; text-wrap: balance; }
.letter-em { font-style: italic; }
.letter-mirror { font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-style: italic; font-size: clamp(1.75rem, 4.3vw, 3.9rem); line-height: 1; color: #F9F0E8; transform: scaleY(-1); opacity: 0.18; height: 0.7em; overflow: hidden; margin-top: 0.15em; mask-image: linear-gradient(to top, #000 0%, transparent 90%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 90%); filter: blur(1.5px); user-select: none; }
.letter-sign { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.letter-names { font-family: 'Gloock', 'Bodoni 72', Didot, Georgia, serif; font-style: italic; font-size: clamp(1.25rem, 2vw, 1.6rem); color: #F9F0E8; }
@media (prefers-reduced-motion: no-preference) {
  .letter.rv.pre { opacity: 1; filter: none; transform: none; }
  .letter .lw, .letter-mark, .letter-sign { transition: opacity 2.6s cubic-bezier(.25,.1,.25,1), filter 2.8s cubic-bezier(.25,.1,.25,1); }
  .letter.pre .lw, .letter.pre .letter-sign { opacity: 0.12; filter: blur(7px); }
  .letter.pre .letter-mark { opacity: 0; }
  .letter .lw:nth-child(2) { transition-delay: 0.45s; }
  .letter .lw:nth-child(3) { transition-delay: 0.9s; }
  .letter .lw:nth-child(4) { transition-delay: 1.35s; }
  .letter .lw:nth-child(5) { transition-delay: 1.8s; }
  .letter .lw:nth-child(6) { transition-delay: 2.25s; }
  .letter .letter-sign { transition-delay: 3.2s; }
}


/* ——— Process, refined 2026-10-03: the film plays like a quiet moving picture (no browser controls, one small pause
   button), all four stills share one shape in a staggered pair of columns, and every frame floats on a soft shadow
   above the slowly drifting resin-coloured background. ——— */
.film-frame { position: relative; overflow: hidden; box-shadow: 0 2.5rem 4.5rem -2rem rgba(5, 0, 16, 0.45), 0 0.75rem 1.5rem -1rem rgba(5, 0, 16, 0.25); }
.film-frame .film { background: #050010; }
.film-toggle { position: absolute; left: 0.9rem; bottom: 0.9rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid rgba(249, 240, 232, 0.45); background: rgba(5, 0, 16, 0.45); color: #F9F0E8; font: inherit; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0.75; transition: opacity 0.4s ease, background-color 0.4s ease; }
.film-toggle:hover, .film-toggle:focus-visible { opacity: 1; background: rgba(5, 0, 16, 0.7); }
.film-toggle:focus-visible { outline: 2px solid #F9F0E8; outline-offset: 3px; }
.film-toggle[hidden] { display: none; }
.process-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); max-width: 36rem; }
.process-stills .still, .process-stills .still-low { margin: 0; }
.process-stills > :nth-child(even) { margin-top: clamp(2rem, 5vw, 3.5rem); }
.process-stills img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; box-shadow: 0 1.75rem 3rem -1.5rem rgba(5, 0, 16, 0.45); }
.process-stills .still-photo { object-position: 50% 50%; }
#processo .caption { color: #4A3A34; }

.poster-credit { display: block; margin-top: 0.3rem; color: #8E8E8C; }


/* ——— Moving backgrounds everywhere, 2026-10-03: Nilvan asked for the opening's idea on every section, each matching
   its own concept. Only the intro ("Cada obra…") and the artists stay plain. Textures move slowly inside the
   section like the opening's liquid silver. ——— */
[aria-labelledby="t-porque"]::before { content: none; }

/* Vila Velha: a coastal mirage, pale sky melting into warm sand, with a sun glow and heat haze drifting across */
[aria-labelledby="t-mundo"] { background-color: #E6E2DA; }
[aria-labelledby="t-mundo"]::before { inset: -10%; background:
  radial-gradient(45vw 30vw at 70% 12%, rgba(255, 226, 180, 0.75), transparent 70%),
  repeating-linear-gradient(180deg, transparent 0 1.8rem, rgba(255, 255, 255, 0.12) 2.4rem, transparent 3rem 4.4rem),
  linear-gradient(180deg, #CFDCE0 0%, #E3E4DE 30%, #EDE3D4 62%, #E8D6C0 100%); animation-name: m-coast; animation-duration: 30s; }
@keyframes m-coast { from { transform: translateY(-2%) scale(1); } to { transform: translateY(2%) scale(1.06) skewY(0.5deg); } }

/* Posters: the warm brand gradient, almost in shadow, behind the posters */
.poster-band::before { inset: -10%; background: url("../assets/textura-cartazes-1600.jpg") center / cover no-repeat; animation-name: m-beam; animation-duration: 36s; }
@keyframes m-beam { from { transform: scale(1.02) translateX(-3%); } to { transform: scale(1.14) translateX(3%); } }

/* Soundtrack and contact: their textures now drift slowly instead of standing still */
.playlist, .section-red { background-image: none; }
.playlist::before { inset: -10%; background: linear-gradient(100deg, rgba(5, 0, 16, 0.72) 0%, rgba(5, 0, 16, 0.45) 45%, rgba(5, 0, 16, 0.6) 100%), url("../assets/textura-trilha-1000.jpg") center / cover no-repeat; animation-name: m-breathe; animation-duration: 26s; }
@keyframes m-breathe { from { transform: scale(1) translate(-2%, 0); } to { transform: scale(1.14) translate(2%, -1.5%); } }
#contato::before { inset: -10%; background: linear-gradient(180deg, rgba(60, 6, 8, 0.5), rgba(60, 6, 8, 0.15) 60%, rgba(60, 6, 8, 0.35)), url("../assets/textura-contato-1000.jpg") 30% 50% / cover no-repeat; animation-name: m-cloud; animation-duration: 32s; }
@keyframes m-cloud { from { transform: scale(1.02) translate(2%, 1%); } to { transform: scale(1.14) translate(-2%, -1%) rotate(-1deg); } }
@media (min-width: 900px) {
  .playlist::before { background-image: linear-gradient(100deg, rgba(5, 0, 16, 0.72) 0%, rgba(5, 0, 16, 0.45) 45%, rgba(5, 0, 16, 0.6) 100%), url("../assets/textura-trilha-2000.jpg"); }
  #contato::before { background-image: linear-gradient(180deg, rgba(60, 6, 8, 0.5), rgba(60, 6, 8, 0.15) 60%, rgba(60, 6, 8, 0.35)), url("../assets/textura-contato-2000.jpg"); }
}

/* Footer: the dark silver liquid of the works, drifting under the last line */
.footer::before { inset: -40% -10%; background: linear-gradient(rgba(5, 0, 16, 0.35), rgba(5, 0, 16, 0.35)), url("../assets/textura-obras-1600.jpg") center / cover no-repeat; animation-name: m-glint; animation-duration: 28s; }
@keyframes m-glint { from { transform: translateX(-4%) scale(1.05); } to { transform: translateX(4%) scale(1.15); } }


/* ——— Living reflections, 2026-10-03: Nilvan wanted real movement in every background, a shadow moving, a reflex,
   a mirage, as in the opening. The opening's own liquid-silver film runs behind each section (except the intro and
   artists), each time recoloured, blended, turned and slowed differently so it reads as that section's own light.
   js/site.js plays each film only while its section is on screen. Without JS or with reduced motion they don't show. ——— */
.bg-fluid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 2.4s ease; }
.bg-fluid.is-on { opacity: var(--fluid-o, 0.5); }
/* Process: warm resin swirling, as the colour is poured */
.bg-processo { --fluid-o: 0.55; mix-blend-mode: soft-light; filter: sepia(1) saturate(2.4) hue-rotate(-18deg) contrast(1.2); transform: scale(1.3) rotate(8deg); }
/* Works: silver reflections sliding across the dark, like light on a mirror in a dim room */
.bg-obras { --fluid-o: 0.38; mix-blend-mode: screen; filter: grayscale(1) contrast(1.6) brightness(0.7); transform: scaleX(-1) scale(1.2); }
/* Certificate: soft silver shadows moving over paper */
.bg-certificado { --fluid-o: 0.5; mix-blend-mode: multiply; filter: grayscale(1) contrast(0.9) brightness(1.25); transform: rotate(180deg) scale(1.2); }
/* Vila Velha: the mirage itself, light shimmering over sea and sand */
.bg-mundo { --fluid-o: 0.55; mix-blend-mode: soft-light; filter: sepia(0.6) saturate(1.8) hue-rotate(150deg) contrast(1.3); transform: scaleY(-1) scale(1.25); }
/* Posters: a warm glow passing in the shadows */
.bg-cartazes { --fluid-o: 0.3; mix-blend-mode: screen; filter: sepia(1) saturate(3) hue-rotate(-30deg) brightness(0.55) contrast(1.4); transform: rotate(-90deg) scale(1.8); }
/* Soundtrack: amber light breathing over the warm texture */
.bg-trilha { --fluid-o: 0.45; mix-blend-mode: soft-light; filter: sepia(1) saturate(2) hue-rotate(-10deg) contrast(1.3); transform: scale(1.4) rotate(-6deg); }
/* Contact: shadows of red liquid moving over the red */
.bg-contato { --fluid-o: 0.6; mix-blend-mode: soft-light; filter: sepia(1) saturate(4) hue-rotate(-40deg) contrast(1.3); transform: scaleX(-1) rotate(12deg) scale(1.3); }
/* Footer: a last silver reflex */
.bg-rodape { --fluid-o: 0.28; mix-blend-mode: screen; filter: grayscale(1) contrast(1.5) brightness(0.6); transform: scale(1.1); }
@media (prefers-reduced-motion: reduce) { .bg-fluid { display: none; } }

/* ——— One palette, 2026-10-03: Nilvan found the mix of orange, grey and black unsophisticated. Every background now
   stays inside the brand: deep black #050010, liquid silver, off-white #F9F0E8 and the deep red #86130F. The moving
   film is always silver (no tints), so the whole site reads as one mirror surface catching light. These rules override
   the earlier per-section textures and tints above. ——— */
/* Process: light liquid silver, like the opening, a little softer */
#processo { background-color: #DCDCD8; }
#processo::before { inset: -10%; background: radial-gradient(60vw 40vw at 75% 20%, rgba(255, 255, 255, 0.7), transparent 70%), radial-gradient(50vw 40vw at 15% 85%, rgba(150, 150, 146, 0.35), transparent 70%), linear-gradient(160deg, #E8E8E5, #CFCFCB); animation-name: m-pour; animation-duration: 30s; }
#processo .caption { color: #3A3A38; }
.bg-processo { --fluid-o: 0.6; mix-blend-mode: soft-light; filter: grayscale(1) contrast(1.25); transform: scale(1.3) rotate(8deg); }
/* Works: deep black, joined to the black band above, with silver reflections sliding across it */
#obras { background-color: #050010; }
#obras::before { inset: -10%; background: radial-gradient(50vw 36vw at 20% 30%, rgba(200, 200, 210, 0.07), transparent 70%), radial-gradient(50vw 36vw at 80% 70%, rgba(134, 19, 15, 0.12), transparent 70%); animation-name: m-pass; animation-duration: 40s; }
.bg-obras { --fluid-o: 0.2; mix-blend-mode: screen; filter: grayscale(1) contrast(1.7) brightness(0.65); transform: scaleX(-1) scale(1.2); }
/* Certificate: off-white paper with silver shadows moving across it */
#certificado { background-color: #F9F0E8; }
#certificado::before { inset: -10%; background: linear-gradient(rgba(249, 240, 232, 0.72), rgba(249, 240, 232, 0.72)), url("../assets/textura-espelho-1600.jpg") center / cover no-repeat; animation-name: m-window; animation-duration: 40s; }
.bg-certificado { --fluid-o: 0.35; mix-blend-mode: multiply; filter: grayscale(1) contrast(0.85) brightness(1.3); transform: rotate(180deg) scale(1.2); }
/* Vila Velha: pale silver haze, a mirage over the coast, only a whisper of warm light */
[aria-labelledby="t-mundo"] { background-color: #E2E1DD; }
[aria-labelledby="t-mundo"]::before { inset: -10%; background: radial-gradient(45vw 30vw at 70% 10%, rgba(249, 240, 232, 0.9), transparent 70%), repeating-linear-gradient(180deg, transparent 0 1.8rem, rgba(255, 255, 255, 0.1) 2.4rem, transparent 3rem 4.4rem), linear-gradient(180deg, #E9E9E6 0%, #DEDDD9 55%, #E6DFD6 100%); animation-name: m-coast; animation-duration: 30s; }
.bg-mundo { --fluid-o: 0.55; mix-blend-mode: soft-light; filter: grayscale(1) contrast(1.3); transform: scaleY(-1) scale(1.25); }
/* Posters: black, a silver reflex passing */
.poster-band::before { background: none; }
.bg-cartazes { --fluid-o: 0.16; mix-blend-mode: screen; filter: grayscale(1) contrast(1.6) brightness(0.6); transform: scale(1.4); }
/* Soundtrack: black with a deep red undertone, silver reflections */
.playlist::before { inset: -10%; background: radial-gradient(60vw 40vw at 75% 40%, rgba(134, 19, 15, 0.28), transparent 70%), #050010; animation-name: m-breathe; animation-duration: 28s; }
@media (min-width: 900px) { .playlist::before { background: radial-gradient(60vw 40vw at 75% 40%, rgba(134, 19, 15, 0.28), transparent 70%), #050010; } }
.bg-trilha { --fluid-o: 0.18; mix-blend-mode: screen; filter: grayscale(1) contrast(1.6) brightness(0.65); transform: scale(1.4) rotate(-6deg); }
/* Contact: the brand red, deepened, with darker red shadows moving over it */
#contato::before { inset: -10%; background: radial-gradient(60vw 45vw at 30% 40%, rgba(160, 28, 22, 0.55), transparent 70%), #6E0F0C; animation-name: m-cloud; animation-duration: 32s; }
@media (min-width: 900px) { #contato::before { background: radial-gradient(60vw 45vw at 30% 40%, rgba(160, 28, 22, 0.55), transparent 70%), #6E0F0C; } }
.bg-contato { --fluid-o: 0.5; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.3) brightness(1.15); transform: scaleX(-1) rotate(12deg) scale(1.3); }
/* Footer: black with a last silver reflex */
.footer::before { background: none; }
.bg-rodape { --fluid-o: 0.16; }

/* Vila Velha row: three photos, one size, one portrait shape (Nilvan, 2026-10-03) */
.place-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.place-trail, .place-sunset, .place-bridge { flex: none; width: auto; }
.place-img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 759px) { .place-row { grid-template-columns: minmax(0, 1fr); } }