/* cadenzaarthouse.studio home (owner brief 2026-10-25): walking into the studio. One scene
   per product, one line and one door each; the motion says what a thing is before the words
   do. Loaded after style.css and only by the homepage, so the masthead, the 404 page and the
   classifieds pages keep the shared rules untouched.

   Reading comes first (his eyesight): every line of real text is high contrast, large, and
   never sits over anything that moves. Art lives in its own column. Without JavaScript, or
   under prefers-reduced-motion, the page is the same scenes, still, with nothing hidden. */

:root { --night:#0f0d0b; --night-2:#1a1612; --cream:#f4efe6; --bronze-lt:#d9b27a;
        --bronze-dk:#6e5127; --paper-2:#efe8dc; }

.home-page { background:var(--night); }
.home-page header.mast { background:var(--paper); }
main.home { display:block; }
/* in-page jumps land below the sticky masthead, which wraps to two rows on a phone */
main.home [id] { scroll-margin-top:84px; }
@media (max-width:700px) { main.home [id] { scroll-margin-top:116px; } }
main.home section { border-top:0; padding:0; }
main.home h2 { text-transform:none; letter-spacing:-.01em; font-size:clamp(40px, 8vw, 76px);
               line-height:1.02; margin:0 0 14px; font-weight:850; }
main.home p { font-size:clamp(19px, 2.4vw, 23px); line-height:1.5; }
main.home .kicker { font-size:15px; letter-spacing:.16em; margin:0 0 12px; }

/* ---- the opening ---- */
.opening { position:relative; overflow:hidden; color:var(--cream);
           background:radial-gradient(1100px 600px at 78% 40%, #3a2a17 0%, rgba(58,42,23,0) 70%),
                      radial-gradient(900px 500px at 10% 100%, #24190e 0%, rgba(36,25,14,0) 70%), var(--night); }
.opening-grid { display:grid; grid-template-columns:1fr; gap:24px; align-items:center;
                min-height:calc(100svh - 70px); padding-top:48px; padding-bottom:64px; }
@media (min-width:860px) { .opening-grid { grid-template-columns:1.1fr .9fr; } }
.opening .kicker { color:var(--bronze-lt); }
.opening h1 { font-size:clamp(46px, 9.5vw, 104px); line-height:.98; letter-spacing:-.025em;
              margin:0 0 18px; max-width:12ch; color:#fff; }
.opening .lede { color:var(--cream); margin-bottom:28px; }
.opening-mark { display:flex; justify-content:center; order:-1; }
@media (min-width:860px) { .opening-mark { order:0; } }
.big-mark { display:block; width:min(52vw, 400px); aspect-ratio:1; background-color:var(--bronze-lt);
            -webkit-mask:url(assets/logo.png) center/contain no-repeat;
                    mask:url(assets/logo.png) center/contain no-repeat;
            opacity:.9; transform:translateY(var(--drift, 0)) rotate(var(--turn, 0));
            will-change:transform; }
@media (max-width:859px) { .big-mark { width:min(46vw, 220px); } }

/* doors on dark and light grounds */
main.home a.door { font-size:19px; padding:14px 26px; border-radius:12px; display:inline-block; }
.dark a.door, .opening a.door { border-color:var(--bronze-lt); color:#fff; background:rgba(217,178,122,.12); }
.dark a.door:hover, .dark a.door:focus, .opening a.door:hover, .opening a.door:focus { background:var(--bronze-lt); color:#111; }
.light a.door, .strip a.door { border-color:var(--bronze-dk); color:var(--bronze-dk); }
.light a.door:hover, .light a.door:focus, .strip a.door:hover, .strip a.door:focus { background:var(--bronze-dk); color:#fff; }

/* ---- scenes ---- */
.scene { position:relative; overflow:hidden; }
.scene.dark { background:var(--night); color:var(--cream); }
.scene.dark + .scene.dark { background:var(--night-2); }
.scene.light { background:var(--paper); color:var(--ink); }
.scene.dark .kicker { color:var(--bronze-lt); }
.scene.light .kicker { color:var(--bronze-dk); }
.scene-grid { display:grid; grid-template-columns:1fr; gap:28px; align-items:center;
              min-height:86svh; padding-top:72px; padding-bottom:72px; }
@media (min-width:860px) { .scene-grid { grid-template-columns:1fr 1fr; gap:56px; }
                           .scene-grid.flip .art { order:2; } }
.art { position:relative; min-height:300px; display:flex; align-items:center; justify-content:center; }
@media (min-width:860px) { .art { min-height:440px; } }

/* Flutie Cats: Randy darts in, notes trail him */
.randy { width:auto; height:min(62svh, 440px); max-height:440px; filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)); }
@media (max-width:859px) { .randy { height:300px; } }
.note { position:absolute; font-size:44px; color:var(--bronze-lt); opacity:.85; }
.n1 { left:12%; top:18%; } .n2 { right:14%; top:30%; } .n3 { left:22%; bottom:14%; }

/* Universe B: the cover, and a pixel Randy walking the bottom edge */
.glitch { position:relative; border-radius:14px; overflow:hidden; box-shadow:0 0 0 2px #2e2a40, 0 30px 60px rgba(0,0,0,.5); }
.glitch img { width:100%; height:auto; }
.walker { position:absolute; bottom:-8px; left:6%; width:48px; height:72px; image-rendering:pixelated;
          background:url(assets/home/randy-biped.png) 0 -216px / 192px 288px no-repeat; }

/* the campaign: coins land in the jar */
.scene-campaign .art { min-height:320px; }
.jar { width:170px; height:190px; border:6px solid var(--bronze-dk); border-top-width:0; border-radius:0 0 40px 40px;
       position:relative; background:linear-gradient(180deg, rgba(110,81,39,0) 40%, rgba(110,81,39,.14) 100%); }
.coin { position:absolute; width:48px; height:48px; image-rendering:pixelated; }
.c1 { left:calc(50% - 60px); bottom:calc(50% - 72px); } .c2 { left:calc(50% - 10px); bottom:calc(50% - 80px); }
.c3 { left:calc(50% + 32px); bottom:calc(50% - 70px); } .c4 { left:calc(50% - 38px); bottom:calc(50% - 34px); }
.c5 { left:calc(50% + 8px); bottom:calc(50% - 40px); }

/* Model Auctions: a flash, then the name in light */
.type-art { font-weight:900; font-size:clamp(54px, 10vw, 120px); line-height:.9; letter-spacing:-.02em;
            color:transparent; -webkit-text-stroke:2px var(--bronze-lt); text-align:left; }
.flash { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, #fff 0%, rgba(255,255,255,0) 60%); opacity:0; pointer-events:none; }

/* classes and workshops: a staff draws itself, notes settle on it */
.staff { display:flex; flex-direction:column; gap:22px; width:min(100%, 420px); }
.staff i { display:block; height:3px; background:var(--ink); border-radius:2px; }
.dot { position:absolute; width:26px; height:20px; border-radius:50%; background:var(--bronze-dk); transform:rotate(-20deg); }
.d1 { left:calc(50% - 150px); top:calc(50% + 10px); } .d2 { left:calc(50% - 60px); top:calc(50% - 15px); }
.d3 { left:calc(50% + 30px); top:calc(50% - 40px); } .d4 { left:calc(50% + 120px); top:calc(50% - 15px); }

/* news: three pages land on the desk */
.sheet { position:absolute; width:min(70%, 300px); aspect-ratio:3/4; background:var(--paper); border-radius:6px;
         box-shadow:0 20px 40px rgba(0,0,0,.45); padding:26px 22px; display:flex; flex-direction:column; gap:14px; }
.sheet i { display:block; height:10px; background:#cfc6b8; border-radius:3px; }
.sheet i:first-child { height:22px; background:var(--ink); width:80%; }
.s1 { transform:rotate(-8deg) translate(-40px, 10px); } .s2 { transform:rotate(4deg) translate(30px, -10px); }
.s3 { transform:rotate(-1deg); }

/* ---- the foot strip: small, never buried ---- */
.strip { background:var(--paper-2); color:var(--ink); border-top:4px solid var(--bronze-dk); }
.strip-grid { display:grid; grid-template-columns:1fr; gap:34px; padding-top:56px; padding-bottom:56px; }
@media (min-width:860px) { .strip-grid { grid-template-columns:1.2fr .9fr 1.1fr; gap:40px; } }
main.home .strip h2 { font-size:clamp(28px, 4vw, 38px); }
.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li { border:2px solid var(--ink); border-radius:999px; padding:8px 14px; font-weight:700; font-size:17px; }
.chips b { color:var(--bronze-dk); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-left:6px; }
.strip .careers { background:var(--night); color:var(--cream); border-radius:16px; padding:26px 24px; }
.strip .careers a.door { border-color:var(--bronze-lt); color:#fff; }
.strip .careers a.door:hover, .strip .careers a.door:focus { background:var(--bronze-lt); color:#111; }

.home-page footer { background:var(--paper); }

/* ---- motion: only when home.js ran (html.js), never under reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .scene .art > * { opacity:0; }
  .js .scene.in .art > * { opacity:1; }

  .js .scene-flutie.in .randy { animation:dart .7s cubic-bezier(.2,.9,.2,1.15) both; }
  .js .scene-flutie.in .note { animation:pop .5s ease-out both; }
  .js .scene-flutie.in .n1 { animation-delay:.35s; } .js .scene-flutie.in .n2 { animation-delay:.45s; } .js .scene-flutie.in .n3 { animation-delay:.55s; }
  @keyframes dart { 0% { transform:translateX(-120vw) rotate(-14deg); } 70% { transform:translateX(6%) rotate(4deg); } 100% { transform:none; } }
  @keyframes pop { 0% { transform:translateY(20px) scale(.4); opacity:0; } 100% { transform:none; opacity:.85; } }

  .js .scene-ub.in .glitch { animation:glitch .8s steps(1, end) both; }
  @keyframes glitch {
    0%   { clip-path:inset(0 0 100% 0); filter:hue-rotate(0deg); transform:translateX(0); }
    12%  { clip-path:inset(10% 0 60% 0); filter:hue-rotate(90deg) saturate(3); transform:translateX(-14px); }
    24%  { clip-path:inset(50% 0 20% 0); filter:hue-rotate(200deg) saturate(2); transform:translateX(18px); }
    36%  { clip-path:inset(0 0 40% 0); filter:none; transform:translateX(-6px); }
    48%  { clip-path:inset(30% 0 0 0); filter:hue-rotate(300deg) contrast(1.6); transform:translateX(10px); }
    60%  { clip-path:inset(0 0 0 0); filter:sepia(1); transform:none; }
    72%  { clip-path:inset(0 0 0 0); filter:hue-rotate(160deg) brightness(1.3); transform:translateX(-4px); }
    84%, 100% { clip-path:inset(0 0 0 0); filter:none; transform:none; } }
  .js .scene-ub.in .walker { animation:walk-across 4s linear .8s both, walk-frames .4s steps(2) .8s 10; }
  @keyframes walk-across { from { left:-8%; } to { left:92%; } }
  @keyframes walk-frames { from { background-position:-48px -216px; } to { background-position:-144px -216px; } }

  .js .scene-campaign.in .jar { animation:pop .4s ease-out both; }
  .js .scene-campaign.in .coin { animation:drop .55s cubic-bezier(.3,1.4,.6,1) both; }
  .js .scene-campaign.in .c2 { animation-delay:.08s; } .js .scene-campaign.in .c3 { animation-delay:.16s; }
  .js .scene-campaign.in .c4 { animation-delay:.24s; } .js .scene-campaign.in .c5 { animation-delay:.32s; }
  @keyframes drop { 0% { transform:translateY(-70vh) rotate(-180deg); opacity:1; } 100% { transform:none; opacity:1; } }

  .js .scene-ma.in .flash { animation:flash .5s ease-out both; }
  .js .scene-ma.in .type-art { animation:slide-in .7s cubic-bezier(.2,.9,.2,1) .1s both; }
  @keyframes flash { 0% { opacity:.95; } 100% { opacity:0; } }
  @keyframes slide-in { 0% { transform:translateX(30vw); letter-spacing:.3em; opacity:0; } 100% { transform:none; opacity:1; } }

  .js .scene-classes.in .staff i { animation:draw .6s ease-out both; transform-origin:left center; }
  .js .scene-classes.in .staff i:nth-child(2) { animation-delay:.06s; } .js .scene-classes.in .staff i:nth-child(3) { animation-delay:.12s; }
  .js .scene-classes.in .staff i:nth-child(4) { animation-delay:.18s; } .js .scene-classes.in .staff i:nth-child(5) { animation-delay:.24s; }
  .js .scene-classes.in .dot { animation:pop .4s ease-out both; }
  .js .scene-classes.in .d1 { animation-delay:.45s; } .js .scene-classes.in .d2 { animation-delay:.55s; }
  .js .scene-classes.in .d3 { animation-delay:.65s; } .js .scene-classes.in .d4 { animation-delay:.75s; }
  @keyframes draw { 0% { transform:scaleX(0); } 100% { transform:scaleX(1); } }

  .js .scene-news.in .sheet { animation:land .6s cubic-bezier(.2,.9,.3,1.1) both; }
  .js .scene-news.in .s2 { animation-delay:.12s; } .js .scene-news.in .s3 { animation-delay:.24s; }
  @keyframes land { 0% { transform:translateY(-60vh) rotate(25deg); opacity:0; } 100% { opacity:1; } }

  /* the words never animate: they are on the page from the first paint, readable always */
}