/* Extra polish for the home page: opening animation, ambient background, motion. Loads after site.css. */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- Opening animation ---------- */
html { scrollbar-gutter: stable; }
#intro { position: fixed; inset: 0; z-index: 100; background: #0e1015; visibility: hidden; cursor: pointer; }
html.pre:not(.no-intro) #intro, html.keyhole:not(.no-intro) #intro { visibility: visible; }
html.pre:not(.no-intro) #intro.live, html.keyhole:not(.no-intro) #intro.live { background: transparent; }
html.no-intro #intro { display: none; }
#intro svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
/* Hidden until the script has moved the logo to the middle; before that it sat in the top-left corner for a moment. */
#introLogo, #introWord { opacity: 0; }
#introSkip {
  position: absolute; right: 22px; bottom: 20px; background: rgba(14,16,21,.6); border: 1px solid var(--rule); color: var(--mist);
  border-radius: 999px; padding: 6px 14px; font-size: .85rem; cursor: pointer; opacity: 0; transition: opacity .4s .8s;
}
#intro.live #introSkip { opacity: 1; }
#introSkip:hover { color: var(--bone); border-color: var(--mist); }
/* If the script ever fails, never trap the visitor behind the animation. */
html.pre #intro { animation: introFail .01s 9s forwards; }
@keyframes introFail { to { visibility: hidden; opacity: 0; } }

/* ---------- Ambient background: the page wears a skin too ---------- */
#ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }
#ambient canvas { width: 100%; height: 100%; }
#ambient::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 30%, var(--ink) 95%); }
body.home .band { background: rgba(22, 26, 34, .8); backdrop-filter: blur(3px); }

/* ---------- Header + progress ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--ember), var(--gold)); pointer-events: none; }
.top { transition: background .3s, box-shadow .3s; }
.top.scrolled { background: rgba(14, 16, 21, .94); box-shadow: 0 10px 40px -20px #000; }

/* ---------- Hero entrance (one orchestrated moment) ---------- */
html.pre .rise { opacity: 0; }
html.pre .rise { animation: riseFail .01s 9s forwards; }
@keyframes riseFail { to { opacity: 1; } }
html.go .rise { animation: rise .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(105%); }
html.go .w > span { animation: word .95s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
html.pre .w > span { animation: wordFail .01s 9s forwards; }
@keyframes wordFail { to { transform: none; } }
@keyframes word { from { transform: translateY(105%); } to { transform: none; } }
.hero { position: relative; }
.hero::before {
  content: ''; position: absolute; left: -10%; top: -80px; width: 640px; height: 420px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 182, 75, .13), transparent); filter: blur(10px);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(180px, 40px) scale(1.15); } }
.hero > .wrap { position: relative; }
.stage { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .4s; will-change: transform; }
.stage:hover { box-shadow: 0 40px 100px -40px rgba(242, 182, 75, .38); }

/* ---------- Spotlight that follows the pointer ---------- */
[data-glow] { position: relative; }
[data-glow]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(242, 182, 75, .13), transparent 62%);
}
[data-glow]:hover::after { opacity: 1; }

/* ---------- Skin tape ---------- */
.tape { border-block: 1px solid var(--rule); background: rgba(14, 16, 21, .6); overflow: hidden; padding: 16px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tape .track { display: flex; width: max-content; gap: 0; animation: tape 70s linear infinite; }
.tape:hover .track { animation-play-state: paused; }
.tape span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: var(--mist); white-space: nowrap; }
.tape span::after { content: ''; width: 7px; height: 22px; border-radius: 2px; background: var(--up); box-shadow: 0 -6px 0 -3px var(--up), 0 6px 0 -3px var(--up); opacity: .8; }
.tape span:nth-child(2n)::after { background: var(--down); box-shadow: 0 -6px 0 -3px var(--down), 0 6px 0 -3px var(--down); height: 14px; }
.tape span:nth-child(3n)::after { background: var(--gold); box-shadow: 0 -6px 0 -3px var(--gold), 0 6px 0 -3px var(--gold); height: 18px; }
@keyframes tape { to { transform: translateX(-50%); } }

