/* Rejected Universe: "CreatorGlitch" background treatment (draft 2026-09-27).
   Ken Burns pan/zoom slides that crossfade, film grain + faint scanlines, a rare glitch slice on each change,
   and fade-up-on-scroll reveals. Plain CSS + glitch-fx.js. Everything is calmed under prefers-reduced-motion. */

/* ---------- Ken Burns stage ---------- */
.kb-hero{position:relative;overflow:hidden;isolation:isolate}
.kb-stage,.kb-shade,.kb-grain,.kb-slice{position:absolute;inset:0;pointer-events:none}
.kb-stage{z-index:0;background:#120c16}
.kb-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);
  transition:opacity 2.4s ease-in-out;will-change:opacity,transform;backface-visibility:hidden}
.kb-slide.is-on{opacity:1}
.kb-slide.kb-a{animation:kbA 15s ease-out forwards}
.kb-slide.kb-b{animation:kbB 15s ease-out forwards}
.kb-slide.kb-c{animation:kbC 15s ease-out forwards}
.kb-slide.kb-d{animation:kbD 15s ease-out forwards}
@keyframes kbA{from{transform:scale(1.04) translate3d(1.5%,1%,0)}to{transform:scale(1.18) translate3d(-2%,-1.5%,0)}}
@keyframes kbB{from{transform:scale(1.20) translate3d(-2%,0,0)}to{transform:scale(1.06) translate3d(2%,1%,0)}}
@keyframes kbC{from{transform:scale(1.06) translate3d(0,2%,0)}to{transform:scale(1.18) translate3d(1%,-2%,0)}}
@keyframes kbD{from{transform:scale(1.16) translate3d(2%,-1%,0)}to{transform:scale(1.05) translate3d(-1.5%,1.5%,0)}}

@media (max-width:820px){.kb-slide{background-position:28% 55%}}
/* dark overlay keeps text contrast strong over any frame */
.kb-shade{z-index:1;background:
  radial-gradient(120% 90% at 50% 45%,rgba(18,10,22,.35) 0%,rgba(18,10,22,.78) 100%),
  linear-gradient(180deg,rgba(18,10,22,.72) 0%,rgba(18,10,22,.38) 38%,rgba(18,10,22,.5) 70%,rgba(18,10,22,.88) 100%)}
/* film grain (same SVG-noise trick as creatorglitch) + faint scanlines */
.kb-grain{z-index:2;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;animation:kbGrain .9s steps(5) infinite}
.kb-grain::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 1px,transparent 1px 3px);opacity:.35}
@keyframes kbGrain{to{background-position:180px 90px}}
/* rare glitch slice on each crossfade (a nod to creatorglitch, kept brief) */
.kb-slice{z-index:3;inset:auto 0 auto 0;top:var(--gy,40%);height:var(--gh,12px);opacity:0;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(45,226,230,.28) 0 50%,rgba(177,20,25,.34) 50% 100%)}
.kb-hero.glitching .kb-slice{opacity:1;transform:translateX(var(--gx,8px))}
.kb-hero > .wrap{position:relative;z-index:4}

/* ---------- single slow-drifting image band (behind a section) ---------- */
.kb-band{position:relative;overflow:hidden;isolation:isolate}
.kb-band > .kb-band-img{position:absolute;inset:-6%;z-index:0;background-size:cover;background-position:center;animation:kbDrift 38s ease-in-out infinite alternate}
.kb-band > .kb-shade{z-index:1}
.kb-band > .wrap{position:relative;z-index:3}
@keyframes kbDrift{from{transform:scale(1.02) translate3d(-2%,1%,0)}to{transform:scale(1.14) translate3d(2%,-1.5%,0)}}

