/* +Frames — Landing Page
   Color tokens 1:1 from DSOPlaner/DesignTokens.swift
   #0A0A0A bg, #141414 card, #1A1A1A secondary, #E8E4DD foreground, #888 muted,
   #171717 border, #4CAF50 accent green, #EF4444 accent red

   Schrift: Inter Variable (Google Fonts). Auf macOS/iOS faellt das System
   intern weiter auf SF Pro Display zurueck (-apple-system, BlinkMacSystemFont),
   was metrisch nahezu identisch zu Inter ist. Auf Linux/Windows liefert Inter
   die SF-Pro-naehe garantiert. .monospacedDigit()-Aequivalent ueber
   font-variant-numeric: tabular-nums (proportionale Buchstaben + Tabular-Ziffern).
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --bg:           #000000;
  --card:         #141414;
  --secondary:    #1A1A1A;
  --fg:           #E8E4DD;
  --muted:        #888888;
  --border:       #171717;
  --accent-green: #4CAF50;
  --accent-red:   #EF4444;

  /* Spacing (4px base, identical to DSPSpacing) */
  --xs:  4px;
  --sm:  8px;
  --md:  12px;
  --lg:  16px;
  --xl:  24px;
  --xxl: 32px;

  /* Radius */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-full: 9999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
               'Helvetica Neue', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';   /* Inter: i-tail + alt-a, closer to SF Pro */
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--fg); }

/* =========================================================================
   Layout — Page shell
   ========================================================================= */

.page {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--lg);
}

/* Header (logo top-left) — floats over iPhone area to free vertical space */
.page-header {
  position: absolute;
  top: var(--lg);
  left: var(--lg);
  display: flex;
  align-items: center;
  gap: var(--sm);
  z-index: 10;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  color: var(--fg);
  opacity: 0.95;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
}

.brand-wordmark {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fg);
  opacity: 0.95;
}

/* Group wordmark + studio credit so they share a baseline. The credit sits
   to the right of "Frames" at the same text baseline (not at the bottom of
   the 88px hexagon). */
.brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.brand-credit {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}

/* Stage — centers the iPhone. min-height:0 lets the iPhone
   (height: 100%) size against this flex item's resolved height. */
.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Footer — floats over iPhone area to free vertical space */
.page-footer {
  position: absolute;
  bottom: var(--lg);
  left: var(--lg);
  right: var(--lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--md);
  z-index: 10;
  font-size: 12px;
  color: var(--muted);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--lg);
}

.footer-links a:hover { color: var(--fg); }

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color 160ms ease, opacity 160ms ease;
}
.social-icon:hover { color: var(--fg); }
.social-icon.is-placeholder {
  opacity: 0.55;
  cursor: not-allowed;
}
.social-icon.is-placeholder:hover { color: var(--muted); }

.footer-copy { letter-spacing: 0.01em; font-size: 10px; }

/* =========================================================================
   Static info pages (privacy, terms)
   ========================================================================= */

.doc-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--xxl) var(--xl);
}

.doc-page h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: var(--lg);
  letter-spacing: -0.01em;
}

.doc-page h2 {
  font-size: 17px;
  font-weight: 600;
  margin-top: var(--xl);
  margin-bottom: var(--sm);
  color: var(--fg);
}

.doc-page p,
.doc-page li {
  font-size: 14px;
  color: var(--fg);
  opacity: 0.75;
  margin-bottom: var(--md);
  line-height: 1.55;
}

.doc-page ul { padding-left: var(--lg); }

.doc-page .doc-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: var(--xl);
}

.doc-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--xl);
}

