/* Cyrus's small cards (js/talk/idea-cards.js): how they sit round him (.idea-layer, talk mode's
   .talk-cards and talk/cards.html's preview), and how they look. Every size is multiplied by
   --card-scale (talk.css shrinks them on phones).

   Round him: the layer gives --bust-w (his width), --card-gap (the room between him and a card) and
   --card-w; place() sets each card's top, and its pose sets its side, --nudge (further out, times
   --nudge-scale) and --tilt.
   They float out from him one after another, then drift gently; while he speaks the one he's on
   straightens, comes forward and grows a touch, and the rest fade back (.is-speaking, .is-focus). */
.idea-layer .idea-card {
  position: absolute; max-width: var(--card-w); pointer-events: auto; transform-origin: 50% 60%;
  rotate: var(--tilt, 0deg);
  transition: opacity 0.45s ease, scale 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), rotate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
  animation:
    idea-in 0.9s cubic-bezier(0.2, 1.15, 0.35, 1) calc(var(--i, 0) * 0.14s) backwards,
    idea-drift 5.5s ease-in-out calc(1.2s + var(--i, 0) * 0.8s) infinite alternate;
}
.idea-layer .idea-card[data-side="l"] { --from: 70px; right: calc(50% + var(--bust-w) / 2 + var(--card-gap) + var(--nudge, 0px) * var(--nudge-scale, 1)); }
.idea-layer .idea-card[data-side="r"] { --from: -70px; left: calc(50% + var(--bust-w) / 2 + var(--card-gap) + var(--nudge, 0px) * var(--nudge-scale, 1)); }
@keyframes idea-in { from { opacity: 0; translate: var(--from, 0) 16px; scale: 0.82; rotate: 0deg; } }
@keyframes idea-drift { from { translate: 0 0; } to { translate: 0 -7px; } }
.idea-layer.is-speaking .idea-card:not(.is-focus) { opacity: 0.22; }
.idea-layer.is-speaking .idea-card.is-focus { z-index: 1; scale: 1.06; rotate: 0deg; }
.idea-layer.is-clearing .idea-card { opacity: 0; transition-duration: 0.25s; }
@media (prefers-reduced-motion: reduce) {
  .idea-layer .idea-card { animation: none; }
  .idea-layer.is-speaking .idea-card.is-focus { scale: none; }
}

/* ---------- the card itself ---------- */

.idea-card {
  --s: var(--card-scale, 1);
  box-sizing: border-box; margin: 0; display: flex; flex-direction: column; color: var(--ink);
  font-family: var(--sans);
  /* as wide as what it says (the figure, the words, the picture), from a floor up to the room it has
   (--card-w, set by its layer); the note doesn't widen it, it wraps to fit */
  width: max-content; min-width: calc(170px * var(--s)); max-width: var(--card-w, 250px);
}
.idea-card img { display: block; }
.idea-value { display: block; font-weight: 400; }
.idea-card figcaption { text-wrap: balance; contain: inline-size; }
.idea-text { display: flex; flex-direction: column; min-width: 0; }

/* a change: figures run before, arrow, after; words stack, the old one struck through */
.idea-change .idea-value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.18em; }
.idea-from { font-size: 0.5em; text-decoration: none; opacity: 0.45; }
.idea-arrow { font: 300 0.4em/1 var(--sans); opacity: 0.45; }
.idea-change.is-words .idea-value { flex-direction: column; align-items: flex-start; }
.idea-change.is-words .idea-from { font-size: 0.62em; opacity: 0.3; text-decoration: line-through; text-decoration-thickness: 0.06em; }
.idea-change.is-words .idea-arrow { display: none; }

