/* ════════════════════════════════════════════════════════════════
   Entangled Witness — Suzanne Miller — DESKTOP STYLESHEET
   ────────────────────────────────────────────────────────────────
   This file is loaded only on viewports ≥ 768px (via <link media>).
   Mobile styles live in mobile.css and load only < 768px.

   Organization:
     1. Config (custom properties)
     2. Reset + base
     3. Preload overlay
     4. Triskelion (shared)
     5. Scroll arrow (info-only, not clickable)
     6. Home section
     7. Quote section
     8. Section 1 — Protest (all paintings use .protest-section)
     9. Closing poem
    10. Final triskelion section
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. Config ─────────────────────────────────────────────── */
:root {
    --color-fg-bright: #bababa;
    --color-fg-dim:    #929292;
    --color-bg:        #000;
    --layout-left:     125px;
    --edge-inset:      50px;
    --arrow-bottom:    75px;
    --arrow-height:    22px;
    --title-size:      20px;
    --title-leading:   34px;
    --title-tracking:  6px;
    --triskel-size:    50px;
}

/* ─── 2. Reset + base ───────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { display: none; }
body {
    font-family: 'Ubuntu', sans-serif;
    background: var(--color-bg); color: #fff;
    overflow-x: hidden;
}

/* ─── 3. Preload overlay ─────────────────────────────────────── */
#preload {
    position: fixed; inset: 0;
    background: var(--color-bg);
    z-index: 10000;
    pointer-events: none;
    transition: opacity 0.8s ease;
}
#preload.ready { opacity: 0; }

/* ─── 3b. Mobile notice (legacy — hidden everywhere now) ─────── */
#mobile-notice { display: none; }

/* ─── 4. Triskelion ─────────────────────────────────────────── */
@keyframes triskelSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Link wrapper for mailto — preserves layout of the img inside */
.triskel-link {
    position: absolute; top: var(--edge-inset); right: var(--edge-inset);
    line-height: 0;
    z-index: 50;
    text-decoration: none;
}
.triskel-link .triskelion,
.triskel-link .painting-triskelion {
    position: static;
    top: auto; right: auto;
}

.triskelion {
    position: absolute; top: var(--edge-inset); right: var(--edge-inset);
    width: auto; height: var(--triskel-size);
    filter: drop-shadow(5px 4px 4px rgba(0,0,0,1));
    opacity: 0; transform: rotate(-15deg);
    transition: opacity 1.5s ease, transform 1.5s ease;
    z-index: 50; cursor: pointer;
}
.triskelion.revealed { opacity: 1; transform: rotate(0deg); }
.triskelion.idle {
    animation: triskelSpin 3s linear infinite;
    animation-play-state: paused;
}
.triskelion.idle:hover { animation-play-state: running; }

.painting-triskelion {
    position: absolute; top: var(--edge-inset); right: var(--edge-inset);
    width: auto; height: var(--triskel-size);
    filter: drop-shadow(5px 4px 4px rgba(0,0,0,1)) brightness(0.4);
    transition: filter 0.3s ease;
    z-index: 50; cursor: pointer;
    opacity: 0;
    animation: triskelSpin 3s linear infinite;
    animation-play-state: paused;
}
.painting-triskelion:hover {
    animation-play-state: running;
    filter: drop-shadow(5px 4px 4px rgba(0,0,0,1)) brightness(0.7);
}

/* ─── 5. Scroll arrows (info-only, not clickable) ────────────── */
@keyframes arrowPulse {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%      { opacity: 0.6; transform: translateY(3px); }
}
.scroll-arrow, .scroll-arrow-static {
    position: absolute;
    left: var(--layout-left); bottom: var(--arrow-bottom);
    width: auto; height: var(--arrow-height);
    z-index: 40;
    pointer-events: none;
    cursor: default;
}
.scroll-arrow {
    opacity: 0;
    transition: opacity 1.5s ease;
}
.scroll-arrow.pulsing,
.scroll-arrow-static:not(.painting-arrow) {
    opacity: 0.4;
    animation: arrowPulse 3s ease-in-out infinite;
}
.painting-arrow {
    opacity: 0;
    animation: arrowPulse 3s ease-in-out infinite;
}

/* ─── 6. Home section ───────────────────────────────────────── */
.home-section {
    position: relative;
    width: 100vw; height: 100vh;
    background: var(--color-bg);
    overflow: hidden;
}
.home-section::before {
    content: ''; position: absolute; inset: 0;
    background-image: url('images/home-bg.jpg');
    background-size: cover; background-position: center;
    opacity: 0; z-index: 1;
    transition: opacity 1.5s ease;
}
.home-section.bg-ready::before { opacity: 1; }

