/* ===============================
   OTTO Matrix Shipping LLC - Under Construction
   Design System
   =============================== */
:root{
  /* Brand tokens */
  --otto-teal: #0D9488;
  --otto-red: #E11D48; /* vivid red accent */
  --otto-dark: #0f172a; /* slate-900 */
  --otto-mid: #334155;  /* slate-700 */
  --otto-light: #f8fafc; /* slate-50 */
  --radius-lg: 16px;
  --radius-sm: 8px;
  --shadow-1: 0 10px 25px rgba(0,0,0,.12);
  --shadow-2: 0 20px 45px rgba(0,0,0,.18);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--otto-dark);
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 40%);
}

/* Header */
.header{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  background:#ffffffcc;
  backdrop-filter:saturate(160%) blur(6px);
  border-bottom:1px solid #e2e8f0;
  z-index:50;
}
.header .brand{
  display:flex;align-items:center;gap:14px;
}
.header img.logo{height:44px;width:auto}
.badge{padding:6px 10px;border-radius:999px;font-weight:600;color:#fff;background:var(--otto-teal);box-shadow:var(--shadow-1)}

/* Hero */
.hero{
  position:relative;
  min-height:calc(100vh - 84px);
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  gap:24px;
  padding:40px 24px 24px;
}

.headline{
  font-size:clamp(28px, 4vw, 48px);
  line-height:1.1;
  font-weight:800;
  color:var(--otto-dark);
}
.headline .next{color:var(--otto-mid);font-weight:700}
.headline .big{color:var(--otto-teal)}
.headline .loading{color:var(--otto-dark)}
.headline .dot{display:inline-block;width:0.8em;text-align:left}
.headline .dot span{display:inline-block;width:0.23em;height:0.23em;margin:0 .08em;border-radius:50%;background:var(--otto-teal);opacity:.25}
.headline .dot span:nth-child(2){animation-delay:.2s}
.headline .dot span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.15}30%{opacity:1}}
.headline .dot span{animation: blink 1.2s linear infinite}

.subcopy{color:var(--otto-mid);font-size:clamp(14px,2vw,18px)}
.cta{margin-top:18px;display:flex;gap:12px}
.cta a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.cta a.primary{background:var(--otto-teal);color:#fff;box-shadow:var(--shadow-1)}
.cta a.secondary{color:var(--otto-teal);border:2px solid var(--otto-teal)}

/* Scene container */
.scene-wrap{
  position:relative;
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);
  padding:12px;
}
.scene{
  width:100%;
  height:min(58vh, 520px);
  border-radius:var(--radius-sm);
  background: linear-gradient(180deg, #e6fffb 0%, #fdfdfd 75%);
  overflow:hidden;
}

/* Footer */
.footer{
  border-top:1px solid #e5e7eb;
  padding:20px 24px;
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
}
.footer .contacts{color:var(--otto-mid)}
.footer a{color:var(--otto-teal);text-decoration:none;font-weight:600}
.footer .address{font-size:14px;color:#64748b}

/* SVG animation timeline */
@keyframes truck-in{0%{transform:translateX(-120%)}60%{transform:translateX(0)}100%{transform:translateX(0)}}
@keyframes wheel-rotate{to{transform:rotate(360deg)}}
@keyframes crane-lower{0%{transform:translateY(-40px)}40%{transform:translateY(60px)}100%{transform:translateY(60px)}}
@keyframes container-lift{
  0%{transform:translate(560px,170px)}
  40%{transform:translate(560px,40px)}
  70%{transform:translate(420px,40px)}
  100%{transform:translate(420px,100px)}
}
@keyframes clouds{
  from{transform:translateX(-10%)}
  to{transform:translateX(110%)}
}
@keyframes crane-swing{0%{transform:rotate(0deg)}50%{transform:rotate(-3deg)}100%{transform:rotate(0deg)}}

/* Apply animations to SVG groups */
svg .clouds{animation: clouds 40s linear infinite}
svg #truck{animation: truck-in 6s ease-in-out forwards}
svg #wheel1, svg #wheel2{transform-origin:center;animation: wheel-rotate 1.2s linear infinite}
svg #craneHook{animation: crane-lower 6s ease-in-out 2s forwards}
svg #container{animation: container-lift 9s ease-in-out 2.8s forwards}
svg #craneArm{transform-origin: 930px 110px; animation: crane-swing 5s ease-in-out 1.5s 2}

/* Replay control */
.replay{position:absolute;top:12px;right:12px;background:#ffffffcc;border:1px solid #e2e8f0;border-radius:12px;padding:8px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--otto-dark)}
.replay:hover{box-shadow:var(--shadow-1)}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .scene *{animation:none !important}
}