/* effects.css
   The symphonyinacid.net visual vocabulary, reproduced 1:1 from the site's
   style sheets. Everything is driven by attributes/classes the engine sets:
     [glitch="1".."5"]   solid colour-FLIP blocks (not RGB-split)
     [decor="1".."10"]   uppercase / underline / symbol / italic / spacing / pads
     #container[borders]  black box borders around every <font>
     #container[layout]   flex / grid / alignment arrangements
     .selected            black redaction block
     #container[scene]     per-scene font-size scale + alignment + ground
   All sizes are in em so they scale with the calc(var(--fs) * 5.5) base. */

/* ====================== GLITCH (colour-flip blocks) ===================== */
/* The site's glitch is a hard colour swap, not a transform. !important so it
   overrides the inline colour blocks react.js paints on. glitch="0" = off. */
#container [glitch="1"] { background: var(--g1) !important; color: #000 !important; }
#container [glitch="1"] font { background: transparent; color: inherit; }
#container [glitch="2"] { background: #000 !important; color: #fff !important; }
#container [glitch="2"] font { background: transparent; color: inherit; }
#container [glitch="3"] { color: #000 !important; }
#container [glitch="3"] font { color: inherit !important; }
#container [glitch="4"] { background: var(--c-blue) !important; color: #fff !important; }
#container [glitch="4"] font { background: transparent; color: inherit; }
/* glitch=5 swaps a glyph to the symbol font — applies whether the attribute is
   on a per-character <font> or on a [word] span. */
#container [glitch="5"], #container [glitch="5"] font { font-family: var(--font-symbol); }

/* ====================== DECOR (1..10) =================================== */
/* Each value targets the element directly (a per-character <font>) AND any
   child <font> (when set on a [word] span), so the per-letter texture works
   everywhere: uppercase / underline / symbol / italic / spacing / padding. */
#container [decor="1"]  { text-transform: uppercase; }
#container [decor="2"]  { text-decoration: underline; }
#container [decor="3"], #container [decor="3"] font { font-family: var(--font-symbol); }
#container [decor="4"]  { font-style: italic; }
#container [decor="5"]  { letter-spacing: 0.2em; padding-left: 0.2em; }
#container [decor="6"]  { color: #fff !important; }
#container [decor="6"] font { color: inherit !important; }
#container [decor="7"]  { background: #fff !important; }
#container [decor="8"],  #container [decor="8"] font  { padding: 0.5em !important; }
#container [decor="9"],  #container [decor="9"] font  { padding-left: 0.5em !important; padding-right: 0.5em !important; }
#container [decor="10"], #container [decor="10"] font { padding-top: 0.5em !important; padding-bottom: 0.5em !important; }

/* ====================== BORDERS (1..4) ================================== */
/* Black box borders around each <font>, with negative margins so adjacent
   boxes share an edge — exactly like the site's borders="1".."4". */
#container[borders="1"] [word] { margin: 0 0.14em; }
#container[borders="1"] font   { border: 0.02em solid #000; margin: -0.02em -0.02em 0 0; padding: 0 0.04em 0.14em; }
#container[borders="2"] [word] { margin: 0 0.14em; }
#container[borders="2"] font   { border: 0.05em solid #000; margin: -0.05em -0.05em 0 0; padding: 0 0.04em 0.14em; }
#container[borders="3"] [word] { margin: 0 0.14em; }
#container[borders="3"] font   { border: 0.1em solid #000; margin: -0.1em -0.1em 0 0; padding: 0 0.04em 0.14em; }
#container[borders="4"] [word] { margin: 0 0.14em; }
#container[borders="4"] font   { border-right: 0.1em solid var(--c-blue); }

/* ====================== SELECTED (redaction) =========================== */
/* The site's .selected is simply a black block. Per-scene rules below flip it
   to blue/white where the ground is dark. */
#container .selected { background: #000; }

/* ====================== CONTAINER LAYOUTS (1..30) ====================== */
/* Flex / grid / alignment arrangements in the spirit of the site. */
#container[layout="1"]  { text-transform: uppercase; }
#container[layout="1"]  p { display: flex; flex-wrap: wrap; justify-content: space-between; }
#container[layout="1"]  font, #container[layout="2"] font { padding: 0.05em !important; }
#container[layout="2"]  p { display: flex; flex-wrap: wrap; justify-content: space-between; }
#container[layout="3"]  p { display: flex; flex-wrap: wrap; justify-content: space-between; }
#container[layout="3"]  p [word] { margin: 0 0.15em; }
#container[layout="4"]  p { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
#container[layout="4"]  p font { background: #ddd; }
#container[layout="5"]  [word] { background: #fff; color: #000; padding: 0 0.14em; }
#container[layout="6"]  [word] { background: #000; color: #fff; margin: 0 calc(var(--fs) * 1.5); }
#container[layout="7"]  p { text-align: left; }
#container[layout="8"]  p { text-align: right; padding-left: calc(var(--fs) * 2); }
#container[layout="9"]  { text-align: left; }
#container[layout="10"] { text-align: right; }
#container[layout="11"] { text-align: right; }
#container[layout="12"] { text-align: right; }
#container[layout="12"] p { vertical-align: middle; }
#container[layout="13"] { text-align: right; }
#container[layout="14"] p { display: flex; flex-wrap: wrap; justify-content: space-between; }
#container[layout="15"] p { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
#container[layout="16"] p { display: flex; flex-wrap: wrap; }
#container[layout="17"] p { display: flex; flex-wrap: wrap; }
#container[layout="18"] p { display: flex; flex-wrap: wrap; }
#container[layout="19"] p { display: flex; flex-wrap: wrap; }
#container[layout="20"] p { display: flex; flex-wrap: wrap; }
#container[layout="21"] p { display: flex; flex-wrap: wrap; justify-content: space-between; }
#container[layout="22"] { text-align: right; }
#container[layout="23"] { text-align: right; }
#container[layout="24"] p { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
#container[layout="25"] { text-align: center; }
#container[layout="26"] p { text-align: right; }
#container[layout="27"] p { text-align: left; }
#container[layout="28"] [word] { width: 30vw; }
#container[layout="29"] p { width: 75%; margin: 0 auto; }
#container[layout="30"] p { width: 50vw; margin: 0 auto; }

