/* Splash page: reuses the design tokens + fonts from style.css */
body.splash {
  padding: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-main {
  padding: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Always pinned top-left, including at mobile widths */
body.splash .theme-toggle {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  right: auto;
}

/* Standard business card: 3.5in x 2in (7:4).
   Padding is the classic 0.25in margin = 3.5in / 14 = 7.143% of card width on
   every side, so margins are visually equal; type scales with the card (cqw). */
.splash-card {
  container-type: inline-size;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 7 / 4;
  background: var(--color-panel);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  box-sizing: border-box;
  position: relative;
}

.splash-card-inner {
  height: 100%;
  padding: 7.143cqw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.5cqw;
  text-align: center;
}

.splash-card-inner > * {
  margin: 0;
}

/* --k (set on the flip card's front copy) scales the fixed-px minimums with the
   card, so the enlarged copy keeps the same proportions as the real card. */
.splash-email {
  color: var(--color-text-dim);
  font-size: max(calc(11px * var(--k, 1)), 3.3cqw);
}

.splash-name {
  font-size: 9cqw;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-strong);
  line-height: 1;
}

.splash-name span {
  color: var(--color-accent-soft);
}

.splash-tagline {
  color: var(--color-text-dim);
  font-size: max(calc(11px * var(--k, 1)), 3.3cqw);
}

.splash-links {
  margin-top: 1.25rem;
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
}

.splash-links a {
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: 1px;
}

.splash-links a::before {
  content: "// ";
}

.splash-links a:hover,
.splash-links a:focus-visible {
  color: var(--color-text-strong);
}

.splash-enter {
  margin-top: 1rem;
  padding: 0.6rem 1.1rem;
  color: var(--color-accent);
  background: var(--color-panel);
  border: 1px solid var(--color-border-strong);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.splash-enter:hover,
.splash-enter:focus-visible {
  background: var(--color-hover-bg);
  border-color: var(--color-accent-muted);
  box-shadow: 0 0 12px var(--color-glow);
  outline: none;
}

.splash-enter .arrow {
  display: inline-block;
  transition: transform 0.2s;
}

.splash-enter:hover .arrow,
.splash-enter:focus-visible .arrow {
  transform: translateX(4px);
}

/* --- The flipping card (see index.html) ---
   Laid out at full viewport size and animated from a scaled-down pose that sits
   exactly on .splash-card up to scale(1). The browser rasterizes an animating layer
   at the largest scale it will reach, so this one stays sharp throughout. */
.flip-stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  visibility: hidden;
  /* A perspective property (rather than perspective() inside the animated
     transform) keeps the animation's scale computable for the compositor. Its
     origin is the stage centre, which the stage's translate keeps on the card. */
  perspective: 1400px;
}

.flip-card,
.flip-back {
  position: absolute;
  inset: 0;
}

.flip-back {
  opacity: 0;
  transform: rotateY(180deg); /* un-mirrors the back once the card has flipped */
}

.flip-back iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.flip-front {
  container-type: inline-size;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--front-h, 100%);
  background: var(--color-panel);
  box-shadow: inset 0 0 0 calc(1px * var(--k, 1)) var(--color-border-strong);
  transform-origin: 0 0;
  transform: scaleY(var(--fy, 1));
}

/* --- Leave animation: the card flips over to reveal the site on its back --- */
body.splash.leaving,
body.splash.returning {
  overflow: hidden;
}

body.splash.leaving .splash-links,
body.splash.leaving .splash-enter,
body.splash.leaving .theme-toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* The flip card takes over from the real one for the duration */
body.splash.leaving .splash-card,
body.splash.returning .splash-card {
  visibility: hidden;
}

body.splash.leaving .flip-stage,
body.splash.returning .flip-stage {
  visibility: visible;
  animation: card-flip-move 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

body.splash.leaving .flip-card,
body.splash.returning .flip-card {
  animation: card-flip-zoom 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

body.splash.leaving .flip-front,
body.splash.returning .flip-front {
  animation: card-front-out 1.2s linear forwards;
}

body.splash.leaving .flip-back,
body.splash.returning .flip-back {
  animation: card-back-in 1.2s linear forwards;
}

/* Coming back from the site: the same animations, played in reverse */
body.splash.returning .flip-stage,
body.splash.returning .flip-card,
body.splash.returning .flip-front,
body.splash.returning .flip-back {
  animation-direction: reverse;
}

body.splash.returning .splash-links,
body.splash.returning .splash-enter,
body.splash.returning .theme-toggle {
  animation: splash-fade-in 0.4s ease 1s backwards;
}

/* Nothing is painted until the return animation can start (see index.html), so the
   browser keeps the portfolio on screen meanwhile instead of flashing this page */
html.splash-returning body.splash .splash-main,
html.splash-returning body.splash .theme-toggle {
  visibility: hidden;
}

@keyframes splash-fade-in {
  from { opacity: 0; }
}

/* Moves the card to the centre; split from the turn so the perspective origin follows it */
@keyframes card-flip-move {
  0% {
    transform: translate(var(--tx, 0), var(--ty, 0));
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes card-flip-zoom {
  0% {
    transform: rotateY(0deg) scale(var(--sx, 1), var(--sy, 1));
  }
  100% {
    transform: rotateY(180deg) scale(1, 1);
  }
}

@keyframes card-front-out {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes card-back-in {
  0%, 49% { opacity: 0; }
  50%, 100% { opacity: 1; }
}