/* ===============================================================
   RUSS-RIZZO — splash page
   ===============================================================
   Two columns divided by a vertical rule: the ®® mark centred in the
   left one, the cycling stills centred in the right. Nothing else, and
   nothing animates but the stills themselves.

   The full site this was stripped from is preserved in this folder's
   git history (tag `full-site`) and in ~/Desktop/russ-rizzo.com-ARCHIVE.
   =============================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* For Chrome, Safari, and newer Edge */
::-webkit-scrollbar {
  display: none;
}

/* For Firefox */
html {
  scrollbar-width: none;
}

html, body { height: 100%; }

body {
  height: 100vh;
  background: #fff;
  color: #000;
  font-family: special-gothic-expanded, sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Site-wide custom cursor: Russ's round dot, kept byte-identical to the one
     on russrizzo.com so the subdomain and the domain feel like one site — the
     same three files, the same 10 10 hotspot (the centre of the 20x20 image),
     and the same three declarations. Browsers draw a cursor at CSS-pixel size,
     so a 1x-only image goes soft on retina; the -webkit- line is what keeps
     Safari on the sharp copies instead of the plain-url fallback. Don't go
     much past these sizes — browsers ignore a cursor image over roughly
     128px. */
  cursor: url('images/other/cursor@1x.png') 10 10, auto;                                    /* fallback: no image-set support */
  cursor: -webkit-image-set(url('images/other/cursor@1x.png') 1x,
                            url('images/other/cursor@2x.png') 2x,
                            url('images/other/cursor@3x.png') 3x) 10 10, auto;             /* Safari */
  cursor: image-set(url('images/other/cursor@1x.png') 1x,
                    url('images/other/cursor@2x.png') 2x,
                    url('images/other/cursor@3x.png') 3x) 10 10, auto;
}

/* ---------------------------------------------------------------
   DOT CURSOR — the same as russrizzo.com's: with a mouse or trackpad,
   script.js hides the system cursor (html.has-dot) and draws .rr-dot, a
   white dot in mix-blend-mode: difference that follows the mouse on top
   of everything (black on white, inverted over the stills), 18.6px so it
   fills a ®® ring's opening. Touch screens keep the image cursor above.
   --------------------------------------------------------------- */

html.has-dot,
html.has-dot * {
    cursor: none;
  }

.rr-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    width: 18.6px;
    height: 18.6px;
    margin: -9.3px 0 0 -9.3px;              /* centred on the pointer */
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    transform: translate3d(var(--dot-x, -100px), var(--dot-y, -100px), 0);
    visibility: hidden;
  }

.rr-dot.is-on {
    visibility: visible;
  }

/* ---------------------------------------------------------------
   TWO-COLUMN LAYOUT
   --------------------------------------------------------------- */

.layout { flex: 1; display: flex; min-height: 0; }

/* Nothing here can overflow, so nothing scrolls. */
.panel { height: 100%; overflow: hidden; }

.panel--left {
  flex: 0 0 50%;
  border-right: 2px solid #000;           /* the centre line */
}

.panel--right { flex: 1 1 auto; }

.inner { height: 100%; padding: 20px; }

.panel--left .inner {
    display: grid;
    place-items: center;
  }

/* ---------------------------------------------------------------
   ®® MARK
   --------------------------------------------------------------- */

.rr-mark {
    position: relative;
    display: block;
  }

.rr-toggle {
    display: block;
    padding: 0;
    font: inherit;
    background: none;
    border: 0;
    cursor: inherit;
  }

/* No percentage max-width here: inside the shrink-to-fit button its
   percentage resolves against a width that depends on this image, and the
   logo throttles itself down. At 48px it can't overflow anything anyway. */
.rr-logo {
    display: block;
    width: 50.15px;                          /* sized FROM the type, not the other way
                                                round: at 16px the cap height is 11.36px,
                                                and the R is 82 of the artwork's 362
                                                columns of width, so 11.36 × 362/82 is
                                                the width at which the R matches it */
    height: auto;
  }

