/*
  Why Design Matters (/shared/why-design-matters.js): the page you're on pulls back into a laptop on a desk, then the
  essay draws itself in one pen line as you scroll. Ported from the laptop-reveal prototype.

  Layers, bottom to top (all fixed, all children of <html> except the page itself):
    .why-desk     the desk, the "Design Matters" marquees, the laptop photo, its lid and the black glass
    <body>        the page itself, transformed into the glass (the script sets transform and clip-path)
    .why          the glass's notch and sheen, VISION, the essay (its own scroller) and Back to full screen
  The laptop scenes use the photo's own pixel space (2000 × 1333); the script moves them with one 3D transform.

  Sizes are px (not the site's rem scale): it's a scene of its own, sized to the photo and the viewport.
*/
html.why-on{background:var(--why-desk)}
html.why-on{overflow:hidden}
:root{--why-desk:#e2e0dd;--why-ink:#111}

/* The page while it's the laptop's screen: nothing in it can be reached, its scripted motion stops (ekko:pause), its
   CSS animations stop once the laptop is on the desk (.why-hold: a rule that touches every element costs a full style
   pass, so it's done while nothing else moves, not as the zoom starts), and once the essay covers the screen it's not
   painted (.why-away). */
html.why-hold body,html.why-hold body *{animation-play-state:paused!important}
html.why-on body{transform-style:flat;overflow:clip}
/* the page moved up inside the cut-down body to where it was; the header (fixed, so at the body's top) to the view's top */
html.why-on body > :not(ekko-header,ekko-contact,.snack,script){translate:0 calc(-1 * var(--why-anchor,0px))}
html.why-on .site-header{translate:0 var(--why-lift,0px)}
html.why-away body{visibility:hidden}   /* (not content-visibility: its size containment would collapse the page and lose the scroll) */
/* Let's Talk at the end: the drawer and its snackbar come up over the essay; the rest of the page stays out of sight. */
html.why-contact body{transform:none!important;clip-path:none!important}
html.why-contact ekko-contact,html.why-contact .snack{visibility:visible}

/* ---------- the desk (under the page) ---------- */
.why-desk,.why-glass{position:fixed;inset:0;overflow:hidden;perspective:1200px;pointer-events:none}
.why-desk{background:var(--why-desk)}
.why-laptop{position:absolute;left:0;top:0;width:2000px;height:1333px;transform-style:preserve-3d;will-change:transform}
.why-laptop__photo{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;
  /* the photo's edges feather into the desk, so its frame never reads as a rectangle */
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 78%,transparent 100%)}
.why-marquee{position:absolute;white-space:nowrap;font-family:"Cal Sans","Helvetica Neue",Arial,sans-serif;line-height:1;color:#ff1a00;user-select:none}
.why-marquee--top{top:446px;font-size:280px}
.why-marquee--bottom{top:725px;font-size:115px}
.why-marquee__track{display:inline-block;will-change:transform;animation:why-rtl var(--dur,40s) linear infinite}
.why-marquee--bottom .why-marquee__track{animation-name:why-ltr}
.why-desk.is-still .why-marquee__track{animation-play-state:paused}      /* off screen, or a hidden tab */
@keyframes why-rtl{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--unit,0px)))}}
@keyframes why-ltr{from{transform:translateX(calc(-1 * var(--unit,0px)))}to{transform:translateX(0)}}
/* the lid, cut back out of the photo so the type passes behind it */
.why-lid{position:absolute;left:488px;top:281px;width:1046px;height:708px;border-radius:22px 22px 4px 4px;
  background:var(--why-photo) -488px -281px / 2000px 1333px no-repeat}
