/* Homalabs Initiatives: the ripple. One act dropped in, and what spreads
   from it. Shares pod.css's scene parts (hp-s, hp-c, hp-h, hp-pin). */

/* ------------------------------------------------------------ 01 the pond */
.rip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.in-pond { color: var(--paper); }
.in-drop { position: absolute; z-index: 2; left: 64%; top: 42%; translate: -50% -50%; width: clamp(64px, 6vw, 104px); pointer-events: none;
  animation: bob 4s var(--ease) infinite; }
.in-drop img { width: 100%; height: auto; display: block; border-radius: 22%; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
@keyframes bob { 50% { translate: -50% calc(-50% - 8px); } }
.in-c { pointer-events: none; } .in-c a { pointer-events: auto; }
.in-h1 { font-size: calc(var(--h) * .9); line-height: .94; }
.in-first { pointer-events: none; }
.in-simple { margin-top: .3em !important; font-weight: 700; font-size: clamp(22px, 2.1vw, 34px); line-height: 1.1; letter-spacing: -0.02em; }

/* ---------------------------------------------------- 02 the impact ripple */
.in-impact .s-pin { color: var(--paper); }
.ir { position: absolute; z-index: 2; right: 5vw; top: 50%; width: min(78vh, 46vw); aspect-ratio: 1; translate: 0 -50%; }
.ir svg { width: 100%; height: 100%; overflow: visible; }
.ir-c { fill: none; stroke: var(--paper); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k, 1)); opacity: .55; }
.ir-g1 .ir-c { stroke: var(--coral); opacity: 1; stroke-width: 2.2; }
.ir-t { fill: var(--paper); font-family: var(--f); font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
  opacity: var(--k, 1); }
.ir-g1 .ir-t { fill: var(--coral); font-size: 16px; }
.ir-core { position: absolute; left: 50%; top: 50%; width: 15%; translate: -50% -50%; scale: var(--drop, 1); transition: scale .4s var(--snap); }
.ir-core img { width: 100%; display: block; border-radius: 22%; box-shadow: 0 0 0 10px rgba(251,139,115,.18); }
.ir-wave { position: absolute; left: 50%; top: 50%; width: 28%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 1.5px solid rgba(239,238,232,.5); animation: wave 3.6s var(--ease) infinite; pointer-events: none; }
.ir-wave + .ir-wave { animation-delay: 1.8s; }
@keyframes wave { from { scale: .5; opacity: .9; } to { scale: 3.4; opacity: 0; } }
.ir-stats { position: absolute; z-index: 3; left: var(--m); bottom: 7vh; margin: 0; padding: 0; list-style: none; display: flex; gap: clamp(20px, 3vw, 48px);
  font-weight: 600; font-size: 15px; }
.ir-stats li { opacity: .35; transition: opacity .5s var(--ease); }
.ir-stats li.is-on { opacity: 1; }
.ir-stats b { display: block; font-weight: 800; font-variation-settings: "wdth" 118; font-size: clamp(34px, 3.6vw, 58px); line-height: 1; letter-spacing: -0.04em; }

