/* Again Coffee: Coming Soon. HTML + CSS only, no JavaScript. */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Fraunces:opsz,wght@9..144,700;9..144,800&family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@700;800&display=swap");

/* Local Fallback Fonts */
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/SpaceGrotesk-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

@font-face{font-family:"Fraunces";src:url("fonts/Fraunces-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Syne";src:url("fonts/Syne-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Syne";src:url("fonts/Syne-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("fonts/DMSerifDisplay-Regular.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  --font-coming-soon:"Fraunces", Georgia, serif;
  --font-heading:"Syne", "Space Grotesk", system-ui, sans-serif;
  --font-body:"Space Grotesk", system-ui, sans-serif;
}

/* ---------- Themes ---------- */
.theme-mono{
  --base:#050505; --text:#fff; --muted:#a8a8a8; --line:rgba(255,255,255,.14);
  --accent:#ed582f; --on-accent:#000; --wave:rgba(255,255,255,.07);
  --bean:#24160f; --bean-hi:#6a4330; --glass:rgba(12,10,9,.58);
  --overlay:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.82));
}
.theme-blue{
  --base:linear-gradient(160deg,#050a24,#0a1448 55%,#06103a); --text:#fff; --muted:#aab8ee; --line:rgba(140,175,255,.22);
  --accent:#5aa0ff; --on-accent:#03102e; --wave:rgba(90,160,255,.14);
  --bean:#0b1647; --bean-hi:#3a62d8; --glass:rgba(6,14,52,.55);
  --overlay:linear-gradient(180deg,rgba(3,8,34,.5),rgba(3,8,34,.8));
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font-family:var(--font-body);color:var(--text);background:#000;line-height:1.55;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Background: swap --bg-photo for a real photo ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;
  --bg-photo:none; /* e.g. url("images/beans-dark.jpg") */
  background:
    var(--overlay),
    var(--bg-photo) center/cover no-repeat,
    linear-gradient(115deg,transparent 22%,var(--wave) 38%,transparent 52%),
    linear-gradient(115deg,transparent 52%,var(--wave) 66%,transparent 80%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='2'%3E%3Cellipse cx='40' cy='42' rx='16' ry='24' transform='rotate(28 40 42)'/%3E%3Cpath d='M31 58q9-16 18-32'/%3E%3Cellipse cx='122' cy='118' rx='15' ry='22' transform='rotate(-34 122 118)'/%3E%3Cpath d='M131 132q-9-14-18-30'/%3E%3C/g%3E%3C/svg%3E"),
    var(--base);
}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 42%,transparent,rgba(0,0,0,.55))}

/* Beans rise upward: reverse gravity */
.bean{position:absolute;left:var(--x);bottom:-18%;width:var(--s);height:calc(var(--s)*1.45);border-radius:50%;
  background:radial-gradient(ellipse at 30% 22%,var(--bean-hi),var(--bean) 62%,#000);
  filter:blur(var(--b,0px));opacity:.85;animation:rise var(--d) linear var(--t) infinite;will-change:transform}
.bean::after{content:"";position:absolute;left:44%;top:8%;width:12%;height:84%;border-radius:50%;background:rgba(0,0,0,.65);transform:rotate(10deg)}
@keyframes rise{from{transform:translateY(0) rotate(var(--r))}to{transform:translateY(-135vh) rotate(calc(var(--r) + 140deg))}}

/* ---------- Layout ---------- */
.page{min-height:100%;display:flex;flex-direction:column;padding:clamp(20px,3.5vw,44px) clamp(20px,5vw,72px)}
header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.logo{height:clamp(46px,6vw,64px);width:auto;display:block}
.region{font-size:.9rem;color:var(--muted);border:1px solid var(--line);padding:7px 16px;border-radius:999px;background:var(--glass);backdrop-filter:blur(8px)}

main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;max-width:860px;margin:0 auto;width:100%;padding:clamp(40px,8vh,96px) 0}
.status{display:inline-flex;align-items:center;gap:10px;align-self:center;font-size:.9rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:8px 20px;border-radius:999px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(8px);margin-bottom:12px}
.status i{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent)}100%{box-shadow:0 0 0 12px transparent}}

h1, .coming-soon-title{
  font-family:var(--font-coming-soon);
  font-optical-sizing:auto;
  font-size:clamp(3.8rem,11.5vw,7.6rem);
  line-height:.96;
  letter-spacing:-.025em;
  font-weight:700;
  text-transform:none;
  margin:10px 0 16px;
  color:var(--text);
  text-shadow:0 6px 36px rgba(0,0,0,.65);
}
h1 span, .coming-soon-title span{color:var(--accent)}

h2, .hero-tagline, .coming-soon{
  font-family:var(--font-heading);
  font-size:clamp(1.35rem,3.2vw,2.3rem);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--text);
  margin:8px 0 16px;
  line-height:1.3;
}
h2 span, .hero-tagline span{color:var(--accent)}

.lead{font-family:var(--font-body);font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--muted);max-width:54ch;margin:0 auto 10px;line-height:1.6}

.notify{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:34px auto 0;width:100%;max-width:560px}
.notify input{flex:1 1 240px;min-width:0;font:inherit;color:var(--text);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:15px 22px;backdrop-filter:blur(8px);transition:border-color .2s}
.notify input:focus{border-color:var(--accent);outline:none}
.notify input::placeholder{color:var(--muted)}
.notify button{font:inherit;font-weight:600;cursor:pointer;color:var(--on-accent);background:var(--accent);border:0;border-radius:999px;padding:15px 28px;transition:transform .2s,box-shadow .2s}
.notify button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.notify button:active{transform:translateY(0)}
.hint{font-size:.88rem;color:var(--muted);margin-top:12px;text-align:center}

.progress{margin:44px auto 0;width:100%;max-width:560px}
.progress p{display:flex;justify-content:space-between;font-size:.9rem;color:var(--muted);margin-bottom:10px}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.bar b{display:block;height:100%;width:72%;border-radius:inherit;background:var(--accent);animation:fill 2.4s cubic-bezier(.16,1,.3,1) both}
@keyframes fill{from{width:0}}

footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px 32px;padding-top:28px;border-top:1px solid var(--line)}
footer dt{font-size:.82rem;color:var(--muted);margin-bottom:2px}
footer dd{font-weight:500;overflow-wrap:anywhere}
footer a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
footer a:hover{border-color:var(--accent)}
.social{display:flex;gap:16px;flex-wrap:wrap}
.copy{grid-column:1/-1;font-size:.82rem;color:var(--muted)}

@media (max-width:560px){.region{display:none}.notify button{width:100%}}
@media (prefers-reduced-motion:reduce){.bean,.status i,.bar b{animation:none}.bean{bottom:12%}}