/* Dagmar Capital landing page.
   Ground, logo and type taken from the deck (Figma: Deck Dagmar Design / Cover):
   tagline  Source Serif 4 Light, #FBFBF9, line-height 1.42
   labels   IBM Plex Mono Medium, uppercase, tracking .112em, 55% ink
   byline   IBM Plex Sans Regular, tracking .227em, 50% ink */

:root {
  --navy: #0e1a2b;                   /* deck cover and divider ground */
  --navy-glow: #1a2f4a;              /* light pooled behind the lockup */
  --ink: #fbfbf9;                    /* deck text */
  --ink-80: rgba(251, 251, 249, .8); /* links */
  --ink-70: rgba(251, 251, 249, .7); /* footer */
  --ink-55: rgba(251, 251, 249, .55);/* deck labels */
  --ink-50: rgba(251, 251, 249, .5); /* deck byline */
  --hair: #22344a;                   /* frame */
  --steel: #7fa8cd;                  /* focus ring */

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* the hairline frame sits this far from the screen edge */
  --inset: clamp(10px, 1.6vw, 24px);

  /* long, soft deceleration for everything that settles into place */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* the spark gathers speed, then eases onto the tip */
  --ease-rise: cubic-bezier(.6, 0, .25, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:focus-visible {
  outline: 1px solid var(--steel);
  outline-offset: 4px;
}

/* ---------- Frame: one screen, lockup centred, small print at the foot ---------- */

.page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding:
    calc(max(var(--inset), env(safe-area-inset-top)) + clamp(20px, 4svh, 48px))
    calc(max(var(--inset), env(safe-area-inset-right)) + clamp(16px, 3vw, 48px))
    calc(max(var(--inset), env(safe-area-inset-bottom)) + clamp(14px, 2.6svh, 28px))
    calc(max(var(--inset), env(safe-area-inset-left)) + clamp(16px, 3vw, 48px));
  overflow: hidden;
}

/* Hairline frame, like the border of a certificate */
.page::before {
  content: "";
  position: absolute;
  top: max(var(--inset), env(safe-area-inset-top));
  right: max(var(--inset), env(safe-area-inset-right));
  bottom: max(var(--inset), env(safe-area-inset-bottom));
  left: max(var(--inset), env(safe-area-inset-left));
  border: 1px solid var(--hair);
  pointer-events: none;
  animation: fade 2.4s ease-out .1s both;
}

/* Soft light pooled behind the logo; the deck navy holds at the edges */
.page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38% 34% at 50% 38%, rgba(26, 47, 74, .9) 0%, rgba(26, 47, 74, 0) 100%),
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(21, 38, 60, .8) 0%, rgba(14, 26, 43, 0) 100%);
  animation: fade 3s ease-out .1s both;
}

.stage {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* sit a touch above true centre, where the eye expects it */
  padding-bottom: clamp(0px, 3svh, 44px);
}

.brand {
  margin: 0;
  line-height: 0;
  animation: focus-in 2s var(--ease-out) .15s both;
}

.logo {
  display: block;
  height: clamp(120px, 24svh, 280px);
  width: auto;
  overflow: visible;
  fill: #ffffff;
}

/* "by Rcube" sits under the lockup, as on the deck cover */
.byline {
  margin-top: clamp(14px, 2.2svh, 26px);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(11px, 1.4svh, 15px);
  letter-spacing: .227em;
  color: var(--ink-50);
  text-decoration: none;
  transition: color .3s ease;
  animation: focus-up 1.8s var(--ease-out) 2.6s both;
}
.byline:hover { color: var(--ink); }

/* Two lines, always */
.tagline {
  margin: clamp(30px, 5.4svh, 64px) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, min(2.1vw, 3.3svh), 30px);
  line-height: 1.42;
  color: var(--ink);
}
.line { display: block; }
.line > span {
  display: block;
  white-space: nowrap;
  animation: focus-up 1.8s var(--ease-out) var(--d, 0s) both;
}

/* The one call to action: a hairline box, like the frame, lit from within */
.email {
  margin-top: clamp(22px, 4.2svh, 48px);
  display: inline-flex;
  align-items: center;
  gap: .9em;
  padding: 1em 1.7em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(12px, 1.6svh, 14px);
  letter-spacing: .14em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid rgba(251, 251, 249, .24);
  background: rgba(251, 251, 249, .035);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
  animation: focus-up 1.8s var(--ease-out) 2.6s both;
}
.email::after {
  content: "→" / "";
  color: var(--steel);
  letter-spacing: 0;
  transition: transform .4s var(--ease-out);
}
.email:hover {
  border-color: rgba(251, 251, 249, .55);
  background: rgba(251, 251, 249, .07);
  box-shadow: 0 0 28px rgba(127, 168, 205, .18);
}
.email:hover::after { transform: translateX(4px); }

