/* ============================================================
   White Album collage — the "Revolution 9" freakout.
   A scoped rupture embedded inside the calm reader (essay 15).
   Everything is namespaced under .freakout so nothing leaks into
   the rest of the book. Vars + keyframes are local too.
   Hidden-until-revealed state is gated on .fk-js so that if the
   script never runs, the collage still reads top to bottom.
   ============================================================ */
.freakout{
  --ink:#1c1b18; --faint:#6c675c; --rule:#e2e0da;
  --serif:"EB Garamond", Georgia, serif;
  --derek:"Spectral", Georgia, serif;
  --mono:ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sep:"Playfair Display", Georgia, serif;
  --measure:38rem;
  color:var(--ink); font-family:var(--serif); position:relative;
}
.freakout .flow{max-width:var(--measure);margin:0 auto;padding:6vh 1.4rem 10vh;position:relative;}

.freakout .fk-copy{font-family:var(--mono);font-size:0.58rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--faint);text-align:right;max-width:var(--measure);margin:0 auto;padding:2vh 1.4rem 0;}
.freakout .fk-copy a{color:var(--faint);text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.freakout .fk-copy a:hover{color:var(--ink);}

/* scroll reveal — only active when JS is present */
.freakout .c{margin:24vh auto;}
.fk-js .freakout .c{opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease;}
.fk-js .freakout .c.in{opacity:1;transform:none;}
.fk-js .freakout .c.slow{transition:opacity 1.5s ease, transform 1.5s ease;}
.fk-js .freakout .c.slam{transform:scale(1.05);transition:opacity .07s linear, transform .07s linear;}
.fk-js .freakout .c.slam.in{transform:none;}
.fk-js .freakout .c.from-right{transform:translateX(70px);} .fk-js .freakout .c.from-right.in{transform:none;}
.fk-js .freakout .c.from-left{transform:translateX(-70px);} .fk-js .freakout .c.from-left.in{transform:none;}

.freakout .tight{margin:2.5vh auto;}
.freakout .snug{margin:7vh auto;}
.freakout .wide{margin:42vh auto;}
.freakout .xwide{margin:60vh auto;}

/* voices — differentiated by type, never color */
.freakout .v-narr{font-family:var(--serif);}
.freakout .v-didion{font-family:var(--serif);font-style:italic;}
.freakout .v-engel{font-family:var(--mono);font-size:0.82em;line-height:1.7;letter-spacing:-0.01em;}
.freakout .v-derek{font-family:var(--derek);}
.freakout .v-song{font-family:var(--serif);font-style:italic;}
.freakout .v-verse{font-family:var(--serif);font-style:italic;}
.freakout .glyph{font-family:var(--sep);color:var(--ink);text-align:center;letter-spacing:0.12em;font-size:1.18em;}
.freakout .lone-i{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:1.9em;line-height:0;vertical-align:-0.12em;}
.freakout .boom{font-family:var(--serif);line-height:0.92;letter-spacing:-0.02em;word-break:break-all;text-align:center;}
.freakout .shout{font-family:var(--serif);font-size:clamp(2rem,7vw,3.6rem);line-height:1.05;letter-spacing:-0.01em;text-align:center;}
.freakout .plaque{font-family:var(--mono);text-transform:uppercase;letter-spacing:0.22em;font-size:0.82em;text-align:center;
        border:1px solid var(--ink);padding:0.8rem 0.6rem;max-width:24rem;margin-left:auto;margin-right:auto;}
.freakout .attr{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--faint);margin-bottom:0.5rem;}
.freakout .telegram{font-family:var(--mono);font-size:0.8em;line-height:2;text-align:right;}
.freakout .concrete{font-family:var(--mono);white-space:pre-wrap;font-size:0.9em;line-height:1.7;}
/* the reader's own .reading p.concrete rule is more specific; restore collage parity */
.freakout p.concrete{color:var(--ink);text-align:left;letter-spacing:0;}
.freakout .tiny{font-size:0.82em;color:var(--faint);}

/* placement / breaking the margins */
.freakout .far-right{width:62%;margin-left:38%;text-align:right;}
.freakout .far-left{width:62%;}
.freakout .edge-right{text-align:right;margin-right:-9vw;}
.freakout .indent1{padding-left:3rem;} .freakout .indent2{padding-left:7rem;} .freakout .indent3{padding-left:11rem;}
.freakout .stagger p{margin:0.15rem 0;}
.freakout .bleed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.freakout .c.static{opacity:1 !important;transform:none !important;transition:none;}
.freakout .lead{margin-bottom:2vh !important;}
.freakout .q-tight{margin-top:2vh !important;}
.freakout .octagon{position:relative;width:min(78vw,32rem);height:42vh;margin-left:auto;margin-right:auto;}
.freakout .octagon .octa{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;}
.freakout .octagon .octa-c{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;color:var(--faint);font-size:0.9em;}

/* looping fades */
@keyframes fk-flick{0%,100%{opacity:1;}45%,55%{opacity:0.06;}}
.freakout .flick{animation:fk-flick 3.2s ease-in-out infinite;}
.freakout .flick.d1{animation-delay:.6s;} .freakout .flick.d2{animation-delay:1.2s;} .freakout .flick.d3{animation-delay:1.9s;} .freakout .flick.d4{animation-delay:2.5s;}
@keyframes fk-breathe{0%,100%{opacity:0.45;}50%{opacity:1;}}
.freakout .breathe{animation:fk-breathe 4s ease-in-out infinite;}

/* Turn-the-page widget */
.freakout .tp{max-width:26rem;margin:5rem auto;border:1px solid var(--rule);background:#fff;
    min-height:15rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:2.5rem 1.5rem;position:relative;}
.freakout .tp .page-line{font-family:var(--serif);font-size:1.15rem;min-height:3.5rem;}
.freakout .tp .page-num{position:absolute;bottom:0.6rem;right:0.9rem;font-family:var(--mono);font-size:0.6rem;color:var(--faint);letter-spacing:0.1em;}
.freakout .tp .controls{margin-top:2rem;display:flex;gap:1.4rem;}
.freakout .tp button{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.05em;background:none;border:none;
           color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0.2rem;}
.freakout .tp button:hover{color:var(--faint);}

.freakout a.chunk-link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);cursor:pointer;}
.freakout a.chunk-link:hover{background:#efece6;}

@media (prefers-reduced-motion: reduce){
  .fk-js .freakout .c{opacity:1;transform:none;transition:none;}
  .freakout .flick,.freakout .breathe{animation:none;opacity:1;}
}