/* woa-about.css — zero-gravity floating-card About page */

.ab-page{padding-top:0;background:var(--bg);overflow:hidden}

/* ── Constellation stage — fills the whole page below the nav ─── */
.ab-stage{
  position:relative;
  /* big void — always at least 1080px so all 9 cards have room to drift */
  min-height:max(1080px, calc(100vh - 64px));
  margin-top:64px;
  border:0;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(11,9,7,0) 0%, rgba(11,9,7,0.6) 70%, var(--bg) 100%),
    var(--bg);
  overflow:hidden;
  cursor:default;
}
.ab-stage-inner{
  position:relative;
  width:100%;height:100%;
  min-height:max(1080px, calc(100vh - 64px));
}

/* tiny floating dust */
.ab-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(235,227,210,0.4) 0.5px, transparent 1px),
    radial-gradient(circle at 82% 76%, rgba(235,227,210,0.4) 0.5px, transparent 1px),
    radial-gradient(circle at 55% 18%, rgba(197,48,45,0.6) 0.5px, transparent 1px),
    radial-gradient(circle at 30% 80%, rgba(235,227,210,0.4) 0.5px, transparent 1px),
    radial-gradient(circle at 90% 30%, rgba(235,227,210,0.4) 0.5px, transparent 1px);
}

.ab-hint{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10.5px;color:var(--fg-mute);
  letter-spacing:0.22em;text-transform:uppercase;
  padding:8px 14px;border:1px solid var(--line);
  background:rgba(11,9,7,0.4);
  backdrop-filter:blur(8px);
  transition:opacity .4s ease;
  pointer-events:none;z-index:5;
}
.ab-hint.hidden{opacity:0}

/* dimmer when a card is active */
.ab-stage.has-active::before{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:rgba(11,9,7,0.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:ab-dim-in .35s ease forwards;
}
@keyframes ab-dim-in{
  from{opacity:0}
  to{opacity:1}
}

/* ── Floating card — base ────────────────────────────────────────── */
.fc{
  position:absolute;
  appearance:none;background:transparent;border:0;padding:0;
  cursor:default;
  /* base size; per-kind overrides below */
  width:200px;height:240px;
  perspective:1000px;
  z-index:1;
  /* idle float animation, applied via vars set inline */
  animation: ab-float var(--dur, 22s) ease-in-out var(--delay, 0s) infinite;
  transition:filter .3s ease;
}
.fc:hover{filter:brightness(1.1)}

@keyframes ab-float{
  0%   { transform: translate(0, 0) rotate(var(--rot, 0deg)) }
  20%  { transform: translate(14px, -20px) rotate(calc(var(--rot, 0deg) + 2deg)) }
  40%  { transform: translate(-10px, -30px) rotate(calc(var(--rot, 0deg) - 1deg)) }
  60%  { transform: translate(-18px, 12px) rotate(calc(var(--rot, 0deg) + 3deg)) }
  80%  { transform: translate(10px, 18px) rotate(calc(var(--rot, 0deg) - 2deg)) }
  100% { transform: translate(0, 0) rotate(var(--rot, 0deg)) }
}
@media (prefers-reduced-motion: reduce){
  .fc{animation:none}
}

.fc-inner{
  display:block;
  position:relative;width:100%;height:100%;
  transition:transform .6s cubic-bezier(.5, .05, .1, 1);
}
.fc-face{
  display:flex;
  position:absolute;inset:0;
  overflow:hidden;
  align-items:center;justify-content:center;
  background:var(--surface);
  border:1px solid var(--line-strong);
  box-shadow:0 14px 32px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3);
  transition:opacity .45s ease;
}
/* Crossfade flip — simpler & bulletproof vs CSS 3D backface */
.fc-front{z-index:1}
.fc-back{
  z-index:2;
  opacity:0;
  pointer-events:none;
  transform:rotate(2deg);
}
.fc.is-active .fc-front{opacity:0 !important}
.fc.is-active .fc-back{opacity:1 !important;transform:rotate(0deg);pointer-events:auto;z-index:3}
.fc-back{
  padding:24px;
  flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;
  background:var(--surface);
  gap:10px;
  opacity:0;
  pointer-events:none;
  transform:rotate(2deg);
}
.fc-back-eyebrow{
  font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:var(--crimson-text);
}
.fc-back-title{
  font-family:var(--display);font-size:24px;font-weight:300;letter-spacing:-0.005em;
  color:var(--fg);line-height:1.1;
}
.fc-back-body{
  font-size:13.5px;line-height:1.6;color:var(--fg-dim);
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
}
.fc-back-hint{
  margin-top:auto;font-family:var(--mono);font-size:9.5px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--fg-mute);
}