/* Footer: Paris sits on the centre line of the page, flanked by two dots;
   the host and the notice take equal columns either side */
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .112em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-70);
  animation: fade 1.8s ease-out 2.6s both;
}
.foot__host  { justify-self: end; text-align: right; }
.foot__legal { justify-self: start; text-align: left; }
.foot__place {
  display: inline-flex;
  align-items: center;
  gap: 2.4em;
  margin: 0 2.4em;
}
.foot__place::before,
.foot__place::after {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--steel);
  opacity: .75;
}
/* the host carries the weight of the line */
.foot a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: color .3s ease;
}
.foot a:hover { color: #cfe0ef; }

/* ---------- Load sequence ----------
   The logo plays alone first; the burst on the tip reveals the rest of the page.
   0.1s   background light and frame fade up
   0.2s   dagger comes out of a soft blur, faintly lit
   0.6s   spark climbs the blade slowly, shedding faint sparkles
   0.9s   DAGMAR / CAPITAL fades in, gently
   2.5s   burst on the tip; the dagger ignites to full white
   2.6s   everything else together: "by Rcube", tagline, email, footer                        */

@keyframes fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes focus-in { from { opacity: 0; filter: blur(12px); transform: scale(.975); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes focus-up { from { opacity: 0; filter: blur(8px); transform: translateY(.45em); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes rise     { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes word-in  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* ---------- Logo: sparks climb the blade and burst on the tip, once ---------- */

.logo { animation: bloom 1.8s ease-out 2.5s both; }
.logo__mark { animation: mark-ignite 2.4s ease-in .2s both; }
.logo__word { animation: word-in 2.8s cubic-bezier(.33, 0, .2, 1) .9s both; }

.logo__sheen,
.logo__spark,
.logo__twinkle,
.logo__glow,
.logo__ring,
.logo__flare { opacity: 0; }

.logo__twinkle,
.logo__glow,
.logo__ring,
.logo__flare { transform-box: fill-box; transform-origin: center; }

.logo.play .logo__spark   { animation: spark-rise 2s var(--ease-rise) .6s both; }
.logo.play .logo__sheen   { animation: sheen-rise 2s var(--ease-rise) .6s both; }
.logo.play .logo__twinkle { animation: twinkle 1.2s ease-out var(--t) both; }
.logo.play .logo__glow    { animation: glow 1.4s ease-out 2.52s both; }
.logo.play .logo__ring    { animation: ring 1.3s var(--ease-out) 2.58s both; }
.logo.play .logo__flare   { animation: flare 1.2s var(--ease-out) 2.56s both; }

@keyframes mark-in { from { opacity: .15; } to { opacity: 1; } }
/* the dagger glows faintly while the spark climbs it, then ignites to full white at the burst */
@keyframes mark-ignite {
  0%   { opacity: 0; }
  15%  { opacity: .35; }
  80%  { opacity: .6; }
  100% { opacity: 1; }
}

@keyframes bloom {
  0%   { filter: drop-shadow(0 0 0 rgba(185, 211, 234, 0)); }
  30%  { filter: drop-shadow(0 0 14px rgba(185, 211, 234, .22)); }
  100% { filter: drop-shadow(0 0 0 rgba(185, 211, 234, 0)); }
}
@keyframes spark-rise {
  0%   { transform: translateY(222px); opacity: 0; }
  10%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes sheen-rise {
  0%   { transform: translateY(250px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-60px); opacity: 0; }
}
@keyframes twinkle {
  0%   { transform: scale(0) rotate(0deg);                          opacity: 0; }
  30%  { transform: scale(var(--s, 1)) rotate(45deg);                opacity: .7; }
  100% { transform: scale(0) rotate(100deg);                        opacity: 0; }
}
@keyframes glow {
  0%   { transform: scale(.3);  opacity: 0; }
  15%  { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes ring {
  0%   { transform: scale(.4); opacity: .45; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes flare {
  0%   { transform: scale(.1) rotate(-25deg); opacity: 0; }
  18%  { transform: scale(.75) rotate(0deg); opacity: .9; }
  100% { transform: scale(.25) rotate(30deg); opacity: 0; }
}

/* ---------- Screen sizes ---------- */

/* Narrow screens: two centred lines, "Paris · Rcube" then the notice */
@media (max-width: 900px) {
  .foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 0;
  }
  .foot__place { order: 1; margin: 0 1.4em 0 0; gap: 1.4em; }
  .foot__place::before { display: none; }
  .foot__host  { order: 2; text-align: center; white-space: nowrap; }
  .foot__legal { order: 3; flex-basis: 100%; text-align: center; }
}

/* Phones */
@media (max-width: 599px) {
  .logo { height: clamp(118px, 22svh, 190px); }
  .byline { font-size: 11px; }
  .tagline { font-size: clamp(17px, 5.2vw, 22px); }
  .email { font-size: 13px; letter-spacing: .1em; }
  .foot { font-size: 9.5px; letter-spacing: .07em; }
  .page::after {
    background:
      radial-gradient(ellipse 70% 32% at 50% 36%, rgba(26, 47, 74, .9) 0%, rgba(26, 47, 74, 0) 100%),
      radial-gradient(ellipse 110% 55% at 50% 42%, rgba(21, 38, 60, .8) 0%, rgba(14, 26, 43, 0) 100%);
  }
}

/* Phones held sideways and other short screens */
@media (max-height: 520px) and (orientation: landscape) {
  .page { padding-top: calc(var(--inset) + 16px); }
  .logo { height: clamp(96px, 30svh, 140px); }
  .byline { margin-top: 10px; }
  .tagline { margin-top: 16px; font-size: clamp(15px, 4.2svh, 20px); }
  .email { margin-top: 12px; }
  .foot { font-size: 10px; }
}

/* Large displays */
@media (min-width: 1800px) and (min-height: 1000px) {
  .foot { font-size: 12px; }
}

/* Reduced motion: keep the fades and the glow, drop everything that travels */
@media (prefers-reduced-motion: reduce) {
  .brand, .byline, .line > span, .email, .logo__word { animation-name: fade; }
  .logo__mark { animation: mark-in 2.2s var(--ease-out) .3s both; }
  .logo__sheen, .logo__spark, .logo__twinkle, .logo__ring, .logo__flare { display: none; }
  * { transition: none !important; }
}