/* oppdrop.org: coming soon.
   The stage (canvas) is drawn by WebGL; everything readable is real HTML on top.
   The Box stays fixed in the viewport; on phones the copy scrolls over it.
   From 960px the copy sits left and the Box stays on the right. */

:root {
  --ink: #0d0a10;
  --paper: #f6efe9;
  --muted: #b4a8a4;
  --faint: #7f7472;
  --coral: #ee5f64;
  --gold: #ffc46b;
  --line: rgba(246, 239, 233, 0.12);
  --line-hi: rgba(246, 239, 233, 0.26);
  --card: #19131b;
  --glide: cubic-bezier(0.2, 0.7, 0.2, 1);   /* fast start, long settle, no overshoot */
  --settle: cubic-bezier(0.33, 1, 0.68, 1);
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 20px;
  --mobile-stage-height: clamp(300px, 47svh, 550px);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;   /* the desktop footer anchors to the end of the page, not the viewport */
  margin: 0;
  min-height: 100svh;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

#gl {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: block;
  z-index: 0;
  touch-action: pan-y;
}

/* ---------- header ---------- */

.top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--paper);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.brand-art {
  position: relative;
  display: block;
  width: clamp(160px, 13vw, 190px);
  aspect-ratio: 2172 / 724;
  transition: transform 0.35s var(--glide), opacity 0.25s;
}

.brand-art::before,
.brand-art::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* The supplied wordmark is black; tint it for this dark page. */
.brand-art::before {
  background: var(--paper);
  -webkit-mask: url("brand-logo.png") center / contain no-repeat;
  mask: url("brand-logo.png") center / contain no-repeat;
}

/* Keep the cube's original pink on top of the tinted wordmark. */
.brand-art::after {
  background: url("brand-logo.png") center / contain no-repeat;
  clip-path: inset(0 0 0 87.4%);
}

@media (hover: hover) {
  .brand:hover .brand-art {
    transform: translateY(-2px);
  }
}

.brand:active .brand-art {
  transform: scale(0.96);
  opacity: 0.82;
  transition-duration: 0.08s;
}

/* ---------- layout ---------- */

.page {
  position: relative;
  z-index: 1;
  display: flow-root;
  min-height: 100svh;
}

.stage {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1;
  height: var(--mobile-stage-height);
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  margin: var(--mobile-stage-height) auto 0;
  padding: 32px var(--gutter) 34px;
  background: linear-gradient(to bottom, transparent, rgba(13, 10, 16, 0.88) 42px, rgba(13, 10, 16, 0.92) 170px);
  transition: transform 1.05s var(--glide), opacity 0.75s var(--glide);
}

.join-active .copy,
html.join-active .landed .foot.r {
  transform: translate3d(0, 100svh, 0);
  opacity: 0;
  pointer-events: none;
}

html.join-active .lit .top {
  transform: translate3d(0, 80svh, 0);
  opacity: 0;
  pointer-events: none;
}

.join-active .hint,
.join-active .whisper { opacity: 0 !important; }

.join-message {
  position: fixed;
  left: 50%;
  bottom: max(42px, env(safe-area-inset-bottom));
  z-index: 5;
  display: grid;
  gap: 8px;
  width: min(calc(100% - 40px), 540px);
  padding: 14px 18px;
  border: 0;
  background: transparent;
  color: var(--paper);
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 18px);
  transition: opacity 0.65s var(--glide), transform 0.8s var(--glide), visibility 0s 0.8s;
}

.join-message strong { font-size: clamp(24px, 4vw, 38px); line-height: 1.08; letter-spacing: -0.04em; }
.join-message span { color: var(--muted); font: 650 11px var(--font); letter-spacing: 0.14em; text-transform: uppercase; }
.join-message:hover span { color: var(--gold); }
.join-message:active { transform: translate(-50%, 2px) scale(0.98); }
.join-message:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.join-active .join-message {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 1.5s, 1.5s, 0s;
}

.join-active .stage { cursor: pointer; }

