/* Hylly-Aikajana — horizontal walnut shelf + year timeline */

.shelf-timeline-scene{
  position:relative;margin-top:.75rem;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 32px 80px rgba(0,0,0,.45);
  display:grid;grid-template-columns:minmax(0,1fr);
  /* Photographic walnut with a soft top light and darker edges so the grain reads as a real cabinet back */
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,214,160,.14),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.34)),
    var(--wood,none) center/cover,#3a2515;
}
@media (max-width:760px){.shelf-timeline-scene{background-image:radial-gradient(120% 90% at 50% 0%,rgba(255,214,160,.14),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.34)),var(--wood-sm,var(--wood,none))}}

.shelf-timeline-gl{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.88;
}

.shelf-timeline{position:relative;z-index:1;display:contents}

.shelf-timeline__main,.shelf-timeline__detail{position:relative;z-index:1}
.shelf-timeline__main{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;
  min-height:min(420px,58vh);
  background:linear-gradient(180deg,rgba(0,0,0,.15),transparent);
}

.shelf-timeline__chrono{
  padding:1rem 1.25rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.2);
}
.shelf-timeline__chrono-label{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;opacity:.65;margin:0 0 .65rem;
}
.shelf-timeline__rail-wrap{position:relative;padding:.35rem 0}
.shelf-timeline__rail{
  position:relative;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#2a2a2a,#444);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
  touch-action:none;
}
.shelf-timeline__rail-fill{
  position:absolute;left:0;top:0;bottom:0;border-radius:4px 0 0 4px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--as-accent) 50%,transparent),transparent);
  pointer-events:none;width:0;
}
/* Polished chrome knob: brushed conic ring, domed centre, specular highlight */
.shelf-timeline__orb{
  position:absolute;top:50%;width:30px;height:30px;border-radius:50%;
  transform:translate(-50%,-50%);cursor:grab;
  background:
    radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,0) 26%),
    radial-gradient(circle at 50% 50%,#dcdcdc 0 30%,#8e8e8e 31% 33%,transparent 34%),
    conic-gradient(from 200deg,#f4f4f4,#8a8a8a 12%,#e6e6e6 25%,#6d6d6d 38%,#fafafa 52%,#7c7c7c 66%,#dedede 80%,#909090 90%,#f4f4f4);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.9),inset 0 -2px 3px rgba(0,0,0,.35),
    0 4px 10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.6);
  transition:transform .15s ease,box-shadow .15s ease;
}
.shelf-timeline__orb::after{
  content:"";position:absolute;inset:36%;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#fff,#bdbdbd 60%,#8a8a8a);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.shelf-timeline__orb:hover{transform:translate(-50%,-50%) scale(1.08)}
.shelf-timeline__orb:active{cursor:grabbing;transform:translate(-50%,-50%) scale(.96);box-shadow:0 0 0 1px rgba(0,0,0,.55),inset 0 2px 4px rgba(0,0,0,.4),0 2px 5px rgba(0,0,0,.5)}
.shelf-timeline__rail{height:10px;border-radius:5px}
.shelf-timeline__rail-wrap{padding:.6rem 0}
.shelf-timeline__years{
  display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.75rem;max-height:88px;overflow-y:auto;
}
.shelf-timeline__year-btn{
  padding:.3rem .65rem;border-radius:999px;font-size:.72rem;
  font-family:var(--as-font-mono,IBM Plex Mono,monospace);
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.25);
  color:#f5ecd7;cursor:pointer;
}
.shelf-timeline__year-btn:hover{border-color:var(--as-accent)}
.shelf-timeline__year-btn.is-active{
  background:var(--as-accent);color:var(--as-bg);border-color:transparent;
}
.shelf-timeline__now{font-size:.95rem;margin:.5rem 0 0;font-family:var(--as-font-display,Syne,system-ui,sans-serif)}

