@font-face{font-family:Satoshi;src:url(/f/satoshi-500.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:Satoshi;src:url(/f/satoshi-700.woff2) format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/f/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#0b0b0f;
  --surface:#14151b;
  --surface-2:#191a22;
  --line:#25262e;
  --ink:#f3f3f0;
  --muted:#9a9aa4;
  --faint:#5d5d68;
  --accent:#6cc493;
  --accent-2:#a7f3d0;
  --seal:#6cc493;
  --sans:Satoshi,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",ui-serif,"Iowan Old Style",Palatino,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --rx:58%;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;min-height:100svh;
}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}

/* ---------- background scene ---------- */
.scene{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.layer{
  position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  opacity:0;transition:opacity 1.4s var(--ease-out) .5s;
}
.is-ready .layer{opacity:1}
.layer--raw{clip-path:inset(0 calc(100% - var(--rx)) 0 0)}
.layer--sealed{clip-path:inset(0 0 0 var(--rx))}
.stage{
  position:absolute;left:50%;top:50%;width:170vmax;
  display:flex;flex-direction:column;gap:22px;
  transform:translate(-50%,-50%) rotate(-11deg);
  opacity:.55;
}
.row{display:flex;width:max-content;gap:18px;will-change:transform;animation:drift var(--dur,60s) linear infinite}
.row--rev{animation-direction:reverse}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.card{
  flex:none;width:300px;height:68px;border-radius:16px;
  display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:12px;
  padding:0 16px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);
  box-shadow:0 18px 40px -24px #000c;
}
.card__av{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;color:#0b0b0f;
  background:var(--c,#7c8cff);
}
.card__txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.card__from{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__subj{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card__time{font-size:11px;color:var(--faint);align-self:start;margin-top:17px}

/* sealed: the same mail after the rift */
.layer--sealed .card{
  background:linear-gradient(180deg,#151a1e,#121519);
  border-color:color-mix(in srgb,var(--seal) 28%,var(--line));
}
.layer--sealed .card__av{background:color-mix(in srgb,var(--seal) 18%,#101214);color:var(--seal)}
.layer--sealed .card__av svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.layer--sealed .card__subj{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:color-mix(in srgb,var(--seal) 55%,var(--faint))}
.layer--sealed .card__time{
  margin-top:0;align-self:center;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--seal);padding:4px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--seal) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--seal) 30%,transparent);
}

/* the rift */
.rift{
  position:absolute;top:0;bottom:0;left:var(--rx);width:0;
  opacity:0;transition:opacity .6s var(--ease-out) .25s;
}
.is-ready .rift{opacity:1}
.rift::before{ /* wide soft bloom */
  content:"";position:absolute;top:-10%;bottom:-10%;left:-90px;width:180px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);
  filter:blur(18px);animation:breathe 5.5s ease-in-out infinite;
}
.rift::after{ /* light spilling onto the sealed side */
  content:"";position:absolute;top:0;bottom:0;left:0;width:min(26vw,320px);
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--seal) 5%,transparent) 40%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);
}
.rift__core{
  position:absolute;top:0;bottom:0;left:-1px;width:2px;
  background:linear-gradient(180deg,transparent,var(--accent) 18%,#fff 50%,var(--accent-2) 82%,transparent);
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 70%,transparent),0 0 34px 4px color-mix(in srgb,var(--accent) 30%,transparent);
  transform:scaleY(0);transform-origin:50% 50%;
  transition:transform 1.1s var(--ease-out) .15s;
}
.is-ready .rift__core{transform:scaleY(1)}
.rift__spark{
  position:absolute;left:-2px;width:4px;height:140px;top:-160px;border-radius:4px;
  background:linear-gradient(180deg,transparent,#fff,transparent);
  filter:drop-shadow(0 0 8px var(--accent-2));
  animation:spark 4.2s var(--ease-out) 1.4s infinite;
}
@keyframes spark{0%{transform:translateY(0);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translateY(calc(100vh + 320px));opacity:0}}
@keyframes breathe{0%,100%{opacity:.75;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.25)}}

.veil{ /* keeps the wordmark readable */
  position:absolute;inset:0;
  background:
    radial-gradient(52% 40% at 50% 50%,color-mix(in srgb,var(--bg) 97%,transparent) 0,color-mix(in srgb,var(--bg) 82%,transparent) 42%,color-mix(in srgb,var(--bg) 25%,transparent) 78%,transparent 100%),
    linear-gradient(180deg,var(--bg) 0,transparent 22%,transparent 78%,var(--bg) 100%);
}
.grain{
  position:absolute;inset:-50%;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- foreground ---------- */
.hero{
  position:relative;z-index:2;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,4vw,44px);
  padding:24px;text-align:center;
}
.mark{
  font-weight:700;font-size:clamp(68px,15vw,212px);line-height:.9;letter-spacing:-.055em;
  display:flex;align-items:baseline;
}
.mark__mail{color:var(--ink)}
.mark__rift{
  font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.02em;
  padding:0 .06em 0 .02em;margin-left:.01em;
  background:linear-gradient(100deg,var(--accent) 0%,#c8f5dc 38%,#fff 50%,var(--accent-2) 64%,var(--accent) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 7s ease-in-out 1.6s infinite;
}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}

