/* ══════════════════════════════════════════════════════════════════════
   accordion-gallery.css — React Bits' AccordionGallery, ported.

   Same object as the original: a row of panels, one open, the rest tilted
   and dimmed beside it. What changed is the engine. The React version
   drives six properties per panel through a GSAP timeline; this site has
   no bundler and no dependencies, so the same six are custom properties
   with CSS transitions on them and accordion-gallery.js only writes the
   numbers. power3.out is easeOutCubic, which cubic-bezier states exactly,
   so the motion is the curve the component was designed with.

   Colours come from the page rather than the component's defaults: the
   original is drawn for a near-black UI (#060010 overlay, white type) and
   this page is rust on off-white.
   ══════════════════════════════════════════════════════════════════════ */

.accordion-gallery{
  --ag-accent:var(--page);
  --ag-overlay:#2A1409;
  --ag-text:var(--page);
  --ag-gap:10px;
  --ag-radius:var(--r-media);
  --ag-media-size:320px;
  --ag-dur:.6s;
  --ag-ease:cubic-bezier(.215,.61,.355,1);   /* GSAP power3.out */
  --ag-stagger:.06s;

  position:relative;z-index:1;               /* the terrain canvas is behind the page */
  display:flex;flex-direction:row;gap:var(--ag-gap);
  width:100%;max-width:100%;
  /* the component takes a fixed pixel height; this tracks the viewport so
     the row keeps the page's proportions instead of being 460px on every
     screen. Raised from min(38vw,46svh)/520 — on a 1440x900 laptop that
     resolved to 414px, which made five panels read as a filmstrip rather
     than as the photographs they are. */
  height:clamp(300px,min(46vw,64svh),700px);
  margin-block:clamp(34px,5vh,64px);
  perspective:1400px;perspective-origin:50% 50%;
}
.accordion-gallery--vertical{flex-direction:column}

.ag-panel{
  position:relative;
  flex:1 1 0;flex-grow:var(--ag-grow,1);
  min-width:0;min-height:0;overflow:hidden;
  border-radius:var(--ag-radius);
  cursor:pointer;display:block;text-decoration:none;outline:none;
  transform-style:preserve-3d;transform-origin:center center;
  transform:rotateY(var(--ag-rot,0deg));
  background:color-mix(in srgb,var(--body) 12%,var(--page));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--body) 16%,transparent);
  will-change:flex-grow,transform;
  -webkit-tap-highlight-color:transparent;
  transition:flex-grow var(--ag-dur) var(--ag-ease),transform var(--ag-dur) var(--ag-ease);
}
.accordion-gallery--vertical .ag-panel{transform:rotateX(var(--ag-rot,0deg))}
.ag-panel:focus-visible{box-shadow:0 0 0 2px var(--map)}

.ag-panel__frame{position:absolute;inset:0;overflow:hidden;border-radius:inherit}

.ag-panel__media{
  --ag-gray:1;--ag-dim:.35;
  position:absolute;top:50%;left:50%;
  width:var(--ag-media-size);height:100%;
  transform:translate(-50%,-50%) translate(var(--ag-sx,0px),var(--ag-sy,0px));
  filter:grayscale(var(--ag-gray));
  will-change:transform,filter;
  transition:transform var(--ag-dur) var(--ag-ease),filter var(--ag-dur) var(--ag-ease);
}
.accordion-gallery--vertical .ag-panel__media{
  width:100%;height:var(--ag-media-size);
}
.ag-panel__media img,.ag-panel__media video{
  width:100%;height:100%;object-fit:cover;display:block;
  user-select:none;-webkit-user-drag:none;
}

.ag-panel__overlay{
  position:absolute;inset:0;pointer-events:none;
  background:color-mix(in srgb,var(--ag-overlay) calc(var(--ag-dim,.22) * 100%),transparent);
  transition:background var(--ag-dur) var(--ag-ease);
}


/* On a narrow screen the row becomes a stack and the tilt comes off — five
   panels side by side on a phone are five slivers. */
/* On a narrow screen the row becomes a column — five panels side by side on a
   phone are five slivers. The component's own fallback stacks them at a fixed
   84px each with the container at height:auto, which leaves flex-grow no free
   space to hand out, so nothing actually expands and the accordion stops being
   one. Giving the column a height puts the mechanism back. */
@media(max-width:520px){
  .accordion-gallery{
    flex-direction:column;perspective:none;
    height:clamp(420px,76svh,620px);
  }
  .ag-panel{min-height:56px;transform:none!important}
  .accordion-gallery .ag-panel__media{width:100%;height:var(--ag-media-size)}
}

@media(prefers-reduced-motion:reduce){
  .ag-panel,.ag-panel__media,.ag-panel__overlay{
    transition:none;will-change:auto;
  }
}

/* The images still carry .tilted-card-img because plate() builds every frame
   on this site the same way. Inside a panel the card's own radius and hairline
   are wrong — the panel already clips and draws the edge — so they come off. */
.ag-panel__media .tilted-card-img{
  position:absolute;inset:0;width:100%;height:100%;
  border-radius:0;box-shadow:none;transform:none;
  object-position:var(--ag-focus,50% 50%);
}