/* The address hangs off the logo's right edge and is taken out of the flow,
   so revealing it never nudges the mark — it emerges from behind it.
   clip-path does the uncovering and translateX does the travel. The clip is
   a percentage of this element's own box, so the two stay in step at any
   address length with nothing measured in JS.

   font-size and the logo's width are tied together: the R inside the ® is
   82 of the artwork's 166 rows, so it stands at 0.494 of whatever height
   the logo is drawn at, and this type is sized so its cap height matches.
   At 16px that cap is 11.36px, which fixes the logo at 50.15px wide.
   Change either one and the other has to be recomputed. */
.rr-email {
    position: absolute;
    left: 100%;
    top: 50%;
    /* ...then down a hair. Centring the line box leaves the type sitting
       0.54px above the logo's baseline, because a line box is taller than
       the caps it holds and the slack below the baseline isn't symmetric.
       With the cap heights matched this is what lines the two up exactly. */
    transform: translateY(calc(-50% + 0.54px));
    width: max-content;
    overflow: hidden;
    white-space: nowrap;
    font-size: 16px;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.45s var(--ease);
  }

.rr-email-text {
    display: block;
    padding-left: 0.5em;
    transform: translateX(-100%);
    transition: transform 0.45s var(--ease);
  }

.rr-mark.is-open .rr-email {
    clip-path: inset(0 0 0 0);
  }

.rr-mark.is-open .rr-email-text {
    transform: translateX(0);
  }

/* ---------------------------------------------------------------
   STILLS — the cycling images in the right column
   --------------------------------------------------------------- */

.stills {
    display: grid;
    grid-template-rows: minmax(0, 1fr);      /* pin the row to the container's own
                                                height. Left to size itself, the row
                                                takes the tallest still — and then the
                                                stills' percentage max-height has
                                                nothing definite to resolve against,
                                                so it's dropped, the row overflows,
                                                and everything centres low. */
    place-items: center;
    height: 100%;
  }

/* Every still is placed in the same single grid cell, so they stack and
   each one centres itself — no absolute positioning and no measuring.
   max-width/max-height cap them inside one common box while width and
   height stay auto, so each keeps its own shape and the size visibly
   changes as the cycle runs. All sixteen stay in the document rather
   than swapping one src, so every image is already decoded before its
   turn comes round — at a quarter-second each there's no time to fetch. */
.still {
    grid-area: 1 / 1;
    min-width: 0;                            /* a grid item's automatic minimum is its
                                                content size, which would reinstate the
                                                overflow the row sizing above prevents */
    min-height: 0;
    max-width: 40%;
    max-height: 40%;
    width: auto;
    height: auto;
    visibility: hidden;
  }

.still.is-on {
    visibility: visible;
  }

/* ---------------------------------------------------------------
   MOBILE  ≤ 768px
   The ®® sits at the top, and the stills centre in the whole frame
   rather than in what's left under it — so the mark is taken out of
   the flow and laid over the top instead of stacked above.
   --------------------------------------------------------------- */

@media (max-width: 768px) {
  .layout { display: block; position: relative; }

  .panel--left {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    border-right: none;                     /* no second column to divide */
    z-index: 2;
  }

  .panel--left .inner { height: auto; }

  .panel--right { height: 100%; }

  /* Centred at the top of a narrow screen there's no room to the right of
     the mark — the address would run off the edge. So here it drops out
     from underneath instead: same reveal, rotated a quarter turn. The mark
     itself still never moves.

     Only the closed state needs redefining. The open state is "no clip, no
     translation", which the base rules already say. */
  .panel--left { overflow: visible; }      /* the address hangs below this box */

  .rr-email {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);           /* drops the desktop baseline nudge,
                                              which only matters side by side */
    clip-path: inset(0 0 100% 0);          /* shut from the bottom, not the right */
  }

  .rr-email-text {
    padding-left: 0;
    padding-top: 0.35em;                   /* the gap is now above, not beside */
    transform: translateY(-100%);          /* waits above, behind the mark */
  }
}