/* ==========================================================================
   AFTER HOURS — tokens
   ========================================================================== */
:root{
  --void: #0a0c10;
  --panel: #14171d;
  --panel-alt: #191d24;
  --hairline: rgba(236,232,225,0.08);
  --ink: #ece8e1;
  --ink-dim: #b9b5ac;
  --muted: #83878f;
  --brass: #c6a15b;
  --brass-bright: #e3c179;

  --movies: #c1443b;
  --movies-soft: #c1443b26;
  --books: #4f8a6e;
  --books-soft: #4f8a6e26;
  --places: #3e86a0;
  --places-soft: #3e86a026;

  --display: "Fraunces", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.16,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mono{ font-family:var(--mono); letter-spacing:.02em; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--brass-bright); outline-offset:3px; border-radius:4px; }

/* ==========================================================================
   Ambient grain — subtle texture over the whole page
   ========================================================================== */
.grain{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#preloader{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(ellipse at 50% 40%, #1b1f27 0%, var(--void) 65%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
}
#preloader.is-hidden{
  opacity:0; filter:blur(18px); transform:scale(1.04);
  pointer-events:none;
}
.preloader__inner{ text-align:center; color:var(--brass); }
.preloader__mark{
  width:64px; height:64px; color:var(--brass);
  animation:mark-breathe 3s var(--ease-soft) infinite;
}
.mark-ring{ stroke-dasharray:340; stroke-dashoffset:340; animation:draw 1.6s var(--ease) forwards .15s; }
.mark-line{ stroke-dasharray:60; stroke-dashoffset:60; animation:draw 1s var(--ease) forwards .9s; }
.mark-moon{ opacity:0; animation:fade-in .8s var(--ease) forwards .6s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade-in{ to{ opacity:1; } }
@keyframes mark-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }

.preloader__word{
  margin:22px 0 0;
  font-family:var(--display);
  font-weight:450; font-size:clamp(28px,5vw,40px);
  letter-spacing:.06em;
  color:var(--ink);
  display:flex; justify-content:center;
}
.preloader__word span{
  display:inline-block; opacity:0; transform:translateY(16px);
  animation:letter-in .7s var(--ease) forwards;
}
.preloader__word .sp{ width:.32em; }
.preloader__word span:nth-child(1){ animation-delay:.45s; }
.preloader__word span:nth-child(2){ animation-delay:.49s; }
.preloader__word span:nth-child(3){ animation-delay:.53s; }
.preloader__word span:nth-child(4){ animation-delay:.57s; }
.preloader__word span:nth-child(5){ animation-delay:.61s; }
.preloader__word span:nth-child(6){ animation-delay:.65s; }
.preloader__word span:nth-child(7){ animation-delay:.69s; }
.preloader__word span:nth-child(8){ animation-delay:.73s; }
.preloader__word span:nth-child(9){ animation-delay:.77s; }
.preloader__word span:nth-child(10){ animation-delay:.81s; }
.preloader__word span:nth-child(11){ animation-delay:.85s; }
@keyframes letter-in{ to{ opacity:1; transform:translateY(0); } }

.preloader__bar{
  margin:26px auto 0; width:180px; height:1px; background:var(--hairline);
  position:relative; overflow:hidden;
}
.preloader__bar span{
  position:absolute; inset:0 100% 0 0; background:var(--brass);
  transition:right 1.1s var(--ease-soft);
}
.preloader__tag{
  margin:14px 0 0; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); opacity:0; animation:fade-in .8s var(--ease) forwards 1.3s;
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */
.topbar{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,4vw,48px) 0;
  opacity:0; transform:translateY(-10px);
}
body.is-revealed .topbar{
  animation:panel-in .8s var(--ease) forwards .1s;
}
.topbar__brand{ display:flex; align-items:center; gap:9px; }
.topbar__mark{ color:var(--brass); }
.topbar__brand span{
  font-family:var(--display); font-size:16px; letter-spacing:.03em; color:var(--ink);
}
.topbar__status{
  display:flex; align-items:center; gap:9px;
  font-size:12px; color:var(--muted); letter-spacing:.03em;
}
.topbar__dot{ color:var(--brass); }
#clock{ color:var(--ink-dim); min-width:5ch; }

