/* Proof Construction - photo bands v1
   Dark editorial glass, orange accents. Built to sit inside the existing theme.
   Motion: transform + opacity only. No layout animation, no scroll listeners. */

.pok-band{
  --pok-line:rgba(255,255,255,.10);
  --pok-line-strong:rgba(255,255,255,.18);
  --pok-orange:#ff6600;
  --pok-ink:#0b1015;
  --pok-ease:cubic-bezier(.32,.72,0,1);
  position:relative;padding:clamp(56px,7vw,104px) clamp(16px,4vw,40px);
  background:linear-gradient(180deg,rgba(255,102,0,.035),rgba(255,102,0,0) 42%),#0b1015;
  overflow:hidden;
}
.pok-band::before{ /* soft orange glow, fixed to the band, not scrolling */
  content:"";position:absolute;inset:auto -10% -40% -10%;height:70%;
  background:radial-gradient(60% 60% at 50% 100%,rgba(255,102,0,.16),transparent 70%);
  pointer-events:none;
}
.pok-band-inner{position:relative;max-width:1280px;margin:0 auto}
.pok-band-eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,102,0,.35);
  background:rgba(255,102,0,.10);color:#ff8c42;
  font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
}
.pok-band-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:#ff6600;box-shadow:0 0 10px #ff6600}
.pok-band-title{
  margin:0 0 12px;font-family:var(--font-heading,'Oswald',sans-serif);
  font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-.01em;
  color:#fff;text-transform:uppercase;text-wrap:balance;
}
.pok-band-sub{margin:0 0 30px;max-width:62ch;color:#9fb0c2;font-size:1rem;line-height:1.6}

/* ---- asymmetric grid ---- */
.pok-band-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:120px;gap:14px;grid-auto-flow:dense;
}
/* tidy fills per photo count - no orphan cards, no gaps */
.pok-band-grid[data-count="1"] .pok-shot{grid-column:span 6;grid-row:span 4}
.pok-band-grid[data-count="4"] .pok-shot{grid-column:span 3;grid-row:span 3}
.pok-band-grid[data-count="3"] .pok-shot{grid-column:span 2;grid-row:span 4}
.pok-band-grid[data-count="6"] .pok-shot{grid-column:span 3;grid-row:span 2}
.pok-shot{grid-column:span 2;grid-row:span 2;margin:0;min-width:0}
.pok-shot-lg{grid-column:span 3;grid-row:span 3}
.pok-shot-tall{grid-column:span 2;grid-row:span 3}
.pok-shot-wide{grid-column:span 6;grid-row:span 2}

/* ---- double bezel ---- */
.pok-shot-shell{
  height:100%;padding:6px;border-radius:22px;
  background:rgba(255,255,255,.045);border:1px solid var(--pok-line);
  transition:transform .7s var(--pok-ease),border-color .7s var(--pok-ease),background .7s var(--pok-ease);
  will-change:transform;
}
.pok-shot-core{
  position:relative;height:100%;border-radius:17px;overflow:hidden;
  background:#0e141a;box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.pok-shot-core img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);
  transition:transform 1.1s var(--pok-ease),filter .7s var(--pok-ease);
  filter:saturate(.92) contrast(1.02);
}
.pok-shot-core::after{ /* gradient for caption legibility */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(6,10,14,.86) 100%);
  opacity:.9;transition:opacity .7s var(--pok-ease);
}
.pok-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:16px 18px;display:flex;flex-direction:column;gap:2px;
  transform:translateY(6px);opacity:.92;
  transition:transform .7s var(--pok-ease),opacity .7s var(--pok-ease);
}
.pok-shot figcaption span{color:#fff;font-weight:700;font-size:.94rem;line-height:1.25}
.pok-shot figcaption small{color:#ffab73;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* hover: the card lifts, the photo pushes in, the caption settles */
@media (hover:hover){
  .pok-shot:hover .pok-shot-shell{transform:translateY(-4px);border-color:rgba(255,102,0,.55);background:rgba(255,102,0,.07)}
  .pok-shot:hover .pok-shot-core img{transform:scale(1.07);filter:saturate(1.02) contrast(1.05)}
  .pok-shot:hover figcaption{transform:translateY(0);opacity:1}
}

/* ---- CTA: button-in-button ---- */
.pok-band-cta{
  display:inline-flex;align-items:center;gap:12px;margin-top:28px;
  padding:14px 16px 14px 24px;border-radius:999px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid var(--pok-line-strong);
  color:#fff;font-weight:800;font-size:.9rem;letter-spacing:.01em;
  transition:transform .6s var(--pok-ease),background .6s var(--pok-ease),border-color .6s var(--pok-ease);
}
.pok-band-cta .pok-arrow{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#ff6600;color:#0b1015;font-size:1rem;line-height:1;
  transition:transform .6s var(--pok-ease),background .6s var(--pok-ease);
}
.pok-band-cta:hover{background:rgba(255,102,0,.12);border-color:rgba(255,102,0,.5);transform:translateY(-1px)}
.pok-band-cta:hover .pok-arrow{transform:translate(3px,-2px) scale(1.06);background:#ff8533}
.pok-band-cta:active{transform:scale(.985)}

/* ---- scroll reveal (JS adds .is-in) ---- */
/* Hidden ONLY when the reveal script has confirmed it is running (html.pok-anim).
   If the script fails or is blocked, everything stays visible - content is never lost. */
.pok-reveal{opacity:1;transform:none;filter:none}
html.pok-anim .pok-reveal{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--pok-ease),transform .9s var(--pok-ease),filter .9s var(--pok-ease)}
html.pok-anim .pok-reveal.is-in{opacity:1;transform:none;filter:blur(0)}
html.pok-anim .pok-band-grid .pok-shot:nth-child(2){transition-delay:.06s}
html.pok-anim .pok-band-grid .pok-shot:nth-child(3){transition-delay:.12s}
html.pok-anim .pok-band-grid .pok-shot:nth-child(4){transition-delay:.18s}
html.pok-anim .pok-band-grid .pok-shot:nth-child(5){transition-delay:.24s}
html.pok-anim .pok-band-grid .pok-shot:nth-child(6){transition-delay:.30s}

/* ---- responsive: single column, no overlap, no rotation ---- */
@media (max-width:1000px){
  .pok-band-grid[data-count="1"] .pok-shot{grid-column:span 4;grid-row:span 3}
  .pok-band-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:110px}
  .pok-shot{grid-column:span 2}
  .pok-shot-lg{grid-column:span 4;grid-row:span 3}
  .pok-shot-tall{grid-column:span 2;grid-row:span 3}
  .pok-shot-wide{grid-column:span 4}
}
@media (max-width:640px){
  .pok-band{padding:44px 16px}
  .pok-band-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .pok-shot,.pok-shot-lg,.pok-shot-tall,.pok-shot-wide{grid-column:1/-1;grid-row:auto}
  .pok-shot-core{aspect-ratio:4/3}
  .pok-band-sub{font-size:.95rem}
  .pok-band-cta{width:100%;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  html.pok-anim .pok-reveal{opacity:1;transform:none;filter:none;transition:none}
  .pok-shot-core img,.pok-shot figcaption,.pok-shot-shell{transition:none}
}