/* trulyac.com coming-soon page — same voice as the main site: serif headlines, photography full bleed, one easing curve */
:root{--ink:#f2f1ed;--muted:rgba(242,241,237,.72);--faint:rgba(242,241,237,.5);--ease:cubic-bezier(.16,1,.3,1);
 --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--sans:"Helvetica Neue","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:#0b0b0c;color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sr,.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* background: the Nordschleife set, slow cross-fade + gentle zoom, darkened toward the text */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#0b0b0c}
.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 2.2s var(--ease),transform 9s linear}
.bg img.on{opacity:1;transform:scale(1)}
.bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,9,.86) 0%,rgba(8,8,9,.6) 42%,rgba(8,8,9,.15) 100%),linear-gradient(0deg,rgba(8,8,9,.75) 0%,transparent 40%)}

.wrap{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:clamp(22px,4vw,48px) clamp(20px,5vw,72px)}
.logo{height:15px;width:auto;opacity:0;animation:in 1.2s var(--ease) .05s forwards}
.copy{margin:auto 0;max-width:640px;padding:48px 0}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.6vw,86px);line-height:1.02;letter-spacing:-.01em;margin:0 0 22px}
h1 .l{display:block;overflow:hidden;padding-bottom:.06em}
h1 .l>span{display:inline-block;transform:translateY(105%);animation:up 1.3s var(--ease) var(--d) forwards}
.when{font-size:18px;color:var(--muted);margin:0 0 22px}.when strong{color:var(--ink);font-weight:500}

/* countdown */
.count{display:flex;gap:clamp(18px,3vw,34px);margin:0 0 32px}
.count div{min-width:56px}
.count b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(38px,5vw,58px);line-height:1;font-variant-numeric:tabular-nums}
.count b.tick{animation:tick .5s var(--ease)}
.count span{display:block;margin-top:6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* email */
.notify{display:flex;max-width:480px;border:1px solid rgba(242,241,237,.45);border-radius:999px;padding:5px;background:rgba(11,11,12,.35);backdrop-filter:blur(8px);transition:border-color .4s}
.notify:focus-within{border-color:var(--ink)}
.notify input{flex:1;min-width:0;border:0;background:none;color:var(--ink);font:inherit;font-size:15px;padding:10px 16px;outline:none}
.notify input::placeholder{color:var(--faint)}
.notify button{border:0;border-radius:999px;background:var(--ink);color:#0b0b0c;font:inherit;font-size:14px;letter-spacing:.02em;padding:11px 22px;cursor:pointer;white-space:nowrap;transition:transform .35s var(--ease),background-color .35s}
.notify button:hover{background:#fff;transform:translateY(-1px)}.notify button[disabled]{opacity:.6;cursor:default}
.notify.done{border-color:rgba(160,220,170,.7)}
.fine{font-size:13px;color:var(--faint);margin:12px 0 30px 18px;min-height:1.6em;transition:color .4s}
.fine.ok{color:#a8e0b2}.fine.err{color:#ffb4a8}
.socials{display:flex;gap:22px;flex-wrap:wrap}
.socials a{position:relative;color:var(--muted);text-decoration:none;font-size:13px;letter-spacing:.12em;text-transform:uppercase;transition:color .3s}
.socials a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.socials a:hover{color:var(--ink)}.socials a:hover::after{transform:scaleX(1);transform-origin:left}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--faint)}

.rise{opacity:0;transform:translateY(16px);animation:rise 1.1s var(--ease) var(--d,0ms) forwards}
@keyframes rise{to{opacity:1;transform:none}}@keyframes in{to{opacity:1}}@keyframes up{to{transform:none}}
@keyframes tick{from{opacity:.35;transform:translateY(-6px)}to{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (max-width:640px){.bg::after{background:linear-gradient(0deg,rgba(8,8,9,.92) 0%,rgba(8,8,9,.55) 60%,rgba(8,8,9,.35) 100%)}
 .notify{flex-direction:column;border-radius:22px;gap:4px}.notify button{width:100%}.fine{margin-left:4px}.count div{min-width:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rise,.logo{opacity:1;transform:none}h1 .l>span{transform:none}.bg img{transform:none}}