/* ════════════════════════════════════════════════════════════════
   mobile.css — Entangled Witness mobile static portfolio
   ────────────────────────────────────────────────────────────────
   Loaded ONLY at viewport widths below 768px via media attribute
   in index.html. Mobile is COMPLETELY STATIC — no transitions, no
   GSAP/Lenis, no IntersectionObserver. Every section displays all
   elements at once. Scroll-snap gives each section a clean stop.
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. Config ─────────────────────────────────────────────── */
:root {
    --color-fg-bright: #bababa;
    --color-fg-dim:    #929292;
    --color-bg:        #000;
    --edge-inset:      22px;
    --side-padding:    clamp(20px, 6vw, 32px);
    --triskel-size:    26px;            /* default phone */
    --title-indent:    22%;             /* legacy — superseded by --painting-margin */
    --painting-width:  84vw;            /* painting + info share this width */
    --painting-margin: calc((100vw - var(--painting-width)) / 2);  /* = 8vw — canonical left indent */
}

/* Scale up for larger phones / small tablets that still get mobile.css */
@media (min-width: 430px) { :root { --triskel-size: 30px; } }
@media (min-width: 600px) { :root { --triskel-size: 34px; } }

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

/* Legacy desktop banner — always hidden on mobile */
#mobile-notice { display: none !important; }

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

.home-section,
.quote-section,
.protest-section,
.closing-poem-section,
.final-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* ─── 4. Triskelion — subtle, no shadow, static ────────────── */
/* Wrapper links positioned top-right on home + painting screens. */
.triskel-link {
    position: absolute;
    top: var(--edge-inset);
    right: var(--edge-inset);
    line-height: 0;
    z-index: 50;
    text-decoration: none;
}
.triskelion,
.painting-triskelion {
    width: auto;
    height: var(--triskel-size);
    opacity: 0.75;
    filter: none;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* Desktop scroll arrows — hidden entirely on mobile */
.scroll-arrow,
.scroll-arrow-static { display: none !important; }

/* ─── 5. Home ─────────────────────────────────────────────── */
.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-mobile-bg.jpg');
    background-size: cover;
    background-position: center;
    opacity: 1;
    z-index: 1;
}

/* Name — top-left, two stacked lines */
.artist-name {
    position: absolute;
    top: var(--edge-inset);
    left: var(--edge-inset);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 1px;
    color: var(--color-fg-bright);
    white-space: pre-line;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    opacity: 1 !important;
    transform: none !important;
    z-index: 20;
}

/* Title "entangled / witness," — vertically centered,
   noticeably indented from name's left edge,
   +2pt over name, tighter line-spacing */
.site-title {
    position: absolute;
    top: 50%;
    left: var(--painting-margin);
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 2px;
    color: var(--color-fg-bright);
    text-shadow: 0 0 14px rgba(0, 0, 0, 0.7);
    z-index: 20;
}
.title-line {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}
.italic { font-style: italic; font-weight: 300; }

/* Scale type up on larger phones */
@media (min-width: 430px) {
    .artist-name { font-size: 20px; }
    .site-title  { font-size: 22px; }
}
@media (min-width: 600px) {
    .artist-name { font-size: 22px; }
    .site-title  { font-size: 24px; }
}

/* Bottom note — static, italic, #bababa, no underline */
.home-section::after {
    content: "full experience lives on desktop";
    position: absolute;
    left: var(--painting-margin);
    bottom: 35px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--color-fg-bright);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    opacity: 0.85;
    z-index: 30;
    text-decoration: none;
    pointer-events: none;
}
@media (min-width: 430px) {
    .home-section::after { font-size: 16px; }
}
@media (min-width: 600px) {
    .home-section::after { font-size: 17px; }
}

/* ─── 6. Opening poem ─────────────────────────────────────── */
.quote-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: var(--color-bg);
    padding: 90px var(--side-padding);
    display: flex;
    align-items: center;
}
.quote-content {
    position: relative;
    width: 100%;
}
.quote-line {
    font-size: 15px;
    font-style: italic;
    font-weight: 300;
    color: var(--color-fg-bright);
    letter-spacing: 1.5px;
    line-height: 1.8;
    opacity: 1 !important;
}
.quote-author {
    font-size: 11px;
    font-weight: 300;
    color: var(--color-fg-dim);
    letter-spacing: 2.5px;
    margin-top: 22px;
    opacity: 1 !important;
}
.quote-letter {
    display: inline-block;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}
@media (min-width: 430px) {
    .quote-line   { font-size: 17px; }
    .quote-author { font-size: 12px; }
}
@media (min-width: 600px) {
    .quote-line   { font-size: 19px; }
    .quote-author { font-size: 13px; }
}

/* ─── 7. Protest paintings ────────────────────────────────── */
/* All 4 share mobile-bg-section1.jpg as BG. Painting centered
   with equal side margins, vertically centered. Title + size
   below, flush-left to painting's left edge. Triskelion on
   each screen. Completely static. */
