/* In their words (r111). What customers say, cut to a few words each, on a
   black screen as the critics' quotes are in a film trailer. One alone,
   then a gathering that never leaves, in every size, straight then
   tilting, inside the screen until it is full and then past its edges,
   until the words are one wall. Then the wall pulls back into the L Squared
   mark, centred; "Every voice. Every screen." slides out of the mark on
   one line exactly as the wordmark does in the hero, slides back; L SQUARED
   slides out the same way; it fades; the invitation comes in alone.
   js/reviews.js places and times everything; this file only draws it.
   Transform and opacity only. White, the logo blue and the logo grey; no
   orange. Laptop and phone share this file; the phone rules are at the end. */

#reviews{
  position:relative;width:100%;min-height:100dvh;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0;overflow:hidden;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
}
.rv{position:relative;width:100%;height:100dvh}   /* the whole screen: the fill runs past its edges and #reviews clips it */

/* the wall: every review lives in it, so the ending can zoom it as one layer */
.rv__wall{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;transition:opacity 400ms var(--ease)}

/* a card: the words and, beneath, the name and role. Placed by its centre. */
.rv__card{
  position:absolute;left:0;top:0;width:max-content;max-width:min(88vw,1400px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4dvh,30px);
  opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(var(--s,1));
}
.rv__card.is-on{opacity:1;transition:opacity 220ms linear}
.rv__card.is-solo{max-width:min(92vw,1400px)}
.rv__card.is-solo .rv__q{font-size:clamp(40px,6.8vw,132px)}

/* the words: the site's condensed uppercase, paper white, one word the logo's blue */
.rv__q{
  margin:0;font-stretch:64%;font-weight:800;text-transform:uppercase;letter-spacing:-.012em;line-height:.92;
  color:var(--paper);font-size:clamp(26px,3.4vw,66px);text-wrap:balance;white-space:normal;
}
.rv__q em{font-style:normal;color:var(--blue)}