/* the touches of picture: a row of logos, overlapping faces, an X and its Y, an app icon */
.idea-art { display: flex; align-items: center; flex: none; }
.idea-art-logos { gap: calc(6px * var(--s)); }
.idea-art-logos img { width: calc(32px * var(--s)); height: calc(32px * var(--s)); border-radius: calc(8px * var(--s)); }
.idea-art-faces img { width: calc(38px * var(--s)); height: calc(38px * var(--s)); border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 calc(2px * var(--s)) var(--paper); }
.idea-art-faces img + img { margin-left: calc(-10px * var(--s)); }
.idea-art-pair { gap: calc(6px * var(--s)); }
.idea-art-pair img { width: calc(44px * var(--s)); height: calc(44px * var(--s)); border-radius: calc(10px * var(--s)); object-fit: cover; }
.idea-art-pair i { font: 300 calc(14px * var(--s))/1 var(--sans); font-style: normal; opacity: 0.5; }
.idea-art-icon img { width: calc(40px * var(--s)); height: calc(40px * var(--s)); border-radius: calc(10px * var(--s)); }

/* ---------- the look: the about section's cards, as css/home.css draws them (.glimpse-card): white,
   rounded, lifted on a long soft shadow; the figure huge in the serif, ink; old and new words stacked
   big, the old struck through; the note in the light sans. A picture stands tall on the mint gradient
   with its note on a white strip (a wide screen sits on the admin's grey surface instead) ---------- */
.idea-card {
  gap: calc(14px * var(--s)); padding: calc(18px * var(--s)) calc(20px * var(--s)) calc(20px * var(--s));
  background: var(--paper); border-radius: calc(18px * var(--s));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 40px -12px rgba(0, 0, 0, 0.3);
}
.idea-text { gap: calc(10px * var(--s)); }
.idea-value { font: 400 calc(84px * var(--s))/0.9 var(--serif); letter-spacing: -0.05em; color: var(--ink); }
.idea-phrase .idea-value { font-size: calc(46px * var(--s)); line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance; }
.idea-change .idea-value { font-size: calc(72px * var(--s)); }
.idea-change.is-words .idea-value { font-size: calc(54px * var(--s)); line-height: 1; }
.idea-change.is-words .idea-from { font-size: 1em; opacity: 0.3; text-decoration-thickness: calc(3px * var(--s)); }
.idea-from { font-size: 0.42em; }
figcaption { font: 300 calc(14px * var(--s))/1.3 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
.idea-image { padding: 0; gap: 0; overflow: hidden; }
.idea-shot {
  display: flex; flex-direction: column; align-items: center; padding: calc(20px * var(--s)) calc(20px * var(--s)) 0;
  background: #9be3c8 url('../assets/images/gradient-mint.png') center / cover no-repeat;
}
.idea-shot img { height: calc(230px * var(--s)); width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2)); }
.idea-image.is-wide .idea-shot { padding-bottom: calc(20px * var(--s)); }
.idea-image.is-wide .idea-shot img {
  width: 100%; height: auto; padding: 3%; border-radius: calc(8px * var(--s)); background: #f1f1f1;
  filter: none; box-shadow: 0 16px 30px -16px rgba(8, 48, 32, 0.6), 0 1px 4px rgba(8, 48, 32, 0.12);
}
.idea-image figcaption { padding: calc(11px * var(--s)) calc(16px * var(--s)) calc(12px * var(--s)); }