/* ------------------------------------------------------ 03 the application */
.in-app .s-pin { color: var(--ink); }
.in-form { left: 72%; top: 52%; height: 76vh; --hr: -2deg; }
.af { position: absolute; inset: 0; background: #fff; padding: 26cqw 8cqw 10cqw; display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 4cqw;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: #111; }
.af-top { margin: 0; display: flex; align-items: center; gap: 3cqw; font-weight: 600; font-size: 4.2cqw; }
.af-top img { width: 9cqw; border-radius: 22%; }
.af-step { margin: 0; font-weight: 600; font-size: 3.6cqw; color: #8A8A8E; }
.af-qs { position: relative; }
.af-q { position: absolute; inset: 0 0 auto; margin: 0; font-weight: 800; font-family: var(--f); font-variation-settings: "wdth" 108;
  font-size: 10cqw; line-height: 1.02; letter-spacing: -0.03em; opacity: 0; translate: 0 6cqw; transition: opacity .45s var(--ease), translate .5s var(--ease); }
.af-q.is-on { opacity: 1; translate: 0 0; }
.af-q.is-past { opacity: 0; translate: 0 -6cqw; }
.af-field { margin: 0; min-height: 30cqw; border-radius: 4cqw; background: #F2F2F7; padding: 4cqw; }
.af-caret { display: inline-block; width: .6cqw; height: 6cqw; background: #0A84FF; animation: caret 1s steps(1) infinite; }
.af-next { margin: 0; justify-self: end; padding: 3cqw 7cqw; border-radius: 99px; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 4.2cqw; }
.in-why { opacity: 0; translate: 0 16px; transition: opacity .6s var(--ease), translate .6s var(--ease); margin-top: 1.4em !important; font-weight: 600; }
.in-why.is-on { opacity: 1; translate: 0 0; }

/* ----------------------------------------------------------- 04 the people */
.in-people { min-height: 0; padding: clamp(110px, 15vh, 170px) var(--m); }
.pp { display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); gap: clamp(28px, 4vw, 70px); margin-top: clamp(30px, 5vh, 56px); perspective: 1200px; align-items: start; }
/* a sticky note: their own words, in their colour, taped to the page. The whole note is the link to the post. */
.note { --n: var(--indigo); --t: -2deg; position: relative; display: grid; grid-template-rows: 1fr auto auto; gap: 18px; min-height: clamp(300px, 26vw, 420px); padding: clamp(28px, 2.8vw, 44px);
  background: var(--n); color: var(--ink); text-decoration: none; border-radius: 4px; rotate: var(--t);
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 24px 50px rgba(20,20,15,.18), 0 2px 6px rgba(20,20,15,.1);
  transform-style: preserve-3d; transition: rotate .55s var(--ease), translate .55s var(--ease), box-shadow .55s var(--ease), transform .5s var(--ease); }
.note::after { content: ""; position: absolute; right: 0; bottom: 0; width: 46px; height: 46px; border-radius: 0 0 4px 0;
  background: linear-gradient(135deg, transparent 50%, rgba(20,20,15,.14) 50%, rgba(20,20,15,.05) 100%); pointer-events: none; }
.note[style*="--indigo"] { color: var(--paper); }
.note-tape { position: absolute; left: 50%; top: -14px; width: 118px; height: 30px; translate: -50% 0; rotate: -2deg;
  background: rgba(239,238,232,.55); backdrop-filter: blur(2px); box-shadow: 0 1px 2px rgba(20,20,15,.12); }
.note-q { quotes: "\201C" "\201D"; display: block; font-weight: 600; font-size: clamp(18px, 1.5vw, 24px); line-height: 1.3; letter-spacing: -0.012em; }
.note-q::before { content: open-quote; } .note-q::after { content: close-quote; }
.note-h { display: block; font-weight: 700; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.02; letter-spacing: -0.03em; }
.note-who { display: grid; gap: 2px; }
.note-who strong { font-weight: 700; font-size: clamp(16px, 1.2vw, 19px); letter-spacing: -0.01em; }
.note-who span { font-size: var(--l); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.note-go { display: inline-flex; align-items: center; gap: 8px; justify-self: start; font-size: var(--l); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1.5px solid currentColor; padding-bottom: 3px; }
.note-go i { font-style: normal; transition: translate .35s var(--snap); }
.note:hover, .note:focus-visible { rotate: 0deg; translate: 0 -6px; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 34px 70px rgba(20,20,15,.22), 0 2px 6px rgba(20,20,15,.1); outline: none; }
.note:hover .note-go i, .note:focus-visible .note-go i { translate: 6px 0; }
.note:focus-visible { outline: 3px solid var(--indigo-deep); outline-offset: 6px; }
.note-idea { --n: var(--indigo); color: var(--paper); gap: 22px; }
.note-idea .note-who span { text-transform: none; letter-spacing: 0; font-size: var(--b); font-weight: 500; opacity: .85; }

/* ---------------------------------------------------------------- the close */
.in-close-g { display: grid; grid-template-columns: 1.1fr minmax(0, 440px); gap: clamp(40px, 7vw, 120px); align-items: center; justify-content: space-between; perspective: 1200px; }
.in-close-copy p { margin-top: .8em; max-width: 44ch; }
.in-close-copy .cta { margin-top: clamp(20px, 3.4vh, 32px); }
.in-close-g .note { margin: 20px 0; }
@media (max-width: 860px) {
  .pp { grid-template-columns: 1fr; gap: 34px; }
  .note { --t: -1.6deg; min-height: 0; padding: 26px 22px 24px; gap: 16px; }
  .pp .note:nth-child(2) { --t: 1.4deg; }
  .in-close-g { grid-template-columns: 1fr; gap: 44px; }
  .in-close-g .note { margin: 10px 4px 0; }
}

/* ------------------------------------------------------------ 05 why a laptop */
.in-why-s .s-pin { color: var(--paper); }
.in-mac { right: 7vw; width: 44vw; }
.in-mac .mac-lid { transform-origin: 50% 100%; transform: perspective(1600px) rotateX(calc((1 - var(--lid, 1)) * 84deg)); }
.need { position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 0%, #2a2c6e, #08080a 70%); }
.need p { position: absolute; left: 8%; right: 8%; top: 50%; margin: 0; translate: 0 -40%; font-weight: 800; font-variation-settings: "wdth" 112;
  font-size: clamp(22px, 3.1vw, 52px); line-height: 1.02; letter-spacing: -0.03em; color: var(--paper); opacity: 0; transition: opacity .45s var(--ease), translate .5s var(--ease); }
.need p.is-on { opacity: 1; translate: 0 -50%; }
.in-end { margin-top: 1.6em; opacity: 0; translate: 0 16px; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.in-end p { margin-top: .4em !important; }
.in-end.is-on { opacity: 1; translate: 0 0; }

/* ------------------------------------------------------------ 06 the count */
.in-big { position: absolute; z-index: 1; right: 3vw; top: 6vh; margin: 0; font-weight: 800; font-variation-settings: "wdth" 125;
  font-size: 34vw; line-height: .8; letter-spacing: -0.06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.in-big sup { font-size: .4em; vertical-align: .9em; }
.in-small p { font-size: clamp(18px, 1.5vw, 24px); }
.in-small b { font-weight: 800; }

/* ------------------------------------------------------------ 07 what's next */
.in-next .hp-c-tl { top: 16vh; }
.in-more { font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); }

@media (prefers-reduced-motion: reduce) {
  .in-drop, .ir-wave { animation: none; }
  .af-q, .need p, .in-end, .in-why { transition: none; }
}

@media (max-width: 1180px) {
  .ir { width: min(60vh, 46vw); }
  .in-mac { width: 46vw; right: 4vw; }
}
@media (max-width: 860px) {
  .in-pond { padding-top: 56vh; }
  .in-drop { left: 50%; top: 26%; }
  .ir { right: auto; left: 50%; top: 66%; width: 74vw; translate: -50% -50%; }
  .ir-stats { display: none; }
  .in-impact .hp-c p:not(:nth-of-type(1)) { display: none; }
  .in-form { left: 50%; top: 72%; height: 40vh; }
  .pp { grid-template-columns: 1fr; }
  .in-mac { left: 8vw; right: 8vw; width: auto; top: 66%; }
  .in-count { padding-top: 46vh; }
  .in-big { font-size: 50vw; top: 10vh; }
  .in-small { margin-top: 20px; }
}
@media (max-width: 860px) {
  .in-impact .hp-c-tl, .in-app .hp-c-tl, .in-why-s .hp-c-tl { position: absolute; left: var(--m); right: var(--m); top: 11vh; }
}
.in-qmark { position: absolute; z-index: 1; left: 2vw; bottom: -12vh; margin: 0; font-weight: 800; font-variation-settings: "wdth" 125;
  font-size: 60vh; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(20,20,15,.35); }
@media (max-width: 860px) { .in-qmark { display: none; } }
.in-people { position: relative; overflow: clip; }
.in-two { position: absolute; z-index: 0; right: -2vw; bottom: -14vh; margin: 0; font-weight: 800; font-variation-settings: "wdth" 125;
  font-size: 80vh; line-height: .8; color: transparent; -webkit-text-stroke: 2px rgba(20,20,15,.22); pointer-events: none; }
.pp { position: relative; z-index: 1; }
@media (max-width: 860px) { .in-two { font-size: 60vw; bottom: auto; top: 4vh; } }