/* ==========================================================================
   DOORS — the three-panel layout
   ========================================================================== */
.doors{
  position:relative; z-index:10;
  display:flex; align-items:stretch;
  gap:14px;
  padding:28px clamp(16px,4vw,48px) 20px;
  min-height:82vh;
}

.panel{
  position:relative;
  flex:1;
  background:linear-gradient(175deg, var(--panel-alt), var(--panel) 60%);
  border:1px solid var(--hairline);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  transition:flex-grow .7s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);

  opacity:0;
  transform:translateY(46px) scale(.97);
}
body.is-revealed .panel{
  animation:panel-in .9s var(--ease) forwards;
  animation-delay:calc(.25s + var(--i) * .13s);
}
@keyframes panel-in{ to{ opacity:1; transform:translateY(0) scale(1); } }

.panel--movies{ --accent:var(--movies); --accent-soft:var(--movies-soft); }
.panel--books{ --accent:var(--books); --accent-soft:var(--books-soft); }
.panel--places{ --accent:var(--places); --accent-soft:var(--places-soft); }

/* seam: a thin brass hinge line at the top of each panel, "opens" on reveal */
.panel__seam{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:0; height:2px; background:var(--brass);
  transition:width 1s var(--ease-soft) .4s;
}
body.is-revealed .panel__seam{ width:46px; }

.panel__glow{
  position:absolute; inset:-40% -40% auto -40%; height:60%;
  background:radial-gradient(closest-side, var(--accent-soft), transparent 70%);
  opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .panel:hover .panel__glow{ opacity:1; }
  .panel:hover{
    box-shadow:0 30px 60px -20px rgba(0,0,0,.55), 0 0 0 1px var(--accent-soft) inset;
    border-color:color-mix(in srgb, var(--accent) 45%, var(--hairline));
  }
  .doors:has(.panel:hover) .panel:not(:hover){ flex-grow:.86; }
  .doors:has(.panel:hover) .panel:hover{ flex-grow:1.32; }
}

.panel__content{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  width:100%; padding:clamp(24px,3vw,34px);
  gap:22px;
}

.panel__eyebrow{
  display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); font-weight:600; margin-bottom:12px;
}
.panel__title{
  font-family:var(--display); font-weight:450; line-height:.96;
  font-size:clamp(30px,3.4vw,42px); margin:0 0 10px; color:var(--ink);
}
.panel__desc{ margin:0; color:var(--ink-dim); font-size:14.5px; line-height:1.5; max-width:32ch; }

