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

html, body {
  height: 100%;
  background: #04050a;
  overflow: hidden;
}

body {
  /* Dependency-free by contract: use the platform UI face actually present
     instead of naming Inter without shipping or loading it. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: #edeff5;
}

/* fallback backdrop if WebGL is unavailable */
body.no-webgl {
  background:
    radial-gradient(ellipse 40% 30% at 72% 74%, #241723 0%, #0a0b14 55%, transparent 100%),
    radial-gradient(ellipse 26% 20% at 20% 20%, #2a2117 0%, #04050a 70%),
    #04050a;
}

canvas#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;   /* track mobile dynamic toolbars where supported */
  display: block;
  /* The scene owns one-finger drag parallax, while two-finger pinch zoom
     remains a browser accessibility gesture. The permission button is a
     separate element and remains normally interactive. */
  touch-action: pinch-zoom;
  /* revealed by main.js once the first real frame has rendered, so the
     load shows the page settling in instead of a black->scene pop */
  opacity: 0;
  transition: opacity 1.1s ease;
}

canvas#scene.ready { opacity: 1; }

/* iOS exposes tilt data only after a user gesture. The same compact control
   also explains blocked/insecure states without obscuring the scene; touch
   parallax remains available underneath every status. */
.motion-permission {
  position: fixed;
  z-index: 4;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  right: calc(0.75rem + env(safe-area-inset-right, 0px));
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.58rem 0.82rem;
  border: 1px solid rgba(237, 239, 245, 0.38);
  border-radius: 999px;
  background: rgba(4, 5, 10, 0.78);
  color: rgba(237, 239, 245, 0.92);
  font: 600 0.70rem/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.38);
  cursor: pointer;
}

.motion-permission-status {
  color: rgba(237, 239, 245, 0.72);
  border-color: rgba(237, 239, 245, 0.20);
  cursor: default;
  pointer-events: none;
}

.motion-permission:hover,
.motion-permission:focus-visible {
  color: #fff;
  border-color: rgba(255, 210, 160, 0.55);
  outline: none;
}

main {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  padding: 2.8rem clamp(1.6rem, 5vw, 3.6rem)
           calc(2.8rem + env(safe-area-inset-bottom, 0px));
  gap: 0.95rem;
  animation: fadein 2.4s ease-out both;
  pointer-events: none;
}

/* contrast scrim under the text corner: the disk's bright wing and the
   star bloom can otherwise pass directly behind the type */
main::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(60rem, 100%);
  /* must always contain the 24rem-tall gradient, or its clipped alpha
     shows as a hard horizontal seam on short viewports */
  height: max(55%, 25rem);
  pointer-events: none;
  background: radial-gradient(ellipse 52rem 24rem at 0% 100%,
    rgba(4, 5, 10, 0.92) 0%,
    rgba(4, 5, 10, 0.68) 45%,
    rgba(4, 5, 10, 0.30) 68%,
    rgba(4, 5, 10, 0) 100%);
}

main > * {
  position: relative;   /* keep text above the scrim */
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .motion-permission { display: none; }
}

.email {
  /* The headline deliberately inherits main's pointer-events:none so a swipe
     started over the lower copy still reaches the canvas. Only this actual
     link needs to opt back into hit testing. */
  pointer-events: auto;
  font-size: 0.8rem;
  letter-spacing: 0.26em;
  color: rgba(237, 239, 245, 0.92);
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.9);
}

.email:hover,
.email:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255, 210, 160, 0.45);
}

h1 {
  font-weight: 300;
  font-size: clamp(1.05rem, 2.4vw, 1.55rem);
  line-height: 1.45;
  letter-spacing: 0.015em;
  max-width: 26rem;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
}