/* a card can be opened (js/talk/card-detail.js): it lifts a little under the pointer */
.idea-card[role="button"] { cursor: pointer; }
.idea-card[role="button"]:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 26px 50px -14px rgba(0, 0, 0, 0.36); }
.idea-card[role="button"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.idea-card.is-open { visibility: hidden; } /* it's the sheet now */

/* ---------- a card, opened: the same white, rounded, lifted sheet, larger. Its figure and words on
   the left, what explains it in the sentences under them, a row of figures; the visual on the right,
   drawn as its case study draws it, on the mint gradient (a chart or typeset visual on white) ---------- */
.idea-detail-layer {
  position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 32px 76px; /* 76px: room for the × beside it */
  background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.idea-detail-frame { position: relative; width: min(560px, 100%); }
.idea-detail-frame.has-visual { width: min(1040px, 100%); }
.idea-detail {
  --s: 1;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start;
  max-height: calc(100dvh - 64px); overflow: auto; overscroll-behavior: contain;
  padding: 28px 30px 30px; background: var(--paper); border-radius: 22px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 30px 70px -20px rgba(0, 0, 0, 0.35);
}
.has-visual > .idea-detail { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
/* the ×: a white disc just outside the sheet's top right corner */
.idea-detail-close {
  position: absolute; top: 0; left: calc(100% + 14px); width: 44px; height: 44px; padding: 0 0 3px; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer; font: 300 28px/1 var(--sans);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 10px 24px -10px rgba(0, 0, 0, 0.3); transition: scale 0.2s ease;
}
.idea-detail-close:hover { scale: 1.08; }
.idea-detail-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.idea-detail-words { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
/* the card's own head, without its card */
.idea-detail .idea-detail-head {
  position: static; width: auto; min-width: 0; max-width: none; padding: 0; background: none; box-shadow: none; border-radius: 0;
  animation: none; rotate: none; cursor: auto;
}
.idea-detail .idea-detail-head .idea-value { font-size: 104px; }
.idea-detail .idea-detail-head.idea-phrase .idea-value { font-size: 56px; }
.idea-detail .idea-detail-head.idea-change .idea-value { font-size: 88px; }
.idea-detail .idea-detail-head.idea-change.is-words .idea-value { font-size: 64px; }
.idea-detail .idea-detail-head figcaption { font-size: 16px; }
.idea-detail-title { font: 400 48px/0.95 var(--serif); letter-spacing: -0.045em; text-wrap: balance; }
.idea-detail-text { max-width: 32em; font: 300 18px/1.45 var(--sans); letter-spacing: -0.02em; color: var(--black); text-wrap: pretty; }
.idea-detail-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 18px; padding-top: 16px; border-top: 1px solid rgba(51, 51, 51, 0.15); }
.idea-detail-figure b { display: block; font: 400 44px/0.9 var(--serif); letter-spacing: -0.05em; color: var(--ink); }
.idea-detail-figure span { display: block; margin-top: 6px; font: 300 13px/1.3 var(--sans); letter-spacing: -0.02em; }

/* the visual: a panel as tall as the sheet allows; the story's drawing is laid out at the story's
   width and scaled to fit it (js/talk/story-visual.js) */
.idea-detail-visual {
  position: relative; align-self: stretch; min-height: min(520px, 62dvh); overflow: hidden; border-radius: 14px;
  background: #9be3c8 url('../assets/images/gradient-mint.png') center / cover no-repeat;
}
.idea-detail-visual.is-plain { background: var(--paper); }
.idea-detail-visual .talk-fit { position: absolute; inset: 6%; }
.idea-detail-visual.is-plain .talk-fit { inset: 4%; }
.talk-fit-inner { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 50%; }
.idea-detail-visual .s-frame img, .idea-detail-visual .s-frame video { cursor: default; } /* the story's zoom isn't here */
.idea-detail-visual.is-picture { display: grid; place-items: center; padding: 6%; }
.idea-detail-visual.is-picture > img, .idea-detail-visual.is-picture > video {
  max-width: 100%; max-height: min(460px, 54dvh); width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
}

@media (max-width: 767.98px) {
  .idea-detail-layer { padding: 72px 16px 16px; } /* the × sits above the sheet */
  .idea-detail, .has-visual > .idea-detail { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 20px 22px; border-radius: 18px; max-height: calc(100dvh - 88px); }
  .idea-detail-close { top: auto; bottom: calc(100% + 12px); left: auto; right: 0; }
  .idea-detail-visual { order: -1; min-height: 38dvh; }
  .idea-detail .idea-detail-head .idea-value { font-size: 72px; }
  .idea-detail .idea-detail-head.idea-phrase .idea-value { font-size: 40px; }
  .idea-detail .idea-detail-head.idea-change .idea-value { font-size: 60px; }
  .idea-detail .idea-detail-head.idea-change.is-words .idea-value { font-size: 46px; }
  .idea-detail-title { font-size: 36px; }
  .idea-detail-text { font-size: 16px; }
  .idea-detail-figure b { font-size: 34px; }
}