/* What I do: two cards with dashed borders that draw open, corner brackets, flicker-in content. */

/* ---------- What I do ---------- */
.whatIDO {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100vh;
  width: var(--cWidth);
  max-width: 1920px;
  margin: auto;
  z-index: 9;
}

.what-box {
  width: 50%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 9;
}

.what-box h2 {
  font-size: calc(4vw + 25px);
  line-height: calc(4vw + 20px);
  font-weight: 600;
  margin: 0.83em 10% 100px 0;
}

.hat-h2 { font-style: italic; }
.do-h2 { color: var(--accent); }

@media only screen and (min-width: 1025px) {
  .whatIDO { z-index: var(--z-whatido); }
  .what-box:first-child {
    z-index: 13;
    align-self: flex-start;
    padding-top: 8vh;
  }
}

.what-box-in {
  flex-direction: column;
  height: 500px;
  margin-left: 200px;
  position: relative;
  display: flex;
}

/* Desktop with the live avatar: the cards appear when the choreography says so. They are
   hidden with opacity (not display), so Tab and screen readers still reach them, and keyboard
   focus inside shows them at once (author !important beats the choreography's inline styles).
   Everywhere else they are always there. */
@media only screen and (min-width: 1025px) {
  html.whatbox-gated .what-box-in { opacity: 0; pointer-events: none; }
  html.whatbox-gated .what-box-in:focus-within { opacity: 1 !important; pointer-events: auto !important; }
}

html:not(.whatbox-gated) .what-box-in { display: flex !important; }

.what-content {
  width: 450px;
  min-height: 180px;
  height: auto;
  transition: 0.5s;
  position: relative;
  padding: 50px;
  box-sizing: border-box;
  overflow: visible;
}

.what-noTouch:hover,
.what-noTouch:focus-within,
.what-content-active {
  min-height: auto;
  height: auto;
  padding: 40px 50px;
}

.what-noTouch:hover ~ .what-content,
.what-box-in:hover .what-noTouch:not(:hover),
.what-box-in:focus-within .what-noTouch:not(:focus-within),
.what-content.what-sibling {
  min-height: 33%;
  padding: 10px 50px;
}

.what-content h3 {
  font-size: 32px;
  letter-spacing: 1px;
  margin: 0;
  line-height: 1.5;
  text-transform: uppercase;
  word-break: break-word;
}

.what-content p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 200;
  letter-spacing: 0.7px;
  overflow-wrap: break-word;
}

.what-content .what-sub {
  font-weight: 300;
  letter-spacing: 1px;
  margin: 0;
  font-size: 14px;
  opacity: 0.3;
}

.what-content-in {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

.what-content-in h4 {
  font-weight: 300;
  opacity: 0.5;
  font-size: 12px;
  letter-spacing: 1px;
  margin: 0 0 5px;
}

.what-content-flex {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0 0 40px;
}

.what-tags {
  font-size: 13px;
  font-weight: 400;
  padding: 2px 7px;
  background-color: #ffffff26;
  border: 1px solid #ffffff50;
  border-radius: 30px;
}

/* Corner brackets */
.what-content::before,
.what-corner::before,
.what-content::after,
.what-corner::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  border: 4px solid #fff;
}

.what-content::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.what-corner::before { top: -2px; right: -2px; border-left: none; border-bottom: none; }
.what-content::after { bottom: -2px; left: -2px; border-top: none; border-right: none; }
.what-corner::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* Dashed borders */
.what-border1 {
  position: absolute;
  top: 0;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
}

.what-border1 svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 450px;
  height: 100%;
}

.what-border2 {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0;
  transform: translateY(-50%);
  height: 100%;
  overflow: hidden;
  opacity: 0.2;
  pointer-events: none;
}

.what-border2 svg {
  height: 500px;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
}

/* The toggle (a real button): chevron in a square. */
.what-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #fff;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.what-arrow::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transition: 0.5s;
  width: 10px;
  height: 10px;
}

.what-arrow::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.what-noTouch:hover .what-arrow::before,
.what-noTouch:focus-within .what-arrow::before,
.what-content-active .what-arrow::before {
  transform: translate(-50%, -20%) rotate(-225deg);
}

/* Draw-on animation, armed by whatido.js and played when the section is in view. */
html.whatido-armed .what-border1 { max-width: 0%; opacity: 0.8; }
html.whatido-armed .what-border2 { max-height: 0%; opacity: 0.8; }
html.whatido-armed .what-content::before,
html.whatido-armed .what-content::after,
html.whatido-armed .what-corner::before,
html.whatido-armed .what-corner::after { opacity: 0; }
html.whatido-armed .what-content-in,
html.whatido-armed .what-arrow { opacity: 0; }

html.whatido-armed .whatido.is-inview .what-border1,
html.whatido-armed .whatido.is-inview .what-border2 {
  animation: whatBorders 1.2s 1 forwards;
}