.shelf-timeline__wood{
  flex:1;display:flex;flex-direction:column;min-height:0;
  padding:0 0 .75rem;
}
.shelf-timeline__plank{
  height:12px;margin:0 1rem;flex-shrink:0;
  background:linear-gradient(180deg,#7a5538,#3d2817);
  box-shadow:0 6px 16px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.15);
  border-radius:3px;
}
.shelf-timeline__scroll{
  flex:1;display:flex;flex-direction:row;align-items:flex-end;
  overflow-x:auto;overflow-y:hidden;
  padding:1rem 1.25rem 1.25rem;
  gap:0;scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  min-height:calc(var(--wall-spine-h,210px) + 2.5rem);
}
.shelf-timeline__scroll::-webkit-scrollbar{height:10px}
.shelf-timeline__scroll::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#5c4030,#8b6914);border-radius:5px}

.shelf-timeline__group{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;
  padding:0 1rem 0 .5rem;
  scroll-snap-align:start;
  border-right:1px solid rgba(255,255,255,.06);
}
.shelf-timeline__group:first-child{padding-left:.25rem}
.shelf-timeline__year-carve{
  font-family:Georgia,serif;font-size:.85rem;letter-spacing:.2em;
  color:#f5ecd7;opacity:.55;margin:0 0 .5rem;padding-left:.25rem;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
.shelf-timeline__row{
  display:flex;flex-direction:row;align-items:flex-end;gap:8px;
  padding:.5rem .65rem;
  background:
    repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.25));
  border-radius:8px;
  box-shadow:inset 0 8px 24px rgba(0,0,0,.35);
}