/* ---------- fade-up on scroll ---------- */
.fx-js .fx-rv{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.fx-js .fx-rv.in{opacity:1;transform:none}

/* ---------- scroll cue ---------- */
.kb-cue{margin-top:34px;font:400 11px/1 'Special Elite',ui-monospace,monospace;letter-spacing:.32em;text-transform:uppercase;color:#fffdf5;opacity:.7;animation:kbBob 2.4s ease-in-out infinite}
@keyframes kbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

@media (prefers-reduced-motion:reduce){
  .kb-slide,.kb-slide.kb-a,.kb-slide.kb-b,.kb-slide.kb-c,.kb-slide.kb-d{animation:none;transition:none;transform:scale(1.04)}
  .kb-band > .kb-band-img{animation:none}
  .kb-grain,.kb-cue{animation:none}
  .kb-slice{display:none}
  .fx-js .fx-rv{opacity:1;transform:none;transition:none}
}

/* ================= Levi's Story page ================= */
.ls-page .kb-hero{min-height:min(86vh,860px);display:flex;align-items:center;padding:110px 0 150px}
.ls-page .kb-hero > .wrap{width:100%}
.ls-page .kb-hero .ba-title{text-shadow:3px 3px 0 var(--pink),6px 6px 0 var(--purple),0 10px 40px rgba(0,0,0,.55)}
.ls-page .kb-hero .ba-intro{background:rgba(255,253,245,.95);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.ls-page .kb-hero .ba-wave{z-index:3}
.ls-credit{margin-top:22px;font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fffdf5;opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ls-credit b{color:#ffc93c;font-weight:800}

/* law section on a drifting city band */
.ls-page .ls-sec.kb-band{background:#1a1020;padding:96px 0}
.ls-page .ls-sec.kb-band .kb-shade{background:linear-gradient(180deg,rgba(255,246,224,1) 0%,rgba(26,16,32,.55) 16%,rgba(26,16,32,.62) 84%,rgba(255,246,224,1) 100%)}
.ls-page .ls-sec.kb-band .ls-law{box-shadow:10px 10px 0 var(--orange),0 24px 60px rgba(0,0,0,.35)}

/* closing: faint skyline under the gradient */
.ls-page .ls-close{overflow:hidden}
.ls-page .ls-close .kb-band-img{position:absolute;inset:-6%;z-index:0;background-size:cover;background-position:center 60%;opacity:.12;mix-blend-mode:luminosity;animation:kbDrift 44s ease-in-out infinite alternate}
.ls-page .ls-close::before{z-index:1}

/* photo slots: intentional polaroid-style frames, clearly placeholders */
.ls-page .ls-photo.ls-polaroid{position:relative;display:block;aspect-ratio:auto;border:0;border-radius:4px;background:#fffdf5;padding:14px 14px 58px;color:#fffdf5;
  box-shadow:0 2px 0 rgba(58,35,64,.08),0 22px 44px rgba(58,35,64,.28);transform:rotate(2deg);transition:transform .4s}
.ls-page .ls-photo.ls-polaroid:hover{transform:rotate(0deg) translateY(-3px)}
.ls-polaroid::before,.ls-polaroid::after{content:"";position:absolute;width:110px;height:30px;top:-14px;background:rgba(255,201,60,.78);box-shadow:0 2px 4px rgba(0,0,0,.12)}
.ls-polaroid::before{left:-18px;transform:rotate(-32deg)}
.ls-polaroid::after{right:-18px;transform:rotate(32deg);background:rgba(255,93,143,.7)}
.ls-polaroid .ls-photo-in{position:relative;overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;
  background:linear-gradient(180deg,rgba(26,16,32,.55),rgba(26,16,32,.82)),url('assets/levi/seattle-across-water.webp') center/cover}
.ls-polaroid .ls-photo-in::after{content:"";position:absolute;inset:10px;border:2px dashed rgba(255,253,245,.45);border-radius:2px;pointer-events:none}
.ls-polaroid svg{width:54px;height:54px;margin-bottom:14px;opacity:.9}
.ls-polaroid .ls-photo-in span{font-family:'Righteous',sans-serif;font-weight:400;font-size:24px;line-height:1.2;color:#fffdf5;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.ls-polaroid .ls-photo-in small{display:inline-block;margin-top:10px;font:800 11px/1.4 'Nunito',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#3a2340;background:#ffc93c;border-radius:999px;padding:6px 12px}
.ls-polaroid .ls-photo-cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:400 15px/1.2 'Rock Salt',cursive;color:#3a2340;opacity:.8}
.ls-page .ls-photo.ls-polaroid.wide{max-width:760px;margin:48px auto 0;transform:rotate(-1.2deg)}
.ls-page .ls-photo.ls-polaroid.wide .ls-photo-in{aspect-ratio:16/8;background:linear-gradient(180deg,rgba(26,16,32,.5),rgba(26,16,32,.8)),url('assets/levi/seattle-skyline.webp') center/cover}
@media (max-width:820px){
  .ls-page .kb-hero{min-height:0;padding:72px 0 120px}
  .ls-page .ls-photo.ls-polaroid{max-width:360px;margin:10px auto 0;transform:rotate(1.5deg)}
  .ls-polaroid .ls-photo-in{aspect-ratio:4/4.4}
  .ls-page .ls-photo.ls-polaroid.wide{max-width:420px}
  .ls-page .ls-photo.ls-polaroid.wide .ls-photo-in{aspect-ratio:4/3}
  .ls-page .ls-sec.kb-band{padding:72px 0}
  .ls-polaroid::before,.ls-polaroid::after{width:80px;height:24px}
}
@media (prefers-reduced-motion:reduce){.ls-page .ls-close .kb-band-img{animation:none}.ls-page .ls-photo.ls-polaroid{transition:none}}

/* ================= Community hub ================= */
.cm-page .hero.kb-hero{padding:130px 0 110px}
.cm-page .hero.kb-hero::before{z-index:2;opacity:.05}
.cm-page .hero.kb-hero .kick{color:#e6e2db}
.cm-page .hero.kb-hero p.thesis{color:#efebe4;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.cm-page .hero.kb-hero h1{text-shadow:0 0 24px rgba(0,0,0,.5),0 4px 30px rgba(0,0,0,.6)}
.cm-page .kb-shade{background:radial-gradient(120% 90% at 50% 45%,rgba(10,10,11,.45) 0%,rgba(10,10,11,.85) 100%),linear-gradient(180deg,rgba(10,10,11,.7),rgba(10,10,11,.5) 45%,rgba(10,10,11,.95))}
@media (max-width:820px){.cm-page .hero.kb-hero{padding:90px 0 76px}}

/* ===== v3: Levi's real photos in the polaroid frames ===== */
.ls-page .ls-polaroid.has-img{padding:14px 14px 16px}
.ls-page .ls-polaroid.has-img .ls-photo-in{aspect-ratio:auto;padding:0;display:block;background:#1a1020}
.ls-page .ls-polaroid.has-img .ls-photo-in::after{display:none}
.ls-page .ls-polaroid.has-img img{display:block;width:100%;height:auto}
.ls-page .ls-polaroid.has-img .ls-photo-cap{position:static;margin-top:12px;padding:0 6px;font:400 13px/1.55 'Rock Salt',cursive;color:#3a2340;opacity:.85}
.ls-page .ls-photo.ls-polaroid.quote{max-width:540px;margin:48px auto 0;transform:rotate(-1.2deg)}
.ls-page .ls-photo.ls-polaroid.quote .ls-photo-in{aspect-ratio:auto;background:#000}
.ls-badge{display:inline-flex;align-items:center;gap:12px;margin:34px auto 0;padding:6px 18px 6px 6px;background:rgba(255,253,245,.95);color:#3a2340;border-radius:999px;box-shadow:0 6px 0 rgba(58,35,64,.25);font:800 14px/1.2 'Nunito',sans-serif;letter-spacing:.06em}
.ls-badge img{width:52px;height:52px;border-radius:50%;border:3px solid #ffc93c;object-fit:cover;display:block}
@media (max-width:820px){
  .ls-page .ls-polaroid.has-img .ls-photo-in{aspect-ratio:auto}
  .ls-page .ls-photo.ls-polaroid.quote{max-width:420px}
  .ls-badge{font-size:13px}
}