/* ComfyReader home page (index.html). The legal pages keep using styles.css. */

/* Literata, self-hosted (SIL OFL 1.1, see fonts/OFL.txt): variable weight 300 to 800 and optical size, latin subset. */
@font-face{
  font-family:"Literata";font-style:normal;font-weight:300 800;font-display:swap;
  src:url("fonts/Literata.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Literata";font-style:italic;font-weight:300 800;font-display:swap;
  src:url("fonts/Literata-Italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;
  --hearth:#1b110b; --walnut:#2c1c13; --leather:#4b2f1f;
  --parchment:#f4eadb; --smoke:#b8a690; --ember:#f2a25c;
  --rule:rgba(244,234,219,.12);
  --serif:"Literata",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --spring:cubic-bezier(.34,1.45,.64,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--hearth);color:var(--parchment);font-family:var(--serif);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block}
a{color:inherit}
a:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:12px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* Top bar: transparent over the hero, solid once the hero's badge has scrolled away (home.js). */
nav.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
nav.top.solid{background:rgba(27,17,11,.78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-color:var(--rule)}
.navin{display:flex;justify-content:space-between;align-items:center;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none}
.brand img{width:34px;height:34px;border-radius:9px}
/* Hidden (and out of the tab order) until the bar turns solid. */
nav .badge{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .3s,transform .3s,visibility .3s}
nav.solid .badge{opacity:1;visibility:visible;transform:none;pointer-events:auto}

/* Apple's official badge, unaltered. Heights keep the mockup's sizes and Apple's clear space (a quarter of the height). */
.badge{display:inline-block;line-height:0;border-radius:9px}
.badge img{height:46px;width:auto}
.badge.lg img{height:64px}

/* Hero */
.hero{position:relative;min-height:clamp(640px,92svh,860px);display:flex;align-items:center;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(55% 55% at 30% 52%,rgba(242,162,92,.18),transparent 70%),
    radial-gradient(90% 80% at 50% 0%,#4b2f1f 0%,transparent 60%),
    linear-gradient(180deg,#3a2417 0%,var(--hearth) 100%)}
/* Film grain */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;
  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 baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;width:100%;padding-top:68px}

/* The stage: lamp glow, open book, and scene orbs placed by home.js */
.stage{position:relative;aspect-ratio:1/1;max-width:640px;width:100%;margin:0 auto;perspective:1400px}
.lamp{position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(255,186,110,.42),rgba(242,162,92,.08) 55%,transparent 72%);filter:blur(8px);animation:lamp 7s ease-in-out infinite}

.book{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1.5/1;transform:translate(-50%,-44%) rotateX(22deg) rotateZ(-5deg);transform-style:preserve-3d;z-index:5;
  opacity:0;transition:opacity .8s ease,transform 1.1s var(--spring)}
.book.in{opacity:1;transform:translate(-50%,-50%) rotateX(22deg) rotateZ(-5deg)}
.cover{position:absolute;inset:-3% -2.5% -5%;border-radius:10px;background:linear-gradient(160deg,#6b3d2a,#3b1f14);box-shadow:0 40px 70px -10px rgba(0,0,0,.65),0 10px 24px rgba(0,0,0,.4)}
.pages{position:absolute;inset:0;display:flex;box-shadow:0 1px 0 #e6d8c2,0 2px 0 #d9c9b0,0 3px 0 #e6d8c2,0 4px 0 #cdbb9f,0 5px 0 #e2d3bb}
.page{flex:1;position:relative;background:#f6eddd;color:#3a2618;padding:7% 7.5% 6%;font-size:clamp(7px,.84vw,11px);line-height:1.55;overflow:hidden}
.page.l{border-radius:6px 2px 2px 6px;background:linear-gradient(90deg,#f1e6d3 0%,#f6eddd 18%,#f6eddd 82%,#e3d4bc 100%)}
.page.r{border-radius:2px 6px 6px 2px;background:linear-gradient(90deg,#dccbb0 0%,#f3e9d8 9%,#f6eddd 30%,#f6eddd 100%)}
.page h3{font-size:1.2em;font-weight:500;font-style:italic;margin:0 0 .15em;text-align:center}
.page .ch{font-size:.8em;text-align:center;color:#8a6c55;margin:0 0 1.3em;letter-spacing:.06em}
.page p{margin:0 0 .6em;text-align:left;hyphens:auto}
.dropcap::first-letter{float:left;font-size:3.3em;line-height:.85;padding:.06em .08em 0 0;font-weight:600;color:#7a3a22}
.folio{position:absolute;bottom:4%;left:0;right:0;text-align:center;font-size:.75em;color:#9a7f68}
/* The narration highlight that steps from word to word */
.hl{position:absolute;border-radius:3px;background:rgba(242,162,92,.55);mix-blend-mode:multiply;transition:left .28s ease,top .28s ease,width .28s ease;pointer-events:none}

/* Scene orbs: .orb springs out of the book, .bob floats, .par follows the pointer, .lens holds the video */
.orb{position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);z-index:var(--z);
  transform:translate(0,0) scale(.2);opacity:0;transition:transform 1s var(--spring),opacity .5s ease}
.orb.in{transform:translate(var(--x),var(--y)) scale(1);opacity:var(--o)}
.bob{width:100%;height:100%;animation:bob var(--d) ease-in-out infinite;animation-delay:var(--dl)}
.par{width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.lens{width:100%;height:100%;border-radius:50%;overflow:hidden;position:relative;filter:blur(var(--b));
  box-shadow:0 0 0 1.5px rgba(244,234,219,.55),0 18px 40px -8px rgba(0,0,0,.6),0 0 44px -6px var(--glow)}
.lens video{width:100%;height:100%;object-fit:cover;background:center/cover no-repeat}
.lens::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.16),transparent 45%),radial-gradient(circle,transparent 58%,rgba(0,0,0,.35) 100%)}
.tag{position:absolute;left:50%;top:calc(100% + 10px);transform:translate(-50%,-4px);white-space:nowrap;font-size:.8rem;padding:4px 11px;border-radius:99px;background:rgba(27,17,11,.85);border:1px solid var(--rule);opacity:0;transition:.25s;pointer-events:none;font-family:var(--sans)}
.orb:hover .tag{opacity:1;transform:translate(-50%,0)}

/* Pitch copy fades in after the book settles (.ready on the hero) */
.pitch h1{font-size:clamp(2.6rem,4.6vw,4.1rem);font-weight:500;line-height:1.04;letter-spacing:-.025em;margin:0 0 22px;font-variation-settings:"opsz" 72;
  opacity:0;transform:translateY(14px);transition:opacity .9s ease .2s,transform .9s ease .2s}
.pitch p{font-size:1.2rem;line-height:1.55;color:var(--smoke);max-width:30ch;margin:0 0 32px;opacity:0;transition:opacity .9s ease .45s}
.pitch .act{display:flex;align-items:center;gap:18px;flex-wrap:wrap;opacity:0;transition:opacity .9s ease .65s}
.pitch .act .touch-only{display:none;color:var(--smoke);font-size:.95rem}
.pitch .free{font-size:.95rem;margin:18px 0 0;color:var(--smoke)}
@media (hover:none),(max-width:860px){.pitch .free{display:none}}
.ready .pitch h1{opacity:1;transform:none}.ready .pitch p,.ready .pitch .act{opacity:1}

/* Cover shelf: one endless rail, paused on hover */
.shelf{position:relative;padding:44px 0 60px;overflow:hidden}
.shelf p{text-align:center;color:var(--smoke);margin:0 0 26px;font-size:1rem}
.rail{display:flex;gap:22px;width:max-content;padding-top:10px;animation:rail 90s linear infinite}
.mask{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.shelf:hover .rail{animation-play-state:paused}
.rail img{width:104px;height:auto;aspect-ratio:2/3;border-radius:3px 6px 6px 3px;box-shadow:0 14px 24px -8px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .3s var(--spring)}
.rail img:hover{transform:translateY(-8px)}

/* Feature sections, each with looping device videos */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:96px 0;border-top:1px solid var(--rule)}
.feature.flip .copy{order:2}
.feature h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:500;letter-spacing:-.02em;line-height:1.1;margin:0 0 14px}
.feature p{color:var(--smoke);font-size:1.12rem;max-width:34ch;margin:0}
.screens{position:relative;display:flex;gap:22px;justify-content:center;align-items:flex-end;padding:28px 0 0;isolation:isolate}
.screens::before{content:"";position:absolute;inset:10% 6%;border-radius:50%;background:radial-gradient(circle,rgba(242,162,92,.14),transparent 70%);z-index:-1}
.dev{position:relative;background:#0e0b09;padding:7px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -20px rgba(0,0,0,.75)}
.dev video{width:100%;height:auto;object-fit:contain;background:#0e0b09 center/cover no-repeat}
.ipad{width:62%;border-radius:4%/3%}.ipad video{aspect-ratio:800/1160;border-radius:2%/1.5%}
.phone{width:28%;border-radius:16%/7.4%}.phone video{aspect-ratio:1320/2868;border-radius:13.7%/6.3%}
.phone.solo{width:40%}

/* Closing call to action and footer */
.cta{text-align:center;padding:120px 0;border-top:1px solid var(--rule)}
.cta > img{width:88px;height:88px;border-radius:22px;margin:0 auto 26px;box-shadow:0 20px 40px -12px rgba(0,0,0,.6)}
.cta h2{font-size:clamp(2rem,4vw,3rem);font-weight:500;letter-spacing:-.02em;margin:0 0 12px}
.cta p{color:var(--smoke);margin:0 0 30px}
footer{border-top:1px solid var(--rule);padding:26px 0 48px;color:var(--smoke);font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--smoke);margin-left:18px;text-underline-offset:3px}

/* QR for desktop visitors; hidden where the visitor is already on a phone or tablet */
.qr{display:flex;align-items:center;gap:14px}
.qr .code{position:relative;width:92px;height:92px;padding:8px;border-radius:14px;background:var(--parchment);box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.qr .code img{width:100%;height:100%}
.qr .code .mark{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:6px;box-shadow:0 0 0 3px var(--parchment)}
.qr span{font-size:.92rem;line-height:1.4;color:var(--smoke);max-width:13ch}
.cta .qr{justify-content:center;margin-top:28px}
.cta .qr .code{width:120px;height:120px;padding:10px}
.cta .qr .code .mark{width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:8px}
.cta .row{display:flex;justify-content:center;align-items:center;gap:36px;flex-wrap:wrap}
.cta .row .qr{margin:0}
@media (hover:none),(max-width:860px){.qr{display:none}}
@media (hover:none),(max-width:860px){.pitch .act .touch-only{display:inline}}

@keyframes bob{50%{transform:translateY(-12px)}}
@keyframes lamp{50%{opacity:.78;transform:scale(1.05)}}
@keyframes rail{to{transform:translateX(-50%)}}

@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;padding-top:84px;padding-bottom:40px;gap:8px}
  .stage{max-width:460px}
  .page{font-size:clamp(7px,1.9vw,11px)}
  .pitch p{margin-left:auto;margin-right:auto}
  .pitch .act{justify-content:center}
  .feature{grid-template-columns:1fr;gap:36px;padding:72px 0}.feature.flip .copy{order:0}
  .rail img{width:80px}
}
/* Reduced motion: everything lands in place at once; home.js also keeps every video still. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}