/* =========================================================================
   footer-playground.css

   1) COLOUR: the footer is the inverse of the page (dark slab on light pages,
      light slab on dark) so it reads as a distinct closing chapter.

   2) ENTRANCE: the footer sits in normal flow (complete + scrollable, the whole
      poster wall visible). core/footer-curtain.js plays a GSAP timeline when it
      scrolls in: the closing statement rises, the nav staggers, the posters
      cascade up into their rotations.

   Pieces start hidden only when JS is on (html.js), so there is no flash; if
   GSAP cannot load or reduced motion is set, they show immediately.
   ========================================================================= */

/* ---- footer colour identity = inverse of the active theme --------------- */
:root{
  --footer-bg:           #0e0e0d;
  --footer-elevated:     #161614;
  --footer-fg:           #f4f4f1;
  --footer-fg-dim:       #9b9b95;
  --footer-border:       rgba(255,255,255,.12);
  --footer-border-hover: rgba(255,255,255,.24);
  --footer-accent:       #6f93ff;
  --footer-shadow:       rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --footer-bg:#f5f5f3; --footer-elevated:#ffffff; --footer-fg:#0f0f0f; --footer-fg-dim:#5d5d59;
    --footer-border:rgba(0,0,0,.12); --footer-border-hover:rgba(0,0,0,.20); --footer-accent:#1a46c9; --footer-shadow:rgba(0,0,0,.14);
  }
}
:root[data-theme="dark"]{
  --footer-bg:#f5f5f3; --footer-elevated:#ffffff; --footer-fg:#0f0f0f; --footer-fg-dim:#5d5d59;
  --footer-border:rgba(0,0,0,.12); --footer-border-hover:rgba(0,0,0,.20); --footer-accent:#1a46c9; --footer-shadow:rgba(0,0,0,.14);
}

/* =========================================================================
   FOOTER SLAB  (normal flow: the complete footer, fully scrollable)
========================================================================= */

.playground-footer{
    position:relative;
    z-index:2;                       /* above the fixed dot-field (z:0) */
    overflow:hidden;
    background:var(--footer-bg);     /* opaque inverse slab */
    color:var(--footer-fg);
    border-top:1px solid var(--footer-border);
    padding:80px 0 100px;
}

/* ---- entrance: hide pieces up-front only when JS runs (flash-free) ------- */
html.js .playground-footer .footer-status,
html.js .playground-footer .footer-title,
html.js .playground-footer .footer-label,
html.js .playground-footer .footer-nav-group a,
html.js .playground-footer .poster{
    opacity:0;
}
/* final / fallback reveal (set by the module on complete, or if GSAP fails) */
html.js .playground-footer.fx-done .footer-status,
html.js .playground-footer.fx-done .footer-title,
html.js .playground-footer.fx-done .footer-label,
html.js .playground-footer.fx-done .footer-nav-group a,
html.js .playground-footer.fx-done .poster{
    opacity:1;
}
@media (prefers-reduced-motion:reduce){
    html.js .playground-footer .footer-status,
    html.js .playground-footer .footer-title,
    html.js .playground-footer .footer-label,
    html.js .playground-footer .footer-nav-group a,
    html.js .playground-footer .poster{ opacity:1 !important; }
}

/* =========================================================================
   FOOTER CONTENT
========================================================================= */

.footer-inner{
    position:relative;
    max-width:var(--container);
    margin-inline:auto;
    padding-inline:var(--gutter);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:100px;
    align-items:start;
}

.footer-status{ font-size:14px; color:var(--footer-fg-dim); margin-bottom:24px; }

.footer-title{
    max-width:900px;
    font-size:clamp(3.5rem,8vw,6.5rem);
    line-height:.92;
    letter-spacing:-0.06em;
    font-weight:700;
}
.footer-title em{ font-style:italic; font-weight:400; color:var(--footer-accent); }

.footer-right{ display:flex; gap:72px; padding-top:12px; }
.footer-nav-group{ display:flex; flex-direction:column; gap:18px; }
.footer-label{
    font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--footer-fg-dim); margin-bottom:8px;
}
.footer-nav-group a{ color:inherit; text-decoration:none; font-size:22px; transition:opacity .2s var(--ease-out); }
@media (hover:hover) and (pointer:fine){ .footer-nav-group a:hover{ opacity:.6; } }

/* =========================================================================
   POSTER WALL
========================================================================= */

.poster-wall{
    position:relative;
    margin-top:80px;
    display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
    max-width:var(--container);
    padding-inline:var(--gutter);
    margin-left:auto; margin-right:auto;
}

.poster{
    position:relative;
    background:var(--footer-elevated);
    color:inherit;
    border:1px solid var(--footer-border);
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    text-align:center; padding:18px;
    box-shadow:0 10px 30px var(--footer-shadow);
    transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
    will-change:transform;
}
@media (hover:hover) and (pointer:fine){
    .poster:hover{
        z-index:10;
        transform:translateY(-4px) rotate(var(--r));
        border-color:var(--footer-accent);
        box-shadow:0 20px 44px var(--footer-shadow);
    }
}

.poster-art{ font-size:38px; margin-bottom:14px; line-height:1; }
.poster-signature{ font-size:52px; font-weight:700; letter-spacing:-0.04em; }
.poster span{ font-size:14px; line-height:1.45; }

.poster-sm{ width:135px; height:170px; }
.poster-md{ width:155px; height:195px; }
.poster-lg{ width:180px; height:225px; }

.poster:nth-child(3n){ margin-top:40px; }
.poster:nth-child(4n){ margin-top:70px; }
.poster:nth-child(5n){ margin-top:20px; }
.poster:nth-child(7n){ margin-top:90px; }

.p1{--r:-6deg;transform:rotate(-6deg)} .p2{--r:5deg;transform:rotate(5deg)} .p3{--r:-3deg;transform:rotate(-3deg)}
.p4{--r:7deg;transform:rotate(7deg)} .p5{--r:-5deg;transform:rotate(-5deg)} .p6{--r:4deg;transform:rotate(4deg)}
.p7{--r:-2deg;transform:rotate(-2deg)} .p8{--r:6deg;transform:rotate(6deg)} .p9{--r:-4deg;transform:rotate(-4deg)}
.p10{--r:3deg;transform:rotate(3deg)} .p11{--r:-7deg;transform:rotate(-7deg)} .p12{--r:5deg;transform:rotate(5deg)}
.p13{--r:-3deg;transform:rotate(-3deg)} .p14{--r:7deg;transform:rotate(7deg)} .p15{--r:-5deg;transform:rotate(-5deg)}
.p16{--r:4deg;transform:rotate(4deg)} .p17{--r:-2deg;transform:rotate(-2deg)} .p18{--r:6deg;transform:rotate(6deg)}
.p19{--r:-4deg;transform:rotate(-4deg)} .p20{--r:3deg;transform:rotate(3deg)}

@media (max-width:1024px){
    .playground-footer{ padding:64px 0 80px; }
    .footer-inner{ grid-template-columns:1fr; gap:48px; }
    .footer-right{ gap:48px; }
}
@media (max-width:768px){
    .playground-footer{ padding:48px 0 60px; }
    .footer-title{ font-size:clamp(3rem,14vw,4.5rem); }
    .footer-right{ gap:40px; flex-wrap:wrap; }
    .poster-wall{ margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); }
    .poster{ width:100% !important; height:180px; margin-top:0 !important; }
    .poster-sm,.poster-md,.poster-lg{ width:100%; }
    .poster-art{ font-size:30px; } .poster-signature{ font-size:42px; } .poster span{ font-size:13px; }
}