/* Node landing page (/) additions on top of start.css — the animated robot
 * rig (markup from partials/spraki_robot.ejs, rules verbatim from
 * home-node.css/dashboard.php) plus the hero logo layout that index.php
 * carried as an inline <style> block. */

/* Animated Spraki rig (verbatim from dashboard.php) */
.d-hero-robot{position:relative;display:inline-block;overflow:visible;width:105px;height:109px;flex-shrink:0}
.d-hero-robot img,.d-hero-robot .sp-bg,.d-hero-robot .sp-sh{position:absolute}
.d-hero-robot .sp-bg{width:98.3%;height:90.8%;left:.8%;top:6.5%;border-radius:50%;background:#f6ba39;border:3px solid rgba(255,255,255,.45);box-shadow:inset 0 -8px 20px rgba(0,0,0,.08)}
.d-hero-robot .sp-sh{bottom:-10px;left:50%;transform:translateX(-50%);width:70%;height:12px;background:radial-gradient(ellipse,rgba(0,0,0,.3) 0%,rgba(0,0,0,.12) 45%,transparent 75%);border-radius:50%;z-index:0}
.d-hero-robot img{object-fit:fill}
.d-hero-robot .sp-body{width:80.9%;height:89.7%;left:9.7%;top:8.7%;z-index:2;animation:dspB 5s ease-in-out infinite}
.d-hero-robot .sp-body-clean{width:86.2%;height:52.1%;left:7.1%;top:47.9%;z-index:2;animation:dspB 5s ease-in-out infinite}
.d-hero-robot .sp-body-arms{width:74.6%;height:38.3%;left:13.4%;top:60%;z-index:2;animation:dspB 5s ease-in-out infinite}
.d-hero-robot [data-expr]{filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));opacity:0;animation:dspH 5s ease-in-out infinite}
.d-hero-robot .sp-normal{width:92.4%;height:60.7%;left:4.7%;top:.8%;z-index:3}
.d-hero-robot .sp-blink{width:92.4%;height:60.7%;left:4.7%;top:.8%;z-index:6}
.d-hero-robot .sp-happy{width:93.5%;height:61.9%;left:4.1%;top:.8%;z-index:4}
.d-hero-robot .sp-bigeyed{width:93.8%;height:61%;left:4.1%;top:.8%;z-index:4}
.d-hero-robot .sp-confused{width:93.5%;height:60.7%;left:4.1%;top:.8%;z-index:4}
.d-hero-robot .sp-wink{width:93.8%;height:60.7%;left:4.1%;top:.8%;z-index:4}
.d-hero-robot .sp-right{width:93.5%;height:60.8%;left:4.1%;top:.9%;z-index:4}
.d-hero-robot .sp-left{width:93.5%;height:62.2%;left:4.4%;top:0;z-index:4}
.d-hero-robot .sp-top{width:93.5%;height:63.6%;left:4.1%;top:.8%;z-index:4}
.d-hero-robot .sp-down{width:94%;height:61.6%;left:4.1%;top:.9%;z-index:4}
.d-hero-robot .sp-tr{width:94.2%;height:61.1%;left:3.7%;top:1.1%;z-index:4}
.d-hero-robot .sp-tl{width:93.5%;height:61.7%;left:4.1%;top:.8%;z-index:4}
.d-hero-robot .sp-br{width:94.2%;height:61.9%;left:3.7%;top:.6%;z-index:4}
.d-hero-robot .sp-bl{width:93.8%;height:61.7%;left:4.1%;top:.8%;z-index:4}
.d-hero-robot .sp-center{width:93.2%;height:61.4%;left:4.4%;top:.8%;z-index:4}
/* Loading state: hide the rig behind a pulsing circle until the static pose
   (book body + normal head) has loaded; spraki_robot.ejs toggles the classes. */