/* ---------- How it works + extension mock-up ---------- */
/* Steps on the left, a real "your own picture" example on the right */
.how { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.how .steps { gap: 26px; margin-top: 30px; }
.ownshot { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); background: #0b0d12;
  box-shadow: 0 50px 90px -50px rgba(255, 122, 77, .45), 0 0 0 6px rgba(255, 255, 255, .02); }
.ownshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ownshot::after { content: ""; position: absolute; inset: 0; background: rgba(8, 7, 13, .28); pointer-events: none; }
.ownshot canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.ownshot .tag { position: absolute; top: 12px; left: 12px; z-index: 2; }
.ownshot figcaption { position: absolute; right: 10px; bottom: 8px; z-index: 2; font-size: .7rem; color: rgba(255, 255, 255, .6); }
.how .steps li { padding-left: 52px; }
.how .steps li::before { width: 34px; height: 34px; font-size: 1rem; background: var(--slate); }
.how .steps b { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 600; margin-bottom: 2px; }
.how .steps span { color: var(--mist); }
.mock { width: min(340px, 100%); margin-inline: auto; border: 1px solid var(--rule); border-radius: 16px; background: var(--slate); padding: 16px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 6px rgba(255, 255, 255, .02); }
/* height/overflow/background reset: site.css styles every .bar as a thin progress bar, which squashed this header */
.mock .bar { display: flex; align-items: center; gap: 10px; height: auto; overflow: visible; background: none; border-radius: 0; margin: 0 0 12px; font-family: var(--display); font-weight: 700; }
.mock .bar img { width: 24px; height: 24px; border-radius: 6px; }
.mock .bar b { color: var(--gold); font-weight: 700; }
.mock .on { margin-left: auto; font-family: var(--body); font-size: .78rem; font-weight: 600; color: var(--up); display: flex; align-items: center; gap: 6px; }
.mock .on::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(76, 201, 166, .6); animation: ping 2.2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(76, 201, 166, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 201, 166, 0); } }
.mock .pv { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #0b0d12; border: 1px solid var(--rule); }
.mock .pv canvas { width: 100%; height: 100%; }
.mock .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mock .chip { padding: 5px 11px; font-size: .85rem; }
.mock .row2 { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--mist); }
.mock .sw { width: 32px; height: 18px; border-radius: 999px; background: var(--rule); position: relative; }
.mock .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--mist); }

/* ---------- Premium touches ---------- */
.plan.pro { position: relative; }
.plan.pro::before {
  content: ''; position: absolute; inset: -1px; border-radius: 14px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a), transparent 0 65%, var(--gold) 85%, #fff4d6 90%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 7s linear infinite;
}
@keyframes spin { to { --a: 360deg; } }
.btn.gold { position: relative; overflow: hidden; }
.btn.gold::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60%; left: -80%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); }
.btn.gold:hover::after { left: 130%; transition: left .7s ease; }
.tile { transition: border-color .2s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.tile:hover { transform: translateY(-3px); }
.closer { position: relative; overflow: hidden; }
.closer .bgc { position: absolute; inset: 0; opacity: .55; }
.closer .bgc canvas { width: 100%; height: 100%; }
.closer .bgc::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 16, 21, .85), rgba(14, 16, 21, .35)); }
.closer .wrap { position: relative; }
.closer h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.foot .brand { opacity: .95; }

@media (max-width: 900px) {
  .how { grid-template-columns: 1fr; gap: 36px; }
  #ambient { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .tape .track, .hero::before, .plan.pro::before { animation: none !important; }
  html.pre .rise, html.pre .w > span { opacity: 1 !important; transform: none !important; }
}
.hero { overflow-x: clip; }
body.home { overflow-x: clip; }
@media (max-width: 480px) {
  .top .wrap { gap: 12px; }
  .top .push { gap: 8px; }
  .top .push .btn:not(.gold) { display: none; }
}