.artist-name {
    position: absolute; top: var(--edge-inset); left: var(--edge-inset);
    font-size: var(--title-size); font-weight: 300;
    color: var(--color-fg-dim);
    line-height: normal; white-space: pre-line;
    opacity: 0; z-index: 20;
}
.site-title {
    position: absolute; left: var(--layout-left);
    top: 50%; transform: translateY(-50%);
    font-size: var(--title-size); font-weight: 400;
    color: var(--color-fg-bright);
    line-height: var(--title-leading);
    letter-spacing: var(--title-tracking);
    z-index: 20;
}
.title-line { display: block; opacity: 0; }
.italic { font-style: italic; font-weight: 300; }

/* ─── 7. Quote section ─────────────────────────────────────── */
.quote-section {
    position: relative;
    width: 100vw; height: 100vh;
    background: var(--color-bg);
}
.quote-content {
    position: absolute;
    left: var(--layout-left); top: 50%;
    transform: translateY(-50%);
}
.quote-line {
    font-size: var(--title-size); font-style: italic; font-weight: 300;
    color: var(--color-fg-bright);
    letter-spacing: 3px; line-height: 42px;
}
.quote-author {
    font-size: 14px; font-weight: 300;
    color: var(--color-fg-dim);
    letter-spacing: 4px; margin-top: 14px;
}
.quote-letter {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity, filter;
}

/* ─── 8. Section 1 — Protest ──────────────────────────────── */
.protest-section {
    position: relative;
    width: 100vw; height: 100vh;
    background: var(--color-bg);
    overflow: hidden;
}
.protest-section .painting-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: 1;
    opacity: 0;
    will-change: opacity, transform;
}
.protest-section .painting {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100vh - 190px);
    max-width: 90vw;
    width: auto; height: auto;
    object-fit: contain;
    z-index: 3;
    opacity: 0;
    --blur: 24px;
    --gray: 1;
    filter: blur(var(--blur)) grayscale(var(--gray));
    will-change: filter, opacity;
}
.protest-section .painting-info {
    position: absolute;
    left: var(--layout-left); top: 50%;
    transform: translateY(-50%);
    z-index: 30;
}
.painting-title,
.painting-size {
    font-size: 14px; font-weight: 300;
    letter-spacing: 1px; line-height: 24px;
    opacity: 0;
}
.painting-title { color: var(--color-fg-bright); }
.painting-size  { color: var(--color-fg-dim); }

/* ─── 9. Closing poem ────────────────────────────────────── */
.closing-poem-section {
    position: relative;
    width: 100vw; height: 100vh;
    background: var(--color-bg);
    overflow: hidden;
}
.closing-poem-content {
    position: absolute;
    left: var(--layout-left);
    top: 50%;
    transform: translateY(-50%);
    max-width: calc(100vw - var(--layout-left) - 50px);
}
.closing-poem-line {
    font-size: 20px;
    font-style: italic;
    font-weight: 300;
    color: var(--color-fg-bright);
    letter-spacing: 3px;
    line-height: 32px;
    opacity: 0;
    will-change: opacity, filter, transform;
}
.closing-poem-author {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-fg-dim);
    letter-spacing: 4px;
    margin-top: 14px;
    opacity: 0;
    will-change: opacity, filter;
}

/* Desktop laptop-height screens: shrink closing poem type to fit */
@media (max-height: 820px) and (min-width: 1024px) {
    .closing-poem-line {
        font-size: 17px;
        line-height: 27px;
        letter-spacing: 2px;
    }
}

/* ─── 10. Final triskelion section ───────────────────────── */
.final-section {
    position: relative;
    width: 100vw; height: 100vh;
    background: var(--color-bg);
    overflow: hidden;
}
.final-triskel-link {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    line-height: 0;
    text-decoration: none;
    cursor: pointer;
    z-index: 50;
}
@keyframes triskelBreathe {
    0%, 100% { transform: scale(1.0);  opacity: 0.85; }
    50%      { transform: scale(1.04); opacity: 1.0; }
}
.final-triskelion {
    width: auto;
    height: var(--triskel-size);
    filter: drop-shadow(5px 4px 4px rgba(0, 0, 0, 1));
    opacity: 0;
    animation: triskelBreathe 4.2s ease-in-out infinite;
    animation-play-state: paused;
    transition: filter 0.4s ease;
}
.final-triskelion.live {
    animation-play-state: running;
}
.final-triskel-link:hover .final-triskelion {
    animation: triskelSpin 5s linear infinite;
    filter: drop-shadow(5px 4px 4px rgba(0, 0, 0, 1)) brightness(1.1);
}

.final-triskel-link::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: 'Ubuntu', sans-serif;
    font-size: 13px;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 2px;
    color: var(--color-fg-dim);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}
.final-triskel-link:hover::after { opacity: 1; }

@keyframes letterFadeIn { to { opacity: 1; } }