/* ============================================================
   PORTFOLIO CONFIG — change these numbers, save, reload page.
   Anything ending in `px` = pixels.  `deg` = degrees.
   ============================================================ */

:root {

  /* ---------- CARD COUNT ----------
     How many images in the stack. */
  --card-count: 40;


  /* ---------- CARD SHAPE ----------
     Size of each image / folder. */
  --card-width:  240px;
  --card-height: 160px;


  /* ---------- STACK DENSITY ----------
     Depth between adjacent cards.
     Smaller = tighter deck. Bigger = more spread out. */
  --card-gap: 40px;


  /* ---------- VIEW ANGLE ----------
     Three rotations applied to the whole stack.

     --tilt-x  pitch (up/down).
               negative = looking down from above (current)
               positive = looking up from below
                  0deg  = head-on, no tilt

     --tilt-y  yaw (left/right).
               flip the sign to mirror the diagonal direction.

     --tilt-z  roll (spin on the screen plane).
               use to fine-tune the diagonal angle. */
  --tilt-x: -30deg;
  --tilt-y: -40deg;
  --tilt-z:   0deg;


  /* ---------- STACK POSITION ----------
     Nudge the stack away from the center of the page.
        +x = right    -x = left
        +y = down     -y = up   */
  --stack-shift-x: 0px;
  --stack-shift-y: 0px;


  /* ---------- PLACEHOLDER COLORS ----------
     Only visible until you drop real images into assets/images/.
     Each card's color is computed from these. */
  --card-hue-start:      0;          /* 0-360, where on the color wheel to start */
  --card-hue-step:       0;          /* how far to step in hue between cards (0 = all same) */
  --card-saturation:     0%;         /* 0% grayscale - 100% pure color */
  --card-lightness:    100%;         /* 0% black - 100% white */
  --card-edge:        #555;          /* outline on each card */


  /* ---------- INTERACTION ----------
     When a card is clicked:
       - the stack splits at that card (front half slides forward,
         back half slides backward) opening one gap
       - the clicked card lifts up slightly out of the stack
     --spread-amount  how far each half slides apart (px)
     --lift-amount    how high the clicked card pops up (px)
     --spread-speed   animation duration */
  --spread-amount: 80px;
  --lift-amount:   60px;
  --category-lift: 40px;     /* how high category-matching cards rise */
  --spread-speed:  500ms;


  /* ---------- FOREGROUND (PRIMO PIANO) ----------
     Centered preview shown after a second click on a card.
     --foreground-size     max width/height of the preview
                           50vmin = 50% of smaller viewport dim
     --foreground-overlay  background behind the preview;
                           transparent = stack visible behind */
  --foreground-size:        100vmin;  /* max-width of the image            */
  --foreground-max-height:  90vh;     /* max-height — leaves vertical margin
                                         on portrait images so they don't
                                         touch the top/bottom of the screen */
  --foreground-overlay:     transparent;
  --foreground-bottom-margin: 60px;   /* space below all open content        */
  --foreground-gap:         40px;     /* space between image and side blocks */
  --foreground-info-width:  260px;    /* width of the text block on the right */
  --foreground-thumb-gap:    6px;     /* gap between thumbnails (4-col grid) */
  --foreground-thumb-active-shift: 10px;  /* downward shift of current thumb */
  --foreground-side-gap:     20px;    /* gap between thumbnail grid & text   */


  /* ---------- CATEGORIES ----------
     Right-aligned list in the top-right corner. */
  --categories-size:   14px;
  --categories-color:  #555;
  --categories-top:    28px;        /* distance from page top   */
  --categories-right:  40px;        /* distance from page right */


  /* ---------- LOGO ----------
     Controls the font size of the text logo "francis does things".
        28px  = fixed pixel size
        2rem  = relative to root font size
        2.5vw = scales with viewport width */
  --logo-size: 14px;


  /* ---------- HEADER ---------- */
  --header-padding: 28px 40px;       /* top/bottom  left/right */


  /* ---------- PAGE ---------- */
  --bg: #ffffff;   /* background color */
  --fg: #111111;   /* text color       */

}