/* the name and the role, in the logo's grey; they fade in after the words */
.rv__by{display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transition:opacity 1100ms var(--ease)}
.rv__card.is-by .rv__by{opacity:1}
.rv__name{font-stretch:76%;font-weight:700;font-size:clamp(13px,1.1vw,18px);letter-spacing:.18em;text-transform:uppercase;color:#C8C8C8}
.rv__role{font-stretch:76%;font-weight:600;font-size:clamp(12px,.95vw,16px);letter-spacing:.16em;text-transform:uppercase;color:rgba(200,200,200,.75)}

/* ---------------------------------------------------------------- the ending
   The wall becomes the mark: the frame blacks out everything outside the
   square, the nine cells wash in with the logo's colours and black gutters
   between them, then go solid, so what is left is exactly the mark. */
.rv__frame,.rv__mark{position:absolute;left:50%;top:50%;width:var(--mk,600px);height:var(--mk,600px);transform:translate(-50%,-50%);pointer-events:none}
.rv__frame{z-index:2;box-shadow:0 0 0 6000px #000;opacity:0;transition:opacity calc(1500ms * var(--rv-zoom,1)) var(--ease) calc(300ms * var(--rv-zoom,1))}
.rv__mark{z-index:3}
.rv__cell{position:absolute;width:31.03%;height:31.03%;opacity:0;box-shadow:0 0 0 calc(var(--mk,600px) * .025) #000;
  transition:opacity calc(1400ms * var(--rv-zoom,1)) var(--ease) calc(900ms * var(--rv-zoom,1)),background-color calc(900ms * var(--rv-zoom,1)) var(--ease)}
.rv__cell.is-blue{background:rgba(86,176,228,.86)}
.rv__cell.is-grey{background:rgba(202,202,204,.86)}
.rv__cell.is-open{background:rgba(0,0,0,.96)}
#reviews.is-mark .rv__frame,#reviews.is-mark .rv__cell{opacity:1}
#reviews.is-solid .rv__cell.is-blue{background:#56B0E4}
#reviews.is-solid .rv__cell.is-grey{background:#CACACC}
#reviews.is-solid .rv__cell.is-open{background:#000}

/* the lockup, the hero's move: the mark (the logo's left 15.4%) centred,
   then it moves left as what is to its right is revealed. --k makes its
   mark the size of the wall's mark at the moment it takes over. */
/* js sets --mw (the mark's side), --gap, --tx (what centres the mark while
   closed), --lwlogo (the logo's width) and the lockup's own width */
.rv__lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;opacity:0;transition:opacity calc(450ms * var(--rv-mark,1)) var(--ease)}
#reviews.is-lock .rv__lock{opacity:1}                       /* the real mark fades in over the wall's solid mark, same pixels */
#reviews.is-lock2 .rv__wall{visibility:hidden}              /* then the wall goes, already covered: nothing to see */
.rv__lock-in{display:flex;align-items:center;width:100%;transform-origin:calc(var(--mw,100px) / 2) 50%;
  clip-path:inset(0 calc(100% - var(--mw,100px)) 0 0);transform:translateX(var(--tx,0px)) scale(var(--k,1));
  transition:clip-path calc(1.7s * var(--rv-slide,1)) var(--ease),transform calc(1.7s * var(--rv-slide,1)) var(--ease)}
.rv__lock.is-settled .rv__lock-in{transform:translateX(var(--tx,0px)) scale(1)}
.rv__lock.is-open .rv__lock-in{clip-path:inset(0 0 0 0);transform:translateX(0) scale(1)}
.rv__lock-mark{display:block;flex:none;width:var(--mw,100px);height:var(--mw,100px);overflow:hidden}   /* measured: the mark is 290 of the image's 1926 px, square */
.rv__lock-mark img{display:block;width:calc(var(--mw,100px) / .1506);max-width:none;height:auto}
.rv__lock-right{position:relative;display:grid;align-items:center;justify-items:start;flex:1;min-width:0;text-align:left}
.rv__lock-right > *{grid-area:1 / 1}   /* the line and the wordmark share the spot; the taller sets the height, both sit centred on the mark */
/* the line, set like the wordmark: wide, geometric, the logo's blue, its letters the wordmark's height (js sizes it) */
.rv__lock-text{display:block;padding-left:var(--gap,10px);white-space:nowrap;
  font-stretch:118%;font-weight:600;text-transform:uppercase;letter-spacing:.01em;line-height:1;color:var(--blue);
  opacity:1;transition:opacity calc(600ms * var(--rv-lfade,1)) var(--ease)}
.rv__lock.is-hide .rv__lock-text{opacity:0;transition-duration:calc(450ms * var(--rv-lfade,1))}
/* the wordmark: the same logo image, shifted so only its right part shows; it fades in where the words were */
.rv__lock-word{display:block;width:100%;overflow:hidden;opacity:0;transition:opacity calc(700ms * var(--rv-lfade,1)) var(--ease)}
.rv__lock-word img{display:block;width:calc(100% + var(--mw,100px));max-width:none;height:auto;margin-left:calc(-1 * var(--mw,100px))}
.rv__lock.is-word .rv__lock-text{opacity:0;transition-duration:calc(700ms * var(--rv-lfade,1))}
.rv__lock.is-word .rv__lock-word{opacity:1}
#reviews.is-gone .rv__lock{opacity:0;transition:opacity calc(1100ms * var(--rv-gfade,1)) var(--ease)}

/* the invitation: alone on the black, slowly, one by one */
.rv__ask{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:max-content;max-width:min(92vw,1400px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3dvh,34px);
  pointer-events:none;
}
.rv__ask .rv__q{font-size:clamp(34px,5.2vw,104px);opacity:0;transition:opacity calc(1400ms * var(--rv-ask,1)) var(--ease)}
.rv__ask-line{font-stretch:76%;font-weight:700;font-size:clamp(13px,1.05vw,17px);letter-spacing:.16em;text-transform:uppercase;color:#C8C8C8;
  opacity:0;transition:opacity calc(1400ms * var(--rv-ask,1)) var(--ease)}
.rv__ask .btn{margin-top:clamp(4px,1dvh,10px);opacity:0;transition:opacity calc(1400ms * var(--rv-ask,1)) var(--ease)}
#reviews.is-ask .rv__ask{pointer-events:auto}
#reviews.is-ask .rv__ask .rv__q{opacity:1}
#reviews.is-ask2 .rv__ask-line{opacity:1}
#reviews.is-ask3 .rv__ask .btn{opacity:1}

/* an optional line at the end (content.js "reviews line at end") */
#reviews .sec-end{position:absolute;left:0;right:0;bottom:clamp(12px,2dvh,24px);z-index:6;margin:0;padding:0 clamp(20px,5vw,64px)}

/* ---------------------------------------------------------------- phone */
@media (max-width:760px){
  #reviews{min-height:var(--app-h,100svh);padding:0}
  .p2 #reviews{min-height:max(var(--app-h,100svh),100lvh)}
  .rv{height:var(--app-h,100svh)}
  .p2 .rv{height:max(var(--app-h,100svh),100lvh)}
  .rv__card{max-width:min(86vw,520px);gap:clamp(12px,2dvh,20px)}
  .rv__card.is-solo{max-width:calc(100vw - 2 * var(--gut,20px))}
  .rv__card.is-solo .rv__q{font-size:15.5vw}
  .rv__q{font-size:8.6vw}
  .rv__name{font-size:13px}
  .rv__role{font-size:12px}
  .rv__ask{max-width:calc(100vw - 2 * var(--gut,20px))}
  .rv__ask .rv__q{font-size:12.5vw}
}

/* ---------------------------------------------------------------- reduced motion: the end, still */
@media (prefers-reduced-motion:reduce){
  .rv__card,.rv__by,.rv__wall,.rv__frame,.rv__cell,.rv__lock,.rv__lock-in,.rv__ask .rv__q,.rv__ask-line,.rv__ask .btn{transition:none}
  #reviews.is-gone .rv__lock{opacity:0}
}