.d-hero-robot .sp-static{width:98.3%;height:90.8%;left:.8%;top:6.5%;border-radius:50%;object-fit:cover!important;z-index:4;opacity:0;pointer-events:none;transition:opacity .35s ease}
.d-hero-robot.sp-loading .sp-static{opacity:1!important}
.d-hero-robot.sp-loading img:not(.sp-static),.d-hero-robot.sp-loading .sp-sh{opacity:0!important}
.d-hero-robot.sp-loading .sp-bg{animation:spBgPulse 1.4s ease-in-out infinite}
.d-hero-robot.sp-fadein img,.d-hero-robot.sp-fadein .sp-sh{transition:opacity .35s ease}
@keyframes spBgPulse{0%,100%{opacity:.45}50%{opacity:.85}}
@keyframes dspH{0%{transform:translate(0,0) rotate(0)}12%{transform:translate(2px,-3px) rotate(1.8deg)}28%{transform:translate(.5px,-5px) rotate(-1deg)}45%{transform:translate(-2px,-4px) rotate(-2.2deg)}62%{transform:translate(-.5px,-2.5px) rotate(.7deg)}78%{transform:translate(1.5px,-2px) rotate(1.5deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes dspB{0%{transform:translate(0,0) rotate(0)}15%{transform:translate(.5px,-1px) rotate(.2deg)}35%{transform:translate(-.5px,-2px) rotate(-.15deg)}55%{transform:translate(.3px,-1.5px) rotate(.1deg)}75%{transform:translate(-.3px,-.5px) rotate(-.2deg)}100%{transform:translate(0,0) rotate(0)}}

/* Hero logo layout — robot + text on one line, ~420px total (from index.php) */
.hero-logo-animated {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  width: 420px;
  max-width: 80vw;
  gap: 0;
  margin-left: auto;
  margin-right: auto;
}
.hero-logo-animated .d-hero-robot {
  margin-right: -18px;
}
/* Ground shadow under robot — ellipse below the character */
.hero-logo-animated .d-hero-robot .sp-sh {
  bottom: -18px;
  width: 70%;
  height: 18px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 45%, transparent 75%);
}
.hero-logo-text-img {
  flex: 1;
  height: auto;
  width: 100%;
}

@media (max-width: 768px) {
  .hero-underline-word svg {
    bottom: -3px;
    height: 8px;
  }
}
@media (max-width: 600px) {
  .hero-logo-animated {
    width: 260px;
  }
  .hero-logo-animated .d-hero-robot {
    width: 65px;
    height: 67px;
    margin-right: -12px;
  }
}
@media (max-width: 400px) {
  .hero-logo-animated {
    width: 210px;
  }
  .hero-logo-animated .d-hero-robot {
    width: 55px;
    height: 57px;
    margin-right: -10px;
  }
}

/* Parent-brand line under the Språki footer logo. The wordmark sits a step
 * below the Språki mark in weight and size — Tilvo is the maker, not the
 * product being sold on this page. .footer-brand p in start.css sets a small
 * muted body size; this overrides it for the logotype line only. */
.footer-parent-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  /* The Språki logo above and the app badges below are both ~240px wide, so
   * the wordmark is sized to sit in that same column rather than float in it. */
  width: 240px;
  max-width: 100%;
  margin: 0.25rem 0 1.5rem;
}
.footer-parent-lead {
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--color-text-light);
}
/* 7.6rem measures 238px in Familjen Grotesk 600 — the same width as the Språki
 * logo above and the badge row below, so the three stack as one column. The
 * clamp only bites on narrow viewports, where 240px is no longer available. */
.footer-parent-brand .tilvo-wordmark {
  display: block;
  font-size: clamp(4rem, 19vw, 7.6rem);
  line-height: 0.95;
  color: var(--color-text);
}
.footer-bottom .tilvo-wordmark {
  color: var(--color-text-secondary);
}
/* tilvo.no. The mark carries the colour, so the link is invisible until
 * hover — a wordmark that looks like a body link stops reading as a mark. */
.footer-parent-brand a,
.footer-bottom a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.footer-parent-brand a:hover,
.footer-bottom a:hover {
  opacity: 0.7;
}

/* start.css centres the whole brand column below 992px. The wordmark block is
 * a fixed-width flex box, so it has to centre itself and its contents to
 * follow — otherwise Tilvo sits off-axis from the logo and the badges. */
@media (max-width: 992px) {
  .footer-parent-brand {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
}