/* ---------- feature block (movies + books) ---------- */
.panel__feature{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--hairline);
  border-radius:12px;
}
.feature__label{ display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.feature__text h3{ margin:0 0 4px; font-family:var(--display); font-size:19px; font-weight:450; color:var(--ink); }
.feature__text p{ margin:0; font-size:12.5px; color:var(--ink-dim); }
.feature__play{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--accent); color:var(--void); border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.feature__play:hover{ transform:scale(1.1); box-shadow:0 0 0 6px var(--accent-soft); }
.panel__feature--book{ justify-content:flex-start; }

.progress-ring{ flex:none; transform:rotate(-90deg); }
.ring-track{ stroke:var(--hairline); }
.ring-fill{ stroke:var(--accent); stroke-dasharray:138.2; stroke-dashoffset:138.2; transition:stroke-dashoffset 1.4s var(--ease-soft) .8s; }
body.is-revealed .ring-fill{ stroke-dashoffset:49.75; } /* 64% */
.ring-label{ transform:rotate(90deg) translate(0,0); transform-origin:26px 26px; fill:var(--ink); font-family:var(--mono); font-size:10px; }

/* ---------- movies: poster reel ---------- */
.reel{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.poster{
  position:relative; aspect-ratio:2/3; border-radius:9px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:10px;
  cursor:default; transition:transform .4s var(--ease);
  border:1px solid var(--hairline);
}
.poster::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, var(--p1,#3a2320), var(--p2,#1a1210));
  transition:transform .5s var(--ease);
}
.poster::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.75), transparent 55%);
}
.poster--1{ --p1:#8a4238; --p2:#341c19; }
.poster--2{ --p1:#5c3a55; --p2:#231521; }
.poster--3{ --p1:#7c5a2e; --p2:#2c2011; }
.poster--4{ --p1:#3f6b6a; --p2:#152423; }
.poster--5{ --p1:#6a2c33; --p2:#241012; }
.poster--6{ --p1:#455a80; --p2:#161c2c; }
@media (hover:hover) and (pointer:fine){
  .poster:hover{ transform:translateY(-6px); }
  .poster:hover::before{ transform:scale(1.08); }
}
.poster__title, .poster__meta{ position:relative; z-index:1; }
.poster__title{ font-family:var(--display); font-size:13px; color:var(--ink); line-height:1.15; }
.poster__meta{ display:block; font-size:10px; color:var(--ink-dim); margin-top:3px; }

/* ---------- books: shelf of spines ---------- */
.shelf{ display:flex; gap:8px; align-items:flex-end; height:150px; }
.spine{
  flex:1; height:100%; border-radius:6px 6px 3px 3px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline);
  transition:transform .4s var(--ease), flex .4s var(--ease);
  position:relative;
}
.spine span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--display); font-size:12px; color:var(--ink);
  white-space:nowrap; padding:12px 0;
}
.spine--1{ background:linear-gradient(180deg,#3d6350,#233a30); }
.spine--2{ background:linear-gradient(180deg,#8a7238,#4a3c1c); }
.spine--3{ background:linear-gradient(180deg,#4a5a48,#242e23); }
.spine--4{ background:linear-gradient(180deg,#6a5030,#33251316); }
.spine--5{ background:linear-gradient(180deg,#375048,#182420); }
@media (hover:hover) and (pointer:fine){
  .spine:hover{ transform:translateY(-10px); }
}

/* ---------- places: venue list ---------- */
.venues{ display:flex; flex-direction:column; gap:8px; }
.venue{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:10px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--hairline);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .venue:hover{
    background:var(--accent-soft);
    border-color:color-mix(in srgb, var(--accent) 40%, var(--hairline));
    transform:translateX(4px);
  }
}
.venue__icon{
  flex:none; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); background:rgba(255,255,255,.04);
}
.venue__body{ flex:1; display:flex; flex-direction:column; min-width:0; }
.venue__name{ font-size:14px; color:var(--ink); font-weight:500; }
.venue__meta{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.venue__status{ flex:none; font-family:var(--mono); font-size:10.5px; color:var(--ink-dim); white-space:nowrap; }

/* ---------- expandable "extra" sections ---------- */
.reel--extra, .shelf--extra, .venues--extra{
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .6s var(--ease-soft), opacity .5s var(--ease), margin-top .6s var(--ease-soft);
  margin-top:0;
}
.panel.is-expanded .reel--extra,
.panel.is-expanded .shelf--extra,
.panel.is-expanded .venues--extra{
  max-height:600px; opacity:1; margin-top:-10px;
}
.shelf--extra{ height:auto; }

/* ---------- CTA ---------- */
.panel__cta{
  margin-top:auto; align-self:flex-start;
  display:flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--hairline);
  color:var(--ink); padding:11px 18px; border-radius:100px;
  font-size:13px; letter-spacing:.02em; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), gap .3s var(--ease);
}
.panel__cta:hover{ border-color:var(--accent); background:var(--accent-soft); gap:12px; }
.panel__cta .cta-arrow{ transition:transform .4s var(--ease); }
.panel__cta .cta-label-close{ display:none; }
.panel.is-expanded .panel__cta .cta-label-open{ display:none; }
.panel.is-expanded .panel__cta .cta-label-close{ display:inline; }
.panel.is-expanded .panel__cta .cta-arrow{ transform:rotate(90deg); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:26px 20px 34px; color:var(--muted); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase;
}
.footer__rule{ width:34px; height:1px; background:var(--hairline); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:980px){
  .doors{ flex-direction:column; min-height:0; }
  .panel{ flex:none !important; }
  .reel{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:600px){
  .topbar{ padding:18px 18px 0; }
  .doors{ padding:20px 14px 14px; gap:16px; }
  .panel__content{ padding:22px; gap:18px; }
  .shelf{ height:120px; }
  .reel{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .poster__title{ font-size:11px; }
  .venue__meta{ display:none; }
  .footer{ flex-direction:column; gap:8px; }
  .footer__rule{ display:none; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}