html.whatido-armed .whatido.is-inview .what-content::before,
html.whatido-armed .whatido.is-inview .what-content::after,
html.whatido-armed .whatido.is-inview .what-corner::before,
html.whatido-armed .whatido.is-inview .what-corner::after {
  animation: whatCorners 0.2s 0.5s 1 forwards;
}

html.whatido-armed .whatido.is-inview .what-content-in,
html.whatido-armed .whatido.is-inview .what-arrow {
  animation: whatFlicker 0.5s 1s 1 forwards;
}

@keyframes whatBorders {
  80% { opacity: 0.8; }
  to { max-height: 100%; max-width: 100%; opacity: 0.2; }
}

@keyframes whatCorners {
  to { opacity: 1; }
}

@keyframes whatFlicker {
  0%, 25%, 35%, 60% { opacity: 0; }
  30%, 50%, 40%, to { opacity: 1; }
}

@media only screen and (max-width: 1600px) {
  .what-box h2 { margin-right: 18%; }
}

@media only screen and (max-width: 1400px) {
  .what-box h2 { margin-right: 20%; }
  .what-box-in { height: 400px; margin-left: 50px; }
  .what-content h3 { font-size: 28px; }
  .what-content { padding: 30px; width: 380px; }
  .what-content p { font-size: 13px; }
  .what-noTouch:hover,
  .what-noTouch:focus-within,
  .what-content-active { padding: 20px 30px; }
  .what-noTouch:hover ~ .what-content,
  .what-box-in:hover .what-noTouch:not(:hover),
  .what-box-in:focus-within .what-noTouch:not(:focus-within),
  .what-content.what-sibling { padding: 10px 30px; }
  .what-tags { font-size: 12px; }
  .what-border1 svg { width: 380px; }
  .what-border2 svg { height: 400px; }
}

@media only screen and (max-width: 1024px) {
  .whatIDO { height: auto; padding: 50px 0; }
  .what-box-in { height: 500px; margin-left: -50px; }
  .what-content { padding: 50px; width: 500px; }
  .what-content p { font-size: 14px; }
  .what-noTouch:hover,
  .what-noTouch:focus-within,
  .what-content-active { min-height: 67%; padding: 50px; }
  .what-noTouch:hover ~ .what-content,
  .what-box-in:hover .what-noTouch:not(:hover),
  .what-box-in:focus-within .what-noTouch:not(:focus-within),
  .what-content.what-sibling { min-height: 33%; padding: 10px 50px; }
  .what-border1 svg { width: 500px; }
  .what-border2 svg { height: 500px; }
}

@media only screen and (max-width: 900px) {
  .whatIDO { flex-direction: column; }
  .what-box h2 {
    margin: 50px 0;
    font-size: 55px;
    line-height: 53px;
  }
  .what-i { display: block; }
  .what-box:first-child { justify-content: flex-start; }
  .what-box:last-child { height: auto; }
  .what-box {
    width: 500px;
    max-width: calc(100% - 50px);
    margin: auto;
  }
  .what-box-in {
    margin-left: 0;
    height: auto;
    width: 100%;
    gap: 24px;
  }
  .what-content,
  .what-noTouch:hover,
  .what-noTouch:focus-within,
  .what-content-active,
  .what-noTouch:hover ~ .what-content,
  .what-box-in:hover .what-noTouch:not(:hover),
  .what-box-in:focus-within .what-noTouch:not(:focus-within),
  .what-content.what-sibling {
    width: 100%;
    padding: 30px;
    min-height: auto !important;
    height: auto !important;
  }
  .what-content p { font-size: 13px; line-height: 20px; }
  .what-tags { font-size: 11px; }
  .what-content h3 { font-size: 25px; }
  .what-content-in { height: auto; overflow: visible; }
  .what-content-flex { padding-bottom: 0; }
  .what-border1 svg { width: 100%; }
  .what-border2 svg { height: 100%; }
  .what-arrow { display: none; }
}

@media only screen and (max-width: 550px) {
  .whatIDO {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 40px 0;
  }
  .what-box {
    max-width: calc(100% - 30px);
    margin: 0 auto;
    width: 100%;
  }
  .what-box h2 {
    font-size: 42px;
    line-height: 40px;
    margin: 30px 0;
  }
  .what-content,
  .what-content-active,
  .what-content.what-sibling { padding: 24px; }
  .what-content h3 { font-size: 22px; }
}

/* Compact live story: the desk scene sits in the top half (avatar/choreography-compact.js T2),
   so the title starts under it, and the section paints above the fixed canvas. */
@media only screen and (max-width: 1024px) {
  html.choreo-compact .whatIDO {
    z-index: var(--z-avatar); /* above the canvas (later in the page), under the nav fade */
    padding-top: calc(var(--vh) * 0.5);
  }
  html.choreo-compact .what-box:first-child h2 { margin-top: 0; }
}

@media only screen and (min-width: 1950px) {
  .what-box h2 { font-size: 7rem; line-height: 6.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .what-content,
  .what-arrow::before { transition: none; }
}

html.reduced-motion .what-content,
html.reduced-motion .what-arrow::before { transition: none; }