.why-screen{position:absolute;left:506px;top:298px;width:1010px;height:654px;background:#000;border-radius:7px 7px 0 0}

/* ---------- over the page: glass, VISION, essay, controls ---------- */
.why{position:fixed;inset:0;z-index:50;color:var(--why-ink);-webkit-tap-highlight-color:transparent}
.why:focus{outline:none}
.why-glass{z-index:0}
.why-notch{position:absolute;left:957px;top:297px;width:106px;height:19px;background:#000;border-radius:0 0 7px 7px;opacity:0}
.why-notch::after{content:"";position:absolute;left:50%;top:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#1d2330}
.why-sheen{position:absolute;left:506px;top:298px;width:1010px;height:654px;border-radius:7px 7px 0 0;opacity:0;
  background:
    linear-gradient(118deg,transparent 52%,rgba(255,255,255,.07) 64%,rgba(255,255,255,.02) 76%,transparent 86%),
    radial-gradient(ellipse 120% 90% at 50% 40%,transparent 70%,rgba(0,0,0,.25) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.why-vision{position:absolute;left:107px;top:91px;width:533px;opacity:0}
.why-vision img{display:block;width:100%;height:auto;transform-origin:20% 60%;animation:why-drift 11s ease-in-out infinite}
.why.is-away .why-vision img{animation-play-state:paused}
@keyframes why-drift{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(4px,-5px) rotate(-.5deg)}
  50%{transform:translate(-2px,-8px) rotate(.3deg)}
  75%{transform:translate(-4px,-2px) rotate(.6deg)}
}

/* The essay scrolls in its own scroller, so the page underneath keeps its scroll position untouched. */
.why-scroller{position:absolute;inset:0;overflow:hidden;overscroll-behavior:contain;scrollbar-width:none}
.why-scroller::-webkit-scrollbar{display:none}
.why-scroller:focus{outline:none}                             /* it's the whole screen; the essay itself shows where you are */
.why.is-revealed .why-scroller{overflow-y:auto}
.why-space{height:100%}

.why-return{position:fixed;z-index:3;top:max(24px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));
  padding:13px 18px;border:0;border-radius:0;font:500 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.01em;color:#fff;background:var(--why-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);cursor:pointer;
  opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .4s ease,transform .4s ease}
.why.is-revealed .why-return{opacity:1;transform:none;pointer-events:auto}
.why-return:focus-visible{outline:2px solid #ff1a00;outline-offset:3px}

.why-cue{position:fixed;z-index:2;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;font:500 11px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;color:#6d6a66;opacity:0;pointer-events:none;transition:opacity .6s ease}
.why-cue svg{display:block;width:12px;height:34px;margin-top:10px;overflow:visible}
.why-cue path{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:why-cue 2.4s ease-in-out infinite}
@keyframes why-cue{0%{stroke-dashoffset:1;opacity:1}65%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.why.is-revealed .why-cue{opacity:1}
.why.is-revealed.is-scrolled .why-cue{opacity:0}

/* ---------- the essay: one continuous line, drawn by scrolling ---------- */
.why .essay{position:fixed;inset:0;pointer-events:none;visibility:hidden;color:var(--why-ink);will-change:transform;
  /* the desk, with a whisper of paper grain under the ink (not blended over it: no full-screen blend on every frame) */
  background:var(--why-desk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .43 0 0 0 0 .4 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.why .essay.is-on{visibility:visible}
.why .essay:not(.is-on) *{visibility:hidden!important}
.why .essay canvas{position:absolute;inset:0;width:100%;height:100%}

.why .chapter{position:absolute;max-width:430px;opacity:0;transform-origin:0 0;will-change:transform,opacity}
.why .chapter--right{left:58%;top:50%;margin-top:-90px}
.why .chapter--left{left:8%;top:50%;margin-top:-90px}
.why .chapter--top{left:50%;top:13vh;margin-left:-330px;width:660px;max-width:none;text-align:center}
.why .chapter__kicker{margin:0 0 18px;font:500 11px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#8a8580}
.why .chapter__title{margin:0;font-family:"Instrument Serif","Times New Roman",serif;font-weight:400;font-size:clamp(40px,4.6vw,72px);line-height:1.02;letter-spacing:-.012em}
.why .chapter__title em{font-style:italic}
.why .chapter__title--caps{font-size:clamp(38px,5.4vw,86px);letter-spacing:.06em;text-transform:uppercase}
.why .chapter__copy{margin:22px 0 0;max-width:360px;font:400 15px/1.65 Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:#55524e}
.why .chapter--top .chapter__copy{margin-left:auto;margin-right:auto}

/* the last screen: black takes over and the mark appears in the line of sight */
.why .finale{position:absolute;inset:0;z-index:1;overflow:hidden;background:rgba(0,0,0,0)}
.why .finale__art{position:absolute;display:block}
.why .finale__art > *{opacity:0}
.why .finale__head,.why .finale__frame,.why .finale__eye{fill:#3d3d3d}
.why .finale__sight{fill:#5c5c5c}
.why .finale__mark rect{fill:#ff1a00}
.why .finale__mark path{fill:#fff}
.why .finale__link{position:absolute;left:0;top:0;padding:6px 2px;font:500 17px/1 Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing:.01em;color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;
  text-decoration-color:rgba(255,255,255,.55);opacity:0;visibility:hidden;pointer-events:auto;
  transition:text-decoration-color .2s ease,color .2s ease}
.why .finale__link:hover{text-decoration-color:#ff1a00}
.why .finale__link:focus-visible{outline:1px solid #fff;outline-offset:4px}
.why .finale__tag{font-family:"Cal Sans","Helvetica Neue",Arial,sans-serif;font-size:9.6px;letter-spacing:-.01em;text-anchor:middle;fill:#fff}

@media (max-width:700px){
  .why .chapter,.why .chapter--right,.why .chapter--left,.why .chapter--top{left:24px;right:24px;top:auto;bottom:9vh;width:auto;max-width:none;margin:0;text-align:left}
  .why .chapter--top{top:11vh;bottom:auto;text-align:center}
  .why .chapter__copy{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .why-marquee__track,.why-vision img,.why-cue path{animation:none}
}

/* ---------- the page itself (/why-design-matters/ opened directly) ---------- */
/* Its "screen" is the homepage's own top (.why-home: hero and quote, with the homepage's styles, copied in by
   build.py) under the live header; the essay is read from the page by the script. Without script, the essay is plain
   text on the desk. */
.why-page{background:#000}                                      /* the homepage's, so its top (and the nav's ink over it) match */
.why-page > .essay{position:relative;max-width:66rem;margin:0 auto;padding:16rem 2rem;color:var(--why-ink);background:var(--why-desk)}
.why-page > .essay .chapter{margin-bottom:6rem}
.why-page > .essay .chapter__title{font-family:"Instrument Serif",serif;font-weight:400;font-size:4.8rem;line-height:1.02}
.why-page > .essay .finale,.why-page > .essay canvas{display:none}