/* Shared solid geometry from tas1–tas4; scoped to the hero only. */
.hero-art {
  --tile-w:170px;
  --tile-h:238px;
  --tile-d:28px;
  --ivory-1:#fffef8;
  --ivory-2:#f4eedf;
  --ivory-3:#ddd2bb;
  --edge-1:#cabfa7;
  --edge-2:#f3ecdc;
  --edge-3:#bcae92;
  --black:#141414;
  --ring:#e9e1d1;
}
.model-position {
  position:absolute;
  width:170px;
  height:238px;
  transform-style:preserve-3d;
  transform-origin:top left;
  transform:rotateZ(var(--model-angle)) scale(var(--model-scale));
}
.model-position:nth-child(1) {left:12%;top:25%;--model-scale:.8;--model-angle:-18deg}
.model-position:nth-child(2) {left:66%;top:4%;--model-scale:.58;--model-angle:13deg}
.model-position:nth-child(3) {left:58%;top:48%;--model-scale:.88;--model-angle:12deg}
.model-position:nth-child(4) {left:15%;top:72%;--model-scale:.6;--model-angle:-8deg}
  .model-tile{
    position:relative;
    width:var(--tile-w);
    height:var(--tile-h);
    transform-style:preserve-3d;
    animation:var(--model-motion) var(--model-duration) ease-in-out var(--model-delay) infinite;
  }


  .model-face{
    position:absolute;
    inset:0;
    backface-visibility:hidden;
  }

  /*
    IMPORTANT:
    Outer geometry is intentionally SHARP.
    No rounded outer corners -> no dark crescent / gap
    between the front panel and the 3D side surfaces.
  */
  .model-front,
  .model-back{
    border-radius:2px;
    background:
      radial-gradient(circle at 28% 20%, rgba(255,255,255,.45), transparent 55%),
      linear-gradient(90deg, rgba(201,188,163,.26) 0%, rgba(255,255,255,0) 9%, rgba(255,255,255,0) 91%, rgba(189,173,146,.26) 100%),
      linear-gradient(145deg, rgba(255,255,255,.88), rgba(255,255,255,.13) 38%, rgba(154,135,99,.06) 100%),
      linear-gradient(160deg, var(--ivory-1), var(--ivory-2) 58%, var(--ivory-3));
    box-shadow:
      inset 2px 3px 6px rgba(255,255,255,.7),
      inset -2px -3px 7px rgba(105,89,57,.08),
      inset 0 0 0 1px rgba(86,72,46,.08);
  }

  .model-front{
    box-shadow:
      inset 2px 3px 6px rgba(255,255,255,.7),
      inset -2px -3px 7px rgba(105,89,57,.08),
      inset 0 0 0 1px rgba(86,72,46,.08),
      8px 14px 18px rgba(25,12,12,.22),
      16px 28px 38px rgba(25,12,12,.2);
    transform:translateZ(calc(var(--tile-d) / 2));
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  /* Softness stays INSIDE the surface only */
  .model-front::before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.3);
    box-shadow:
      inset 3px 0 8px rgba(176,159,130,.035),
      inset -3px 0 8px rgba(176,159,130,.035),
      inset 0 0 16px rgba(255,255,255,.19);
    pointer-events:none;
  }

  .model-front::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:0;
    background:
      linear-gradient(90deg, rgba(120,102,71,.08), transparent 8%, transparent 92%, rgba(120,102,71,.08)),
      linear-gradient(100deg, transparent 0 42%, rgba(255,255,255,.18) 52%, transparent 64%);
    opacity:.46;
    pointer-events:none;
  }

  .model-back{
    transform:rotateY(180deg) translateZ(calc(var(--tile-d) / 2));
    background:
      linear-gradient(145deg, rgba(255,255,255,.72), transparent 42%),
      linear-gradient(160deg, #f3eedf, #d7cdb8);
  }

  .model-marking{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    transform:translateY(-1px);
  }

  .model-number{
    color:var(--model-color);
    font-size:116px;
    line-height:.8;
    font-weight:800;
    letter-spacing:-9px;
    transform:translateX(-2px) scaleX(.93);
    -webkit-text-stroke:3px var(--black);
    paint-order:stroke fill;
    text-shadow:
      0 1px 0 rgba(255,255,255,.70),
      0 2px 2px rgba(120,0,0,.10);
  }

  .model-heart-ring{
    width:42px;
    height:42px;
    border-radius:50%;
    border:2px solid var(--ring);
    background:rgba(255,255,255,.22);
    display:grid;
    place-items:center;
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,.40),
      0 1px 2px rgba(70,55,30,.10);
  }

  .model-heart{
    color:var(--model-color);
    font-size:23px;
    line-height:1;
    transform:translateY(-1px);
    -webkit-text-stroke:1px var(--black);
    paint-order:stroke fill;
    text-shadow:0 1px 0 rgba(255,255,255,.35);
  }

  /*
    Full-size sides.
    0.6px overlap prevents anti-aliasing seams at the joins.
  */
  .model-side{
    position:absolute;
    background:
      linear-gradient(90deg, #d8cfbd, #eee7d8 48%, #cfc4af);
    box-shadow:inset 0 0 4px rgba(74,59,34,.05);
    border-radius:0;
  }

  .model-left,
  .model-right{
    width:calc(var(--tile-d) + 1px);
    height:calc(var(--tile-h) + 1px);
    top:-.5px;
    left:calc((var(--tile-w) - var(--tile-d)) / 2 - .5px);
  }

  .model-left{
    transform:rotateY(-90deg) translateZ(calc(var(--tile-w) / 2));
  }

  .model-right{
    transform:rotateY(90deg) translateZ(calc(var(--tile-w) / 2));
  }

  .model-top,
  .model-bottom{
    width:calc(var(--tile-w) + 1px);
    height:calc(var(--tile-d) + 1px);
    left:-.5px;
    top:calc((var(--tile-h) - var(--tile-d)) / 2 - .5px);
  }

  .model-top{
    transform:rotateX(90deg) translateZ(calc(var(--tile-h) / 2));
  }

  .model-bottom{
    transform:rotateX(-90deg) translateZ(calc(var(--tile-h) / 2));
  }

  .model-bevel{
    position:absolute;
    inset:0;
    border-radius:0;
    pointer-events:none;
    transform:translateZ(calc(var(--tile-d) / 2 + .35px));
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      inset 7px 7px 12px rgba(255,255,255,.08),
      inset -7px -7px 12px rgba(100,84,54,.05);
  }

  .model-shine{
    position:absolute;
    inset:0;
    border-radius:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateZ(calc(var(--tile-d)/2 + .45px));
  }

  .model-shine::after{
    content:"";
    position:absolute;
    width:72px;
    height:330px;
    top:-48px;
    left:-120px;
    transform:rotate(15deg);
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    filter:blur(1px);
    animation:model-shine var(--model-duration) ease-in-out var(--model-delay) infinite;
  }


@keyframes floatSpin {
  0%,100% {transform:translate3d(-12px,14px,-12px) rotateX(-12deg) rotateY(-24deg) rotateZ(-5deg)}
  50% {transform:translate3d(14px,-30px,35px) rotateX(8deg) rotateY(10deg) rotateZ(5deg)}
}

@keyframes depthFloat {
  0%,100% {transform:translate3d(10px,12px,-25px) rotateX(-10deg) rotateY(-18deg) rotateZ(5deg)}
  50% {transform:translate3d(-16px,-30px,65px) rotateX(10deg) rotateY(15deg) rotateZ(-6deg)}
}

@keyframes sideFloat {
  0%,100% {transform:translate3d(-22px,12px,-10px) rotateX(-8deg) rotateY(22deg) rotateZ(-6deg)}
  50% {transform:translate3d(24px,-28px,35px) rotateX(9deg) rotateY(-17deg) rotateZ(6deg)}
}

@keyframes arcSwing {
  0%,100% {transform:translate3d(-18px,12px,-15px) rotateX(-9deg) rotateY(18deg) rotateZ(-6deg)}
  50% {transform:translate3d(20px,-26px,38px) rotateX(8deg) rotateY(-15deg) rotateZ(6deg)}
}

/* Compositor-only highlight sweep replaces the demos' animated left property. */
@keyframes model-shine {
  0%,24% {transform:translateX(0) rotate(15deg);opacity:0}
  38% {opacity:.25}
  54%,100% {transform:translateX(350px) rotate(15deg);opacity:0}
}
.is-paused .model-tile,.is-paused .model-shine::after {animation-play-state:paused}
@media(max-width:1100px) {
  .model-position:nth-child(1) {--model-scale:.65}
  .model-position:nth-child(2) {left:65%;--model-scale:.44}
  .model-position:nth-child(3) {left:51%;--model-scale:.7}
  .model-position:nth-child(4) {--model-scale:.48}
}
@media(max-width:700px) {
  .site-header {gap:0;padding-block:8px 0}
  .site-header .brand {align-self:flex-start}
  .site-header nav {
    width:calc(100% + 40px);
    margin-inline:-20px;
    flex-shrink:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    padding:10px 0 0;
    border:0;
    border-top:1px solid var(--ink);
    border-radius:0;
    background:transparent;
  }
  .site-header nav a,.site-header nav>a:not(.nav-contact) {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    min-height:54px;
    padding:10px 4px;
    border:0;
    border-radius:0;
    background:var(--ink);
    color:var(--cream);
    font-size:11px;
  }
  .site-header nav a:hover,.site-header nav a:focus-visible {
    background:#292929;
    text-decoration:none;
  }
  .site-header nav a + a,.site-header nav>a:not(.nav-contact) + a:not(.nav-contact) {border-left:1px solid #ffffff70}
  .site-header nav a:focus-visible {outline-offset:-4px}
  .site-header nav .icon {display:block;width:16px;height:16px}
  .site-header .nav-contact .icon {order:-1}
  .model-position:nth-child(1) {left:12%;top:15%;--model-scale:.43}
  .model-position:nth-child(2) {left:72%;top:5%;--model-scale:.31}
  .model-position:nth-child(3) {left:54%;top:48%;--model-scale:.48}
  .model-position:nth-child(4) {left:18%;top:66%;--model-scale:.34}
  .model-shine {display:none}
  .model-tile {animation-duration:calc(var(--model-duration) * 1.12)}
}
@media(prefers-reduced-motion:reduce) {
  .model-tile,.model-shine::after {animation:none!important}
  .model-tile {transform:rotateX(-7deg) rotateY(-15deg)}
}


/* Shared transparent artwork for mobile and desktop. */
.hero-art-backdrop {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-art-backdrop img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
}
.hero-art .tiles-viewport {
  z-index:1;
}

@media(min-width:701px) {
  .hero-art-backdrop {
    inset:-20px -25px;
  }
}