/* The opening (js/intro.js): before the site is there, one box where you would write to your agent. While
   it plays, the first screen's parts are hidden, and they come in together when the site takes over. */
html.intro body > .bar:not(.ii-on),
html.intro .hero .h-kick:not(.ii-on),
html.intro .hero .h-say:not(.ii-on),
html.intro .hero .h-scene:not(.ii-on),
html.intro .hero .stage > canvas.dots:not(.ii-on),
html.intro .hero .agent:not(.ii-on) { opacity: 0 !important; }
html.intro .hero .h-kick.ii-on, html.intro .hero .agent.ii-on { opacity: 1 !important; }
html.intro body > .bar, html.intro .hero .h-kick, html.intro .hero .h-say, html.intro .hero .h-scene { transition: opacity .55s var(--ease), background .3s, box-shadow .3s; }
html.intro .hero .agent { transition: opacity .2s, background .4s; }
html.intro .hero .stage > canvas.dots { transition: none; }

.ii { position: fixed; inset: 0; z-index: 70; pointer-events: none; transition: opacity .4s; }
.ii.gone { opacity: 0; }
.ii > * { position: absolute; }

/* the box, where you write to your agent */
.ii-box { left: 50%; top: 46%; translate: -50% -50%; display: grid; gap: 16px; width: min(max(780px, 46vw), calc(100vw - 32px)); padding: 24px 18px 16px 26px; border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -36px rgba(30,25,15,.45); pointer-events: auto; transition: background .45s, box-shadow .45s; }
.ii-text { min-height: 2.9em; padding-right: 6px; font: 450 clamp(19px, 1.8vw, 36px)/1.4 var(--text); letter-spacing: -.012em; }
.ii-caret { display: inline-block; width: 2px; height: 1.12em; margin-left: 2px; vertical-align: -.2em; background: currentColor; animation: iiblink 1.05s steps(1) infinite; }
.ii-box.sent .ii-caret { visibility: hidden; }
@keyframes iiblink { 50% { opacity: 0; } }
.ii-row { display: flex; align-items: center; gap: 10px; transition: opacity .3s; }
.ii-to { height: 34px; overflow: hidden; border-radius: 10px; background: var(--paper); }
.ii-roll { display: flex; flex-direction: column; align-items: flex-start; }
.ii-roll > span { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; font: 500 13.5px var(--mono); color: var(--ink-2); white-space: nowrap; }
.ii-roll img { width: 22px; height: 22px; padding: 2px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px rgba(11,11,12,.1); }
.ii-send { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; background: var(--ink); color: var(--paper); }
.ii-send svg { width: 18px; height: 18px; }
.ii-send path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ii-ball { background: var(--live) !important; box-shadow: none !important; }

/* the first screen as it will be: copies of its parts, each where it is */
.ii-snap { position: absolute; overflow: hidden; background: var(--paper); transform-origin: 0 0; }
.ii-snap canvas { position: absolute; }
.ii-snap .ii-at { position: absolute; }
.ii-snap .ii-at > * { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; margin: 0 !important; translate: none !important; transform: none !important; opacity: 1 !important; transition: none !important; }
.ii-snap .ii-at-say > * { display: block; }