.doc-page .back-link:hover { color: var(--fg); }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 640px) {
  /* Page padding tighter so the iPhone has more room. */
  .page { padding: var(--md); }

  /* Header — smaller hexagon + wordmark; credit on its own baseline next to Frames. */
  .page-header { top: var(--md); left: var(--md); gap: 6px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-wordmark { font-size: 22px; }
  .brand-credit { font-size: 9.5px; }
  .brand-text { gap: 6px; }

  /* Footer — smaller icons, wraps to two rows on narrow screens. */
  .page-footer {
    bottom: var(--md); left: var(--md); right: var(--md);
    font-size: 10px;
    flex-wrap: wrap;
    gap: 8px var(--md);
  }
  .footer-social { gap: 10px; }
  .footer-social .social-icon svg { width: 28px; height: 28px; }
  .footer-links { gap: var(--md); flex-wrap: wrap; justify-content: flex-end; }
}

/* =========================================================================
   Intro animation
   Timeline (5.0s total):
     0.00 – 0.70  logo fade in
     0.70 – 1.50  logo hold
     1.50 – 2.10  logo fade out
     2.10 – 2.80  "Frames" fade in
     2.80 – 3.60  "Frames" hold
     3.60 – 4.20  "Frames" fade out
     4.00 – 5.00  page content fade in
   ========================================================================= */

.intro {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 100;
  pointer-events: none; /* never block interaction */
  background: var(--bg); /* solid until the page is revealed */
  animation: intro-bg 5s ease forwards;
}

@keyframes intro-bg {
  0%, 80% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

.intro-logo,
.intro-word {
  grid-area: 1 / 1; /* stack at center */
  opacity: 0;
  will-change: opacity;
}

.intro-logo {
  width: clamp(72px, 11vmin, 128px);
  height: clamp(72px, 11vmin, 128px);
  color: var(--fg);
  animation: intro-logo 5s ease forwards;
}

.intro-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes intro-logo {
  0%   { opacity: 0; }
  14%  { opacity: 1; }   /* 0.70s */
  30%  { opacity: 1; }   /* 1.50s */
  42%  { opacity: 0; }   /* 2.10s */
  100% { opacity: 0; }
}

.intro-word {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  font-size: clamp(40px, 8vmin, 88px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  animation: intro-word 5s ease forwards;
}

@keyframes intro-word {
  0%, 42% { opacity: 0; }
  56%     { opacity: 1; } /* 2.80s */
  72%     { opacity: 1; } /* 3.60s */
  84%     { opacity: 0; } /* 4.20s */
  100%    { opacity: 0; }
}

/* Page content: hidden until intro is nearly done, then fades in. */
.page-header,
.stage,
.page-footer {
  opacity: 0;
  animation: page-reveal 1s ease 4s forwards;
}

@keyframes page-reveal {
  to { opacity: 1; }
}

/* Doc pages (privacy/terms) skip the intro entirely. */
.doc-page .page-header,
.doc-page .stage,
.doc-page .page-footer,
.doc-page main {
  opacity: 1;
  animation: none;
}

/* Respect reduced-motion: skip intro, show page immediately. */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .page-header,
  .stage,
  .page-footer {
    opacity: 1;
    animation: none;
  }
}

/* =========================================================================
   Starfield — background stars (deterministic, generated by js/starfield.js)
   Sits BEHIND .page (z-index 0). Pointer-events off so clicks pass through.
   ========================================================================= */
.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.starfield .star {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #fff;
  /* width/height/left/top/opacity set inline by starfield.js */
}
/* Static diffuse glow halo on a subset of stars — NO animations.
   A ::after pseudo-element renders a soft radial-gradient disc behind the
   sharp star core, with a real CSS blur to make it diffuse. The halo size
   scales with the star tier (set via inline --halo-size by starfield.js). */
.starfield .star.star-halo {
  overflow: visible;
}
.starfield .star.star-halo::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--halo-size, 16px);
  height: var(--halo-size, 16px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.45) 22%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0)    72%
  );
  filter: blur(1.2px);
  pointer-events: none;
  opacity: 0.7;
}
.starfield .star.star-halo.star-t4::after,
.starfield .star.star-halo.star-t5::after {
  filter: blur(1.6px);
}

/* Page sits above the starfield. */
.page {
  position: relative;
  z-index: 1;
}