.shelf-timeline__spine{
  width:var(--wall-spine-w,46px);
  height:var(--wall-spine-h,210px);
  flex:0 0 var(--wall-spine-w,46px);
  padding:0;border:none;cursor:pointer;
  border-radius:2px 3px 3px 2px;
  background:linear-gradient(105deg,rgba(255,255,255,.12),transparent 35%),
    linear-gradient(90deg,color-mix(in srgb,var(--spine-color,#555) 75%,#000),var(--spine-color,#555));
  box-shadow:2px 4px 10px rgba(0,0,0,.5);
  transition:transform .2s;
  position:relative;
}
.shelf-timeline__spine:hover{transform:translateY(-10px);z-index:2}
.shelf-timeline__spine.is-active{
  transform:translateY(-12px);
  outline:2px solid var(--as-accent);outline-offset:2px;
}
.shelf-timeline__spine .wall-spine__text{
  position:absolute;inset:6px 4px;
  writing-mode:vertical-rl;text-orientation:mixed;
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:.6rem;line-height:1.1;color:rgba(255,255,255,.94);
  overflow:hidden;
}

/* Selected record: full-width panel under the shelf, sleeve + disc on the left, details beside it */
.shelf-timeline__detail{
  grid-column:1;grid-row:2;
  padding:1.25rem clamp(1rem,3vw,2rem) 1.5rem;
  background:color-mix(in srgb,var(--as-bg) 82%,rgba(0,0,0,.55));
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.shelf-timeline__detail .vinyl-feature{grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,3vw,2.25rem);max-width:60rem}
.shelf-timeline__detail .vinyl-feature__desc{max-height:none;max-width:62ch}
@container (max-width:520px){.shelf-timeline__detail .vinyl-feature{grid-template-columns:1fr}}

/* ---------- Records, not books: sleeves stand on the lower plank with the black vinyl peeking out of the top ---------- */
.shelf-timeline__scroll{padding-bottom:0;padding-top:2.4rem}
.shelf-timeline__wood{padding-bottom:1rem}
.shelf-timeline__wood .shelf-timeline__plank:last-child{height:16px;margin-top:-1px;border-radius:2px 2px 4px 4px;
  background:linear-gradient(180deg,#9a6e47 0,#6b4a2e 30%,#3d2817 100%)}
.shelf-timeline__row{padding:.5rem .65rem 0;background:none;box-shadow:none;border-radius:0;gap:5px}
.shelf-timeline__year-carve{
  align-self:flex-start;margin:0 0 .6rem;padding:.2rem .6rem;border-radius:4px;opacity:.85;
  font:600 .75rem/1.2 Georgia,serif;letter-spacing:.14em;color:#f5ecd7;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45));box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.shelf-timeline__spine{
  --spine-w:var(--wall-spine-w,40px);
  width:var(--spine-w);flex-basis:var(--spine-w);border-radius:1px 1px 0 0;overflow:visible;
  background:
    linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px calc(100% - 2px),rgba(0,0,0,.45) calc(100% - 2px)),
    linear-gradient(105deg,rgba(255,255,255,.14),transparent 40%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px),
    linear-gradient(90deg,color-mix(in srgb,var(--spine-color,#555) 70%,#000),var(--spine-color,#555) 55%,color-mix(in srgb,var(--spine-color,#555) 80%,#000));
  box-shadow:1px 0 0 rgba(0,0,0,.5),3px 0 8px rgba(0,0,0,.35);
  transform-origin:50% 100%;
}
.shelf-timeline__peek{
  --peek:9px;
  position:absolute;left:3px;right:3px;bottom:100%;height:var(--peek);border-radius:40% 40% 0 0 / 100% 100% 0 0;
  background:linear-gradient(90deg,#050505,#262626 45%,#0b0b0b 55%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:height .25s ease;
}
.shelf-timeline__spine:hover{transform:translateY(-4px)}
.shelf-timeline__spine:hover .shelf-timeline__peek{--peek:16px}
.shelf-timeline__spine.is-active{transform:translateY(-6px);outline:none;box-shadow:0 0 0 2px var(--as-accent),3px 0 10px rgba(0,0,0,.4)}
.shelf-timeline__spine.is-active .shelf-timeline__peek{--peek:26px}
.shelf-timeline__spine .wall-spine__text{inset:8px 5px 6px}
.shelf-timeline__add{
  flex:0 0 auto;align-self:flex-end;height:var(--wall-spine-h,210px);width:6.5rem;margin:0 1rem 0 .5rem;cursor:pointer;
  display:grid;place-content:center;justify-items:center;gap:.3rem;border-radius:4px 4px 0 0;
  border:2px dashed color-mix(in srgb,var(--as-accent) 60%,transparent);background:color-mix(in srgb,var(--as-accent) 8%,transparent);
  color:#f5ecd7;font:600 .8rem/1.2 system-ui,sans-serif;
}
.shelf-timeline__add span{font-size:2rem;font-weight:300;color:var(--as-accent)}

/* Detail: square sleeve with the disc sliding out from behind it */
/* The disc (94 % of the sleeve) peeks 22 % of its width out, 46 % on hover / while playing; the right margin
   tracks that so the description never sits under the vinyl, and animates with it. */
.vinyl-record{
  --rw:min(190px,40vw);
  position:relative;width:var(--rw);aspect-ratio:1;flex-shrink:0;
  margin-right:calc(var(--rw) * .94 * .22 + .25rem);
  transition:margin-right .6s cubic-bezier(.2,.8,.2,1);
}
.vinyl-record:hover,.vinyl-record.is-out{margin-right:calc(var(--rw) * .94 * .46 + .25rem)}
.vinyl-record .vinyl-disc{
  position:absolute;inset:3%;width:auto;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 31%,rgba(0,0,0,.9) 31.5% 33%,transparent 33.5%),
    repeating-radial-gradient(circle,#0c0c0c 0 1.2px,#1b1b1b 1.6px 2.6px),
    #0c0c0c;
  box-shadow:0 14px 34px rgba(0,0,0,.6),inset 0 0 0 2px #000,inset 0 0 0 4px rgba(255,255,255,.05);
  translate:22% 0;transition:translate .6s cubic-bezier(.2,.8,.2,1);
}
.vinyl-record:hover .vinyl-disc,.vinyl-record.is-out .vinyl-disc{translate:46% 0}
.vinyl-disc__grooves{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:conic-gradient(from 25deg,transparent 0 4%,rgba(255,255,255,.2) 10%,transparent 18% 50%,rgba(255,255,255,.16) 58%,transparent 66%);
  -webkit-mask:radial-gradient(circle,transparent 0 34%,#000 35% 96%,transparent 97%);mask:radial-gradient(circle,transparent 0 34%,#000 35% 96%,transparent 97%);
}
.vinyl-record .vinyl-disc__cover{inset:33%;padding:0;font-size:.55rem;background:radial-gradient(circle,var(--sleeve) 0 60%,color-mix(in srgb,var(--sleeve) 60%,#000))}
.vinyl-record .vinyl-disc__cover span{padding:.2rem;line-height:1.1;color:#fff}
.vinyl-record .vinyl-disc__hole{inset:48.5%;background:#d9d2c3;box-shadow:inset 0 0 2px rgba(0,0,0,.8)}
.vinyl-sleeve{
  position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:3px;display:grid;place-items:center;padding:.75rem;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 45%),linear-gradient(160deg,var(--sleeve),color-mix(in srgb,var(--sleeve) 55%,#000));
  box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.12);
  font:700 .95rem/1.15 var(--as-font-display,Syne,system-ui,sans-serif);color:#fff;text-align:center;
}
.vinyl-sleeve img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vinyl-sleeve::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 35%)}
@media (prefers-reduced-motion:reduce){.vinyl-record .vinyl-disc{transition:none}}

/* ---------- Legibility on the photographic wood ---------- */
.shelf-timeline-gl{opacity:.7}
.shelf-timeline__main{background:none}
.shelf-timeline__chrono{
  background:linear-gradient(180deg,rgba(20,11,5,.62),rgba(20,11,5,.42));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,236,205,.12);
}
.shelf-timeline__chrono-label,.shelf-timeline__now{
  display:inline-block;margin:0 0 .7rem;padding:.3rem .7rem .28rem;border-radius:6px;
  background:linear-gradient(180deg,#fbf7ef,#efe6d6);color:#2a1a0e;opacity:1;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 4px 12px rgba(0,0,0,.35);
}
.shelf-timeline__chrono-label{font-weight:700;letter-spacing:.16em}
.shelf-timeline__now{margin:.75rem 0 0;font-size:.92rem;font-weight:700;letter-spacing:.02em}
.shelf-timeline__rail{background:linear-gradient(180deg,#1a1009,#3b2616);box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 1px 0 rgba(255,236,205,.18)}
.shelf-timeline__rail-fill{background:linear-gradient(90deg,rgba(245,236,215,.15),rgba(245,236,215,.55))}
.shelf-timeline__year-btn{
  background:rgba(18,10,4,.6);color:#f7efdf;border-color:rgba(247,239,223,.35);
  font-weight:600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.shelf-timeline__year-btn:hover{border-color:#f7efdf;background:rgba(18,10,4,.78)}
.shelf-timeline__year-btn.is-active{
  background:linear-gradient(180deg,#fbf7ef,#e9dfcc);color:#2a1a0e;border-color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.shelf-timeline__year-btn:focus-visible{outline:2px solid #fbf7ef;outline-offset:2px}
/* Clear room for the tallest rise (selected sleeve lifts 6px + 26px of vinyl) so it never covers the era label */
.shelf-timeline__year-carve{margin-bottom:calc(6px + 26px + 6px - .5rem)}
.shelf-timeline__year-carve{background:rgba(14,8,3,.72);color:#f7efdf;opacity:1;box-shadow:0 2px 6px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}

.shelf-admin-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1rem 0 0;font-size:.88rem;color:var(--as-muted)}