/* ==========================================================================
   Solvyn — Intro / Curtain content
   Shared between intro.html (standalone Task 2 artifact) and the curtain
   overlay embedded in home.html (Task 3). Everything here is traced to
   Figma node 343:12327 — see css/components.css header for that convention.
   ========================================================================== */

.intro-stage {
  position: relative;
  width: 1440px;
  height: 1024px;
  flex-shrink: 0;
  background: var(--bg-intro);
  transform-origin: center center;
}

.intro-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 66px;
  width: 21.1627px;
  height: 21.0984px;
}
.intro-logo img { width: 100%; height: 100%; display: block; }

.intro-hero {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 359px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.intro-hero__wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  font-size: var(--text-200);
  color: var(--white);
  letter-spacing: -14px;
  width: 744px;
}
.intro-hero__tagline {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: 28px;
  font-size: 20px;
  color: var(--violet-200);
  width: 520px;
  text-wrap: balance;
}

.intro-services {
  position: absolute;
  left: 70px;
  top: 828px;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intro-services p {
  font-family: var(--font-label);
  font-weight: var(--weight-regular);
  font-size: 18px;
  line-height: 1.4;
  color: var(--violet-200);
  font-variation-settings: "opsz" 14;
}

.intro-email {
  position: absolute;
  left: calc(80% + 60px);
  top: 828px; /* top-aligned with the first services line */
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.intro-email:hover .intro-email__label { color: var(--white); }
.intro-email__icon { width: 20px; height: 20px; flex-shrink: 0; }
.intro-email__label {
  font-family: var(--font-label);
  font-weight: var(--weight-regular);
  font-size: 16px;
  line-height: 1.4;
  color: var(--violet-200);
  text-align: right;
  width: auto;
  white-space: nowrap;
  font-variation-settings: "opsz" 14;
}

/* Desktop: these wrappers don't exist in Figma's own layer tree (343:12327
   has 4 flat siblings, no grouping) — display:contents keeps them
   invisible to layout so .intro-logo/.intro-hero/.intro-services/
   .intro-email stay direct absolute-positioning children of .intro-stage,
   completely unchanged from before. They only become real flex boxes
   below, for the mobile rebuild. */
.intro-top-group, .intro-bottom-group { display: contents; }

/* ==========================================================================
   Mobile Intro (Figma node 1068-3653) — a genuinely different layout, not
   a shrunk copy of the desktop canvas. The bug this replaces: both
   intro.html's fitStage() and home.html's curtain layoutCurtain() were
   uniformly scaling the fixed 1440x1024 desktop canvas down to fit any
   viewport (Math.min(vw/1440, vh/1024)) — on a narrow phone the width
   ratio dominates, shrinking the whole design to a tiny centered block
   with huge dead margins top/bottom. This is a real flex-column layout
   sized to the actual viewport instead.
   ========================================================================== */
@media (max-width: 640px) {
  .intro-stage {
    width: 100%;
    height: 100svh; /* JS sets the exact px height; svh = the visible area with the browser toolbar shown. Not dvh — home.html's curtain JS positions the two
      clipped halves using window.innerHeight; dvh can differ by the
      mobile browser chrome's height and reopen a seam between them. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 205.902px;
    padding: 73px 23px 32px 20px;
    box-sizing: border-box;
  }
  /* Grouping not in Figma's flat layer list either, but required to get
     exactly ONE 205.902px gap (between the logo+hero block and the
     services+email block) instead of one between every one of the 4
     original siblings — confirm if the real file nests these two pairs
     differently. */
  .intro-top-group {
    display: flex; flex-direction: column; align-items: center; gap: 24px; /* UNSPECIFIED IN FIGMA — logo-to-hero gap wasn't in what was pasted */
  }
  .intro-bottom-group {
    display: flex; width: 100%; justify-content: space-between; align-items: flex-end; gap: 12px; /* UNSPECIFIED IN FIGMA */
  }
  .intro-logo, .intro-hero, .intro-services, .intro-email {
    position: static; left: auto; right: auto; top: auto; transform: none;
  }
  .intro-hero { gap: 16px; } /* UNSPECIFIED IN FIGMA — desktop's 32px scaled down */
  .intro-hero__wordmark { width: auto; font-size: 64px; letter-spacing: -4px; text-align: center; } /* UNSPECIFIED IN FIGMA */
  .intro-hero__tagline { width: auto; max-width: 260px; font-size: 14px; line-height: 21px; } /* mobile: back to the Figma 14px */
  .intro-services p { font-size: 13px; line-height: 1.4; }
  .intro-services { gap: 6px; }
  .intro-email__label { font-size: 13px; }
  .intro-email__icon { width: 16px; height: 16px; }
  .intro-services { width: auto; }
}