/*!
 * Rise Intro — styles
 * A building drawn floor by floor as the page scrolls, then the call to invest.
 * Theme it from rise-intro.config.js; the --ri-* variables are the defaults.
 */
[data-rise-intro]:not(.ri) { display: block; min-height: 100vh; background: #14203A; }

.ri {
  --ri-bg: #14203A;
  --ri-bg2: #1B2A4A;
  --ri-line: #A8823C;
  --ri-line-soft: rgba(168, 130, 60, 0.28);
  --ri-glow: #F3E3B8;
  --ri-text: #EDE8DE;
  --ri-muted: rgba(237, 232, 222, 0.66);
  --ri-serif: "Cormorant Garamond", Georgia, serif;
  --ri-sans: "Inter", system-ui, sans-serif;
  --ri-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ri-scroll: 3;
  position: relative;
  display: block;
  height: calc((1 + var(--ri-scroll)) * 100vh);
  background: var(--ri-bg);
  color: var(--ri-text);
}
.ri * { box-sizing: border-box; }

.ri-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(4rem, 9vh, 6rem) clamp(1.25rem, 6vw, 5rem) clamp(3rem, 7vh, 5rem);
  background: radial-gradient(90% 80% at 70% 40%, var(--ri-bg2) 0%, var(--ri-bg) 70%);
}
/* blueprint grid */
.ri-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--ri-line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--ri-line-soft) 1px, transparent 1px);
  background-size: 48px 48px; opacity: .22;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent); mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent);
}

/* Text column */
.ri-copy { position: relative; z-index: 2; max-width: 34rem; min-height: 22rem; display: grid; }
.ri-copy > * { grid-area: 1 / 1; align-self: center; }
.ri-kicker { display: block; font: 500 0.7rem/1 var(--ri-sans); letter-spacing: .26em; text-transform: uppercase; color: var(--ri-line); margin: 0 0 1.4rem; }
.ri-head { transition: opacity .7s ease, transform .7s ease; }
.ri-line {
  font: 500 clamp(2.1rem, 4.6vw, 3.9rem)/1.1 var(--ri-serif); color: var(--ri-text); margin: 0 0 .9rem;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.ri-line + .ri-line { color: var(--ri-muted); font-style: italic; font-weight: 400; }
.ri-line.is-off { opacity: 0; transform: translateY(18px); }
.ri.is-final .ri-head { opacity: 0; transform: translateY(-24px); pointer-events: none; }

.ri-final { opacity: 0; transform: translateY(24px); transition: opacity .8s ease .15s, transform .8s cubic-bezier(.2,.7,.2,1) .15s; pointer-events: none; }
.ri.is-final .ri-final { opacity: 1; transform: none; pointer-events: auto; }
.ri-final h2 { font: 500 clamp(2.4rem, 5.4vw, 4.4rem)/1.05 var(--ri-serif); color: var(--ri-text); margin: 0 0 1.1rem; }
.ri-final p { font: 300 1.05rem/1.7 var(--ri-sans); color: var(--ri-muted); margin: 0 0 2rem; max-width: 30rem; }
.ri-rule { display: block; width: 72px; height: 1px; background: var(--ri-line); margin: 0 0 1.6rem; transform-origin: left; transform: scaleX(0); transition: transform 1s ease .3s; }
.ri.is-final .ri-rule { transform: scaleX(1); }
.ri-actions { display: flex; gap: .9rem; flex-wrap: wrap; }
.ri-btn {
  display: inline-block; padding: .85rem 1.7rem; font: 500 .72rem var(--ri-sans); letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--ri-line); background: var(--ri-line); color: var(--ri-bg); transition: background .2s, color .2s;
}
.ri-btn:hover { background: transparent; color: var(--ri-text); }
.ri-btn.alt { background: transparent; color: var(--ri-text); border-color: rgba(237, 232, 222, .5); }
.ri-btn.alt:hover { border-color: var(--ri-line); }

/* Building */
.ri-art { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.ri-svg { width: 100%; height: 100%; max-height: 82vh; overflow: visible; }
.ri-svg .s { fill: none; stroke: var(--ri-line); stroke-width: 1.3; stroke-linecap: square; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.ri-svg .s.thin { stroke-width: .8; }
.ri-svg .nb { stroke: var(--ri-line-soft); }
.ri-svg .ground { stroke: var(--ri-line); stroke-width: 1; }
.ri-svg .glow { fill: var(--ri-glow); opacity: 0; }
.ri-svg .lvl { font: 400 9px var(--ri-mono); letter-spacing: .1em; fill: var(--ri-muted); opacity: 0; transition: opacity .4s; }
.ri-svg .crane { stroke: var(--ri-glow); stroke-width: 1.4; filter: drop-shadow(0 0 6px var(--ri-glow)); }

/* Viewfinder chrome */
.ri-chrome { position: absolute; inset: clamp(.9rem, 2.2vw, 1.6rem); pointer-events: none; z-index: 3; }
.ri-br { position: absolute; width: 18px; height: 18px; border: 0 solid var(--ri-line); opacity: .75; }
.ri-br.tl { top: 0; left: 0; border-width: 1px 0 0 1px; } .ri-br.tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.ri-br.bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; } .ri-br.brr { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.ri-hud { position: absolute; top: 4px; font: 400 10px/1.7 var(--ri-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ri-muted); }
.ri-hud.l { left: 30px; } .ri-hud.r { right: 30px; text-align: right; }
.ri-hud b { color: var(--ri-text); font-weight: 400; }
.ri-rail { position: absolute; right: 0; top: 30%; bottom: 30%; width: 1px; background: var(--ri-line-soft); }
.ri-rail i { position: absolute; left: -1px; width: 3px; height: 26px; background: var(--ri-line); top: 0; }
.ri-hint { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font: 400 10px var(--ri-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--ri-muted); transition: opacity .4s; }
.ri-hint::after { content: ""; display: block; width: 1px; height: 26px; margin: 10px auto 0; background: linear-gradient(var(--ri-line), transparent); animation: ri-drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes ri-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 760px) {
  .ri-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 3.2rem 1.25rem 3.4rem; gap: .5rem; align-items: stretch; }
  .ri-art { grid-row: 1; }
  .ri-svg { max-height: 46vh; }
  .ri-copy { grid-row: 2; min-height: 15.5rem; }
  .ri-line { font-size: 1.9rem; }
  .ri-final h2 { font-size: 2.2rem; margin-bottom: .7rem; }
  .ri-final p { font-size: .95rem; margin-bottom: 1.3rem; }
  .ri-kicker { margin-bottom: .9rem; }
  .ri-hud.r { display: none; }
  .ri-hint { display: none; }
}

/* Reduced motion: no pin, building drawn, everything shown. */
.ri.is-static { height: auto; }
.ri.is-static .ri-stage { position: relative; height: auto; min-height: 100svh; }
.ri.is-static .ri-svg .s { stroke-dashoffset: 0; }
.ri.is-static .ri-svg .glow { opacity: .85; }
.ri.is-static .ri-svg .lvl { opacity: 1; }
.ri.is-static .ri-svg .crane, .ri.is-static .ri-hint, .ri.is-static .ri-rail { display: none; }
.ri.is-static .ri-head { display: none; }