.foot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--gutter) max(20px, env(safe-area-inset-bottom));
  color: var(--faint);
  font-size: 13px;
  transition: transform 1.05s var(--glide), opacity 0.75s var(--glide);
}

@media (min-width: 960px) {
  :root {
    --gutter: clamp(40px, 6vw, 96px);
  }

  .page {
    padding: 0 var(--gutter);
  }

  .stage {
    inset: 0 0 auto auto;
    width: 54%;
    height: 100svh;
    min-height: 560px;
  }

  .copy {
    max-width: 520px;
    margin: 0;
    padding: 110px 0 96px;
    background: none;
  }

  .foot {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 22px;
    max-width: none;
    margin: 0;
    padding: 0;
  }
}

/* ---------- copy ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: var(--coral);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  animation: ping 2.4s var(--settle) infinite;
}

@keyframes ping {
  0% { box-shadow: 0 0 0 0 rgba(238, 95, 100, 0.55); }
  70%,
  100% { box-shadow: 0 0 0 11px rgba(238, 95, 100, 0); }
}

h1 {
  margin: 0;
  font-size: clamp(38px, 10.4vw, 58px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}

@media (min-width: 960px) {
  h1 {
    font-size: clamp(56px, 5.4vw, 86px);
  }
}

h1 .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.06em 0.02em 0.12em;
  margin: -0.06em -0.02em -0.12em;
}

h1 .w > span {
  display: inline-block;
}

h1 .glow {
  background: linear-gradient(100deg, var(--paper) 10%, #ffd59a 55%, var(--coral) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 18px 0 0;
  max-width: 40ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  font-variation-settings: "opsz" 14;
}

/* ---------- early access ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.signup {
  margin-top: 28px;
}

.signup h2 {
  margin: 0 0 12px;
  color: var(--paper);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.signup-row {
  display: flex;
  gap: 8px;
}

.signup-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 15px;
  border: 1px solid var(--line-hi);
  border-radius: 11px;
  outline: none;
  background: rgba(246, 239, 233, 0.055);
  color: var(--paper);
  font: 500 15px var(--font);
  transition: border-color 0.3s var(--glide), background 0.3s var(--glide), box-shadow 0.3s var(--glide);
}

.signup-row input::placeholder { color: var(--faint); }
.signup-row input:hover { border-color: rgba(246, 239, 233, 0.42); }
.signup-row input:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 196, 107, 0.16); }

.signup-row button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: var(--coral);
  color: var(--ink);
  font: 750 14px var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s var(--glide), background 0.3s var(--glide), box-shadow 0.3s var(--glide);
}

.signup-row button span:last-child { font-size: 20px; line-height: 1; transition: transform 0.3s var(--glide); }
.signup-row button:hover { transform: translateY(-2px); background: #ff767b; box-shadow: 0 10px 24px -10px var(--coral); }
.signup-row button:hover span:last-child { transform: translate(2px, -2px); }
.signup-row button:active { transform: scale(0.96); transition-duration: 0.08s; }
.signup-row button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.signup-row button:disabled { cursor: wait; opacity: 0.7; transform: none; }

.signup-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.signup-consent input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--coral);
}

.signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.signup-note {
  margin: 8px 0 0 25px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.4;
}

.signup-status {
  display: none;
  margin: 11px 0 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}

.signup.is-success .signup-status,
.signup.is-error .signup-status,
.signup-status:target { display: block; animation: signup-reveal 0.45s var(--glide) both; }
.signup.is-error .signup-status { color: var(--coral); }

@keyframes signup-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 390px) {
  .signup-row button { gap: 5px; padding: 0 12px; font-size: 13px; }
}

@media (min-width: 960px) {
  .lede {
    font-size: 17px;
  }
}

/* ---------- founders ---------- */

.founders {
  margin-top: 26px;
}

.founders h2 {
  margin: 0 0 12px;
  color: var(--paper);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.founders ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  transition: border-color 0.3s, background-color 0.3s, transform 0.5s var(--glide);
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--line-hi);
    background: rgba(28, 21, 32, 0.66);
    transform: translateX(4px);
  }

  .card:hover .avatar::after {
    transform: translateY(-3px) rotate(-8deg);
  }
}

