:root {
  --background: #0a0a0a;
  --foreground: #e8e4dc;
  --muted-foreground: color-mix(in srgb, var(--foreground) 55%, var(--background));
}

* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: "Inter", Arial, sans-serif; font-weight: 300; }
a { color: inherit; }
::selection { background: var(--foreground); color: var(--background); }

.presence, .legal-page { min-height: 100vh; overflow: clip; background: var(--background); }
.film-grain { position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: grain .45s steps(2) infinite; }
.presence-screen { position: relative; display: grid; width: 100%; min-height: 100vh; min-height: 100svh; overflow: hidden; place-items: center; background: var(--background); }
.atmosphere { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.5); }
.atmosphere-one { animation: drift 30s ease-in-out infinite alternate; }
.atmosphere-two { filter: grayscale(1) contrast(1.04) brightness(.42); }
.presence-identity { position: relative; z-index: 1; text-align: center; opacity: 0; animation: fade-in 2s .35s ease forwards; }
.presence-identity h1 { margin: 0 0 30px .5em; font-size: 30px; font-weight: 200; line-height: 1; letter-spacing: .5em; }
.presence-identity p, .presence-facts p, .email-link { margin: 0; font-size: 11px; font-weight: 300; line-height: 1.4; letter-spacing: .2em; text-transform: lowercase; }
.presence-facts { align-content: center; gap: 60px; }
.presence-facts p { text-align: center; }
.presence-contact { display: flex; align-items: center; justify-content: center; }
.email-link { position: relative; text-decoration: none; }
.email-link::after { content: ""; position: absolute; inset: auto 0 -10px; height: 1px; background: var(--foreground); transform: scaleX(0); transform-origin: right; transition: transform 1.5s ease; }
.email-link:hover::after, .email-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.presence-contact footer { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; width: 100%; padding: 0 clamp(22px, 4vw, 64px) 28px; color: var(--muted-foreground); font-size: 10px; font-weight: 300; line-height: 1.4; letter-spacing: .2em; }
.presence-contact footer a { text-decoration: none; }

.legal-content { width: min(100% - 44px, 560px); margin: 0 auto; padding: 72px 0 120px; font-size: 12px; line-height: 1.75; letter-spacing: .08em; text-transform: lowercase; }
.legal-return { display: inline-block; margin-bottom: 120px; text-decoration: none; letter-spacing: .2em; }
.legal-content h1 { margin: 0 0 110px; font-size: 18px; font-weight: 200; letter-spacing: .2em; }
.legal-content section { margin-top: 72px; }
.legal-content h2 { margin: 0 0 24px; font-size: 11px; font-weight: 300; letter-spacing: .2em; }
.legal-content p { margin: 4px 0; color: var(--muted-foreground); }

@keyframes grain { 0%{transform:translate(0)} 25%{transform:translate(2%,-3%)} 50%{transform:translate(-3%,2%)} 75%{transform:translate(3%,4%)} 100%{transform:translate(-2%,-2%)} }
@keyframes drift { from { transform: scale(1.03) translate3d(-4px,-3px,0); } to { transform: scale(1.03) translate3d(5px,4px,0); } }
@keyframes fade-in { to { opacity: 1; } }

@media (max-width: 600px) {
  .presence-identity h1 { font-size: 26px; }
  .presence-contact footer { gap: 24px; padding-bottom: 22px; font-size: 8px; letter-spacing: .14em; }
  .legal-content { padding-top: 42px; }
  .legal-return { margin-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .presence-identity { opacity: 1; }
}