.contact{display:flex;align-items:center;gap:8px;padding:6px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 30px 80px -24px #0009;
}
.contact__mail{
  display:flex;align-items:center;gap:12px;padding:12px 18px 12px 16px;border-radius:999px;
  color:var(--ink);text-decoration:none;font-size:clamp(15px,1.7vw,18px);font-weight:500;letter-spacing:-.01em;
  transition:background .3s var(--ease-out),transform .45s var(--spring);
}
.contact__mail:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.contact__mail:active{transform:scale(.97)}
.contact__dot{width:8px;height:8px;border-radius:50%;background:var(--seal);box-shadow:0 0 0 4px color-mix(in srgb,var(--seal) 18%,transparent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--seal) 4%,transparent)}}
.contact__copy{
  position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  border:0;background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--muted);cursor:pointer;
  transition:background .3s var(--ease-out),color .3s,transform .45s var(--spring);
}
.contact__copy svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact__copy:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 11%,transparent)}
.contact__copy:active{transform:scale(.9)}
.contact__copied{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px);
  font-size:12px;font-weight:500;color:var(--bg);background:var(--ink);padding:5px 10px;border-radius:999px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .45s var(--spring);
}
.contact__copied:empty{display:none}
.is-copied .contact__copied{opacity:1;transform:translate(-50%,0)}
.is-copied{color:var(--seal)!important}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.foot{
  position:fixed;z-index:2;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));
  text-align:center;font-size:12px;color:var(--faint);letter-spacing:.02em;
}

.foot a{color:var(--muted);text-decoration:none;transition:color .3s var(--ease-out)}
.foot a:hover{color:var(--ink)}
.foot__sep{margin:0 10px;opacity:.6}

/* ---------- privacy page ---------- */
body.doc{overflow:auto;overflow-x:hidden}
.doc-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.doc-bg::before{
  content:"";position:absolute;top:-25%;right:-15%;width:75vw;height:70vh;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 13%,transparent),transparent);filter:blur(40px);
}
.doc-rift{
  position:absolute;top:0;bottom:0;left:max(14px,calc(50% - 450px));width:2px;opacity:.6;
  background:linear-gradient(180deg,transparent,var(--accent) 20%,#fff 45%,var(--accent-2) 75%,transparent);
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 60%,transparent),0 0 40px 6px color-mix(in srgb,var(--accent) 18%,transparent);
}
.doc-wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:clamp(24px,5vw,56px) clamp(28px,6vw,48px) 48px}
.doc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(56px,11vw,120px)}
.doc-brand{font-size:24px;font-weight:700;letter-spacing:-.045em;color:var(--ink);text-decoration:none}
.doc-brand .mark__rift{font-size:1.06em}
.doc-back{
  font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);
  transition:background .3s var(--ease-out),transform .45s var(--spring);
}
.doc-back::before{content:"←";margin-right:8px;color:var(--muted)}
.doc-back:hover{background:color-mix(in srgb,var(--ink) 8%,var(--surface))}
.doc-back:active{transform:scale(.96)}
.doc h1{font-size:clamp(46px,9vw,92px);font-weight:700;line-height:.95;letter-spacing:-.05em}
.doc h1 .mark__rift{letter-spacing:-.02em}
.lead{margin-top:24px;max-width:34em;font-size:clamp(17px,2.1vw,20px);line-height:1.6;color:var(--muted);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.sec{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:34px 0;border-top:1px solid var(--line)}
.lead+.sec{margin-top:64px}
.sec__n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent);padding-top:5px}
.sec h2{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.sec p{font-size:16px;line-height:1.72;color:#c8c8cf;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.sec p+p{margin-top:12px}
.sec a,.lead a{color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 65%,transparent);text-underline-offset:3px;transition:text-decoration-color .3s}
.sec a:hover{text-decoration-color:var(--accent)}
.foot--doc{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;padding-top:28px;border-top:1px solid var(--line);text-align:left}
.foot__date{margin-left:auto}

/* entrance, like the rise on tododay.co */
.rise{animation:rise 1.2s var(--ease-out) both}
.rise--1{animation-delay:.35s}.rise--2{animation-delay:.6s}.rise--3{animation-delay:.9s}
@keyframes rise{from{opacity:0;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

@media (max-width:720px){
  .card{width:240px;height:60px;grid-template-columns:30px 1fr auto;padding:0 12px;gap:10px}
  .card__av{width:30px;height:30px;font-size:11px}
  .stage{gap:16px}
  .mark{font-size:clamp(68px,24vw,150px);letter-spacing:-.05em}
  .sec{grid-template-columns:1fr;gap:6px}
  .doc-rift{opacity:.35}
  .foot--doc{justify-content:center;text-align:center}
  .foot__date{margin-left:0;flex-basis:100%;text-align:center}
  .veil{background:
    radial-gradient(95% 34% at 50% 50%,color-mix(in srgb,var(--bg) 96%,transparent) 0,color-mix(in srgb,var(--bg) 80%,transparent) 50%,color-mix(in srgb,var(--bg) 20%,transparent) 85%,transparent 100%),
    linear-gradient(180deg,var(--bg) 0,transparent 20%,transparent 80%,var(--bg) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .row,.rift__spark,.rift::before,.mark__rift,.contact__dot{animation:none!important}
  .rise{animation-name:fade}
  @keyframes fade{from{opacity:0}to{opacity:1}}
}