/* ====================== PER-SCENE FLAVOR ================================ */
/* Scene = font-size scale (relative to the calc(var(--fs)*5.5) base) plus
   alignment and ground colour, mirroring the site's 26 scenes. Our engine is
   0-indexed; scene N maps to the site's scene N+1. --scene-scale feeds the
   font-size calc in main.css. */

/* Centered "stage cell" scenes. */
#container[scene="1"], #container[scene="2"], #container[scene="3"],
#container[scene="4"], #container[scene="5"], #container[scene="8"] {
  display: table-cell; vertical-align: middle; text-align: center; width: 100vw;
}
#container[scene="0"] { display: table-cell; vertical-align: top; }

#container[scene="2"]  { --scene-scale: 2.3; }                    /* big center */
#container[scene="3"], #container[scene="4"] { padding: 0 calc(var(--fs) * 4); }
#container[scene="5"]  { --scene-scale: 0.5; }                    /* small center */

/* Bordered box grid. */
#container[scene="6"] { --scene-scale: 0.25; text-align: center; }
#container[scene="6"] [word] { border: 0.14vw solid #000; margin: calc(var(--fs) * -0.07); }
#container[scene="6"] .selected { background: var(--c-blue) !important; color: #fff !important; }

/* One giant word, left, tight leading. */
#container[scene="7"] { --scene-scale: 8; text-align: left; padding: 18vh 0; }
#container[scene="7"] font { line-height: 0.75em; }
#container[scene="7"] font.selected { background: var(--c-blue); color: #fff; }

#container[scene="8"]  { --scene-scale: 1.8; }                    /* 180% center */
#container[scene="9"]  { --scene-scale: 0.5; }                    /* narrow block */
#container[scene="10"] { --scene-scale: 0.8; display: flex; flex-wrap: wrap; }
#container[scene="11"] { --scene-scale: 0.5; display: flex; flex-wrap: wrap; }
#container[scene="11"] p, #container[scene="10"] p { text-align: left; }
#container[scene="11"] p.selected { background: #000 !important; color: #fff; }
#container[scene="12"] { --scene-scale: 0.333; text-align: left; }
#container[scene="12"] .selected font { background: #000 !important; color: #fff !important; }

/* Giant viewport-sized type. */
#container[scene="13"] { font-size: 8.3vw; }
@media (max-aspect-ratio: 1/1) { #container[scene="13"] { font-size: 14vw; } }

/* Small dense walls (scenes 14..16 ~1.6fs, 17..23 ~1.27fs). */
#container[scene="14"], #container[scene="15"], #container[scene="16"] { --scene-scale: 0.29; }
#container[scene="14"] { transition: font-size 6s ease; }
#container[scene="15"] { color: #000; }
#container[scene="15"] [glitch="2"] { background: var(--c-red) !important; color: #000 !important; }
#container[scene="16"] { color: #222; }
#container[scene="16"] .selected, #container[scene="16"] .selected font { background: transparent !important; color: #fff !important; }

#container[scene="17"], #container[scene="18"], #container[scene="19"],
#container[scene="20"], #container[scene="21"], #container[scene="22"],
#container[scene="23"] { --scene-scale: 0.231; }

#container[scene="17"] [glitch="2"] { background: var(--c-yellow) !important; color: var(--c-blue) !important; }
#container[scene="18"], #container[scene="19"] { display: block; }
#container[scene="18"] [glitch="2"], #container[scene="19"] [glitch="2"] { background: var(--c-yellow) !important; color: var(--c-blue) !important; }
#container[scene="19"] .selected { color: var(--c-blue); background: transparent; }

/* Dark-ground finale scenes (the site flips to a black page here). */
#container[scene="20"], #container[scene="21"], #container[scene="22"],
#container[scene="23"], #container[scene="24"] {
  background: #000; color: #fff;
}
#container[scene="20"] [word], #container[scene="21"] [word],
#container[scene="22"] [word], #container[scene="23"] [word] { display: inline-block; }
#container[scene="21"] [glitch="1"], #container[scene="22"] [glitch="1"],
#container[scene="23"] [glitch="1"] { background: var(--c-yellow) !important; color: var(--c-blue) !important; }
#container[scene="24"] .selected { color: #fff !important; background: transparent !important; }

/* Outro: centered, black ground. */
#container[scene="24"] { display: table-cell; vertical-align: middle; text-align: center; }
#container[scene="25"] { display: table-cell; vertical-align: middle; text-align: center; }

/* Reduced-motion: drop the slow size transition. */
@media (prefers-reduced-motion: reduce) {
  #container[scene="14"] { transition: none; }
}