/* The Aether set piece — see assets/js/aether-stage.js for the scroll choreography. */

av-aether-stage {
  position: absolute;
  inset: 0;
  display: block;
  background: #000;
  font-family: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.ae-wrap {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: min(1440px, 100% - clamp(48px, 15.556vw, 224px));
}

.ae-stage {
  position: absolute;
  left: 50%; top: 50%;
  width: min(1100px, 100%, 122vh);
  aspect-ratio: 1100 / 600;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.ae-frame { position: absolute; inset: 0; z-index: 6; pointer-events: none; width: 100%; height: 100%; }

.ae-surface {
  position: relative; z-index: 5; height: 100%; box-sizing: border-box;
  border-radius: 24px; overflow: hidden; background: #000;
  display: flex; flex-direction: column;
  container-type: inline-size;
}

.ae-chrome {
  position: relative; flex: 0 0 auto; background: #0D0D0D;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(12px, 2.4cqi, 40px);
  padding: clamp(14px, 2cqi, 22px) clamp(16px, 2.9cqi, 32px);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.ae-dots { display: flex; gap: clamp(7px, .9cqi, 10px); flex: 0 0 auto; opacity: .35; }
.ae-dots span { width: clamp(9px, 1.1cqi, 12px); height: clamp(9px, 1.1cqi, 12px); flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); }
.ae-dots span:nth-child(2) { border-color: rgba(255,255,255,.38); }
.ae-dots span:nth-child(3) { border-color: rgba(255,255,255,.24); }

.ae-tabs { display: flex; gap: 4px; padding: clamp(4px, .6cqi, 6px); border-radius: 10px; background: rgba(255,255,255,.05); flex: 0 1 auto; min-width: 0; opacity: .2; }
.ae-tab {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(11px, 1.25cqi, 14px); letter-spacing: .02em; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: clamp(10px, 1.1cqi, 12px) clamp(12px, 2.2cqi, 24px);
  border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: rgba(255,255,255,.55);
  transition: background .16s cubic-bezier(.2,0,.2,1), color .16s cubic-bezier(.2,0,.2,1);
}
.ae-tab--on { background: #FFFFFF; color: #000000; }
.ae-agent { margin-left: auto; font-family: "Geist Mono", ui-monospace, monospace; font-size: clamp(11px, 1.25cqi, 14px); white-space: nowrap; color: rgba(255,255,255,.3); opacity: 0; }

.ae-body {
  position: relative; flex: 1; min-height: 0;
  padding: clamp(10px, 3.4cqi, 44px) clamp(12px, 3.2cqi, 40px);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(9.5px, 1.46cqi, 16px);
  line-height: clamp(16px, 2.05em, 33px);
  color: rgba(255,255,255,.72);
  overflow: hidden;
}
.ae-line { white-space: pre-wrap; overflow-wrap: break-word; opacity: 0; clip-path: inset(0 100% 0 0); }
.ae-gap { height: clamp(4px, 2.6cqi, 32px); }
.ae-caret { display: inline-block; width: .55em; height: 1.05em; background: #FFFFFF; margin-left: .5em; vertical-align: -.18em; animation: aeBlink 1s steps(1) infinite; }
.ae-dim { color: rgba(255,255,255,.3); }
.ae-white { color: #FFFFFF; }
.ae-comment { color: rgba(255,255,255,.34); }
.ae-kw { color: #FFFFFF; font-weight: 500; }
.ae-str { color: rgba(255,255,255,.5); }
.ae-pill { display: inline-block; padding: 0 8px; border: 1px solid rgba(255,255,255,.45); border-radius: 4px; font-size: .82em; line-height: 1.7; color: #FFFFFF; vertical-align: 2px; }
@keyframes aeBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.ae-title { position: absolute; left: 0; right: 0; top: 50%; z-index: 9; transform: translateY(-50%); pointer-events: none; }
.ae-title h2 { font-size: clamp(34px, 7.6vw, 168px); line-height: .95; letter-spacing: -.05em; white-space: nowrap; text-align: center; color: #FFFFFF; }
.ae-title p { margin: clamp(14px, 1.8vw, 34px) 0 0; font-family: "Syne", sans-serif; font-weight: 700; font-size: clamp(14px, 1.55vw, 31px); line-height: 1.2; text-align: center; color: #FFFFFF; }

.ae-copy { position: absolute; left: 0; top: 50%; z-index: 8; width: min(430px, 34vw); transform: translateY(-50%); opacity: 0; will-change: transform, opacity; }
.ae-copy h3 { font-size: clamp(28px, 2.85vw, 41px); line-height: 1.1; letter-spacing: -.05em; color: #FFFFFF; }
.ae-copy p { margin: 28px 0 0; font-size: 16px; line-height: 1.8; color: #A3A3A3; text-wrap: pretty; }