.protest-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: var(--color-bg);
    padding: var(--edge-inset) var(--side-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* Shared BG — applied via painting-bg div already in HTML.
   `!important` overrides the inline background-image each section
   sets for its desktop-specific BG. Bright enough to actually show. */
.protest-section .painting-bg {
    position: absolute; inset: 0;
    background-image: url('images/mobile-bg-section1.jpg') !important;
    background-size: cover;
    background-position: center;
    opacity: 0.85;
    z-index: 1;
    transform: none !important;
}

/* Painting — width-only constraint so the element box matches the
   rendered image pixel width. This means .painting-info at the same
   width lines up flush-left with the painting's visible left edge
   without needing JS. All our paintings are ≤1.33 wide:tall aspect,
   so on any phone, width × 1.33 < 68vh — max-height never binds. */
.protest-section .painting {
    position: relative;
    display: block;
    width: var(--painting-width);
    height: auto;
    margin: 0 auto;
    z-index: 5;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}
.protest-section .painting-info {
    position: relative;
    display: block;
    width: var(--painting-width);
    margin: 14px auto 0;
    text-align: left;
    z-index: 10;
    opacity: 1 !important;
    transform: none !important;
}
.painting-title {
    font-size: 13px;
    font-weight: 300;
    color: var(--color-fg-bright);
    letter-spacing: 1.5px;
    line-height: 1.5;
    opacity: 1 !important;
}
.painting-size {
    font-size: 12px;
    font-weight: 300;
    color: var(--color-fg-dim);
    letter-spacing: 1.5px;
    line-height: 1.5;
    opacity: 1 !important;
}
@media (min-width: 430px) {
    .painting-title { font-size: 14px; }
    .painting-size  { font-size: 13px; }
}
@media (min-width: 600px) {
    .painting-title { font-size: 15px; }
    .painting-size  { font-size: 14px; }
}
/* Painting-arrow element from desktop — hidden on mobile */
.painting-arrow { display: none !important; }

/* ─── 8. Closing poem ─────────────────────────────────────── */
/* Long poem — will scroll within its own section if content
   exceeds viewport. No transitions, all visible immediately. */
.closing-poem-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: var(--color-bg);
    padding: 80px var(--side-padding);
    display: flex;
    align-items: center;
}
.closing-poem-content {
    position: relative;
    width: 100%;
}
.closing-poem-line {
    font-size: 14px;
    font-style: italic;
    font-weight: 300;
    color: var(--color-fg-bright);
    letter-spacing: 1.5px;
    line-height: 1.7;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}
.closing-poem-author {
    font-size: 11px;
    font-weight: 300;
    color: var(--color-fg-dim);
    letter-spacing: 2.5px;
    margin-top: 22px;
    opacity: 1 !important;
    filter: none !important;
}
@media (min-width: 430px) {
    .closing-poem-line   { font-size: 15px; }
    .closing-poem-author { font-size: 12px; }
}
@media (min-width: 600px) {
    .closing-poem-line   { font-size: 16px; }
    .closing-poem-author { font-size: 13px; }
}

/* ─── 9. Final triskelion ─────────────────────────────────── */
.final-section {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    background: var(--color-bg);
    padding: 60px var(--side-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.final-triskel-link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    text-decoration: none;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}
.final-triskelion {
    width: auto;
    height: 40px;
    opacity: 0.9;
    filter: none !important;
    animation: none !important;
    transition: none !important;
}
/* Always-visible caption (no hover state on mobile) — pulls text
   from the data-tooltip attribute on the parent anchor so there's
   no hardcoded string to fall out of sync with the HTML. */
.final-triskel-link::after {
    content: attr(data-tooltip);
    position: relative;
    top: auto; left: auto;
    display: block;
    transform: none;
    font-family: 'Ubuntu', sans-serif;
    font-size: 12px;
    font-weight: 300;
    font-style: italic;
    letter-spacing: 2px;
    color: var(--color-fg-bright);
    opacity: 0.9;
    text-align: center;
    max-width: 280px;
    white-space: normal;
    pointer-events: none;
}
@media (min-width: 430px) {
    .final-triskelion { height: 44px; }
    .final-triskel-link::after { font-size: 13px; }
}
@media (min-width: 600px) {
    .final-triskelion { height: 50px; }
    .final-triskel-link::after { font-size: 14px; }
}

/* ─── 10. Phone landscape: rotate-to-portrait message ─────── */
/* When a phone is rotated landscape (narrow width + short
   height), hide the site entirely and show a simple message
   asking the viewer to rotate. Injected by mobile.js as
   #rotate-notice if not present in HTML. */
#rotate-notice {
    display: none;
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    font-family: 'Ubuntu', sans-serif;
    font-size: clamp(13px, 3.5vw, 15px);
    font-style: italic;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--color-fg-bright);
    line-height: 1.6;
}

@media (orientation: landscape) and (max-height: 500px) {
    main { display: none !important; }
    #rotate-notice { display: flex !important; }
}