/* =============================================================================
 * File: /style.css
 * Creative direction: Existence Creative Solutions.
 * Reference: ECS business card, shirt graphics and photographic composites.
 * Purpose: A gallery entrance using Rez, blood red, layered forms and white light.
 * Font: Supplied Rez. Local preview; commercial permission pending verification.
 * Accessibility: Responsive sizing, focus indicators, controllable motion.
 * Status: WCAG 2.1 AA evaluation pending.
 * ========================================================================== */
@font-face { font-family:Rez; src:url('assets/rez.ttf') format('truetype'); font-display:swap; font-weight:400; }
:root { color-scheme:dark; font-family:Arial,Helvetica,sans-serif; color:#fff; background:#100204; }
* { box-sizing:border-box; }
body { margin:0; min-width:0; }
[hidden] { display:none!important; }
a { color:inherit; }
a,button,summary { touch-action:manipulation; }
:focus-visible { outline:3px solid #fff; outline-offset:5px; box-shadow:0 0 0 8px #990000; }
.scenery { position:fixed; inset:0; z-index:-2; background:#100204; }
.scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.8s ease; }
.scene.active { opacity:1; }
.scenery::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,0,0,.6),transparent 28%,rgba(8,0,0,.1) 48%,rgba(8,0,0,.9)),linear-gradient(90deg,rgba(26,0,0,.35),transparent 70%); }
.shell { min-height:100svh; display:flex; flex-direction:column; padding:2rem clamp(1.25rem,4vw,5rem) 1.5rem; gap:2rem; position:relative; isolation:isolate; overflow:hidden; }
/* Angular red layers reference the original card without exposing its private details. */
.shell::before { content:''; position:absolute; z-index:-1; pointer-events:none; top:0; left:0; width:min(52rem,90vw); height:14rem; background:linear-gradient(115deg,#580006 0%,#a40008 62%,#e11b17 100%); clip-path:polygon(0 0,100% 0,67% 27%,54% 63%,0 100%); opacity:.94; }
.shell::after { content:''; position:absolute; z-index:-1; pointer-events:none; right:0; bottom:0; width:40%; height:15rem; background:linear-gradient(125deg,transparent 20%,#740006 21%,#bb0009 82%,#fa3026); clip-path:polygon(100% 0,100% 100%,0 100%,48% 63%); opacity:.85; }
header { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; flex-wrap:wrap; }
.brand { display:block; text-decoration:none; padding:.2rem 0 .8rem; text-shadow:0 2px 7px #390000; }
.wordmark { display:block; font-family:Rez,Arial,sans-serif; font-size:clamp(2.8rem,5vw,5rem); line-height:1.05; letter-spacing:0; font-weight:400; }
.brand-name { display:block; font-size:.8rem; line-height:1.8; letter-spacing:.17em; font-weight:400; margin-top:1.2rem; }
nav { display:flex; flex-wrap:wrap; gap:.25rem; background:rgba(10,0,0,.84); padding:.25rem .5rem; border-bottom:2px solid #b9000a; }
nav a { display:inline-flex; align-items:center; min-height:44px; padding:.6rem .7rem; font-size:.95rem; text-underline-offset:.5rem; }
nav a:not([aria-current]) { text-decoration:none; }
nav a:hover { text-decoration:underline; }
main { flex:1; display:flex; justify-content:flex-end; flex-direction:column; align-items:center; padding:clamp(3rem,16vh,11rem) 0 2rem; text-align:center; }
.statement { position:relative; width:100%; max-width:65rem; padding:1.5rem 1rem; }
.statement::before { content:''; position:absolute; z-index:-1; inset:-2rem -3rem; background:radial-gradient(ellipse at center,rgba(16,0,0,.9),rgba(16,0,0,.7) 40%,transparent 73%); pointer-events:none; }
.eyebrow { display:inline-block; margin:0 0 1.4rem; padding:.55rem 1rem; background:#850008; font-size:.875rem; line-height:1.6; letter-spacing:.16em; text-transform:uppercase; border-left:2px solid #ff5448; }
h1 { font-family:Rez,Arial,Helvetica,sans-serif; font-size:clamp(3.25rem,7vw,6.8rem); font-weight:400; line-height:1.05; letter-spacing:.01em; margin:0 0 3rem; overflow-wrap:break-word; text-shadow:0 3px 2px #250000,0 0 25px #9e0000,0 0 65px #830000; }
h1 span { color:#fff; }
.intro { font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.5; margin:0 auto .65rem; max-width:42rem; text-shadow:0 2px 4px #000; }
.description { font-size:1rem; line-height:1.65; color:#fff; max-width:36rem; margin:0 auto; text-shadow:0 2px 4px #000; }
.byline { color:#fff; font-size:.875rem; letter-spacing:.13em; margin:1.7rem 0 0; text-shadow:0 2px 4px #000; }
footer { display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap; }
.controls { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; background:#190305; padding:.5rem; border-bottom:2px solid #b9000a; }
button { font:inherit; font-size:.875rem; min-height:44px; min-width:44px; background:#290408; color:#fff; border:1px solid #c67b7b; padding:.6rem .8rem; cursor:pointer; }
button:hover { background:#910008; border-color:white; }
#position { font-size:.875rem; padding:0 .4rem; }
.copyright { font-size:.8rem; line-height:1.6; padding:.5rem .75rem; margin:0; background:#380005; }
#music { background:#210206; padding:1.2rem; margin-top:1rem; max-width:39rem; width:100%; text-align:left; border-top:2px solid #c8000b; }
#music h2 { font-size:1rem; margin:0 0 .6rem; }
#music p { line-height:1.6; }
audio { display:block; width:100%; margin:1rem 0; }
summary { cursor:pointer; padding:.75rem 0; }
.skip { position:fixed; top:1rem; left:1rem; z-index:10; transform:translateY(-200%); background:#fff; color:#111; padding:1rem; }
.skip:focus { transform:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:40rem) {
 .shell { padding:1.25rem 1rem; gap:1rem; }
 header { gap:1rem; }
 .brand-name { letter-spacing:.08em; }
 .shell::before { width:100%; height:12rem; }
 main { padding:5rem 0 1rem; }
 .statement { padding:1rem 0; }
 .scene { object-position:60% center; }
 .eyebrow { font-size:.8rem; letter-spacing:.08em; }
 h1 { font-size:clamp(2.8rem,10vw,4rem); }
 footer { align-items:stretch; justify-content:center; }
 .controls { justify-content:center; }
}
@media(prefers-reduced-motion:reduce) { .scene { transition:none; } }
@media(forced-colors:active) { .statement,nav,.brand,.controls { border:1px solid CanvasText; } }

/* Draft 03: return to the first composition; Rez belongs only to the wordmark.
   Keep the right edge translucent, while the text sits over the darker left. */
:root { font-family:'Muli',Arial,Helvetica,sans-serif; }
.wordmark { width:max-content; font-size:3.7rem; line-height:.95; transform:scale(1.27,.62); transform-origin:left center; }
.brand { min-width:19rem; padding:0; text-shadow:none; }
.brand-name { margin-top:.1rem; font-size:.72rem; letter-spacing:.15em; }
.shell::before { width:min(39rem,76vw); height:10rem; opacity:.9; transform:translate3d(var(--corner-x,0px),var(--corner-y,0px),0); transition:transform 1.3s ease-out; }
.shell::after { width:29%; height:10rem; opacity:.72; transform:translate3d(var(--corner-x,0px),var(--corner-y,0px),0); transition:transform 1.3s ease-out; }
.scenery { inset:-18px; transform:translate3d(var(--photo-x,0px),var(--photo-y,0px),0); transition:transform 1.4s ease-out; }
.scenery::after { background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 25%,transparent 72%,rgba(0,0,0,.5)); }
main { align-items:flex-start; justify-content:center; text-align:left; padding:4rem 0 3rem; }
.statement { max-width:41rem; width:100%; padding:2.4rem 2.5rem; background:linear-gradient(90deg,rgba(5,8,9,.96) 0%,rgba(5,8,9,.91) 70%,rgba(5,8,9,.56) 100%); border-left:2px solid #ad0009; }
.statement::before { display:none; }
.eyebrow { padding:0; border:0; background:none; color:#fff; letter-spacing:.14em; font-size:.78rem; margin:0 0 1.5rem; }
h1 { font-family:'Muli',Arial,Helvetica,sans-serif; font-size:clamp(2.8rem,5.4vw,5.2rem); font-weight:700; line-height:1.12; letter-spacing:-.045em; margin:0 0 1.6rem; text-shadow:none; }
h1 span { color:#ed3038; }
.intro { font-size:1.14rem; line-height:1.55; margin:0 0 .8rem; text-shadow:none; }
.description { font-size:.95rem; line-height:1.7; color:#f0f0f0; margin:0; text-shadow:none; max-width:31rem; }
.controls { background:rgba(5,8,9,.86); border-bottom:1px solid #ad0009; }
button { background:transparent; border-color:#939393; font-family:inherit; }
.copyright { background:rgba(24,0,0,.64); }
/* Draft 04: fixed framing. Never attach pointer transforms to UI or images.
   Atmospheric canvas layers provide depth without misrepresenting a flattened
   composite as an independently segmented photographic scene. */
.shell::before,.shell::after { position:fixed; transform:none; transition:none; }
.scenery { inset:0; transform:none; transition:none; overflow:hidden; }
.scene { animation:none; }
.brand-name { margin-left:6px; }
.statement { max-width:37rem; padding:2rem 2.2rem; background:linear-gradient(100deg,rgba(5,8,9,.84),rgba(5,8,9,.78)); }
blockquote { margin:0; }
blockquote p { margin:0; font-size:clamp(1.6rem,3vw,2.75rem); font-weight:400; line-height:1.45; letter-spacing:-.025em; text-wrap:pretty; }
#atmosphere { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#music { max-width:37rem; margin-top:1rem; padding:.5rem .75rem; background:rgba(5,8,9,.86); border-top:1px solid #a40008; }
#music details { font-size:.72rem; }
#music summary { padding:.45rem 0; width:max-content; min-height:24px; }
#music p { margin:.5rem 0; }
.sound-row { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
#sound-toggle { font-size:.78rem; flex-shrink:0; }
#waveform { width:clamp(60px,11vw,170px); height:40px; flex:1; min-width:40px; }
.volume-label { font-size:.7rem; }
#volume { width:65px; min-height:44px; accent-color:#ed3038; margin:0; }
@media(max-width:40rem) {
 .brand { min-width:0; width:100%; }
 .wordmark { font-size:3.1rem; }
 main { padding:2.5rem 0 1.5rem; }
 .statement { padding:1.5rem 1.25rem; }
 .shell::before { width:100%; height:8rem; }
 .shell::after { width:58%; }
 .sound-row { gap:.4rem; }
 #volume { width:55px; }
}
@media(prefers-reduced-motion:reduce) {
 .scene { transition:none; }
 #atmosphere { display:none; }
}
/* Audio belongs beside the image controls, leaving the quote uninterrupted.
   Wrap controls naturally on small screens instead of shrinking touch targets. */
footer { justify-content:flex-start; }
footer #music { width:auto; flex:1 1 22rem; max-width:32rem; margin:0; }
footer .copyright { margin-left:auto; }

/* Quote choreography is deliberately offset from the photographic dissolve. */
.statement { transition:opacity .65s ease; }
.statement.quote-out { opacity:0; }
.quote-author { font-size:.78rem; letter-spacing:.08em; margin:1.15rem 0 0; color:#eee; }
@media(prefers-reduced-motion:reduce) { .statement { transition:none; } }

/* Lake-only depth study: background and person have independent movement. */
.scene:nth-child(3) { transform:translate(var(--lake-x,0px),var(--lake-y,0px)) scale(1.015); }
#quote-text { white-space:pre-line; }
@media(prefers-reduced-motion:reduce) { .scene:nth-child(3) { transform:none; } }
/* Reduced motion still shows the original complete person/lake composite. */
@media(prefers-reduced-motion:reduce) { .scene:nth-child(3) { content:url('assets/X3a.jpg'); } }
@media(max-width:40rem) {
 .scene:first-child { object-position:34% center; }
 .scene:nth-child(2),.scene:nth-child(5) { object-position:center; }
 .scene:nth-child(3) { object-position:82% center; }
}
/* Draft 07: two softly masked planes, sharing the same cached photograph.
   Keep the complete canoe, people, jellyfish and reflections together.
   This is a shallow depth study, not individual object segmentation. */
.canoe-depth { overflow:hidden; }
.canoe-plane { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; }
.canoe-sky { transform:translateX(var(--canoe-sky-x,0px)) scale(1.045); }
.canoe-water { transform:translate(var(--canoe-water-x,0px),var(--canoe-water-y,0px)) scale(1.045);mask-image:linear-gradient(to bottom,transparent 22%,#000 40%); }
@media(prefers-reduced-motion:reduce) { .canoe-plane { transform:none; }.canoe-water { display:none; } }

/* Fractured ice: clip the backing only, never the words or their focus area.
   Each scene gets a different broken edge beyond the text's safe boundary. */
.statement { position:relative; isolation:isolate; background:none; border:0; }
.statement::after { content:''; position:absolute; z-index:-1; inset:-8px -32px -12px -5px; background:linear-gradient(105deg,rgba(5,8,9,.91),rgba(5,8,9,.78)); clip-path:polygon(0 4%,89% 0,100% 30%,91% 100%,0 95%); }
.statement[data-panel="1"]::after { clip-path:polygon(0 0,95% 5%,100% 72%,87% 100%,0 92%); }
.statement[data-panel="2"]::after { clip-path:polygon(0 7%,90% 0,100% 22%,94% 90%,79% 100%,0 95%); }
.statement[data-panel="3"]::after { clip-path:polygon(0 0,87% 3%,100% 40%,91% 100%,0 93%); }
.statement[data-panel="4"]::after { clip-path:polygon(0 5%,94% 0,100% 65%,88% 96%,0 100%); }
@media(max-width:40rem) { .statement { width:calc(100% - 16px); }.statement::after { right:-20px; } }
@media(forced-colors:active) { .statement { background:Canvas; }.statement::after { display:none; } }