/* what you wrote, and your phone, your laptop and your tv */
.ii-said { translate: 0 0; max-width: calc(100vw - 32px); padding: 10px 15px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--rule), 0 12px 30px -18px rgba(0,0,0,.35); font: 500 clamp(15px, 1vw, 22px)/1.35 var(--mono); color: var(--ink); text-align: center; transform: translate(-50%, 0); }
.ii-said::before { content: "you › "; color: var(--ink-3); font-weight: 400; }
.ii-dev { background: #0b0b0c; box-shadow: 0 0 0 1px rgba(11,11,12,.25), 0 40px 90px -30px rgba(30,25,15,.45); }
.ii-scr { position: relative; width: 100%; height: 100%; overflow: hidden; background: #141414; container-type: size; transition: background .3s; }
.ii-scr.lit { background: var(--paper); }
.ii-base { position: absolute; display: none; }
.ii-dev.laptop .ii-base { display: block; left: -6%; right: -6%; top: 100%; height: 12px; border-radius: 0 0 12px 12px; background: linear-gradient(#3a3a40, #121215); }
.ii-dev.tv .ii-base { display: block; left: 42%; right: 42%; top: 100%; height: 12px; border-radius: 0 0 5px 5px; background: linear-gradient(#1d1d21, #0b0b0d); }
.ii-lab { position: absolute; left: 50%; top: calc(100% + 26px); translate: -50% 0; font: 400 clamp(13px, .75vw, 18px) var(--mono); color: var(--ink-2); white-space: nowrap; }
.ii-dev.phone .ii-lab { top: calc(100% + 14px); }
.ii-page { position: absolute; left: 0; top: 0; }
.ii-scr > .ii-snap { transform-origin: 0 0; }

/* a small first screen, for a screen of another shape */
.ii-mini { position: absolute; inset: 0; padding: 4cqw 5cqw; color: var(--ink); }
.ii-mini .m-bar { display: flex; align-items: center; justify-content: space-between; height: 5cqw; }
.ii-mini .m-bar b { font: 700 3.6cqw/1 Logo, "Inter Display", sans-serif; letter-spacing: -.05em; }
.ii-mini .m-bar b i { display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: 50%; background: var(--live); }
.ii-mini .m-bar span { display: flex; gap: 1.6cqw; }
.ii-mini .m-bar span i { width: 5cqw; height: 1cqw; border-radius: 99px; background: rgba(11,11,12,.18); }
.ii-mini .m-bar span i:last-child { width: 7cqw; height: 3cqw; border-radius: 1cqw; background: var(--ink); }
.ii-mini .m-kick { width: 30cqw; height: 1.4cqw; margin-top: 9cqh; border-radius: 99px; background: rgba(11,11,12,.22); }
.ii-mini .m-line { margin-top: 2cqw; font: 7.2cqw/.92 var(--pix); letter-spacing: -.02em; white-space: nowrap; }
.ii-mini .m-line i { display: inline-block; width: .17em; height: .17em; margin-left: .04em; border-radius: 50%; background: var(--live); }
.ii-mini .m-lede { display: block; width: 34cqw; height: 1.5cqw; margin-top: 3.4cqw; border-radius: 99px; background: rgba(11,11,12,.2); }
.ii-mini .m-lede.s { width: 24cqw; margin-top: 1.4cqw; }
.ii-mini .m-cta { display: flex; gap: 2cqw; margin-top: 3cqw; }
.ii-mini .m-cta i { width: 11cqw; height: 4cqw; border-radius: 1.2cqw; background: var(--ink); }
.ii-mini .m-cta i + i { width: 13cqw; background: rgba(11,11,12,.12); }
.ii-mini .m-shot { position: absolute; right: 5cqw; top: 22cqh; width: 38cqw; height: 52cqh; border-radius: 1.4cqw; background: linear-gradient(135deg, #1c1c22, #3a3550); box-shadow: 0 2cqw 5cqw -2cqw rgba(0,0,0,.4); }
.ii-mini.tall { padding: 6cqw; }
.ii-mini.tall .m-bar { height: 9cqw; }
.ii-mini.tall .m-bar b { font-size: 7cqw; }
.ii-mini.tall .m-bar span i { width: 7cqw; height: 2cqw; }
.ii-mini.tall .m-bar span i:last-child { width: 14cqw; height: 6cqw; border-radius: 2cqw; }
.ii-mini.tall .m-kick { width: 60cqw; height: 2.6cqw; margin-top: 8cqh; }
.ii-mini.tall .m-line { font-size: 15cqw; margin-top: 3cqw; }
.ii-mini.tall .m-lede { width: 80cqw; height: 3cqw; margin-top: 6cqw; }
.ii-mini.tall .m-lede.s { width: 60cqw; margin-top: 2.4cqw; }
.ii-mini.tall .m-cta { position: absolute; left: 6cqw; bottom: 6cqw; gap: 3cqw; }
.ii-mini.tall .m-cta i { width: 26cqw; height: 9cqw; border-radius: 2.4cqw; }
.ii-mini.tall .m-cta i + i { width: 30cqw; }
.ii-mini.tall .m-shot { right: 10cqw; left: 10cqw; top: 46cqh; width: auto; height: 28cqh; }

[data-theme="dark"] .ii-box { box-shadow: 0 0 0 1px var(--rule), 0 30px 70px -36px rgba(0,0,0,.8); }
[data-theme="dark"] .ii-mini .m-bar span i, [data-theme="dark"] .ii-mini .m-kick, [data-theme="dark"] .ii-mini .m-lede { background: rgba(236,235,228,.2); }
[data-theme="dark"] .ii-mini .m-cta i + i { background: rgba(236,235,228,.14); }
[data-theme="dark"] .ii-dev { box-shadow: 0 0 0 1px rgba(236,235,228,.16), 0 40px 90px -30px rgba(0,0,0,.8); }
@media (max-width: 760px) {
  .ii-box { top: 42%; padding: 18px 14px 12px 18px; border-radius: 22px; }
  .ii-text { font-size: 19px; }
  .ii-said { font-size: 12.5px; padding: 8px 12px; }
  .ii-lab { top: calc(100% + 20px); font-size: 12px; }
}