/* ── Card kinds ──────────────────────────────────────────────────── */
.fc-photo .fc-front img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.fc-photo .fc-front::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,9,7,0) 50%, rgba(11,9,7,0.85) 100%);
}
.fc-label{
  position:absolute;left:14px;bottom:12px;z-index:1;
  font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--fg);
}

.fc-text{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:20px;
}
.fc-lg{
  font-family:var(--display);font-weight:300;letter-spacing:-0.02em;
  font-size:64px;color:var(--fg);line-height:0.95;
}
.fc-id-events .fc-lg, .fc-id-origin .fc-lg{color:var(--fg)}
.fc-sm{
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--crimson-text);
}

.fc-word .fc-front{
  background:var(--crimson);
  flex-direction:column;gap:14px;
}
.fc-word .diamond{
  display:inline-block;width:12px;height:12px;background:var(--fg);transform:rotate(45deg);
}
.fc-word .fc-w{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:30px;color:var(--fg);letter-spacing:-0.005em;line-height:1.05;text-align:center;
  padding:0 16px;
}

.fc-art .fc-front{
  flex-direction:column;gap:14px;color:var(--crimson-text);padding:18px 14px;
  background:var(--bg);
}
.fc-art svg{width:80%;height:auto;max-width:160px}
.fc-art .fc-label{position:static;color:var(--fg-mute);font-size:9.5px}

/* per-card size tuning so the constellation feels varied, not gridy */
.fc-id-fabio,
.fc-id-hector,
.fc-id-founders,
.fc-id-drink{width:210px;height:260px}
.fc-id-nyc,
.fc-id-miami{width:230px;height:160px}
.fc-id-origin,
.fc-id-events{width:180px;height:180px}
.fc-id-cart{width:230px;height:200px}

/* ── Active state — flies to center, flips, expands ─────────────── */
.fc.is-active{
  /* override position to absolute center */
  left:50%; top:50%;
  width:min(420px, 84vw); height:min(520px, 72vh);
  z-index:10;
  animation:none;
  transform:translate(-50%, -50%) scale(1);
}
.fc.is-active .fc-back{
  padding:36px;
  gap:14px;
}
.fc.is-active .fc-back-eyebrow{font-size:11px}
.fc.is-active .fc-back-title{
  font-size:clamp(32px, 4.5vw, 48px);max-width:14ch;
}
.fc.is-active .fc-back-body{
  font-size:15.5px;line-height:1.7;-webkit-line-clamp:unset;overflow:visible;
}
.fc.is-active .fc-back-hint{font-size:10.5px;margin-top:24px;color:var(--crimson-text)}

/* ── About page footer (very small) ──────────────────────────────── */
/* (removed) */

/* ─────────────────────────────────────────────────────────────────
   Mobile pass — keep cards smaller and tighter, full touch interaction
   ───────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .ab-stage,
  .ab-stage-inner{min-height:max(1180px, calc(100vh - 56px))}

  /* shrink all cards on mobile */
  .fc{width:140px;height:170px}
  .fc-id-fabio,
  .fc-id-hector,
  .fc-id-founders,
  .fc-id-drink{width:140px;height:175px}
  .fc-id-nyc,
  .fc-id-miami{width:160px;height:110px}
  .fc-id-origin,
  .fc-id-events{width:130px;height:130px}
  .fc-id-cart{width:170px;height:140px}

  .fc-lg{font-size:42px}
  .fc-word .fc-w{font-size:20px}
  .fc-label{font-size:9px;left:10px;bottom:10px}

  .fc.is-active{
    width:min(360px, 92vw); height:min(520px, 78vh);
  }
  .fc.is-active .fc-back{padding:28px}
  .fc.is-active .fc-back-body{font-size:14.5px}
}

/* very small screens — even tighter spacing */
@media (max-width:480px){
  .ab-stage,
  .ab-stage-inner{min-height:max(1120px, calc(100vh - 52px))}
  .fc{width:120px;height:150px}
  .fc-id-fabio,
  .fc-id-hector,
  .fc-id-founders,
  .fc-id-drink{width:120px;height:150px}
  .fc-id-nyc,
  .fc-id-miami{width:140px;height:95px}
  .fc-id-origin,
  .fc-id-events{width:110px;height:110px}
  .fc-id-cart{width:150px;height:120px}
  .fc-lg{font-size:34px}
}