/* A tiny Box: coral rounded square with a lid seam. */
.avatar {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding-top: 7px;
  border-radius: 13px;
  background: linear-gradient(170deg, #f5868a, #df4349);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 8px 18px -8px rgba(238, 95, 100, 0.8);
  color: rgba(64, 12, 16, 0.78);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.avatar::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(180deg, #f8999c, #ee6a6f);
  box-shadow: 0 2px 0 rgba(120, 20, 26, 0.25);
  transform-origin: 6% 100%;
  transition: transform 0.45s var(--glide);
}

.who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.who strong {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.who span {
  color: var(--muted);
  font-size: 13px;
}

.links {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(246, 239, 233, 0.045);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s var(--glide), background-color 0.25s, border-color 0.25s, box-shadow 0.35s;
}

.btn svg {
  flex: none;
  width: 18px;
  height: 18px;
  transition: transform 0.45s var(--glide);
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    border-color: rgba(238, 95, 100, 0.55);
    background: rgba(238, 95, 100, 0.16);
    box-shadow: 0 10px 26px -10px rgba(238, 95, 100, 0.8);
  }

  .btn:hover svg {
    transform: rotate(-10deg) scale(1.1);
  }
}

.btn:active {
  transform: scale(0.94);
  background: rgba(238, 95, 100, 0.22);
  transition-duration: 0.08s;
}

.btn:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .btn {
    width: 44px;
    padding: 0;
  }

  .btn .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- the stage's extras ---------- */

.hint {
  position: absolute;
  left: 50%;
  bottom: 3%;
  margin: 0;
  transform: translateX(-50%);
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--glide);
}

.hint-mouse { display: none; }

@media (hover: hover) and (pointer: fine) {
  .hint-touch { display: none; }
  .hint-mouse { display: inline; }
}

@media (min-width: 960px) {
  .hint { bottom: 9%; }
}

.js .landed .hint {
  opacity: 0.85;
  transition-delay: 2.2s;
}

.js .landed.poked .hint {
  opacity: 0;
  transition-delay: 0s;
}

.whisper {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  color: var(--paper);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 0 22px rgba(255, 196, 107, 0.8), 0 0 3px rgba(255, 196, 107, 0.6);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.whisper.show {
  animation: whisper 1.9s var(--glide) forwards;
}

@keyframes whisper {
  0% { opacity: 0; transform: translate(-50%, -25%) scale(0.86); filter: blur(6px); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
  70% { opacity: 1; transform: translate(-50%, -70%); }
  100% { opacity: 0; transform: translate(-50%, -100%); filter: blur(4px); }
}

/* ---------- entrances (only when JS runs; without it everything just shows) ---------- */

.js .top {
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition: opacity 0.9s var(--glide), transform 0.9s var(--glide);
}

.js .lit .top {
  opacity: 1;
  transform: none;
}

.js .r {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  filter: blur(8px);
  transition: opacity 0.8s var(--glide), transform 1.05s var(--glide), filter 0.8s var(--glide);
  transition-delay: calc(var(--d, 0) * 1ms);
}

.js .landed .r {
  opacity: 1;
  transform: none;
  filter: none;
}

.js h1 .w > span {
  transform: translate3d(0, 110%, 0) rotate(5deg);
  transform-origin: 0 100%;
  transition: transform 1.05s var(--glide);
  transition-delay: calc(var(--d, 0) * 1ms);
}

.js .landed h1 .w > span {
  transform: none;
}

/* The landing jolts the copy without moving the fixed Box. */
.copy.jolt {
  animation: jolt 0.55s var(--settle);
}

@keyframes jolt {
  0% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(0, 7px, 0); }
  26% { transform: translate3d(-2px, -3px, 0); }
  44% { transform: translate3d(1px, 2px, 0); }
  64% { transform: translate3d(0, -1px, 0); }
  100% { transform: none; }
}

/* ---------- no WebGL / no JS: a CSS Box that still wants out ---------- */

.fallback-box {
  display: none;
  position: absolute;
  left: 50%;
  top: 62%;
  width: min(56vw, 290px);
  aspect-ratio: 1 / 0.8;
  transform: translate(-50%, -50%);
  transition: top 1.05s var(--glide), left 1.05s var(--glide), width 1.05s var(--glide);
}

.join-active .fallback-box {
  left: 50vw;
  top: 50svh;
  width: min(64vw, 340px);
}

@media (min-width: 960px) {
  .join-active .fallback-box { left: 4vw; }
}

.join-active .fb-lid {
  animation: none;
  transform: rotate(-13deg) translateY(-14%);
  transition: transform 0.8s var(--glide);
}

@media (min-width: 960px) {
  .fallback-box { top: 55%; width: min(48vw, 250px); }
}

html:not(.js) .fallback-box,
.no-gl .fallback-box {
  display: block;
}

.no-gl #gl,
.no-gl .hint,
html:not(.js) .hint {
  display: none;
}

.no-gl .stage,
html:not(.js) .stage {
  background: radial-gradient(ellipse 60% 45% at 50% 72%, rgba(130, 110, 104, 0.22), transparent 70%);
}

.fallback-box::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -6%;
  height: 14%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  filter: blur(12px);
}

.fb-body {
  position: absolute;
  inset: 22% 4% 0;
  display: grid;
  place-items: center;
  border-radius: 14% / 18%;
  background: linear-gradient(180deg, #f07479, #d6454b);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16);
}

.fb-engraving {
  position: relative;
  display: block;
  width: 58%;
  aspect-ratio: 1;
}

.fb-engraving::before,
.fb-engraving::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url("box-mark.png") center / contain no-repeat;
  mask: url("box-mark.png") center / contain no-repeat;
}

.fb-engraving::before {
  background: rgba(255, 205, 195, 0.3);
  transform: translate(1px, 1px);
}

.fb-engraving::after {
  background: rgba(100, 22, 30, 0.24);
}

.fb-lid {
  position: absolute;
  inset: 7% 0 auto;
  z-index: 1;
  height: 18%;
  border-radius: 10% / 36%;
  background: linear-gradient(180deg, #f6898d, #e85a60);
  box-shadow: 0 6px 18px -4px rgba(255, 196, 107, 0.5);
  transform-origin: 6% 100%;
  animation: fbpush 3.2s var(--settle) infinite;
}

@keyframes fbpush {
  0%, 70%, 100% { transform: none; }
  77% { transform: rotate(-7deg) translateY(-8%); }
  84% { transform: none; }
  88% { transform: rotate(-3deg); }
  92% { transform: none; }
}

/* Still frames (share image): no transitions, no whisper, no hint. */
.still *,
.still *::before,
.still *::after {
  transition: none !important;
  animation: none !important;
}

.still .hint,
.still .whisper {
  display: none;
}

/* Share image (?still=og): headline and Box only. */
.og-url {
  display: none;
}

.og .lede,
.og .signup,
.og .founders,
.og .foot {
  display: none;
}

.og .copy {
  padding: 0;
}

.og h1 {
  font-size: 88px;
}

.og .og-url {
  display: block;
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .copy,
  .foot,
  .join-message,
  .fallback-box,
  .fb-lid { transition-duration: 0s; transition-delay: 0s; }

  .join-active .copy,
  html.join-active .landed .foot.r,
  html.join-active .lit .top { transform: none; opacity: 0; }

  .js .r,
  .js h1 .w > span,
  .js .top {
    transform: none;
    filter: none;
    transition: opacity 0.6s linear;
  }

  .eyebrow .dot,
  .fb-lid,
  .copy.jolt {
    animation: none;
  }

  .whisper.show {
    animation: whisper-calm 1.9s linear forwards;
  }

  .signup.is-success .signup-status,
  .signup.is-error .signup-status,
  .signup-status:target { animation: none; }

  @keyframes whisper-calm {
    0%, 100% { opacity: 0; }
    15%, 75% { opacity: 1; }
  }
}